feat: swipe 组件适配小程序，searchbar 增加 onCancel 回调函数 (#311)

src/config.json

@@ -676,6 +676,7 @@
           "desc": "可以左右滑动来展示操作按钮的组件",
           "sort": 9,
           "show": true,
+          "taro": true,
           "author": "Ymm0008"
         },
         {

src/packages/searchbar/demo.taro.tsx

 import React, { useState } from 'react'
-import { SearchBar, Icon } from '@/packages/nutui.react.taro'
+import { SearchBar, Icon, Toast } from '@/packages/nutui.react.taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 
 type TSearchDemo = {
@@ -65,6 +65,11 @@ const SearchBarDemo = () => {
   const change = (val: string, e: Event) => {
     setValue(val)
   }
+
+  const [show, SetShow] = useState(false)
+  const toastShow = () => {
+    SetShow(true)
+  }
   return (
     <>
       <div className="demo">
@@ -79,7 +84,11 @@ const SearchBarDemo = () => {
           align="right"
         />
         <h2>{translated.title4}</h2>
-        <SearchBar label={translated.text} actionText={translated.test} />
+        <SearchBar
+          label={translated.text}
+          actionText={translated.test}
+          onSearch={() => toastShow()}
+        />
         <h2>{translated.title5}</h2>
         <SearchBar
           leftoutIcon={<Icon name="heart-fill1" size="14" />}
@@ -92,6 +101,14 @@ const SearchBarDemo = () => {
         />
         <span className="val-text">value：{value}</span>
       </div>
+      <Toast
+        type="text"
+        visible={show}
+        msg="搜索"
+        onClose={() => {
+          SetShow(false)
+        }}
+      />
     </>
   )
 }

src/packages/searchbar/demo.tsx

 import React, { useState } from 'react'
 import Icon from '../icon'
 import { SearchBar } from './searchbar'
+import Toast from '../toast'
 import { useTranslate } from '../../sites/assets/locale'
 
 type TSearchDemo = {
@@ -80,7 +81,11 @@ const SearchBarDemo = () => {
           align="right"
         />
         <h2>{translated.title4}</h2>
-        <SearchBar label={translated.text} actionText={translated.test} />
+        <SearchBar
+          label={translated.text}
+          actionText={translated.test}
+          onSearch={() => Toast.text('搜索')}
+        />
         <h2>{translated.title5}</h2>
         <SearchBar
           leftoutIcon={<Icon name="heart-fill1" size="14" />}

src/packages/searchbar/doc.en-US.md

@@ -176,6 +176,7 @@ export default App;
 |onFocus | triggered when focusing | _val: string, event: Event_ |
 |onBlur | triggered when out of focus | _val: string, event: Event_ |
 |onClear | triggered when clicking clear | _event: Event_ |
+|onCancel `v1.3.6`| Fired when the cancel button is clicked | - |
 |onSearch | trigger when confirming search | _val: string, event: Event_ |
 |onClickInput | triggered when clicking the input area | _event: Event_ |
 |onClickLeftinIcon | triggered when clicking the icon on the left side of the input box | _val: string, event: Event_ |

src/packages/searchbar/doc.md

@@ -177,6 +177,7 @@ export default App;
 | onFocus  | 聚焦时触发 | _val: string, event: Event_ |
 | onBlur  | 失焦时触发 | _val: string, event: Event_ |
 | onClear  | 点击清空时触发 | _event: Event_ |
+| onCancel `v1.3.6` | 点击取消按钮时触发 | - |
 | onSearch  | 确定搜索时触发 | _val: string, event: Event_ |
 | onClickInput |	点击输入区域时触发	 |	_event: Event_ |
 | onClickLeftinIcon |	点击输入框`内左侧`图标时触发 |	_val: string, event: Event_ |

src/packages/searchbar/doc.zh-TW.md

@@ -176,6 +176,7 @@ export default App;
 | onFocus |聚焦時觸發| _val: string，event: Event_ |
 | onBlur |失焦時觸發| _val: string，event: Event_ |
 | onClear |點擊清空時觸發| _event: Event_ |
+| onCancel `v1.3.6`| 點擊取消按鈕時觸發 | - |
 | onSearch |確定蒐索時觸發| _val: string，event: Event_ |
 | onClickInput |點擊輸入區域時觸發| _event: Event_ |
 | onClickLeftinIcon |點擊輸入框`內左側`圖標時觸發| _val: string，event: Event_ |

src/packages/searchbar/searchbar.taro.tsx

@@ -53,6 +53,8 @@ export interface SearchBarProps extends IComponent {
   onBlur?: (value: string, event: Event) => void
   /** 点击清除按钮后触发	 */
   onClear?: (event: Event) => void
+  /** 点击取消按钮后触发	 */
+  onCancel?: () => void
   /** 点击输入区域时触发	 */
   onClickInput?: (event: Event) => void
   /** 点击输入框内左侧图标时触发	 */
@@ -111,6 +113,7 @@ export const SearchBar: FunctionComponent<
     onFocus,
     onBlur,
     onClear,
+    onCancel,
     onSearch,
     onClickInput,
     onClickLeftinIcon,
@@ -166,6 +169,7 @@ export const SearchBar: FunctionComponent<
         disabled={disabled}
         readOnly={readOnly}
         maxLength={maxLength}
+        onKeyPress={onKeypress}
         onChange={(e: any) => change(e)}
         onFocus={(e: any) => focus(e)}
         onBlur={(e: any) => blur(e)}
@@ -266,7 +270,7 @@ export const SearchBar: FunctionComponent<
   const renderRightLabel = () => {
     if (actionText) {
       return (
-        <div className={searchbarBem('action-text')} onClick={search}>
+        <div className={searchbarBem('action-text')} onClick={cancel}>
           {actionText}
         </div>
       )
@@ -274,8 +278,18 @@ export const SearchBar: FunctionComponent<
     return null
   }
 
-  const search = () => {
-    onSearch && onSearch(value as string)
+  const onKeypress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      const event = e.nativeEvent
+      if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+        event.preventDefault()
+      }
+      onSearch && onSearch(value as string)
+    }
+  }
+
+  const cancel = () => {
+    onCancel && onCancel()
   }
   const renderLabel = () => {
     if (label) {

src/packages/searchbar/searchbar.tsx

@@ -53,6 +53,8 @@ export interface SearchBarProps extends IComponent {
   onBlur?: (value: string, event: Event) => void
   /** 点击清除按钮后触发	 */
   onClear?: (event: Event) => void
+  /** 点击取消按钮后触发	 */
+  onCancel?: () => void
   /** 点击输入区域时触发	 */
   onClickInput?: (event: Event) => void
   /** 点击输入框内左侧图标时触发	 */
@@ -111,6 +113,7 @@ export const SearchBar: FunctionComponent<
     onFocus,
     onBlur,
     onClear,
+    onCancel,
     onSearch,
     onClickInput,
     onClickLeftinIcon,
@@ -166,6 +169,7 @@ export const SearchBar: FunctionComponent<
         disabled={disabled}
         readOnly={readOnly}
         maxLength={maxLength}
+        onKeyPress={onKeypress}
         onChange={(e: any) => change(e)}
         onFocus={(e: any) => focus(e)}
         onBlur={(e: any) => blur(e)}
@@ -266,7 +270,7 @@ export const SearchBar: FunctionComponent<
   const renderRightLabel = () => {
     if (actionText) {
       return (
-        <div className={searchbarBem('action-text')} onClick={search}>
+        <div className={searchbarBem('action-text')} onClick={cancel}>
           {actionText}
         </div>
       )
@@ -274,8 +278,18 @@ export const SearchBar: FunctionComponent<
     return null
   }
 
-  const search = () => {
-    onSearch && onSearch(value as string)
+  const onKeypress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      const event = e.nativeEvent
+      if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+        event.preventDefault()
+      }
+      onSearch && onSearch(value as string)
+    }
+  }
+
+  const cancel = () => {
+    onCancel && onCancel()
   }
   const renderLabel = () => {
     if (label) {

src/packages/swipe/demo.taro.tsx

 import React, { useRef, useState } from 'react'
-import { SwipeInstance, Swipe } from './swipe.taro'
-import { useTranslate } from '../../sites/assets/locale'
-import Cell from '@/packages/cell/index.taro'
-import Button from '@/packages/button/index.taro'
-import Toast from '@/packages/toast/index.taro'
-import Dialog from '@/packages/dialog/index.taro'
-import InputNumber from '@/packages/inputnumber/index.taro'
+import { useTranslate } from '@/sites/assets/locale/taro'
+import {
+  Button,
+  Cell,
+  Toast,
+  Dialog,
+  InputNumber,
+  Swipe,
+} from '@/packages/nutui.react.taro'
 
 type TSwipeDemo = {
   title1: string
@@ -128,7 +130,7 @@ const SwipeDemo = () => {
     SetShow(true)
   }
 
-  const refDom = useRef<SwipeInstance>(null)
+  const refDom = useRef<any>(null)
   const handleChange = () => {
     // Toast.text(translated.click)
     toastShow(translated.click)
@@ -192,7 +194,6 @@ const SwipeDemo = () => {
           }
           onActionClick={handleChange}
           onOpen={({ name, position }) => {
-            console.log(name, position)
             // Toast.text(translated.open)
             toastShow(translated.open)
           }}

src/packages/swipe/demo.tsx

@@ -184,7 +184,6 @@ const SwipeDemo = () => {
           }
           onActionClick={handleChange}
           onOpen={({ name, position }) => {
-            console.log(name, position)
             Toast.text(translated.open)
           }}
           onClose={handleClose}

src/packages/swipe/swipe.taro.tsx

@@ -4,13 +4,12 @@ import React, {
   useState,
   TouchEvent,
   useMemo,
-  useCallback,
   useImperativeHandle,
   useEffect,
 } from 'react'
 import bem from '@/utils/bem'
 import { useTouch } from '@/utils/useTouch'
-import { getRect } from '@/utils/useClientRect'
+import { getRectByTaro } from '@/utils/useClientRect'
 
 export type SwipeSide = 'left' | 'right'
 export type SwipePosition = SwipeSide | 'cell' | 'outside'
@@ -110,7 +109,16 @@ export const Swipe = forwardRef<
     [props.rightWidth, actionWidth.right]
   )
 
-  const onTouchStart = (event: Event) => {
+  const onTouchStart = async (event: Event) => {
+    if (leftWrapper.current) {
+      const leftRect = await getRectByTaro(leftWrapper.current)
+      setActionWidth((v) => ({ ...v, left: leftRect.width }))
+    }
+    if (rightWrapper.current) {
+      const rightRect = await getRectByTaro(rightWrapper.current)
+      setActionWidth((v) => ({ ...v, right: rightRect.width }))
+    }
+
     if (!props.disabled) {
       startOffset.current = state.offset
       touch.start(event)
@@ -131,11 +139,10 @@ export const Swipe = forwardRef<
       if (isEdge) {
         preventDefault(event, true)
       }
-
       newState.offset = rangeCalculation(
         touch.deltaX + startOffset.current,
-        -rightWidth,
-        leftWidth
+        -rightWidth || 0,
+        leftWidth || 0
       )
 
       setState(newState)
@@ -146,7 +153,6 @@ export const Swipe = forwardRef<
     if (state.dragging) {
       setState((v) => ({ ...v, dragging: false }))
       toggle(state.offset > 0 ? 'left' : 'right')
-
       setTimeout(() => {
         lockClick.current = false
       }, 0)
@@ -192,34 +198,36 @@ export const Swipe = forwardRef<
     return Math.min(Math.max(Number(num), Number(min)), Number(max))
   }
 
-  const getNodeWidth = (node: Element) => {
-    if (node) {
-      const ele = getRect(node)
-      return ele.width
-    }
-    return 0
-  }
-  const leftRef = useCallback(
-    (node: Element | null) => {
-      if (node !== null) {
-        setActionWidth((v) => ({ ...v, left: getNodeWidth(node) }))
-      }
-    },
-    [props.leftAction]
-  )
-  const rightRef = useCallback(
-    (node: Element | null) => {
-      if (node !== null) {
-        setActionWidth((v) => ({ ...v, right: getNodeWidth(node) }))
-      }
-    },
-    [props.rightAction]
-  )
-  const renderActionContent = (side: SwipeSide, measuredRef: any) => {
+  // const getNodeWidth = (node: Element) => {
+  //   if (node) {
+  //     const ele: any = getRectByTaro(node)
+  //     return ele.width
+  //   }
+  //   return 0
+  // }
+  // const leftRef = useCallback(
+  //   (node: Element | null) => {
+  //     if (node !== null) {
+  //       setActionWidth((v) => ({ ...v, left: getNodeWidth(node) }))
+  //     }
+  //   },
+  //   [props.leftAction]
+  // )
+  // const rightRef = useCallback(
+  //   (node: Element | null) => {
+  //     if (node !== null) {
+  //       setActionWidth((v) => ({ ...v, right: getNodeWidth(node) }))
+  //     }
+  //   },
+  //   [props.rightAction]
+  // )
+  const leftWrapper = useRef(null)
+  const rightWrapper = useRef(null)
+  const renderActionContent = (side: SwipeSide) => {
     if (props[`${side}Action`]) {
       return (
         <div
-          ref={measuredRef}
+          ref={side === 'left' ? leftWrapper : rightWrapper}
           className={`${swipeBem(side)}`}
           onClick={(e: any) => handleOperate(e, side)}
         >
@@ -274,9 +282,9 @@ export const Swipe = forwardRef<
       style={style}
     >
       <div className={`${swipeBem('wrapper')}`} style={wrapperStyle}>
-        {renderActionContent('left', leftRef)}
+        {renderActionContent('left')}
         {children}
-        {renderActionContent('right', rightRef)}
+        {renderActionContent('right')}
       </div>
     </div>
   )

src/sites/mobile-taro/src/app.config.ts

@@ -54,6 +54,7 @@ const subPackages = [
       'pages/notify/index',
       'pages/switch/index',
       'pages/toast/index',
+      'pages/swipe/index',
     ],
   },
   {

src/sites/mobile-taro/src/project.config.json

+{
+  "appid": "wx9ac45039b7813c7d",
+  "compileType": "miniprogram",
+  "libVersion": "2.26.0",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "enhance": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmRelationList": [],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    }
+  },
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}
\ No newline at end of file

src/sites/mobile-taro/src/project.private.config.json

+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "src",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}
\ No newline at end of file