refactor: 更改组件 API 使用 React

Author: Garfield550

package.json

@@ -30,10 +30,13 @@
   "eslintConfig": {
     "extends": [
       "o2team",
-      "taro",
+      "plugin:react/recommended",
       "plugin:prettier/recommended"
     ],
     "parser": "babel-eslint",
+    "plugins": [
+      "react"
+    ],
     "env": {
       "jest": true
     },
@@ -45,7 +48,7 @@
       "no-unused-vars": [
         "error",
         {
-          "varsIgnorePattern": "Taro"
+          "varsIgnorePattern": "React"
         }
       ],
       "no-console": [
@@ -94,14 +97,19 @@
           "react",
           "@typescript-eslint"
         ],
-        "extends": "plugin:prettier/recommended",
+        "extends": [
+          "eslint:recommended",
+          "plugin:@typescript-eslint/eslint-recommended",
+          "plugin:@typescript-eslint/recommended",
+          "plugin:react/recommended",
+          "plugin:prettier/recommended"
+        ],
         "env": {
           "jest": true
         },
         "rules": {
-          "no-undef": 0,
-          "no-unused-vars": 0,
-          "@typescript-eslint/class-name-casing": 2,
+          "@typescript-eslint/no-explicit-any": ["off"],
+          "@typescript-eslint/member-delimiter-style": ["off"],
           "class-methods-use-this": "off",
           "prefer-rest-params": "off",
           "arrow-body-style": "warn",
@@ -115,8 +123,7 @@
                 ".tsx"
               ]
             }
-          ],
-          "taro/custom-component-children": "off"
+          ]
         }
       }
     ]
@@ -212,12 +219,10 @@
     "clean": "rimraf .temp dist coverage"
   },
   "dependencies": {
-    "@types/react": "^16.7.3",
     "bind-decorator": "^1.0.11",
     "classnames": "^2.2.6",
     "dayjs": "^1.7.7",
-    "lodash": "^4.17.10",
-    "prop-types": "^15.6.2"
+    "lodash": "^4.17.10"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-rc.1",
@@ -244,6 +249,7 @@
     "@tarojs/taro-weapp": "^2.0.3",
     "@tarojs/webpack-runner": "^2.0.3",
     "@types/classnames": "^2.2.9",
+    "@types/react": "^16.9.23",
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
@@ -300,7 +306,9 @@
     "postcss": "^7.0.2",
     "postcss-loader": "^3.0.0",
     "prettier": "^1.19.1",
+    "prop-types": "^15.7.2",
     "qrcode.react": "^1.0.0",
+    "react": "^16.13.0",
     "react-markdown-loader": "^1.1.14",
     "react-router-dom": "^5.1.2",
     "regenerator-runtime": "^0.13.3",
@@ -317,5 +325,9 @@
     "webpack-dev-server": "^3.1.5",
     "webpack-merge": "^4.1.3",
     "yaml-loader": "^0.5.0"
+  },
+  "peerDependencies": {
+    "prop-types": ">=15.7.2",
+    "react": ">=16.13.0"
   }
 }

