feat: 导出组件的 props 类型定义

fjc0k · Aug 22, 2019 · fd7e816 · fd7e816
1 parent 7cbfd8e
commit fd7e816
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 190 deletions.
diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx
@@ -2,15 +2,15 @@ import './index.scss'
 import Taro, { useState } from '@tarojs/taro'
 import { functionalComponent } from '../component'
 import { last } from 'vtils'
-import { NavigationBarProps } from './props'
+import { NavigationBarDefaultProps, NavigationBarProps } from './props'
 import { useCustomNavigationBarFullHeight, useDidEnter, useDidLeave } from '../../hooks'
 import { View } from '@tarojs/components'
 
 function onlyPath(url: string) {
   return url ? url.split('?')[0].replace(/^\/+/, '') : ''
 }
 
-function NavigationBar(props: typeof NavigationBarProps) {
+function NavigationBar(props: NavigationBarProps) {
   const { setCustomNavigationBarFullHeight, resetCustomNavigationBarFullHeight } = useCustomNavigationBarFullHeight()
   const [state, setState] = useState({
     verticalPadding: 0 as number,
@@ -115,4 +115,6 @@ function NavigationBar(props: typeof NavigationBarProps) {
   )
 }
 
-export default functionalComponent(NavigationBarProps)(NavigationBar)
+export { NavigationBarProps }
+
+export default functionalComponent(NavigationBarDefaultProps)(NavigationBar)
diff --git a/src/components/NavigationBar/props.ts b/src/components/NavigationBar/props.ts
@@ -1,6 +1,6 @@
 import { createProps, RequiredProp } from '../component'
 
-export const NavigationBarProps = createProps({
+export const NavigationBarDefaultProps = createProps({
   /**
    * 小程序主页的绝对路径，可带参数。
    *
@@ -24,3 +24,5 @@ export const NavigationBarProps = createProps({
    */
   backgroundColor: 'auto' as string,
 })
+
+export type NavigationBarProps = typeof NavigationBarDefaultProps
diff --git a/src/components/Popup/index.tsx b/src/components/Popup/index.tsx
@@ -1,7 +1,7 @@
 import MTransition from '../Transition'
 import Taro, { useEffect, useState } from '@tarojs/taro'
 import { functionalComponent } from '../component'
-import { MPopupProps, Position, TransitionName } from './props'
+import { MPopupDefaultProps, MPopupProps, Position, TransitionName } from './props'
 import { useCustomNavigationBarFullHeight, useZIndex } from '../../hooks'
 import { View } from '@tarojs/components'
 
@@ -13,7 +13,7 @@ const positionToTransitionName: Record<Position, TransitionName> = {
   right: 'slideRight',
 }
 
-function MPopup(props: typeof MPopupProps) {
+function MPopup(props: MPopupProps) {
   const [transitionEndCount, setTransitionEndCount] = useState(0)
   const [display, setDisplay] = useState(false)
   const { zIndex } = useZIndex()
@@ -82,4 +82,6 @@ function MPopup(props: typeof MPopupProps) {
   )
 }
 
-export default functionalComponent(MPopupProps)(MPopup)
+export { MPopupProps }
+
+export default functionalComponent(MPopupDefaultProps)(MPopup)
diff --git a/src/components/Popup/props.ts b/src/components/Popup/props.ts
@@ -1,11 +1,11 @@
-import MTransition from '../Transition'
 import { createProps, RequiredProp } from '../component'
+import { MTransitionProps } from '../Transition'
 import { noop } from 'vtils'
 
-export type TransitionName = MTransition['props']['name']
+export type TransitionName = MTransitionProps['name']
 export type Position = 'center' | 'top' | 'bottom' | 'right' | 'left'
 
-export const MPopupProps = createProps({
+export const MPopupDefaultProps = createProps({
   /**
    * 弹出层是否可见。
    */
@@ -56,3 +56,5 @@ export const MPopupProps = createProps({
    */
   onVisibleChange: noop as any as RequiredProp<(visible: boolean) => void>,
 })
+
+export type MPopupProps = typeof MPopupDefaultProps
diff --git a/src/components/Sticky/index.tsx b/src/components/Sticky/index.tsx
@@ -1,7 +1,7 @@
 import Taro, { useEffect, useState } from '@tarojs/taro'
 import { EventBus, wait } from 'vtils'
 import { functionalComponent } from '../component'
-import { MStickyProps } from './props'
+import { MStickyDefaultProps, MStickyProps } from './props'
 import { useCustomNavigationBarFullHeight, useDisposer } from '../../hooks'
 import { View } from '@tarojs/components'
 
@@ -11,10 +11,10 @@ const bus = new EventBus<{
 
 let stickyComponentCount = -1
 
-function MSticky(props: typeof MStickyProps) {
-  const [fixed, setFixed] = useState(false)
-  const [contentHeight, setContentHeight] = useState(0)
-  const [stickyComponentIndex] = useState(stickyComponentCount++)
+function MSticky(props: MStickyProps) {
+  const [ fixed, setFixed ] = useState(false)
+  const [ contentHeight, setContentHeight ] = useState(0)
+  const [ stickyComponentIndex ] = useState(stickyComponentCount++)
   const { customNavigationBarFullHeight } = useCustomNavigationBarFullHeight()
   const { addDisposer } = useDisposer()
 
@@ -76,107 +76,6 @@ function MSticky(props: typeof MStickyProps) {
   )
 }
 
-export default functionalComponent(MStickyProps)(MSticky)
+export { MStickyProps }
 
-// /**
-//  * 吸顶组件。
-//  *
-//  * @example
-//  *
-//  * ```jsx
-//  * <MSticky>
-//  *   <View>标题</View>
-//  * </MSticky>
-//  * ```
-//  */
-// export default class MSticky extends component({
-//   props: MStickyProps,
-//   state: {
-//     /** 是否置顶 */
-//     fixed: false as boolean,
-//     /** 内容高度，单位：px */
-//     contentHeight: 0 as number,
-//   },
-// }) {
-//   /** 处置器 */
-//   disposer: Disposer = new Disposer()
-
-//   /** 组件索引 */
-//   index: number = 0
-
-//   componentWillMount() {
-//     this.index = stickyComponents.length
-//     stickyComponents.push(this)
-//     this.disposer.add(() => {
-//       stickyComponents.splice(
-//         stickyComponents.indexOf(this),
-//         1,
-//       )
-//     })
-//   }
-
-//   componentDidMount() {
-//     // 等待一段时间，确保页面渲染已经完成
-//     wait(300).then(() => {
-//       // 获取吸顶内容的高度
-//       wx.createSelectorQuery()
-//         .in(this.$scope)
-//         .select('.m-sticky')
-//         .boundingClientRect(({ height }) => {
-//           this.setState({
-//             contentHeight: height,
-//           })
-
-//           // 监听吸顶内容的位置
-//           const top = -(this.index === 0 ? internalStore.customNavigationBarFullHeight : height)
-//           const intersectionObserver = wx.createIntersectionObserver(this.$scope)
-//           const relativeToViewport = intersectionObserver.relativeToViewport({ top }) as any
-//           relativeToViewport.observe(
-//             '.m-sticky',
-//             (res: wx.ObserveCallbackResult) => {
-//               const fixed = res.intersectionRatio <= 0 && res.boundingClientRect.top < -top
-
-//               this.setState({ fixed })
-
-//               // 切换前一个吸顶组件的状态
-//               if (this.index >= 1) {
-//                 const prevSticky = stickyComponents[this.index - 1]
-//                 if (prevSticky.state.fixed !== fixed) {
-//                   prevSticky.setState({
-//                     fixed: !fixed,
-//                   })
-//                 }
-//               }
-//             },
-//           )
-
-//           // 处置收集
-//           this.disposer.add(
-//             () => intersectionObserver.disconnect(),
-//           )
-//         })
-//         .exec()
-//     })
-//   }
-
-//   componentWillUnmount() {
-//     this.disposer.dispose()
-//   }
-
-//   render() {
-//     const { className } = this.props
-//     const { fixed, contentHeight } = this.state
-
-//     return (
-//       <View
-//         className={`m-sticky ${fixed && 'm-sticky_fixed'} ${className}`}
-//         style={contentHeight ? { height: `${contentHeight}px` } : {}}>
-//         <View
-//           className='m-sticky__content'
-//           style={{ top: `${internalStore.customNavigationBarFullHeight}px` }}>
-//           {this.props.children}
-//         </View>
-//       </View>
-//     )
-//   }
-// }
+export default functionalComponent(MStickyDefaultProps)(MSticky)
diff --git a/src/components/Sticky/props.ts b/src/components/Sticky/props.ts
@@ -1,3 +1,5 @@
 import { createProps } from '../component'
 
-export const MStickyProps = createProps({})
+export const MStickyDefaultProps = createProps({})
+
+export type MStickyProps = typeof MStickyDefaultProps
diff --git a/src/components/Transition/index.tsx b/src/components/Transition/index.tsx
@@ -1,6 +1,6 @@
-import Taro from '@tarojs/taro'
-import { component } from '../component'
-import { MTransitionProps } from './props'
+import Taro, { useEffect, useState } from '@tarojs/taro'
+import { functionalComponent } from '../component'
+import { MTransitionDefaultProps, MTransitionProps } from './props'
 import { View } from '@tarojs/components'
 
 /** 过渡类型 */
@@ -11,73 +11,42 @@ enum TransitionType {
   Leave = 'Leave',
 }
 
-/**
- * 动画过渡组件。
- *
- * @example
- *
- * ```jsx
- * <MTransition name='zoom' visible={visible}>
- *   <View>动画内容</View>
- * </MTransition>
- * ```
- */
-export default class MTransition extends component({
-  props: MTransitionProps,
-  state: {
-    /** 动画类型 */
-    type: TransitionType.Enter as TransitionType,
-    /** 是否展示组件 */
-    display: false as boolean,
-  },
-}) {
-  componentWillMount() {
-    if (this.props.visible) {
-      this.setState({
-        display: true,
-        type: TransitionType.Enter,
-      })
-    } else {
-      this.setState({
-        display: false,
-      })
-    }
-  }
+function MTransition(props: MTransitionProps) {
+  const [type, setType] = useState(TransitionType.Enter)
+  const [display, setDisplay] = useState(false)
 
-  componentWillReceiveProps(nextProps: MTransition['props']) {
-    this.setState(prevState => ({
-      display: prevState.display || nextProps.visible,
-      type: nextProps.visible ? TransitionType.Enter : TransitionType.Leave,
-    }))
-  }
+  useEffect(
+    () => {
+      setType(props.visible ? TransitionType.Enter : TransitionType.Leave)
+      setDisplay(display || props.visible)
+    },
+    [props.visible],
+  )
 
-  handleAnimationEnd = () => {
-    this.setState({
-      display: this.props.visible,
-    })
-    this.props.onTransitionEnd()
+  function handleAnimationEnd() {
+    setDisplay(props.visible)
+    props.onTransitionEnd()
   }
 
-  render() {
-    const { name, duration, className } = this.props
-    const { type, display } = this.state
-
-    const animationName = `m-transition__${name}${type}`
-    const animationDuration = `${duration}ms`
+  const animationName = `m-transition__${props.name}${type}`
+  const animationDuration = `${props.duration}ms`
 
-    return (
-      <View
-        className={`m-transition m-transition__${name} ${className}`}
-        style={{
-          WebkitAnimationName: animationName,
-          WebkitAnimationDuration: animationDuration,
-          animationName: animationName,
-          animationDuration: animationDuration,
-          ...(display ? {} : { display: 'none' }),
-        }}
-        onAnimationEnd={this.handleAnimationEnd}>
-        {this.props.children}
-      </View>
-    )
-  }
+  return (
+    <View
+      className={`m-transition m-transition__${props.name} ${props.className}`}
+      style={{
+        WebkitAnimationName: animationName,
+        WebkitAnimationDuration: animationDuration,
+        animationName: animationName,
+        animationDuration: animationDuration,
+        ...(display ? {} : { display: 'none' }),
+      }}
+      onAnimationEnd={handleAnimationEnd}>
+      {props.children}
+    </View>
+  )
 }
+
+export { MTransitionProps }
+
+export default functionalComponent(MTransitionDefaultProps)(MTransition)
diff --git a/src/components/Transition/props.ts b/src/components/Transition/props.ts
@@ -1,7 +1,7 @@
+import { createProps, RequiredProp } from '../component'
 import { noop } from 'vtils'
-import { RequiredProp } from '../component'
 
-export const MTransitionProps = {
+export const MTransitionDefaultProps = createProps({
   /**
    * 组件是否可见。
    */
@@ -51,4 +51,6 @@ export const MTransitionProps = {
    * @default () => {}
    */
   onTransitionEnd: noop as () => void,
-}
+})
+
+export type MTransitionProps = typeof MTransitionDefaultProps
diff --git a/src/pages/Popup.tsx b/src/pages/Popup.tsx
@@ -6,7 +6,7 @@ import { pageUrls } from '.'
 import { View } from '@tarojs/components'
 import { XBackHome, XNavigationBar } from './components'
 
-type PopupPosition = MPopup['props']['position']
+type PopupPosition = typeof MPopup
 
 const positionList: PopupPosition[] = [
   'bottom',