mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-06-08 04:31:19 +00:00
[fix] createElement uses provided function component
If the component provided to 'createElement' is not a string alias for a
DOM component, it will no longer attempt to replace that component with
a DOM component inferred from the 'accessibility{Component,Role,Traits}'
prop.
Fix #895
This commit is contained in:
@@ -67,7 +67,7 @@ export default class AppRegistry {
|
|||||||
appParameters.initialProps || emptyObject,
|
appParameters.initialProps || emptyObject,
|
||||||
appParameters.rootTag,
|
appParameters.rootTag,
|
||||||
wrapperComponentProvider && wrapperComponentProvider(appParameters),
|
wrapperComponentProvider && wrapperComponentProvider(appParameters),
|
||||||
appParameters.callback,
|
appParameters.callback
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
return appKey;
|
return appKey;
|
||||||
|
|||||||
+15
-3
@@ -1,7 +1,8 @@
|
|||||||
/* eslint-env jasmine, jest */
|
/* eslint-env jasmine, jest */
|
||||||
|
|
||||||
import createElement from '..';
|
import createElement from '..';
|
||||||
import { shallow, render } from 'enzyme';
|
import React from 'react';
|
||||||
|
import { render, shallow } from 'enzyme';
|
||||||
|
|
||||||
describe('modules/createElement', () => {
|
describe('modules/createElement', () => {
|
||||||
test('it renders different DOM elements', () => {
|
test('it renders different DOM elements', () => {
|
||||||
@@ -23,9 +24,20 @@ describe('modules/createElement', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('when ARIA role is "button"', () => {
|
describe('prop "accessibilityRole"', () => {
|
||||||
|
test('and string component type', () => {
|
||||||
|
const component = shallow(createElement('span', { accessibilityRole: 'link' }));
|
||||||
|
expect(component.find('a').length).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('and function component type', () => {
|
||||||
|
const Custom = () => <div />;
|
||||||
|
const component = shallow(createElement(Custom, { accessibilityRole: 'link' }));
|
||||||
|
expect(component.find('div').length).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
[{ disabled: true }, { disabled: false }].forEach(({ disabled }) => {
|
[{ disabled: true }, { disabled: false }].forEach(({ disabled }) => {
|
||||||
describe(`and disabled is "${disabled}"`, () => {
|
describe(`value is "button" and disabled is "${disabled}"`, () => {
|
||||||
[{ name: 'Enter', which: 13 }, { name: 'Space', which: 32 }].forEach(({ name, which }) => {
|
[{ name: 'Enter', which: 13 }, { name: 'Space', which: 32 }].forEach(({ name, which }) => {
|
||||||
test(`"onClick" is ${disabled ? 'not ' : ''}called when "${name}" is pressed`, () => {
|
test(`"onClick" is ${disabled ? 'not ' : ''}called when "${name}" is pressed`, () => {
|
||||||
const onClick = jest.fn();
|
const onClick = jest.fn();
|
||||||
|
|||||||
@@ -83,7 +83,10 @@ const adjustProps = domProps => {
|
|||||||
|
|
||||||
const createElement = (component, props, ...children) => {
|
const createElement = (component, props, ...children) => {
|
||||||
// use equivalent platform elements where possible
|
// use equivalent platform elements where possible
|
||||||
const accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props);
|
let accessibilityComponent;
|
||||||
|
if (component && component.constructor === String) {
|
||||||
|
accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props);
|
||||||
|
}
|
||||||
const Component = accessibilityComponent || component;
|
const Component = accessibilityComponent || component;
|
||||||
const domProps = createDOMProps(Component, props);
|
const domProps = createDOMProps(Component, props);
|
||||||
adjustProps(domProps);
|
adjustProps(domProps);
|
||||||
|
|||||||
Reference in New Issue
Block a user