feat: 新增 tour 引导组件 (#1279)

jdf2e · Aug 8, 2023 · d1fbd55 · d1fbd55
1 parent 8214cc6
commit d1fbd55
Show file tree

Hide file tree

Showing 32 changed files with 2,811 additions and 5 deletions.
diff --git a/src/config.json b/src/config.json
@@ -1058,6 +1058,17 @@
           "taro": true,
           "author": "lzz"
         },
+        {
+          "version": "2.0.0",
+          "name": "Tour",
+          "type": "component",
+          "cName": "引导",
+          "desc": "用于引导用户了解产品功能的气泡组件。自 4.0 版本开始提供该组件。",
+          "sort": 24,
+          "show": true,
+          "taro": true,
+          "author": "swag~jun"
+        },
         {
           "version": "2.0.0",
           "name": "Video",

diff --git a/src/locales/base.ts b/src/locales/base.ts
@@ -126,6 +126,11 @@ export interface BaseLang {
     refreshingText: string
     completeText: string
   }
+  tour: {
+    prevStepText: string
+    completeText: string
+    nextStepText: string
+  }
   watermark: {
     errorCanvasTips: string
   }

diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
@@ -125,6 +125,11 @@ const enUS: BaseLang = {
     refreshingText: 'Loading...',
     completeText: 'Refresh successful',
   },
+  tour: {
+    prevStepText: 'Previous',
+    completeText: 'Finish',
+    nextStepText: 'Next step',
+  },
   watermark: {
     errorCanvasTips: 'Canvas is not supported in the current environment',
   },

diff --git a/src/locales/id-ID.ts b/src/locales/id-ID.ts
@@ -126,6 +126,11 @@ const idID: BaseLang = {
     refreshingText: 'Memuat...',
     completeText: 'Penyegaran berhasil',
   },
+  tour: {
+    prevStepText: 'Sebelumnya',
+    completeText: 'Menyelesaikan',
+    nextStepText: 'Langkah berikutnya',
+  },
   watermark: {
     errorCanvasTips: 'Canvas is not supported in the current environment',
   },

diff --git a/src/locales/tr-TR.ts b/src/locales/tr-TR.ts
@@ -134,6 +134,11 @@ const trTR: BaseLang = {
     refreshingText: 'Yükleniyor...',
     completeText: 'Yenileme başarılı',
   },
+  tour: {
+    prevStepText: 'Sonraki adım',
+    completeText: 'Sona ermek',
+    nextStepText: 'Sonraki adım',
+  },
   watermark: {
     errorCanvasTips: 'Geçerli ortam Canvası desteklemiyor',
   },

diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
@@ -126,6 +126,11 @@ const zhCN: BaseLang = {
     refreshingText: '加载中...',
     completeText: '刷新成功',
   },
+  tour: {
+    prevStepText: '上一步',
+    completeText: '完成',
+    nextStepText: '下一步',
+  },
   watermark: {
     errorCanvasTips: '当前环境不支持Canvas',
   },

diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts
@@ -124,6 +124,11 @@ const zhTW: BaseLang = {
     refreshingText: '加載中...',
     completeText: '刷新成功',
   },
+  tour: {
+    prevStepText: '上一步',
+    completeText: '完成',
+    nextStepText: '下一步',
+  },
   watermark: {
     errorCanvasTips: '當前環境不支持Canvas',
   },

diff --git a/src/locales/zh-UG.ts b/src/locales/zh-UG.ts
@@ -124,6 +124,11 @@ const zhUG: BaseLang = {
     refreshingText: 'يېڭىلىنىۋاتىدۇ...',
     completeText: 'تامام',
   },
+  tour: {
+    prevStepText: 'ئالدىنقى',
+    completeText: 'تامام',
+    nextStepText: 'كېيىنكى قەدەم',
+  },
   watermark: {
     errorCanvasTips: 'Canvas نى قوللىمايدۇ',
   },

diff --git a/src/packages/popover/doc.en-US.md b/src/packages/popover/doc.en-US.md
@@ -498,6 +498,7 @@ export default App
 | visible | whether to show | `boolean` | `false` |
 | location | The pop-up position, the specific parameter values inside can refer to the above position customization example | `string` | `bottom` |
 | offset | the offset of the occurrence position | `string[]` \| `number[]` | `[0, 12]` |
+| arrowOffset | the offset of the arrow | `number` | `0` |
 | showArrow | whether to show small arrows | `boolean` | `true` |
 | closeOnActionClick | Whether to close when clicking action | `boolean` | `true` |
 | closeOnOutsideClick | Whether to close when clicking outside | `boolean` | `true` |

diff --git a/src/packages/popover/doc.md b/src/packages/popover/doc.md
@@ -503,6 +503,7 @@ export default App
 | visible | 是否展示气泡弹出层 | `boolean` | `false` |
 | location | 弹出位置，里面具体的参数值可以参考上面的位置自定义例子 | `string` | `bottom` |
 | offset | 出现位置的偏移量 | `string[]` \| `number[]` | `[0, 12]` |
+| arrowOffset | 小箭头的偏移量 | `number` | `0` |
 | showArrow | 是否显示小箭头 | `boolean` | `true` |
 | closeOnActionClick | 是否在点击选项后关闭 | `boolean` | `true` |
 | closeOnOutsideClick | 是否在点击外部元素后关闭菜单 | `boolean` | `true` |

diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx
@@ -39,6 +39,7 @@ export interface PopoverProps extends PopupProps {
   location: PopoverLocation | string
   visible: boolean
   offset: string[] | number[]
+  arrowOffset: number
   targetId: string
   showArrow: boolean
   closeOnOutsideClick: boolean
@@ -56,6 +57,7 @@ const defaultProps = {
   location: 'bottom',
   visible: false,
   offset: [0, 12],
+  arrowOffset: 0,
   targetId: '',
   className: '',
   showArrow: true,
@@ -83,6 +85,7 @@ export const Popover: FunctionComponent<
     closeOnActionClick,
     className,
     showArrow,
+    arrowOffset,
     style,
     onClick,
     onOpen,
@@ -252,6 +255,40 @@ export const Popover: FunctionComponent<
     return styles
   }
 
+  const popoverArrowStyle = () => {
+    const styles: CSSProperties = {}
+    const direction = location.split('-')[0]
+    const skew = location.split('-')[1]
+    const base = 16
+
+    if (props.arrowOffset !== 0) {
+      if (['bottom', 'top'].includes(direction)) {
+        if (!skew) {
+          styles.left = `calc(50% + ${arrowOffset}px)`
+        }
+        if (skew === 'start') {
+          styles.left = `${base + arrowOffset}px`
+        }
+        if (skew === 'end') {
+          styles.right = `${base - arrowOffset}px`
+        }
+      }
+
+      if (['left', 'right'].includes(direction)) {
+        if (!skew) {
+          styles.top = `calc(50% - ${arrowOffset}px)`
+        }
+        if (skew === 'start') {
+          styles.top = `${base - arrowOffset}px`
+        }
+        if (skew === 'end') {
+          styles.bottom = `${base + arrowOffset}px`
+        }
+      }
+    }
+    return styles
+  }
+
   const handleSelect = (item: List, index: number) => {
     if (!item.disabled) {
       onSelect && onSelect(item, index)
@@ -289,7 +326,9 @@ export const Popover: FunctionComponent<
           {...rest}
         >
           <div className="nut-popover-content-group" ref={popoverContentRef}>
-            {showArrow && <div className={popoverArrow()} />}
+            {showArrow && (
+              <div className={popoverArrow()} style={popoverArrowStyle()} />
+            )}
             {Array.isArray(children) ? children[1] : ''}
             {list.map((item, index) => {
               return (
@@ -311,7 +350,7 @@ export const Popover: FunctionComponent<
             })}
           </div>
         </Popup>
-        {showPopup && (
+        {showPopup && closeOnOutsideClick && (
           <div
             className="nut-popover-content-bg"
             onClick={clickAway}

diff --git a/src/packages/popover/popover.tsx b/src/packages/popover/popover.tsx
@@ -39,6 +39,7 @@ export interface PopoverProps extends PopupProps {
   location: PopoverLocation | string
   visible: boolean
   offset: string[] | number[]
+  arrowOffset: number
   targetId: string
   showArrow: boolean
   closeOnOutsideClick: boolean
@@ -56,6 +57,7 @@ const defaultProps = {
   location: 'bottom',
   visible: false,
   offset: [0, 12],
+  arrowOffset: 0,
   targetId: '',
   showArrow: true,
   closeOnOutsideClick: true,
@@ -76,6 +78,7 @@ export const Popover: FunctionComponent<
     location,
     visible,
     offset,
+    arrowOffset,
     targetId,
     overlay,
     closeOnOutsideClick,
@@ -234,6 +237,40 @@ export const Popover: FunctionComponent<
     return styles
   }
 
+  const popoverArrowStyle = () => {
+    const styles: CSSProperties = {}
+    const direction = location.split('-')[0]
+    const skew = location.split('-')[1]
+    const base = 16
+
+    if (props.arrowOffset !== 0) {
+      if (['bottom', 'top'].includes(direction)) {
+        if (!skew) {
+          styles.left = `calc(50% + ${arrowOffset}px)`
+        }
+        if (skew === 'start') {
+          styles.left = `${base + arrowOffset}px`
+        }
+        if (skew === 'end') {
+          styles.right = `${base - arrowOffset}px`
+        }
+      }
+
+      if (['left', 'right'].includes(direction)) {
+        if (!skew) {
+          styles.top = `calc(50% - ${arrowOffset}px)`
+        }
+        if (skew === 'start') {
+          styles.top = `${base - arrowOffset}px`
+        }
+        if (skew === 'end') {
+          styles.bottom = `${base + arrowOffset}px`
+        }
+      }
+    }
+    return styles
+  }
+
   const handleSelect = (item: List, index: number) => {
     if (!item.disabled) {
       onSelect && onSelect(item, index)
@@ -271,7 +308,9 @@ export const Popover: FunctionComponent<
           {...rest}
         >
           <div className="nut-popover-content-group" ref={popoverContentRef}>
-            {showArrow && <div className={popoverArrow()} />}
+            {showArrow && (
+              <div className={popoverArrow()} style={popoverArrowStyle()} />
+            )}
             {Array.isArray(children) ? children[1] : ''}
             {list.map((item, index) => {
               return (

diff --git a/src/packages/switch/switch.taro.tsx b/src/packages/switch/switch.taro.tsx
@@ -27,6 +27,7 @@ export const Switch: FunctionComponent<Partial<SwitchProps>> = (props) => {
     className,
     style,
     onChange,
+    ...rest
   } = {
     ...defaultProps,
     ...props,
@@ -50,7 +51,12 @@ export const Switch: FunctionComponent<Partial<SwitchProps>> = (props) => {
     setValue(!value)
   }
   return (
-    <div className={classes()} onClick={(e) => onClick(e)} style={style}>
+    <div
+      className={classes()}
+      onClick={(e) => onClick(e)}
+      style={style}
+      {...rest}
+    >
       <div className="switch-button">
         {!value && <div className="close-line" />}
         {activeText && (

diff --git a/src/packages/switch/switch.tsx b/src/packages/switch/switch.tsx
@@ -27,6 +27,7 @@ export const Switch: FunctionComponent<Partial<SwitchProps>> = (props) => {
     className,
     style,
     onChange,
+    ...rest
   } = {
     ...defaultProps,
     ...props,
@@ -50,7 +51,12 @@ export const Switch: FunctionComponent<Partial<SwitchProps>> = (props) => {
     setValue(!value)
   }
   return (
-    <div className={classes()} onClick={(e) => onClick(e)} style={style}>
+    <div
+      className={classes()}
+      onClick={(e) => onClick(e)}
+      style={style}
+      {...rest}
+    >
       <div className="switch-button">
         {!value && <div className="close-line" />}
         {activeText && (

diff --git a/src/packages/tabbaritem/tabbaritem.taro.tsx b/src/packages/tabbaritem/tabbaritem.taro.tsx
@@ -49,6 +49,7 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
     top,
     right,
     handleClick,
+    ...rest
   } = {
     ...defaultProps,
     ...props,
@@ -79,6 +80,7 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
         ...style,
       }}
       onClick={() => handleClick(index)}
+      {...rest}
     >
       {icon ? (
         <>

diff --git a/src/packages/tabbaritem/tabbaritem.tsx b/src/packages/tabbaritem/tabbaritem.tsx
@@ -49,6 +49,7 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
     top,
     right,
     handleClick,
+    ...rest
   } = {
     ...defaultProps,
     ...props,
@@ -79,6 +80,7 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
         ...style,
       }}
       onClick={() => handleClick(index)}
+      {...rest}
     >
       {icon ? (
         <>