From 2cd2bef1fde859dface9d9231b9d61fdeee41681 Mon Sep 17 00:00:00 2001 From: caihuanyu Date: Fri, 15 Nov 2019 18:38:37 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=8E=9F=E7=94=9F?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=A9=BC=E5=B3=B0=E9=A3=8E=E6=A0=BC=EF=BC=8C?= =?UTF-8?q?React=E9=A3=8E=E6=A0=BC=E5=87=BD=E6=95=B0=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E8=BD=AC=E6=8D=A2=E9=94=99=E8=AF=AF=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix #357 --- packages/remax/src/Container.ts | 4 +- packages/remax/src/VNode.ts | 6 +- .../alipay/__snapshots__/index.test.tsx.snap | 47 ++- .../remax/src/__tests__/alipay/index.test.tsx | 252 +++++++------ .../remax/src/__tests__/propsAlias.test.ts | 33 +- .../wechat/__snapshots__/index.test.tsx.snap | 339 ++++++++++++++++++ .../remax/src/__tests__/wechat/index.test.tsx | 165 +++++++++ .../src/adapters/alipay/components/factory.ts | 7 + .../adapters/toutiao/components/factory.ts | 7 + .../src/adapters/wechat/components/Input.tsx | 3 + .../src/adapters/wechat/components/Swiper.tsx | 3 + .../adapters/wechat/components/Textarea.tsx | 3 + .../src/adapters/wechat/components/Video.tsx | 3 + .../src/adapters/wechat/components/factory.ts | 11 + packages/remax/src/propsAlias.ts | 21 ++ 15 files changed, 776 insertions(+), 128 deletions(-) create mode 100644 packages/remax/src/__tests__/wechat/__snapshots__/index.test.tsx.snap create mode 100644 packages/remax/src/__tests__/wechat/index.test.tsx diff --git a/packages/remax/src/Container.ts b/packages/remax/src/Container.ts index c3ab81c63..ff6652a6d 100644 --- a/packages/remax/src/Container.ts +++ b/packages/remax/src/Container.ts @@ -3,7 +3,7 @@ import { generate } from './instanceId'; import { generate as generateActionId } from './actionId'; import { FiberRoot } from 'react-reconciler'; import Platform from './Platform'; -import propsAlias from './propsAlias'; +import propsAlias, { isHostComponent } from './propsAlias'; function stringPath(path: Path) { return path.join('.'); @@ -12,7 +12,7 @@ function stringPath(path: Path) { function transformRawNode(item: RawNode): RawNode { return { ...item, - props: propsAlias(item.props), + props: propsAlias(item.props, !isHostComponent(item.type)), children: item.children ? item.children.map(transformRawNode) : item.children, diff --git a/packages/remax/src/VNode.ts b/packages/remax/src/VNode.ts index 9ca84aa0a..1e1d96bc5 100644 --- a/packages/remax/src/VNode.ts +++ b/packages/remax/src/VNode.ts @@ -3,7 +3,7 @@ import Container from './Container'; export interface RawNode { id?: number; - type: string | symbol; + type: string; props?: any; children?: RawNode[]; text?: string; @@ -16,7 +16,7 @@ export default class VNode { container: Container; children: VNode[]; mounted = false; - type: string | symbol; + type: string; props?: any; parent: VNode | null = null; text?: string; @@ -28,7 +28,7 @@ export default class VNode { container, }: { id: number; - type: string | symbol; + type: string; props?: any; container: any; }) { diff --git a/packages/remax/src/__tests__/alipay/__snapshots__/index.test.tsx.snap b/packages/remax/src/__tests__/alipay/__snapshots__/index.test.tsx.snap index bfa00b40a..6dbcbbd30 100644 --- a/packages/remax/src/__tests__/alipay/__snapshots__/index.test.tsx.snap +++ b/packages/remax/src/__tests__/alipay/__snapshots__/index.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`remax render insert new element 1`] = ` +exports[`alipay remax render insert new element 1`] = ` Object { "children": Array [ Object { @@ -43,7 +43,7 @@ Object { } `; -exports[`remax render insert new element 2`] = ` +exports[`alipay remax render insert new element 2`] = ` Object { "children": Array [ Object { @@ -98,7 +98,7 @@ Object { } `; -exports[`remax render render correctly 1`] = ` +exports[`alipay remax render render correctly 1`] = ` Object { "children": Array [ Object { @@ -123,7 +123,34 @@ Object { } `; -exports[`remax render renders conditional fragment correctly 1`] = ` +exports[`alipay remax render render native component correctly 1`] = ` +Array [ + Object { + "id": 0, + "payload": Array [ + Object { + "deleteCount": 0, + "item": Object { + "children": Array [], + "id": 1, + "props": Object { + "class": "class", + "fooBar": "fooBar", + "onClick": "$$REMAX_METHOD_1_onClick", + }, + "text": undefined, + "type": "native-component", + }, + "path": "root.children", + "start": 0, + }, + ], + "type": "splice", + }, +] +`; + +exports[`alipay remax render renders conditional fragment correctly 1`] = ` Object { "children": Array [ Object { @@ -158,7 +185,7 @@ Object { } `; -exports[`remax render renders conditional fragment correctly 2`] = ` +exports[`alipay remax render renders conditional fragment correctly 2`] = ` Object { "children": Array [ Object { @@ -181,7 +208,7 @@ Object { } `; -exports[`remax render renders empty style 1`] = ` +exports[`alipay remax render renders empty style 1`] = ` Object { "children": Array [ Object { @@ -206,7 +233,7 @@ Object { } `; -exports[`remax render renders style 1`] = ` +exports[`alipay remax render renders style 1`] = ` Object { "children": Array [ Object { @@ -234,7 +261,7 @@ Object { } `; -exports[`remax render renders vendor prefix style 1`] = ` +exports[`alipay remax render renders vendor prefix style 1`] = ` Object { "children": Array [ Object { @@ -262,7 +289,7 @@ Object { } `; -exports[`remax render umount component 1`] = ` +exports[`alipay remax render umount component 1`] = ` Object { "children": Array [ Object { @@ -293,7 +320,7 @@ Object { } `; -exports[`remax render umount component 2`] = ` +exports[`alipay remax render umount component 2`] = ` Object { "children": Array [ Object { diff --git a/packages/remax/src/__tests__/alipay/index.test.tsx b/packages/remax/src/__tests__/alipay/index.test.tsx index e123d1066..23458df6e 100644 --- a/packages/remax/src/__tests__/alipay/index.test.tsx +++ b/packages/remax/src/__tests__/alipay/index.test.tsx @@ -12,126 +12,154 @@ const p = { $spliceData() {}, }; -describe('remax render', () => { - afterEach(() => { - resetActionId(); - resetInstanceId(); - }); - - it('render correctly', () => { - const Page = () => hello; - const container = new Container(p); - render(, container); - expect(container.root).toMatchSnapshot(); - }); - - it('insert new element', () => { - class Page extends React.Component { - state = { - list: [1, 3], - }; - - update() { - this.setState({ - list: [1, 2, 3], - }); - } +describe('alipay', () => { + describe('remax render', () => { + afterEach(() => { + resetActionId(); + resetInstanceId(); + }); + + it('render correctly', () => { + const Page = () => hello; + const container = new Container(p); + render(, container); + expect(container.root).toMatchSnapshot(); + }); + + it('insert new element', () => { + class Page extends React.Component { + state = { + list: [1, 3], + }; + + update() { + this.setState({ + list: [1, 2, 3], + }); + } - render() { - const { list } = this.state; - return ( - - {list.map(i => ( - {i} - ))} - - ); + render() { + const { list } = this.state; + return ( + + {list.map(i => ( + {i} + ))} + + ); + } } - } - - const container = new Container(p); - const page = React.createRef(); - render(, container); - expect(container.root).toMatchSnapshot(); - page.current.update(); - expect(container.root).toMatchSnapshot(); - }); - it('umount component', () => { - class Page extends React.Component { - state = { - show: true, - }; + const container = new Container(p); + const page = React.createRef(); + render(, container); + expect(container.root).toMatchSnapshot(); + page.current.update(); + expect(container.root).toMatchSnapshot(); + }); + + it('umount component', () => { + class Page extends React.Component { + state = { + show: true, + }; + + hide() { + this.setState({ show: false }); + } - hide() { - this.setState({ show: false }); + render() { + return {this.state.show && foo}; + } } + const container = new Container(p); + const page = React.createRef(); + render(, container); + expect(container.root).toMatchSnapshot(); + page.current.hide(); + expect(container.root).toMatchSnapshot(); + }); + + it('renders style', () => { + const Page = () => ( + hello + ); + const container = new Container(p); + render(, container); + expect(container.root).toMatchSnapshot(); + }); + + it('renders vendor prefix style', () => { + const Page = () => ( + hello + ); + const container = new Container(p); + render(, container); + expect(container.root).toMatchSnapshot(); + }); + + it('renders empty style', () => { + const Page = () => hello; + const container = new Container(p); + render(, container); + expect(container.root).toMatchSnapshot(); + }); + + it('renders conditional fragment correctly', () => { + class Page extends React.Component { + state = { + show: false, + }; + + show() { + this.setState({ show: true }); + } - render() { - return {this.state.show && foo}; + render() { + if (this.state.show) { + return foo; + } + + return ( + <> + one + two + + ); + } } - } - const container = new Container(p); - const page = React.createRef(); - render(, container); - expect(container.root).toMatchSnapshot(); - page.current.hide(); - expect(container.root).toMatchSnapshot(); - }); - - it('renders style', () => { - const Page = () => ( - hello - ); - const container = new Container(p); - render(, container); - expect(container.root).toMatchSnapshot(); - }); - - it('renders vendor prefix style', () => { - const Page = () => ( - hello - ); - const container = new Container(p); - render(, container); - expect(container.root).toMatchSnapshot(); - }); - - it('renders empty style', () => { - const Page = () => hello; - const container = new Container(p); - render(, container); - expect(container.root).toMatchSnapshot(); - }); - - it('renders conditional fragment correctly', () => { - class Page extends React.Component { - state = { - show: false, + const container = new Container(p); + const page = React.createRef(); + render(, container); + expect(container.root).toMatchSnapshot(); + page.current.show(); + expect(container.root).toMatchSnapshot(); + }); + + it('render native component correctly', () => { + const NativeComponent = ({ fooBar, onClick, className }: any) => + React.createElement('native-component', { + fooBar, + className, + onClick, + }); + const actions: any = []; + const p = { + setData: ({ action }: any) => actions.push(action), + $spliceData: ({ action }: any) => actions.push(action), }; - show() { - this.setState({ show: true }); - } - - render() { - if (this.state.show) { - return foo; - } - - return ( - <> - one - two - - ); - } - } - const container = new Container(p); - const page = React.createRef(); - render(, container); - expect(container.root).toMatchSnapshot(); - page.current.show(); - expect(container.root).toMatchSnapshot(); + const container = new Container(p); + render( + {}} + className="class" + />, + container + ); + + expect(actions).toMatchSnapshot(); + }); }); }); diff --git a/packages/remax/src/__tests__/propsAlias.test.ts b/packages/remax/src/__tests__/propsAlias.test.ts index 88bb747ea..f1e24afc9 100644 --- a/packages/remax/src/__tests__/propsAlias.test.ts +++ b/packages/remax/src/__tests__/propsAlias.test.ts @@ -1,4 +1,5 @@ -import propsAlias, { getAlias } from '../propsAlias'; +import propsAlias, { getAlias, isHostComponent } from '../propsAlias'; +import { TYPE_TEXT } from '../constants'; describe('propsAlias', () => { it('transform className prop correctly', () => { @@ -32,4 +33,34 @@ describe('propsAlias', () => { }) ).toMatchSnapshot(); }); + + describe('check host components', () => { + afterEach(() => { + process.env['REMAX_PLATFORM'] = undefined; + }); + + it('wechat', () => { + process.env['REMAX_PLATFORM'] = 'wechat'; + require('../adapters/wechat/components/Button'); + expect(isHostComponent(TYPE_TEXT)).toBeTruthy(); + expect(isHostComponent('button')).toBeTruthy(); + expect(isHostComponent('foo')).toBeFalsy(); + }); + + it('alipay', () => { + process.env['REMAX_PLATFORM'] = 'alipay'; + require('../adapters/alipay/components/Button'); + expect(isHostComponent(TYPE_TEXT)).toBeTruthy(); + expect(isHostComponent('button')).toBeTruthy(); + expect(isHostComponent('foo')).toBeFalsy(); + }); + + it('toutiao', () => { + process.env['REMAX_PLATFORM'] = 'toutiao'; + require('../adapters/toutiao/components/Button'); + expect(isHostComponent(TYPE_TEXT)).toBeTruthy(); + expect(isHostComponent('button')).toBeTruthy(); + expect(isHostComponent('foo')).toBeFalsy(); + }); + }); }); diff --git a/packages/remax/src/__tests__/wechat/__snapshots__/index.test.tsx.snap b/packages/remax/src/__tests__/wechat/__snapshots__/index.test.tsx.snap new file mode 100644 index 000000000..6fc24b25a --- /dev/null +++ b/packages/remax/src/__tests__/wechat/__snapshots__/index.test.tsx.snap @@ -0,0 +1,339 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`wechat remax render insert new element 1`] = ` +Object { + "children": Array [ + Object { + "children": Array [ + Object { + "children": Array [ + Object { + "text": "1", + "type": "plain-text", + }, + ], + "id": 2, + "props": Object {}, + "text": undefined, + "type": "view", + }, + Object { + "children": Array [ + Object { + "text": "3", + "type": "plain-text", + }, + ], + "id": 4, + "props": Object {}, + "text": undefined, + "type": "view", + }, + ], + "id": 5, + "props": Object {}, + "text": undefined, + "type": "view", + }, + ], + "id": 0, + "props": undefined, + "text": undefined, + "type": "root", +} +`; + +exports[`wechat remax render insert new element 2`] = ` +Object { + "children": Array [ + Object { + "children": Array [ + Object { + "children": Array [ + Object { + "text": "1", + "type": "plain-text", + }, + ], + "id": 2, + "props": Object {}, + "text": undefined, + "type": "view", + }, + Object { + "children": Array [ + Object { + "text": "2", + "type": "plain-text", + }, + ], + "id": 7, + "props": Object {}, + "text": undefined, + "type": "view", + }, + Object { + "children": Array [ + Object { + "text": "3", + "type": "plain-text", + }, + ], + "id": 4, + "props": Object {}, + "text": undefined, + "type": "view", + }, + ], + "id": 5, + "props": Object {}, + "text": undefined, + "type": "view", + }, + ], + "id": 0, + "props": undefined, + "text": undefined, + "type": "root", +} +`; + +exports[`wechat remax render render correctly 1`] = ` +Object { + "children": Array [ + Object { + "children": Array [ + Object { + "text": "hello", + "type": "plain-text", + }, + ], + "id": 2, + "props": Object { + "className": "foo", + }, + "text": undefined, + "type": "view", + }, + ], + "id": 0, + "props": undefined, + "text": undefined, + "type": "root", +} +`; + +exports[`wechat remax render render native component correctly 1`] = ` +Array [ + Object { + "id": 0, + "payload": Array [ + Object { + "deleteCount": 0, + "item": Object { + "children": Array [], + "id": 1, + "props": Object { + "class": "class", + "fooBar": "fooBar", + "onClick": "$$REMAX_METHOD_1_onClick", + }, + "text": undefined, + "type": "native-component", + }, + "path": "root.children", + "start": 0, + }, + ], + "type": "splice", + }, +] +`; + +exports[`wechat remax render renders conditional fragment correctly 1`] = ` +Object { + "children": Array [ + Object { + "children": Array [ + Object { + "text": "one", + "type": "plain-text", + }, + ], + "id": 2, + "props": Object {}, + "text": undefined, + "type": "view", + }, + Object { + "children": Array [ + Object { + "text": "two", + "type": "plain-text", + }, + ], + "id": 4, + "props": Object {}, + "text": undefined, + "type": "view", + }, + ], + "id": 0, + "props": undefined, + "text": undefined, + "type": "root", +} +`; + +exports[`wechat remax render renders conditional fragment correctly 2`] = ` +Object { + "children": Array [ + Object { + "children": Array [ + Object { + "text": "foo", + "type": "plain-text", + }, + ], + "id": 2, + "props": Object {}, + "text": undefined, + "type": "view", + }, + ], + "id": 0, + "props": undefined, + "text": undefined, + "type": "root", +} +`; + +exports[`wechat remax render renders empty style 1`] = ` +Object { + "children": Array [ + Object { + "children": Array [ + Object { + "text": "hello", + "type": "plain-text", + }, + ], + "id": 2, + "props": Object { + "style": undefined, + }, + "text": undefined, + "type": "view", + }, + ], + "id": 0, + "props": undefined, + "text": undefined, + "type": "root", +} +`; + +exports[`wechat remax render renders style 1`] = ` +Object { + "children": Array [ + Object { + "children": Array [ + Object { + "text": "hello", + "type": "plain-text", + }, + ], + "id": 2, + "props": Object { + "style": Object { + "height": "100px", + "width": "100px", + }, + }, + "text": undefined, + "type": "view", + }, + ], + "id": 0, + "props": undefined, + "text": undefined, + "type": "root", +} +`; + +exports[`wechat remax render renders vendor prefix style 1`] = ` +Object { + "children": Array [ + Object { + "children": Array [ + Object { + "text": "hello", + "type": "plain-text", + }, + ], + "id": 2, + "props": Object { + "style": Object { + "WebkitLineClamp": 2, + "height": "100px", + }, + }, + "text": undefined, + "type": "view", + }, + ], + "id": 0, + "props": undefined, + "text": undefined, + "type": "root", +} +`; + +exports[`wechat remax render umount component 1`] = ` +Object { + "children": Array [ + Object { + "children": Array [ + Object { + "children": Array [ + Object { + "text": "foo", + "type": "plain-text", + }, + ], + "id": 2, + "props": Object {}, + "text": undefined, + "type": "view", + }, + ], + "id": 3, + "props": Object {}, + "text": undefined, + "type": "view", + }, + ], + "id": 0, + "props": undefined, + "text": undefined, + "type": "root", +} +`; + +exports[`wechat remax render umount component 2`] = ` +Object { + "children": Array [ + Object { + "children": Array [], + "id": 3, + "props": Object {}, + "text": undefined, + "type": "view", + }, + ], + "id": 0, + "props": undefined, + "text": undefined, + "type": "root", +} +`; diff --git a/packages/remax/src/__tests__/wechat/index.test.tsx b/packages/remax/src/__tests__/wechat/index.test.tsx new file mode 100644 index 000000000..ae6fdb480 --- /dev/null +++ b/packages/remax/src/__tests__/wechat/index.test.tsx @@ -0,0 +1,165 @@ +import * as React from 'react'; +import './helpers/setupGlobals'; +import { render, View } from '../../../src/adapters/wechat'; +import { reset as resetInstanceId } from '../../instanceId'; +import { reset as resetActionId } from '../../actionId'; +import Container from '../../Container'; + +const p = { + // eslint-disable-next-line + setData() {}, + // eslint-disable-next-line + $spliceData() {}, +}; + +describe('wechat', () => { + describe('remax render', () => { + afterEach(() => { + resetActionId(); + resetInstanceId(); + }); + + it('render correctly', () => { + const Page = () => hello; + const container = new Container(p); + render(, container); + expect(container.root).toMatchSnapshot(); + }); + + it('insert new element', () => { + class Page extends React.Component { + state = { + list: [1, 3], + }; + + update() { + this.setState({ + list: [1, 2, 3], + }); + } + + render() { + const { list } = this.state; + return ( + + {list.map(i => ( + {i} + ))} + + ); + } + } + + const container = new Container(p); + const page = React.createRef(); + render(, container); + expect(container.root).toMatchSnapshot(); + page.current.update(); + expect(container.root).toMatchSnapshot(); + }); + + it('umount component', () => { + class Page extends React.Component { + state = { + show: true, + }; + + hide() { + this.setState({ show: false }); + } + + render() { + return {this.state.show && foo}; + } + } + const container = new Container(p); + const page = React.createRef(); + render(, container); + expect(container.root).toMatchSnapshot(); + page.current.hide(); + expect(container.root).toMatchSnapshot(); + }); + + it('renders style', () => { + const Page = () => ( + hello + ); + const container = new Container(p); + render(, container); + expect(container.root).toMatchSnapshot(); + }); + + it('renders vendor prefix style', () => { + const Page = () => ( + hello + ); + const container = new Container(p); + render(, container); + expect(container.root).toMatchSnapshot(); + }); + + it('renders empty style', () => { + const Page = () => hello; + const container = new Container(p); + render(, container); + expect(container.root).toMatchSnapshot(); + }); + + it('renders conditional fragment correctly', () => { + class Page extends React.Component { + state = { + show: false, + }; + + show() { + this.setState({ show: true }); + } + + render() { + if (this.state.show) { + return foo; + } + + return ( + <> + one + two + + ); + } + } + const container = new Container(p); + const page = React.createRef(); + render(, container); + expect(container.root).toMatchSnapshot(); + page.current.show(); + expect(container.root).toMatchSnapshot(); + }); + + it('render native component correctly', () => { + const NativeComponent = ({ fooBar, onClick, className }: any) => + React.createElement('native-component', { + fooBar, + className, + onClick, + }); + const actions: any = []; + const p = { + setData: ({ action }: any) => actions.push(action), + $spliceData: ({ action }: any) => actions.push(action), + }; + + const container = new Container(p); + render( + {}} + className="class" + />, + container + ); + + expect(actions).toMatchSnapshot(); + }); + }); +}); diff --git a/packages/remax/src/adapters/alipay/components/factory.ts b/packages/remax/src/adapters/alipay/components/factory.ts index 0b8995790..5a859455b 100644 --- a/packages/remax/src/adapters/alipay/components/factory.ts +++ b/packages/remax/src/adapters/alipay/components/factory.ts @@ -1,6 +1,13 @@ import React, { forwardRef } from 'react'; +const hostComponent = new Set(); + +export function isHostComponent(name: string) { + return hostComponent.has(name); +} + export default function factory