src/common/component.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@tarojs/taro'
+import { Component } from 'react'
 
 const objectToString = (style: object | string): string => {
   if (style && typeof style === 'object') {
@@ -15,10 +15,6 @@ const objectToString = (style: object | string): string => {
 }
 
 export default class AtComponent<P = {}, S = {}> extends Component<P, S> {
-  static options = {
-    addGlobalClass: true
-  }
-
   /**
    * 合并 style
    * @param {Object|String} style1

src/common/utils.ts

@@ -1,5 +1,5 @@
 import Taro from '@tarojs/taro'
-import { execObject, SelectorQuery } from '@tarojs/taro/types/index'
+import { SelectorQuery } from '@tarojs/taro/types/index'
 
 const ENV = Taro.getEnv()
 
@@ -19,29 +19,28 @@ function delayQuerySelector(
   self,
   selectorStr: string,
   delayTime = 500
-): Promise<Array<execObject>> {
-  const $scope = ENV === Taro.ENV_TYPE.WEB ? self : self.$scope
-  const selector: SelectorQuery = Taro.createSelectorQuery().in($scope)
+): Promise<any[]> {
+  const selector: SelectorQuery = Taro.createSelectorQuery()
 
   return new Promise(resolve => {
     delay(delayTime).then(() => {
       selector
         .select(selectorStr)
         .boundingClientRect()
-        .exec((res: Array<execObject>) => {
+        .exec((res: any[]) => {
           resolve(res)
         })
     })
   })
 }
 
-function delayGetScrollOffset({ delayTime = 500 }): Promise<Array<execObject>> {
+function delayGetScrollOffset({ delayTime = 500 }): Promise<any[]> {
   return new Promise(resolve => {
     delay(delayTime).then(() => {
       Taro.createSelectorQuery()
         .selectViewport()
         .scrollOffset()
-        .exec((res: Array<execObject>) => {
+        .exec((res: any[]) => {
           resolve(res)
         })
     })
@@ -52,17 +51,15 @@ function delayGetClientRect({
   self,
   selectorStr,
   delayTime = 500
-}): Promise<Array<execObject>> {
-  const $scope =
-    ENV === Taro.ENV_TYPE.WEB || ENV === Taro.ENV_TYPE.SWAN ? self : self.$scope
-  const selector: SelectorQuery = Taro.createSelectorQuery().in($scope)
+}): Promise<any[]> {
+  const selector: SelectorQuery = Taro.createSelectorQuery()
 
   return new Promise(resolve => {
     delay(delayTime).then(() => {
       selector
         .select(selectorStr)
         .boundingClientRect()
-        .exec((res: Array<execObject>) => {
+        .exec((res: any[]) => {
           resolve(res)
         })
     })
@@ -215,7 +212,7 @@ function handleTouchScroll(flag: any): void {
     // 把脱离文档流的body拉上去！否则页面会回到顶部！
     document.body.style.top = `${-scrollTop}px`
   } else {
-    document.body.style.top = null
+    document.body.style.top = ''
     document.body.classList.remove('at-frozen')
 
     document.documentElement.scrollTop = scrollTop
@@ -227,6 +224,41 @@ function pxTransform(size: number): string {
   return Taro.pxTransform(size)
 }
 
+function objectToString(style: object | string): string {
+  if (style && typeof style === 'object') {
+    let styleStr = ''
+    Object.keys(style).forEach(key => {
+      const lowerCaseKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+      styleStr += `${lowerCaseKey}:${style[key]};`
+    })
+    return styleStr
+  } else if (style && typeof style === 'string') {
+    return style
+  }
+  return ''
+}
+
+/**
+ * 合并 style
+ * @param {Object|String} style1
+ * @param {Object|String} style2
+ * @returns {String}
+ */
+function mergeStyle(
+  style1: object | string,
+  style2: object | string
+): object | string {
+  if (
+    style1 &&
+    typeof style1 === 'object' &&
+    style2 &&
+    typeof style2 === 'object'
+  ) {
+    return Object.assign({}, style1, style2)
+  }
+  return objectToString(style1) + objectToString(style2)
+}
+
 export {
   delay,
   delayQuerySelector,
@@ -237,5 +269,6 @@ export {
   pxTransform,
   handleTouchScroll,
   delayGetClientRect,
-  delayGetScrollOffset
+  delayGetScrollOffset,
+  mergeStyle
 }

src/components/accordion/index.tsx

@@ -1,16 +1,12 @@
 import classNames from 'classnames'
 import PropTypes, { InferProps } from 'prop-types'
+import React from 'react'
 import { AtAccordionProps, AtAccordionState } from 'types/accordion'
 import { Text, View } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types/common'
-import Taro from '@tarojs/taro'
-import AtComponent from '../../common/component'
-import { delayQuerySelector, initTestEnv } from '../../common/utils'
+import { delayQuerySelector } from '../../common/utils'
 
-initTestEnv()
-
-// 文档
-export default class AtAccordion extends AtComponent<
+export default class AtAccordion extends React.Component<
   AtAccordionProps,
   AtAccordionState
 > {
@@ -69,7 +65,7 @@ export default class AtAccordion extends AtComponent<
     })
   }
 
-  public componentWillReceiveProps(nextProps: AtAccordionProps): void {
+  public UNSAFE_componentWillReceiveProps(nextProps: AtAccordionProps): void {
     if (nextProps.open !== this.props.open) {
       this.startOpen = !!nextProps.open && !!nextProps.isAnimation
       this.toggleWithAnimation()
@@ -145,8 +141,7 @@ AtAccordion.defaultProps = {
   note: '',
   icon: { value: '' },
   hasBorder: true,
-  isAnimation: true,
-  onClick: () => {}
+  isAnimation: true
 }
 
 AtAccordion.propTypes = {

src/components/action-sheet/body/index.tsx

@@ -1,10 +1,9 @@
 import classNames from 'classnames'
+import React from 'react'
 import { AtActionSheetBodyProps } from 'types/action-sheet'
 import { View } from '@tarojs/components'
-import Taro from '@tarojs/taro'
-import AtComponent from '../../../common/component'
 
-export default class AtActionSheetBody extends AtComponent<
+export default class AtActionSheetBody extends React.Component<
   AtActionSheetBodyProps
 > {
   public render(): JSX.Element {

src/components/action-sheet/body/item/index.tsx

@@ -1,12 +1,11 @@
 import classNames from 'classnames'
 import _isFunction from 'lodash/isFunction'
 import PropTypes, { InferProps } from 'prop-types'
+import React from 'react'
 import { AtActionSheetItemProps } from 'types/action-sheet'
 import { View } from '@tarojs/components'
-import Taro from '@tarojs/taro'
-import AtComponent from '../../../../common/component'
 
-export default class AtActionSheetItem extends AtComponent<
+export default class AtActionSheetItem extends React.Component<
   AtActionSheetItemProps
 > {
   public static defaultProps: AtActionSheetItemProps
@@ -29,10 +28,6 @@ export default class AtActionSheetItem extends AtComponent<
   }
 }
 
-AtActionSheetItem.defaultProps = {
-  onClick: () => {}
-}
-
 AtActionSheetItem.propTypes = {
   onClick: PropTypes.func
 }

src/components/action-sheet/footer/index.tsx

@@ -1,12 +1,11 @@
 import classNames from 'classnames'
 import _isFunction from 'lodash/isFunction'
 import PropTypes, { InferProps } from 'prop-types'
+import React from 'react'
 import { AtActionSheetFooterProps } from 'types/action-sheet'
 import { View } from '@tarojs/components'
-import Taro from '@tarojs/taro'
-import AtComponent from '../../../common/component'
 
-export default class AtActionSheetFooter extends AtComponent<
+export default class AtActionSheetFooter extends React.Component<
   AtActionSheetFooterProps
 > {
   public static defaultProps: AtActionSheetFooterProps
@@ -32,10 +31,6 @@ export default class AtActionSheetFooter extends AtComponent<
   }
 }
 
-AtActionSheetFooter.defaultProps = {
-  onClick: () => {}
-}
-
 AtActionSheetFooter.propTypes = {
   onClick: PropTypes.func
 }

src/components/action-sheet/header/index.tsx

@@ -1,10 +1,9 @@
 import classNames from 'classnames'
+import React from 'react'
 import { AtActionSheetHeaderProps } from 'types/action-sheet'
 import { View } from '@tarojs/components'
-import Taro from '@tarojs/taro'
-import AtComponent from '../../../common/component'
 
-export default class AtActionSheetHeader extends AtComponent<
+export default class AtActionSheetHeader extends React.Component<
   AtActionSheetHeaderProps
 > {
   public render(): JSX.Element {

src/components/action-sheet/index.tsx

@@ -1,16 +1,15 @@
 import classNames from 'classnames'
 import _isFunction from 'lodash/isFunction'
 import PropTypes, { InferProps } from 'prop-types'
+import React from 'react'
 import { AtActionSheetProps, AtActionSheetState } from 'types/action-sheet'
 import { View } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types/common'
-import Taro from '@tarojs/taro'
-import AtComponent from '../../common/component'
 import AtActionSheetBody from './body/index'
 import AtActionSheetFooter from './footer/index'
 import AtActionSheetHeader from './header/index'
 
-export default class AtActionSheet extends AtComponent<
+export default class AtActionSheet extends React.Component<
   AtActionSheetProps,
   AtActionSheetState
 > {
@@ -26,7 +25,7 @@ export default class AtActionSheet extends AtComponent<
     }
   }
 
-  public componentWillReceiveProps(nextProps: AtActionSheetProps): void {
+  public UNSAFE_componentWillReceiveProps(nextProps: AtActionSheetProps): void {
     const { isOpened } = nextProps
     if (isOpened !== this.state._isOpened) {
       this.setState({

src/components/activity-indicator/index.tsx

@@ -1,12 +1,11 @@
 import classNames from 'classnames'
 import PropTypes, { InferProps } from 'prop-types'
+import React from 'react'
 import { AtActivityIndicatorProps } from 'types/activity-indicator'
 import { Text, View } from '@tarojs/components'
-import Taro from '@tarojs/taro'
-import AtComponent from '../../common/component'
 import AtLoading from '../loading/index'
 
-export default class AtActivityIndicator extends AtComponent<
+export default class AtActivityIndicator extends React.Component<
   AtActivityIndicatorProps
 > {
   public static defaultProps: AtActivityIndicatorProps