Feat/lg917 (#7)

feat: 添加popup组件

packages/vantui-demo/src/pages/demo2/index.tsx

@@ -1,7 +1,7 @@
 import { View, Button } from '@tarojs/components'
 import { useEffect, useState } from 'react'
 import { useDidHide, useDidShow } from '@tarojs/taro'
-import { Popup } from '@antmjs/vantui'
+import { Popup, Steps, Stepper } from '@antmjs/vantui'
 
 import './index.less'
 
@@ -24,7 +24,37 @@ export default function Index() {
   return (
     <View className="pages-index-index">
       <Button onClick={() => setShow(!show)}>点我</Button>
-      <Popup show={show} position="bottom">
+      <Stepper value={5} min={5} max={8} />
+      <Steps
+        active={2}
+        steps={[
+          {
+            text: '步骤一',
+            desc: '描述信息',
+            inactiveIcon: 'location-o',
+            activeIcon: 'success',
+          },
+          {
+            text: '步骤二',
+            desc: '描述信息',
+            inactiveIcon: 'like-o',
+            activeIcon: 'plus',
+          },
+          {
+            text: '步骤三',
+            desc: '描述信息',
+            inactiveIcon: 'star-o',
+            activeIcon: 'cross',
+          },
+          {
+            text: '步骤四',
+            desc: '描述信息',
+            inactiveIcon: 'phone-o',
+            activeIcon: 'fail',
+          },
+        ]}
+      />
+      <Popup show={show} position="bottom" onClose={() => setShow(false)}>
         <View>
           <View>不是设计开发不贷款分不开的</View>
           <View>不是设计开发不贷款分不开的</View>

packages/vantui/src/mixins/transition.ts → packages/vantui/src/components/mixins/transition.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { isObj } from './../components/common/validator'
-import { TransitionProps } from './../../types/mixins/transition'
+import { isObj } from './../../components/common/validator'
+import { TransitionProps } from './../../../types/mixins/transition'
 const getClassNames = (name: string) => ({
   enter: `van-${name}-enter van-${name}-enter-active enter-class enter-active-class`,
   'enter-to': `van-${name}-enter-to van-${name}-enter-active enter-to-class enter-active-class`,
@@ -11,12 +11,12 @@ export function useTransition({
   show = false,
   duration = 300,
   name = 'fade',
-  beforeEnter,
-  beforeLeave,
-  afterEnter,
-  afterLeave,
-  enter,
-  leave,
+  onBeforeEnter,
+  onBeforeLeave,
+  onAfterEnter,
+  onAfterLeave,
+  onEnter,
+  onLeave,
 }: TransitionProps) {
   const transitionEnded = useRef(false)
   const status = useRef('')
@@ -30,28 +30,28 @@ export function useTransition({
     }
     transitionEnded.current = true
     if (status.current === 'enter') {
-      afterEnter?.()
+      onAfterEnter?.()
     } else {
-      afterLeave?.()
+      onAfterLeave?.()
     }
 
     if (!show && display) {
       // this.setData({ display: false })
       setDisplay(false)
     }
-  }, [afterEnter, afterLeave, display, show])
+  }, [display, onAfterEnter, onAfterLeave, show])
   const _enter = useCallback(() => {
     // const { duration, name } = this.data
     const classNames = getClassNames(name)
     const currentDuration = isObj(duration) ? (duration as any).enter : duration
     status.current = 'enter'
     // this.$emit('before-enter')
-    beforeEnter?.()
+    onBeforeEnter?.()
     requestAnimationFrame(() => {
       if (status.current !== 'enter') {
         return
       }
-      enter?.()
+      onEnter?.()
       setInited(true)
       setDisplay(true)
       setClasses(classNames.enter)
@@ -64,7 +64,7 @@ export function useTransition({
         setClasses(classNames['enter-to'])
       })
     })
-  }, [beforeEnter, duration, enter, name])
+  }, [duration, name, onBeforeEnter, onEnter])
   const _leave = useCallback(() => {
     if (!display) {
       return
@@ -73,13 +73,13 @@ export function useTransition({
     const classNames = getClassNames(name)
     const currentDuration = isObj(duration) ? (duration as any).leave : duration
     status.current = 'leave'
-    beforeLeave?.()
+    onBeforeLeave?.()
     requestAnimationFrame(() => {
       if (status.current !== 'leave') {
         return
       }
       // this.$emit('leave')
-      leave?.()
+      onLeave?.()
       setClasses(classNames.leave)
       setCurrentDuration(currentDuration)
 
@@ -92,7 +92,7 @@ export function useTransition({
         setClasses(classNames['leave-to'])
       })
     })
-  }, [beforeLeave, display, duration, leave, name, onTransitionEnd])
+  }, [display, duration, name, onBeforeLeave, onLeave, onTransitionEnd])
   useEffect(() => {
     show ? _enter() : _leave()
   }, [_enter, _leave, show])

packages/vantui/src/components/overlay/index.tsx

@@ -11,33 +11,20 @@ export default function Index(props: OverlayProps) {
     lockScroll = true,
     duration = 300,
     children,
-    onClick,
+    ...others
   } = props
   const noop = useCallback((event) => {
     event.stopPropagation()
     event.preventDefault()
   }, [])
-  // className={
-  //   computed.rootClass({
-  //     classPrefix,
-  //     name,
-  //   }) + ` ${className}`
-  // }
-  // style={utils.style([
-  //   computed.rootStyle({
-  //     customStyle,
-  //     color,
-  //     size,
-  //   }),
-  //   style,
-  // ])}
   return lockScroll ? (
     <VanTransition
       show={show}
       className={'van-overlay' + `  ${className}`}
       style={utils.style([{ 'z-index': zIndex }, style])}
       duration={duration}
       onTouchMove={noop}
+      {...others}
     >
       {children}
     </VanTransition>
@@ -47,7 +34,7 @@ export default function Index(props: OverlayProps) {
       className={'van-overlay' + `  ${className}`}
       style={utils.style([{ 'z-index': zIndex }, style])}
       duration={duration}
-      onClick={(e) => onClick?.(e)}
+      {...others}
     >
       {children}
     </VanTransition>

packages/vantui/src/components/popup/index.tsx

@@ -5,14 +5,13 @@ import * as utils from '../wxs/utils'
 import { PopupProps } from '../../../types/popup'
 import VanIcon from './../icon'
 import * as computed from './wxs'
-import { useTransition } from './../../mixins/transition'
+import { useTransition } from './../mixins/transition'
 import VanOverlay from './../overlay'
 
 export default function Index(this: any, props: PopupProps) {
   const {
     show,
-    duration,
-    name,
+    duration = 300,
     round,
     closeable,
     overlayStyle,
@@ -27,30 +26,30 @@ export default function Index(this: any, props: PopupProps) {
     safeAreaInsetTop = false,
     lockScroll = true,
     children,
-    clickOverlay,
-    beforeEnter,
-    beforeLeave,
-    afterEnter,
-    afterLeave,
-    enter,
-    leave,
-    close,
+    onClickOverlay,
+    onBeforeEnter,
+    onBeforeLeave,
+    onAfterEnter,
+    onAfterLeave,
+    onEnter,
+    onLeave,
+    onClose,
     style,
     className,
     ...others
   } = props
   const onClickCloseIcon = useCallback(() => {
-    close?.()
-  }, [close])
-  const onClickOverlay = useCallback(() => {
-    clickOverlay?.()
+    onClose?.()
+  }, [onClose])
+  const _onClickOverlay = useCallback(() => {
+    onClickOverlay?.()
     if (closeOnClickOverlay) {
-      close?.()
+      onClose?.()
     }
-  }, [clickOverlay, close, closeOnClickOverlay])
+  }, [closeOnClickOverlay, onClickOverlay, onClose])
 
-  const [_name, setName] = useState(name)
-  const [_duration, setDuration] = useState(0)
+  const [_name, setName] = useState<any>('')
+  const [_duration, setDuration] = useState(duration)
   const originDuration = useRef<any>(null)
 
   useEffect(() => {
@@ -62,18 +61,17 @@ export default function Index(this: any, props: PopupProps) {
       setDuration(originDuration.current)
     }
   }, [duration, position, transition])
-
   const { inited, currentDuration, classes, display, onTransitionEnd } =
     useTransition({
       show,
       duration: _duration,
       name: _name,
-      beforeEnter,
-      beforeLeave,
-      afterEnter,
-      afterLeave,
-      enter,
-      leave,
+      onBeforeEnter,
+      onBeforeLeave,
+      onAfterEnter,
+      onAfterLeave,
+      onEnter,
+      onLeave,
     })
 
   // observeShow(value, old) {
@@ -91,7 +89,7 @@ export default function Index(this: any, props: PopupProps) {
           zIndex={zIndex}
           style={overlayStyle}
           duration={duration}
-          onClick={onClickOverlay}
+          onClick={_onClickOverlay}
           lockScroll={lockScroll}
         />
       )}
@@ -101,23 +99,24 @@ export default function Index(this: any, props: PopupProps) {
             'custom-class ' +
             classes +
             ' ' +
-            className +
-            ' ' +
             utils.bem('popup', [
               position,
               {
                 round,
                 safe: safeAreaInsetBottom,
                 safeTop: safeAreaInsetTop,
               },
-            ])
+            ]) +
+            `  ${className}`
           }
-          style={computed.popupStyle({
-            zIndex,
-            currentDuration,
-            display,
+          style={utils.style([
+            computed.popupStyle({
+              zIndex,
+              currentDuration,
+              display,
+            }),
             style,
-          })}
+          ])}
           onTransitionEnd={onTransitionEnd}
           {...others}
         >
@@ -131,7 +130,6 @@ export default function Index(this: any, props: PopupProps) {
                 closeIconPosition
               }
               onClick={onClickCloseIcon}
-              info={null}
             ></VanIcon>
           )}
         </View>

packages/vantui/src/components/popup/wxs.ts

@@ -9,7 +9,6 @@ function popupStyle(data: any) {
       'transition-duration': data.currentDuration + 'ms',
     },
     data.display ? null : 'display: none',
-    data.customStyle,
   ])
 }
 export { popupStyle }