Feat v3 cpp td (#3364)

* feat: 鸿蒙适配td

* chore: 强制指向某些版本

* fix: swipe 在鸿蒙下不好使的问题

* fix(toast): 无法在鸿蒙下换行的问题

* fix: 调整滑动时动效时间

* fix: 去掉注释

* chore: 升级nutui版本

* chore: 升级版本号

* fix: lint

Author: xiaoyatong

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react-taro",
-  "version": "3.0.19-cpp-beta.3",
+  "version": "3.0.19-cpp.1",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/es/packages/nutui.react.build.js",
@@ -109,7 +109,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@nutui/icons-react": "^3.0.2-beta.5",
-    "@nutui/icons-react-taro": "^3.0.2-beta.3",
+    "@nutui/icons-react-taro": "^3.0.2-cpp.1",
     "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2",
     "@nutui/touch-emulator": "^1.0.0",
     "@nutui/lottie-miniprogram": "^1.0.2",
@@ -241,6 +241,7 @@
     "@types/react-dom": "^18.2.19",
     "sass": "1.77.6",
     "@tarojs/api": "4.0.12",
-    "@tarojs/components": "4.0.12"
+    "@tarojs/components": "4.0.12",
+    "@nutui/icons-react-taro": "^3.0.2-cpp.1"
   }
 }

pnpm-lock.yaml

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from 'react'
 import isEqual from 'react-fast-compare'
-import { Events, getCurrentInstance } from '@tarojs/taro'
+import { eventCenter, getCurrentInstance } from '@tarojs/taro'
 import { useForceUpdate } from '@/hooks/use-force-update'
 
-export const customEvents = new Events()
+// export const customEvents = new Events()
+export const customEvents = eventCenter
 
 export function useCustomEventsPath(selector?: string) {
   selector = selector || ''

src/hooks/taro/use-custom-event.ts

@@ -2,19 +2,18 @@ import React, { CSSProperties, useCallback, useMemo } from 'react'
 import type { MouseEvent } from 'react'
 import classNames from 'classnames'
 import {
-  ButtonProps as MiniProgramButtonProps,
+  // ButtonProps as MiniProgramButtonProps,
   View,
-  Button as TaroButton,
+  // Button as TaroButton,
 } from '@tarojs/components'
 import { Loading } from '@nutui/icons-react-taro'
-import { getEnv } from '@tarojs/taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { harmony } from '@/utils/taro/platform'
 
-type OmitMiniProgramButtonProps = Omit<
-  MiniProgramButtonProps,
-  'size' | 'type' | 'onClick' | 'style'
->
+// type OmitMiniProgramButtonProps = Omit<
+//   MiniProgramButtonProps,
+//   'size' | 'type' | 'onClick' | 'style'
+// >
 
 export type ButtonType =
   | 'default'
@@ -27,9 +26,11 @@ export type ButtonSize = 'xlarge' | 'large' | 'normal' | 'small' | 'mini'
 export type ButtonShape = 'square' | 'round'
 export type ButtonFill = 'solid' | 'outline' | 'dashed' | 'none'
 
-export interface ButtonProps
-  extends BasicComponent,
-    OmitMiniProgramButtonProps {
+// export interface ButtonProps
+//   extends BasicComponent,
+//     OmitMiniProgramButtonProps {
+
+export interface ButtonProps extends BasicComponent {
   color: string
   shape: ButtonShape
   type: ButtonType
@@ -76,7 +77,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
       children,
       className,
       style,
-      formType,
+      // formType,
       nativeType,
       onClick,
       ...rest
@@ -145,17 +146,18 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
       className
     )
 
-    if (getEnv() === 'WEB') {
-      ;(rest as any).type = formType
-    }
+    // if (getEnv() === 'WEB') {
+    //   ;(rest as any).type = formType
+    // }
     return (
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       // eslint-disable-next-line react/button-has-type
-      <TaroButton
+      // <TaroButton
+      <View
         {...rest}
         ref={ref}
-        formType={formType || nativeType}
+        // formType={formType || nativeType}
         className={buttonClassNames}
         style={{ ...getStyle, ...style }}
         onClick={(e) => handleClick(e as any)}
@@ -175,7 +177,8 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
           )}
           {rightIcon}
         </View>
-      </TaroButton>
+      </View>
+      // </TaroButton>
     )
   }
 )

src/packages/button/button.taro.tsx

@@ -7,14 +7,27 @@ import React, {
 } from 'react'
 import { Input as TaroInput, View } from '@tarojs/components'
 import { MaskClose } from '@nutui/icons-react-taro'
