feat: 新增 BottomSheet 组件

package.json

@@ -67,7 +67,7 @@
   "dependencies": {
     "@types/echarts": "^4.1.10",
     "dayjs": "^1.8.15",
-    "vtils": "^2.22.0"
+    "vtils": "^2.24.0"
   },
   "devDependencies": {
     "@tarojs/cli": "1.3.15",

src/components/BottomSheet/index.tsx

@@ -0,0 +1,44 @@
+import MPopup, {MPopupProps} from '../Popup'
+import Taro, {useEffect, useState} from '@tarojs/taro'
+import {functionalComponent} from '../component'
+import {MBottomSheetDefaultProps, MBottomSheetProps} from './props'
+import {View} from '@tarojs/components'
+
+function MBottomSheet(props: MBottomSheetProps) {
+  const [visible, setVisible] = useState<boolean>(false)
+
+  useEffect(
+    () => {
+      setVisible(props.visible)
+    },
+    [props.visible],
+  )
+
+  const handleVisibleChange: MPopupProps['onVisibleChange'] = visible => {
+    setVisible(visible)
+    props.onVisibleChange(visible)
+  }
+
+  function handleTriggerClick() {
+    handleVisibleChange(!visible)
+  }
+
+  return props.disabled ? props.children : (
+    <View className={props.className}>
+      <View onClick={handleTriggerClick}>
+        {props.children}
+      </View>
+      <MPopup
+        position='bottom'
+        visible={visible}
+        maskClosable={props.maskClosable}
+        onVisibleChange={handleVisibleChange}>
+        {props.renderMain}
+      </MPopup>
+    </View>
+  )
+}
+
+export {MBottomSheetProps}
+
+export default functionalComponent(MBottomSheetDefaultProps)(MBottomSheet)

src/components/BottomSheet/props.ts

@@ -0,0 +1,32 @@
+import {createProps, RequiredProp} from '../component'
+import {MPopupDefaultProps} from '../Popup/props'
+import {partial, pick} from 'vtils'
+
+export const MBottomSheetDefaultProps = {
+  ...partial(pick(
+    MPopupDefaultProps,
+    ['visible', 'onVisibleChange'],
+  )),
+  ...createProps({
+    /**
+     * 主体内容。
+     */
+    renderMain: null as any as RequiredProp<React.ReactNode>,
+
+    /**
+     * 是否可点击遮罩关闭。
+     *
+     * @default true
+     */
+    maskClosable: true as boolean,
+
+    /**
+     * 是否禁用。
+     *
+     * @default false
+     */
+    disabled: false as boolean,
+  }),
+}
+
+export type MBottomSheetProps = typeof MBottomSheetDefaultProps

src/components/Picker/index.tsx

@@ -1,7 +1,7 @@
 import MPickerHeader from '../PickerHeader'
 import MPickerView from '../PickerView'
-import MPopup from '../Popup'
 import Taro, {useEffect, useRef, useState} from '@tarojs/taro'
+import XBottomSheet from '../BottomSheet'
 import {functionalComponent} from '../component'
 import {MPickerDefaultProps, MPickerProps} from './props'
 import {View} from '@tarojs/components'
@@ -18,10 +18,6 @@ function MPicker(props: MPickerProps) {
     [props.selectedIndexes],
   )
 
-  function handleTriggerClick() {
-    setVisible(!visible)
-  }
-
   function handleVisibleChange(visible: boolean) {
     setVisible(visible)
     if (!visible) {
@@ -57,15 +53,8 @@ function MPicker(props: MPickerProps) {
   }
 
   return props.disabled ? props.children : (
-    <View className={props.className}>
-      <View onClick={handleTriggerClick}>
-        {props.children}
-      </View>
-      <MPopup
-        position='bottom'
-        visible={visible}
-        maskClosable={props.maskClosable}
-        onVisibleChange={handleVisibleChange}>
+    <XBottomSheet
+      renderMain={(
         <View className='m-picker'>
           <MPickerHeader
             {...props}
@@ -80,8 +69,11 @@ function MPicker(props: MPickerProps) {
             onChange={handlePickChange}
           />
         </View>
-      </MPopup>
-    </View>
+      )}
+      visible={visible}
+      onVisibleChange={handleVisibleChange}>
+      {props.children}
+    </XBottomSheet>
   )
 }
 

src/components/Picker/props.ts

@@ -1,4 +1,5 @@
 import {createProps, RequiredProp} from '../component'
+import {MBottomSheetDefaultProps} from '../BottomSheet/props'
 import {MPickerHeaderDefaultProps} from '../PickerHeader/props'
 import {MPickerViewDefaultProps} from '../PickerView/props'
 import {noop, omit} from 'vtils'
@@ -12,14 +13,11 @@ export const MPickerDefaultProps = {
     MPickerHeaderDefaultProps,
     ['onCancel', 'onConfirm'],
   ),
+  ...omit(
+    MBottomSheetDefaultProps,
+    ['renderMain'],
+  ),
   ...createProps({
-    /**
-     * 是否可点击遮罩关闭。
-     *
-     * @default true
-     */
-    maskClosable: true as boolean,
-
     /**
      * 点击取消事件。
      *

src/components/component.ts

@@ -1,11 +1,7 @@
 import Taro from '@tarojs/taro'
-import {Merge, Omit} from 'vtils'
+import {Merge, PartialBy} from 'vtils'
 
-type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
-type RequiredProp<T = any> = {
-  __REQUIRED__: true,
-  __TYPE__: T,
-}
+type RequiredProp<T = any> = { ____TYPE____: T }
 
 const functionalComponent = <P extends Record<string, any>>(props: P, disableGlobalClass = false) => (
   <T extends Taro.FunctionComponent<P>>(component: T): T => {

yarn.lock

@@ -10407,9 +10407,9 @@ vtils@^0.85.0:
   dependencies:
     is-chinese-phone-number "^0.1.9"
 
-vtils@^2.22.0:
-  version "2.22.0"
-  resolved "https://registry.yarnpkg.com/vtils/-/vtils-2.22.0.tgz#76a6b20c795e0fa980cbfc56104d82cfb125367d"
+vtils@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/vtils/-/vtils-2.24.0.tgz#be16dd9d7892299893fbab9bfb4baee80cfef978"
 
 walkdir@0.0.11:
   version "0.0.11"