mirror of
https://github.com/status-im/react-native.git
synced 2025-01-13 02:54:42 +00:00
50e400128e
Summary:
Previously, I created two props, `accessibilityRole` and `accessibilityStates` for view. These props were intended to be a cross-platform solution to replace `accessibilityComponentType` on Android and `accessibilityTraits` on iOS.
In this stack, I ran a code mod to replace instances of the two old properties used in our codebase with the new ones.
For this diff, I wrote a script that focuses on replacing instances of the two properties that only added a single role to `accessibilityTraits` and `accessibilityComponentType`. In summary, this script:
* replaces instances of `accessibilityTraits = "<iOStrait>"` with `accessibilityRole = "<iOStrait>"`
* replaces instances of `accessibilityTraits = {['<iOStrait>']}` with `accessibilityRole = "<iOStrait>"`
* replaces instances of `accessibilityTraits = {"<iOStrait>"}` with `accessibilityRole = "<iOStrait>"`
* removes instances of `accessibilityComponentType`
```
The following is the codeshift script I wrote:
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* format
*/
'use strict';
export default function transformer(file, api) {
const j = api.jscodeshift;
const root = j(file.source);
let hasChanges = false;
const elements = root.find(j.JSXElement);
let values;
let valuess;
let valuesss;
elements.forEach(path => {
const openEl = path.node.openingElement;
hasChanges = true;
for (let i = 0; i < openEl.attributes.length; i++) {
if (openEl.attributes[i].name.name === 'accessibilityComponentType') {
openEl.attributes.splice(i, 1);
}
if (openEl.attributes[i].name.name === 'accessibilityTraits') {
if (openEl.attributes[i].value.expression) {
if (openEl.attributes[i].value.expression.type === 'Literal') {
values = openEl.attributes[i].value.expression.value;
openEl.attributes[i] = j.jsxAttribute(
j.jsxIdentifier('accessibilityRole'),
j.literal(values),
);
}
}
if (openEl.attributes[i].value) {
if (
openEl.attributes[i].value &&
openEl.attributes[i].value.type === 'Literal'
) {
valuess = openEl.attributes[i].value.value;
openEl.attributes[i] = j.jsxAttribute(
j.jsxIdentifier('accessibilityRole'),
j.literal(valuess),
);
}
}
if (openEl.attributes[i].value.expression) {
if (
openEl.attributes[i].value.expression.type === 'ArrayExpression' &&
openEl.attributes[i].value.expression.elements.length === 1
) {
valuesss = openEl.attributes[i].value.expression.elements[0].value;
openEl.attributes[i] = j.jsxAttribute(
j.jsxIdentifier('accessibilityRole'),
j.literal(valuesss),
);
}
}
}
}
});
if (hasChanges) {
return root.toSource();
} else {
return null;
}
}
```
I then used this command to run the codemod:
```
./scripts/js1/node_modules/.bin/jscodeshift -c 10 --parser=flow --transform ./scripts/js1/commands/codeshift/add-accessibilityRoles/index.js /data/sandcastle/boxes/instance-ide/xplat/js/RKJSModules/Apps
hg status -n | xargs /data/sandcastle/boxes/instance-ide/tools/third-party/prettier/node_modules/.bin/prettier --single-quote --no-bracket-spacing --jsx-bracket-same-line --trailing-comma all --parser flow --write --require-pragma --no-config
hg status -n | xargs ./scripts/eslint/eslint --plugin lint --no-eslintrc --parser babel-eslint --rule "lint/sort-requires: 1" --fix
js1 build buckfiles
```
Lastly, I had to add a few manual fixes:
* Checked that instances of `accessibilityComponentType` that were deleted were indeed replaced with `accessibilityRole`
* Added props `accessibilityRole` and `accessibilityStates` to `TouchableWithoutFeedBack` components and `TextProps` because they don't inherit properties directly from view.
Reviewed By: PeteTheHeat
Differential Revision: D8937323
fbshipit-source-id: 85bf4d596e8e7c7ace75ab0b0e68599043760840
66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import type {AccessibilityRole} from 'ViewAccessibility';
|
|
import type {AccessibilityState} from 'ViewAccessibility';
|
|
import type {AccessibilityTrait} from 'ViewAccessibility';
|
|
|
|
import type {Node} from 'react';
|
|
|
|
import type {LayoutEvent, PressEvent} from 'CoreEventTypes';
|
|
import type {DangerouslyImpreciseStyleProp} from 'StyleSheet';
|
|
|
|
export type PressRetentionOffset = $ReadOnly<{|
|
|
top: number,
|
|
left: number,
|
|
bottom: number,
|
|
right: number,
|
|
|}>;
|
|
|
|
/**
|
|
* @see https://facebook.github.io/react-native/docs/text.html#reference
|
|
*/
|
|
export type TextProps = $ReadOnly<{
|
|
accessible?: ?boolean,
|
|
accessibilityRole?: AccessibilityRole,
|
|
accessibilityStates?: Array<AccessibilityState>,
|
|
accessibilityTraits?: AccessibilityTrait | Array<AccessibilityTrait>,
|
|
allowFontScaling?: ?boolean,
|
|
children?: Node,
|
|
ellipsizeMode?: 'clip' | 'head' | 'middle' | 'tail',
|
|
nativeID?: string,
|
|
numberOfLines?: ?number,
|
|
onLayout?: ?(event: LayoutEvent) => mixed,
|
|
onLongPress?: ?(event: PressEvent) => mixed,
|
|
onPress?: ?(event: PressEvent) => mixed,
|
|
onResponderGrant?: ?Function,
|
|
onResponderMove?: ?Function,
|
|
onResponderRelease?: ?Function,
|
|
onResponderTerminate?: ?Function,
|
|
onResponderTerminationRequest?: ?Function,
|
|
onStartShouldSetResponder?: ?Function,
|
|
pressRetentionOffset?: ?PressRetentionOffset,
|
|
selectable?: ?boolean,
|
|
style?: ?DangerouslyImpreciseStyleProp,
|
|
testID?: string,
|
|
|
|
// Android Only
|
|
disabled?: ?boolean,
|
|
selectionColor?: ?string,
|
|
textBreakStrategy?: 'balanced' | 'highQuality' | 'simple',
|
|
|
|
// iOS Only
|
|
adjustsFontSizeToFit?: ?boolean,
|
|
minimumFontScale?: ?number,
|
|
suppressHighlighting?: ?boolean,
|
|
}>;
|