feat: 为react组件库包上一层forwardRef 并且添加一些京东小程序组件 (#16373)

* feat: 为react组件库使用forwardRef包一层 * feat: 为京东小程序添加 Editor、PageContainer、RootPortal组件和属性 # Conflicts: # packages/taro-jd/rollup.config.js * fix: lint * test: update snapshoot * test: update snapshoot * test: update snapshoot
NervJS · Aug 23, 2024 · fdc2731 · fdc2731
1 parent 9e13236
commit fdc2731
Show file tree

Hide file tree

Showing 14 changed files with 176 additions and 24 deletions.
diff --git a/packages/taro-components-react/src/components/button/index.tsx b/packages/taro-components-react/src/components/button/index.tsx
@@ -3,7 +3,7 @@ import './style/index.scss'
 import classNames from 'classnames'
 import React from 'react'
 
-import { omit } from '../../utils'
+import { createForwardRefComponent, omit } from '../../utils'
 
 interface IProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
   size?: string
@@ -15,6 +15,7 @@ interface IProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'ty
   loading?: boolean
   type?: string
   className?: string
+  forwardedRef?: React.MutableRefObject<HTMLButtonElement>
 }
 
 interface IState {
@@ -54,6 +55,7 @@ class Button extends React.Component<IProps, IState> {
       hoverStayTime = 70,
       loading = false,
       type,
+      forwardedRef,
     } = this.props
     const cls = classNames(
       className,
@@ -96,8 +98,9 @@ class Button extends React.Component<IProps, IState> {
 
     return (
       <button
-        {...omit(this.props, ['hoverClass', 'onTouchStart', 'onTouchEnd', 'type', 'loading'])}
+        {...omit(this.props, ['hoverClass', 'onTouchStart', 'onTouchEnd', 'type', 'loading', 'forwardedRef'])}
         type={type}
+        ref={forwardedRef}
         className={cls}
         style={style}
         onClick={onClick}
@@ -114,4 +117,4 @@ class Button extends React.Component<IProps, IState> {
   }
 }
 
-export default Button
+export default createForwardRefComponent(Button)
diff --git a/packages/taro-components-react/src/components/icon/index.tsx b/packages/taro-components-react/src/components/icon/index.tsx
@@ -3,18 +3,19 @@ import './style/index.scss'
 import classNames from 'classnames'
 import React from 'react'
 
-import { omit } from '../../utils'
+import { createForwardRefComponent, omit } from '../../utils'
 
 
 interface IProps {
   type: string
   color: string
   size?: number | string
   className?: string
+  forwardedRef?: React.MutableRefObject<HTMLLIElement>
 }
 
 const Icon = (props: IProps) => {
-  let { type, className = '', size = '23', color } = props
+  let { type, className = '', size = '23', color, forwardedRef } = props
   if (type) type = type.replace(/_/g, '-')
   const cls = classNames(
     {
@@ -25,7 +26,7 @@ const Icon = (props: IProps) => {
   const style = { 'font-size': size + 'px', color: color }
 
   return (
-    <i {...omit(props, ['type', 'className'])} className={cls} style={style} />
+    <i {...omit(props, ['type', 'className', 'forwardedRef'])} className={cls} style={style} ref={forwardedRef} />
   )
 }
-export default Icon
+export default createForwardRefComponent(Icon)
diff --git a/packages/taro-components-react/src/components/image/index.tsx b/packages/taro-components-react/src/components/image/index.tsx
@@ -3,13 +3,16 @@ import './style/index.css'
 import classNames from 'classnames'
 import React from 'react'
 
+import { createForwardRefComponent } from '../../utils/index'
+
 interface IProps extends React.HTMLAttributes<HTMLDivElement> {
   src: string
   mode: string
   onError: () => void
   onLoad: (e) => void
   lazyLoad?: boolean
   imgProps?: Record<string, any>
+  forwardedRef?: React.MutableRefObject<HTMLDivElement>
 }
 
 class Image extends React.Component<IProps> {
@@ -72,6 +75,7 @@ class Image extends React.Component<IProps> {
       onError,
       lazyLoad,
       imgProps,
+      forwardedRef,
       ...reset
     } = this.props
     const cls = classNames(
@@ -87,7 +91,7 @@ class Image extends React.Component<IProps> {
     )
 
     return (
-      <div className={cls} style={style} {...reset}>
+      <div className={cls} style={style} ref={forwardedRef} {...reset}>
         {lazyLoad ? (
           <img
             ref={img => (this.imgRef = img)}
@@ -112,4 +116,4 @@ class Image extends React.Component<IProps> {
   }
 }
 
-export default Image
+export default createForwardRefComponent(Image)
diff --git a/packages/taro-components-react/src/components/input/index.tsx b/packages/taro-components-react/src/components/input/index.tsx
@@ -3,7 +3,7 @@ import './style/index.scss'
 import classNames from 'classnames'
 import React from 'react'
 
-import { omit } from '../../utils'
+import { createForwardRefComponent, omit } from '../../utils'
 
 function getTrueType (type: string | undefined, confirmType: string, password: boolean) {
   if (confirmType === 'search') type = 'search'
@@ -33,6 +33,7 @@ interface IProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'ty
   confirmType?: string
   name?: string
   type?: string
+  forwardedRef?: React.MutableRefObject<HTMLInputElement>
   onConfirm?: (e) => void
 }
 
@@ -243,6 +244,9 @@ class Input extends React.Component<IProps, null> {
       <input
         ref={(input: HTMLInputElement) => {
           this.inputRef = input
+          if (this.props.forwardedRef) {
+            this.props.forwardedRef.current = input
+          }
         }}
         {...otherProps}
         className={cls}
@@ -264,4 +268,4 @@ class Input extends React.Component<IProps, null> {
   }
 }
 
-export default Input
+export default createForwardRefComponent(Input)
diff --git a/packages/taro-components-react/src/components/pull-down-refresh/index.tsx b/packages/taro-components-react/src/components/pull-down-refresh/index.tsx
@@ -4,6 +4,8 @@ import Taro from '@tarojs/taro'
 import classNames from 'classnames'
 import React from 'react'
 
+import { createForwardRefComponent } from '../../utils/index'
+
 function setTransform (nodeStyle, value) {
   nodeStyle.transform = value
   nodeStyle.webkitTransform = value
@@ -45,6 +47,7 @@ interface IProps extends React.HTMLAttributes<HTMLBaseElement> {
   damping: number
   indicator: INDICATOR
   onRefresh?: () => void
+  forwardedRef?: React.MutableRefObject<HTMLBaseElement>
 }
 
 interface IState {
@@ -337,6 +340,9 @@ class PullDownRefresh extends React.Component<IProps, IState> {
       <pull-down-refresh
         ref={el => {
           this.containerRef = el
+          if (this.props.forwardedRef) {
+            this.props.forwardedRef.current = el
+          }
         }}
         className={classNames(className, prefixCls, `${prefixCls}-down`)}
         {...restProps}
@@ -347,4 +353,4 @@ class PullDownRefresh extends React.Component<IProps, IState> {
   }
 }
 
-export default PullDownRefresh
+export default createForwardRefComponent(PullDownRefresh)
diff --git a/packages/taro-components-react/src/components/scroll-view/index.tsx b/packages/taro-components-react/src/components/scroll-view/index.tsx
@@ -3,7 +3,7 @@ import './style/index.css'
 import classNames from 'classnames'
 import React from 'react'
 
-import { throttle } from '../../utils'
+import { createForwardRefComponent, throttle } from '../../utils'
 
 function easeOutScroll (from = 0, to = 0, callback) {
   if (from === to || typeof from !== 'number') {
@@ -70,6 +70,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
   scrollIntoViewAlignment?: ScrollLogicalPosition
   scrollWithAnimation: boolean
   enableBackToTop?: boolean
+  forwardedRef?: React.MutableRefObject<HTMLDivElement>
   onScrollToUpper: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void
   onScrollToLower: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void
   onScroll: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void
@@ -193,6 +194,7 @@ class ScrollView extends React.Component<IProps> {
       <div
         ref={container => {
           this.container = container
+          this.props.forwardedRef && (this.props.forwardedRef.current = container as HTMLDivElement)
         }}
         style={style}
         className={cls}
@@ -205,4 +207,4 @@ class ScrollView extends React.Component<IProps> {
   }
 }
 
-export default ScrollView
+export default createForwardRefComponent(ScrollView)
diff --git a/packages/taro-components-react/src/components/swiper/index.tsx b/packages/taro-components-react/src/components/swiper/index.tsx
@@ -5,14 +5,15 @@ import classNames from 'classnames'
 import React from 'react'
 import Swipers from 'swiper/swiper-bundle.esm.js'
 
-import { debounce } from '../../utils'
+import { createForwardRefComponent, debounce } from '../../utils'
 
 import type ISwiper from 'swiper'
 
 let INSTANCE_ID = 0
 
 interface SwiperItemProps extends React.HTMLAttributes<HTMLDivElement> {
   itemId: string
+  forwardedRef?: React.MutableRefObject<HTMLDivElement>
 }
 
 interface SwiperProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -30,6 +31,7 @@ interface SwiperProps extends React.HTMLAttributes<HTMLDivElement> {
   indicatorActiveColor?: string
   indicatorDots?: boolean
   onAnimationFinish?: (e: TouchEvent) => void
+  forwardedRef?: React.MutableRefObject<HTMLDivElement>
 }
 
 const createEvent = (type: string) => {
@@ -43,15 +45,16 @@ const createEvent = (type: string) => {
   return e
 }
 
-class SwiperItem extends React.Component<SwiperItemProps, Record<string, unknown>> {
+class SwiperItemInner extends React.Component<SwiperItemProps, Record<string, unknown>> {
   render () {
-    const { className, style, itemId, children, ...restProps } = this.props
+    const { className, style, itemId, children, forwardedRef, ...restProps } = this.props
     const cls = classNames('swiper-slide', className)
     return (
       <div
         className={cls}
         style={style}
         item-id={itemId}
+        ref={forwardedRef}
         {...restProps}
       >
         {children}
@@ -60,7 +63,7 @@ class SwiperItem extends React.Component<SwiperItemProps, Record<string, unknown
   }
 }
 
-class Swiper extends React.Component<SwiperProps, Record<string, unknown>> {
+class SwiperInner extends React.Component<SwiperProps, Record<string, unknown>> {
   _id = 1 + INSTANCE_ID++
   _$current = 0
   _$width = 0
@@ -274,6 +277,7 @@ class Swiper extends React.Component<SwiperProps, Record<string, unknown>> {
       previousMargin,
       nextMargin,
       indicatorColor,
+      forwardedRef,
       indicatorActiveColor
     } = this.props
     const defaultIndicatorColor = indicatorColor || 'rgba(0, 0, 0, .3)'
@@ -294,7 +298,7 @@ class Swiper extends React.Component<SwiperProps, Record<string, unknown>> {
       }
     )
     return (
-      <div className={`swiper-container-wrapper ${cls}`} style={sty}>
+      <div className={`swiper-container-wrapper ${cls}`} style={sty} ref={forwardedRef}>
         <div className='swiper-container' style={{ overflow: 'visible' }} ref={(el) => { this.$el = el }}>
           <div
             dangerouslySetInnerHTML={{
@@ -312,4 +316,7 @@ class Swiper extends React.Component<SwiperProps, Record<string, unknown>> {
   }
 }
 
+const SwiperItem = createForwardRefComponent(SwiperItemInner)
+const Swiper = createForwardRefComponent(SwiperInner)
+
 export { Swiper, SwiperItem }
diff --git a/packages/taro-components-react/src/components/text/index.tsx b/packages/taro-components-react/src/components/text/index.tsx
@@ -3,13 +3,16 @@ import './style/index.css'
 import classNames from 'classnames'
 import React from 'react'
 
+import { createForwardRefComponent } from '../../utils/index'
+
 interface IProps extends React.HTMLAttributes<HTMLSpanElement> {
   selectable?: boolean
+  forwardedRef?: React.MutableRefObject<HTMLSpanElement>
 }
 
 class Text extends React.Component<IProps, Record<string, unknown>> {
   render () {
-    const { className, selectable = false, ...restProps } = this.props
+    const { className, forwardedRef, selectable = false, ...restProps } = this.props
     const cls = classNames(
       'taro-text',
       {
@@ -18,11 +21,11 @@ class Text extends React.Component<IProps, Record<string, unknown>> {
       className
     )
     return (
-      <span {...restProps} className={cls}>
+      <span {...restProps} className={cls} ref={forwardedRef}>
         {this.props.children}
       </span>
     )
   }
 }
 
-export default Text
+export default createForwardRefComponent(Text)
diff --git a/packages/taro-components-react/src/components/view/index.tsx b/packages/taro-components-react/src/components/view/index.tsx
@@ -3,10 +3,13 @@ import './style/index.css'
 import classNames from 'classnames'
 import React from 'react'
 
+import { createForwardRefComponent } from '../../utils/index'
+
 interface IProps extends React.HTMLAttributes<HTMLDivElement> {
   hoverClass?: string
   hoverStartTime?: number
   hoverStayTime?: number
+  forwardedRef?: React.MutableRefObject<HTMLDivElement>
   onTouchStart?(e: React.TouchEvent<HTMLDivElement>): void
   onTouchEnd?(e: React.TouchEvent<HTMLDivElement>): void
   onTouchMove?(e: React.TouchEvent<HTMLDivElement>): void
@@ -36,6 +39,7 @@ class View extends React.Component<IProps, IState> {
       onTouchMove,
       hoverStartTime = 50,
       hoverStayTime = 400,
+      forwardedRef,
       ...other
     } = this.props
 
@@ -96,6 +100,7 @@ class View extends React.Component<IProps, IState> {
 
     return (
       <div
+        ref={forwardedRef}
         className={cls}
         onTouchStart={_onTouchStart}
         onTouchEnd={_onTouchEnd}
@@ -108,4 +113,4 @@ class View extends React.Component<IProps, IState> {
   }
 }
 
-export default View
+export default createForwardRefComponent(View)
diff --git a/.../taro-components-react/src/utils/index.ts → ...taro-components-react/src/utils/index.tsx b/.../taro-components-react/src/utils/index.ts → ...taro-components-react/src/utils/index.tsx
@@ -1,3 +1,5 @@
+import React, { forwardRef } from 'react'
+
 export function throttle (fn, threshold = 250, scope?) {
   let lastTime = 0
   let deferTimer: ReturnType<typeof setTimeout>
@@ -37,3 +39,12 @@ export function omit (obj, fields) {
   }
   return shallowCopy
 }
+
+export const createForwardRefComponent = (ReactComponent: any) => {
+  const forwardRefComponent = (
+    props,
+    ref
+  ) => <ReactComponent {...props} forwardedRef={ref} />
+
+  return forwardRef(forwardRefComponent)
+}
diff --git a/packages/taro-jd/src/components-react.ts b/packages/taro-jd/src/components-react.ts
@@ -1,3 +1,4 @@
 export * from '@tarojs/components/mini'
 export const Editor = 'editor'
-
+export const PageContainer = 'page-container'
+export const RootPortal = 'root-portal'