-import Taro, { ENV_TYPE, getEnv } from '@tarojs/taro'
+import Taro, { getEnv } from '@tarojs/taro'
 import { BaseEventOrig } from '@tarojs/components/types/common'
 import { formatNumber } from './utils'
 import { useConfig, useRtl } from '@/packages/configprovider/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/hooks/use-props-value'
 import { InputFormatTrigger, TaroInputProps } from '@/types'
 
+const ENV_TYPE = {
+  WEAPP: 'WEAPP',
+  SWAN: 'SWAN',
+  ALIPAY: 'ALIPAY',
+  TT: 'TT',
+  QQ: 'QQ',
+  JD: 'JD',
+  WEB: 'WEB',
+  RN: 'RN',
+  HARMONY: 'HARMONY',
+  QUICKAPP: 'QUICKAPP',
+}
+
 const defaultProps = {
   ...ComponentDefaults,
   type: 'text',

src/packages/input/input.taro.tsx

@@ -39,8 +39,7 @@ export const Steps: FunctionComponent<
     classPrefix,
     {
       [`${classPrefix}-${direction}`]: true,
-      [`${classPrefix}-${direction}-count-${React.Children.count(children)}`]:
-        true,
+      [`${classPrefix}-${direction}-count-${React.Children.count(children)}`]: true,
       [`${classPrefix}-${direction}-${layout}`]: true,
       [`${classPrefix}-${direction}-${type}`]: true,
       [`${classPrefix}-${direction}-${status}`]: true,

src/packages/steps/steps.taro.tsx

@@ -39,8 +39,7 @@ export const Steps: FunctionComponent<
     classPrefix,
     {
       [`${classPrefix}-${direction}`]: true,
-      [`${classPrefix}-${direction}-count-${React.Children.count(children)}`]:
-        true,
+      [`${classPrefix}-${direction}-count-${React.Children.count(children)}`]: true,
       [`${classPrefix}-${direction}-${layout}`]: true,
       [`${classPrefix}-${direction}-${type}`]: true,
       [`${classPrefix}-${direction}-${status}`]: true,

src/packages/steps/steps.tsx

@@ -1,8 +1,10 @@
 import React, {
   forwardRef,
   MouseEvent,
+  useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react'
@@ -13,7 +15,6 @@ import { nextTick, useReady } from '@tarojs/taro'
 import { useTouch } from '@/hooks/use-touch'
 import { getRectInMultiPlatform } from '@/utils/taro/get-rect'
 import { ComponentDefaults } from '@/utils/typings'
-import { harmony } from '@/utils/taro/platform'
 import { useRefState } from '@/hooks/use-ref-state'
 import { useUuid } from '@/hooks/use-uuid'
 import { PositionX, SwipeRef, TaroSwipeProps } from '@/types'
@@ -45,25 +46,23 @@ export const Swipe = forwardRef<
   const leftId = `swipe-left-${uid}`
   const rightId = `swipe-right-${uid}`
 
+  const getWidth = async () => {
+    if (leftWrapper.current) {
+      const leftRect = await getRectInMultiPlatform(leftWrapper.current, leftId)
+      leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
+    }
+    if (rightWrapper.current) {
+      const rightRect = await getRectInMultiPlatform(
+        rightWrapper.current,
+        rightId
+      )
+      rightRect &&
+        setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
+    }
+  }
+
   // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
   useReady(() => {
-    const getWidth = async () => {
-      if (leftWrapper.current) {
-        const leftRect = await getRectInMultiPlatform(
-          leftWrapper.current,
-          leftId
-        )
-        leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
-      }
-      if (rightWrapper.current) {
-        const rightRect = await getRectInMultiPlatform(
-          rightWrapper.current,
-          rightId
-        )
-        rightRect &&
-          setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
-      }
-    }
     nextTick(() => getWidth())
   })
 
@@ -78,7 +77,6 @@ export const Swipe = forwardRef<
     offset: 0,
     dragging: false,
   })
-
   const [actionWidth, updateState] = useRefState({
     left: 0,
     right: 0,
@@ -98,57 +96,48 @@ export const Swipe = forwardRef<
       })
     }
   }
