kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-01-12 22:51:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

[add] View/Text prop nativeID

Browse Source 
Maps the View and Text prop 'nativeID' to DOM 'id' as these are
equivalent.  Enables declarative use of various 'aria-*' properties that
require ID references.

Ref #1116
Close #1130
This commit is contained in:
Nicolas Gallagher
2018-10-10 14:43:35 -07:00
parent a54bdeec09
commit bfaeae904e
6 changed files with 27 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/react-native-web/src/exports/Text/TextPropTypes.js vendored
View File

@@ -21,6 +21,7 @@ const TextPropTypes = {
accessible: bool,
children: any,
importantForAccessibility: oneOf(['auto', 'no', 'no-hide-descendants', 'yes']),
nativeID: string,
numberOfLines: number,
onBlur: func,
onContextMenu: func,

2
packages/react-native-web/src/exports/View/ViewPropTypes.js vendored
View File

@@ -38,6 +38,7 @@ export type ViewProps = {
children?: any,
hitSlop?: EdgeInsetsProp,
importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants',
nativeID?: string,
onBlur?: Function,
onClick?: Function,
onClickCapture?: Function,
@@ -87,6 +88,7 @@ const ViewPropTypes = {
children: any,
hitSlop: EdgeInsetsPropType,
importantForAccessibility: oneOf(['auto', 'no', 'no-hide-descendants', 'yes']),
nativeID: string,
onBlur: func,
onClick: func,
onClickCapture: func,

6
packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js vendored
View File

@@ -183,6 +183,12 @@ describe('modules/createDOMProps', () => {
expect(props['aria-hidden']).toEqual(true);
});
test('prop "nativeID" becomes "id"', () => {
const nativeID = 'Example.nativeID';
const props = createProps({ nativeID });
expect(props.id).toEqual(nativeID);
});
test('prop "testID" becomes "data-testid"', () => {
const testID = 'Example.testID';
const props = createProps({ testID });

6
packages/react-native-web/src/modules/createDOMProps/index.js vendored
View File

@@ -77,6 +77,7 @@ const createDOMProps = (component, props, styleResolver) => {
accessibilityLabel,
accessibilityLiveRegion,
importantForAccessibility,
nativeID,
placeholderTextColor,
pointerEvents,
style: providedStyle,
@@ -164,10 +165,15 @@ const createDOMProps = (component, props, styleResolver) => {
}
// OTHER
// Native element ID
if (nativeID && nativeID.constructor === String) {
domProps.id = nativeID;
}
// Link security and automation test ids
if (component === 'a' && domProps.target === '_blank') {
domProps.rel = `${domProps.rel || ''} noopener noreferrer`;
}
// Automated test IDs
if (testID && testID.constructor === String) {
domProps['data-testid'] = testID;
}

6
packages/website/storybook/1-components/Text/TextScreen.js
View File

@@ -116,6 +116,12 @@ const TextScreen = () => (
]}
/>
<DocItem
name="nativeID"
typeInfo="?string"
description="Used to locate this view from any native DOM code, or to define accessibility relationships. This is rendered to the native 'id' DOM attribute"
/>
<DocItem
name="numberOfLines"
typeInfo="?number"

6
packages/website/storybook/1-components/View/ViewScreen.js
View File

@@ -119,6 +119,12 @@ const ViewScreen = () => (
]}
/>
<DocItem
name="nativeID"
typeInfo="?string"
description="Used to locate this view from any native DOM code, or to define accessibility relationships. This is rendered to the native 'id' DOM attribute"
/>
<DocItem name="onBlur" typeInfo="?function" />
<DocItem name="onContextMenu" typeInfo="?function" />
<DocItem name="onFocus" typeInfo="?function" />