(component: string) { + hostComponent.add(component); const Component: React.FC

= (props, ref: any) => { const { children = [] } = props; return React.createElement(component, { ...props, ref }, children); diff --git a/packages/remax/src/adapters/toutiao/components/factory.ts b/packages/remax/src/adapters/toutiao/components/factory.ts index 85aee38e3..b162db234 100644 --- a/packages/remax/src/adapters/toutiao/components/factory.ts +++ b/packages/remax/src/adapters/toutiao/components/factory.ts @@ -6,7 +6,14 @@ type defaultProps = { style?: React.CSSProperties; }; +const hostComponent = new Set(); + +export function isHostComponent(name: string) { + return hostComponent.has(name); +} + export default function factory

(component: string) { + hostComponent.add(component); const Component: React.FC

= (props, ref: any) => { const { children = [] } = props; return React.createElement(component, { ...props, ref }, children); diff --git a/packages/remax/src/adapters/wechat/components/Input.tsx b/packages/remax/src/adapters/wechat/components/Input.tsx index 194569e14..61165dce4 100644 --- a/packages/remax/src/adapters/wechat/components/Input.tsx +++ b/packages/remax/src/adapters/wechat/components/Input.tsx @@ -5,6 +5,7 @@ import React, { forwardRef, } from 'react'; import { BaseProps } from './baseTyping'; +import { addToHostComponent } from './factory'; export interface InputProps extends BaseProps { /** @@ -194,4 +195,6 @@ Input.defaultProps = { selectionStart: 999, }; +addToHostComponent('input'); + export default Input; diff --git a/packages/remax/src/adapters/wechat/components/Swiper.tsx b/packages/remax/src/adapters/wechat/components/Swiper.tsx index 1c44c41dd..e43fe8a8b 100644 --- a/packages/remax/src/adapters/wechat/components/Swiper.tsx +++ b/packages/remax/src/adapters/wechat/components/Swiper.tsx @@ -1,5 +1,6 @@ import React, { FunctionComponent, forwardRef } from 'react'; import { BaseProps } from './baseTyping'; +import { addToHostComponent } from './factory'; export interface SwiperProps extends BaseProps { /** (default: false) 是否显示面板指示点 1.0.0 */ @@ -85,4 +86,6 @@ Swiper.defaultProps = { easingFunction: 'default', }; +addToHostComponent('swiper'); + export default Swiper; diff --git a/packages/remax/src/adapters/wechat/components/Textarea.tsx b/packages/remax/src/adapters/wechat/components/Textarea.tsx index 3fc26569f..5fbd137c2 100644 --- a/packages/remax/src/adapters/wechat/components/Textarea.tsx +++ b/packages/remax/src/adapters/wechat/components/Textarea.tsx @@ -4,6 +4,7 @@ import React, { useState, forwardRef, } from 'react'; +import { addToHostComponent } from './factory'; import { BaseProps } from './baseTyping'; export interface TextareaProps extends BaseProps { @@ -98,4 +99,6 @@ Textarea.defaultProps = { fixed: false, }; +addToHostComponent('textarea'); + export default Textarea; diff --git a/packages/remax/src/adapters/wechat/components/Video.tsx b/packages/remax/src/adapters/wechat/components/Video.tsx index c8e714bdc..93c575414 100644 --- a/packages/remax/src/adapters/wechat/components/Video.tsx +++ b/packages/remax/src/adapters/wechat/components/Video.tsx @@ -1,4 +1,5 @@ import React, { FunctionComponent, forwardRef } from 'react'; +import { addToHostComponent } from './factory'; import { BaseProps } from './baseTyping'; export interface VideoProps extends BaseProps { @@ -112,4 +113,6 @@ Video.defaultProps = { vslideGestureInFullscreen: true, }; +addToHostComponent('video'); + export default Video; diff --git a/packages/remax/src/adapters/wechat/components/factory.ts b/packages/remax/src/adapters/wechat/components/factory.ts index 0b8995790..50e4c17b4 100644 --- a/packages/remax/src/adapters/wechat/components/factory.ts +++ b/packages/remax/src/adapters/wechat/components/factory.ts @@ -1,6 +1,17 @@ import React, { forwardRef } from 'react'; +const hostComponent = new Set(); + +export function isHostComponent(name: string) { + return hostComponent.has(name); +} + +export function addToHostComponent(name: string) { + hostComponent.add(name); +} + export default function factory

(component: string) { + addToHostComponent(component); const Component: React.FC

= (props, ref: any) => { const { children = [] } = props; return React.createElement(component, { ...props, ref }, children); diff --git a/packages/remax/src/propsAlias.ts b/packages/remax/src/propsAlias.ts index f7f4ef4d3..a9b3a52da 100644 --- a/packages/remax/src/propsAlias.ts +++ b/packages/remax/src/propsAlias.ts @@ -1,6 +1,27 @@ +import { TYPE_TEXT } from './constants'; import kebabCase from 'lodash.kebabcase'; import Platform from './Platform'; import plainStyle from './utils/plainStyle'; +import { isHostComponent as isWechatHostComponent } from './adapters/wechat/components/factory'; +import { isHostComponent as isAlipayHostComponent } from './adapters/alipay/components/factory'; +import { isHostComponent as isToutiaoHostComponent } from './adapters/toutiao/components/factory'; + +export function isHostComponent(name: string) { + if (name === TYPE_TEXT) { + return true; + } + + switch (Platform.current) { + case 'wechat': + return isWechatHostComponent(name); + case 'alipay': + return isAlipayHostComponent(name); + case 'toutiao': + return isToutiaoHostComponent(name); + } + + return false; +} function functionPropAlias(prop: string, platform?: string) { prop = prop.replace(/Click$/, 'Tap');