-  const wrapperStyle = {
-    transform: `translate(${state.offset}${!harmony() ? 'px' : ''}, 0)`,
-    transitionDuration: state.dragging ? '0s' : '.6s',
-  }
-  const onTouchStart = async (event: BaseEventOrig<HTMLDivElement>) => {
-    if (leftWrapper.current) {
-      const leftRect = await getRectInMultiPlatform(leftWrapper.current, leftId)
-      leftRect && setActionWidth((v: any) => ({ ...v, left: leftRect.width }))
-    }
-    if (rightWrapper.current) {
-      const rightRect = await getRectInMultiPlatform(
-        rightWrapper.current,
-        rightId
-      )
-      rightRect &&
-        setActionWidth((v: any) => ({ ...v, right: rightRect.width }))
+  const wrapperStyle = useMemo(() => {
+    return {
+      transform: `translate(${state.offset}px, 0)`,
+      transitionDuration: state.dragging ? '0.01s' : '.6s',
     }
+  }, [state.offset, state.dragging])
+
+  const onTouchStart = async (event: BaseEventOrig<HTMLDivElement>) => {
     if (!props.disabled) {
+      getWidth()
       startOffset.current = state.offset
       touch.start(event)
       props.onTouchStart?.(event)
     }
   }
 
   const onTouchMove = (event: BaseEventOrig<HTMLDivElement>) => {
-    if (props.disabled) {
-      return
-    }
-
+    if (props.disabled) return
     touch.move(event)
     props.onTouchMove?.(event)
     if (touch.isHorizontal()) {
       lockClick.current = true
-      const newState = { ...state, dragging: true }
       const isEdge = !opened || touch.deltaX.current * startOffset.current < 0
       if (isEdge) {
         preventDefault(event, true)
       }
-
-      newState.offset = rangeCalculation(
+      const offset = rangeCalculation(
         touch.deltaX.current + startOffset.current,
         -actionWidth.current.right || 0,
         actionWidth.current.left || 0
       )
-      setState(newState)
+      setState((prevState) => ({
+        ...prevState,
+        dragging: true,
+        offset: Number(offset) || 0,
+      }))
     }
   }
 
   const onTouchEnd = (event: BaseEventOrig<HTMLDivElement>) => {
     if (state.dragging) {
-      setState((v) => ({ ...v, dragging: false }))
+      setState((prevState) => ({ ...prevState, dragging: false }))
       toggle(state.offset > 0 ? 'left' : 'right')
       setTimeout(() => {
         lockClick.current = false
@@ -175,20 +164,30 @@ export const Swipe = forwardRef<
       side === 'left' ? actionWidth.current.left : -actionWidth.current.right
     const name = props.name as number | string
     props.onOpen?.({ name, position: side })
-    setState((v) => ({ ...v, offset: Number(offset) || 0 }))
-  }
 
-  const close = (position?: PositionX) => {
-    if (opened.current) {
-      opened.current = false
-      props.onClose?.({
-        name: props.name as number | string,
-        position: position || 'left',
-      })
-    }
-    setState((v) => ({ ...v, offset: 0 }))
+    setState((prevState) => ({
+      ...prevState,
+      offset: Number(offset) || 0,
+    }))
   }
 
+  const close = useCallback(
+    (position?: PositionX) => {
+      if (opened.current) {
+        opened.current = false
+        props.onClose?.({
+          name: props.name as number | string,
+          position: position || 'left',
+        })
+      }
+      setState((prevState) => ({
+        ...prevState,
+        offset: 0,
+      }))
+    },
+    [props]
+  )
+
   const rangeCalculation = (
     num: number | string,
     min: number | string,
@@ -232,8 +231,7 @@ export const Swipe = forwardRef<
   }))
 
   useEffect(() => {
-    if (harmony()) return
-
+    // 并没有生效
     const handler: any = (event: { target: Node | null }) => {
       const targets = [root]
       if (
@@ -248,11 +246,10 @@ export const Swipe = forwardRef<
     }
 
     document.addEventListener('touchstart', handler)
-
     return () => {
       document.removeEventListener('touchstart', handler)
     }
-  }, [])
+  }, [close])
 
   return (
     <View

src/packages/swipe/swipe.taro.tsx

@@ -96,6 +96,7 @@
     color: #ffffff;
     text-align: $toast-inner-text-align;
     line-height: 20px;
+    height: auto;
   }
 
   &-title {

src/packages/toast/toast.scss

@@ -182,7 +182,7 @@ export const Toast: FunctionComponent<
               {renderIcon()}
               {title && <Text className={`${classPrefix}-title`}>{title}</Text>}
               {content && (
-                <Text className={`${classPrefix}-text`}>{content}</Text>
+                <View className={`${classPrefix}-text`}>{content}</View>
               )}
             </View>
           </View>