feat: mobile add basePopup components

Author: Wxh16144

config/config.ts

@@ -35,8 +35,11 @@ const config: IConfig = {
       'babel-plugin-import',
       {
         libraryName: 'antd-mobile',
-        libraryDirectory: 'es',
-        style: true,
+        libraryDirectory: 'es/components',
+        style: false,
+        customStyleName: (name: string) => {
+          return `antd-mobile/es/components/${name}/${name}.css`
+        },
       },
       'antd-mobile',
     ],

config/menus/mobile.ts

@@ -8,7 +8,9 @@ const mobileComponent: ComponentMenus = {
   navigation: [],
   dataDisplay: [],
   dataEntry: [],
-  feedback: [],
+  feedback: [
+    'src/base-popup',
+  ],
   guidance: [],
   other: [],
 }

package.json

@@ -24,7 +24,8 @@
     "@babel/core": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
     "ahooks": "^3.7.0",
-    "antd": "^4.22.7",
+    "antd": "4.x",
+    "antd-mobile": "5.x",
     "classnames": "^2.3.1",
     "less": "^4.1.3",
     "less-plugin-npm-import": "^2.1.0",

packages/mobile-ui/src/base-popup/demo/Base.tsx

@@ -0,0 +1,29 @@
+import React, { useRef } from 'react'
+import { Button } from 'antd-mobile'
+import type { UseModalEnhancedAction, UseModalEnhancedContext } from '@template-pro/mobile-ui'
+import { BasePopup } from '@template-pro/mobile-ui'
+
+const Content = ({ enhancedAction }: Partial<UseModalEnhancedContext>) => (
+  <div style={{ padding: 24 }}>
+    <h3>这是弹出层内容</h3>
+    <Button onClick={enhancedAction?.close}>
+      点击关闭弹出层
+    </Button>
+  </div>
+)
+
+function App() {
+  const drawerRef = useRef<UseModalEnhancedAction>(null)
+
+  return (
+    <BasePopup
+      content={<Content />}
+      bodyStyle={{ height: '40vh' }}
+      actionRef={drawerRef}
+    >
+      <Button>打开弹出层</Button>
+    </BasePopup>
+  )
+}
+
+export default App

packages/mobile-ui/src/base-popup/demo/Event.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { BasePopup } from '@template-pro/mobile-ui'
+import { Button, Toast } from 'antd-mobile'
+
+export default () => (
+  <>
+    <BasePopup
+      content={<span style={{ height: '10vh', display: 'inline-block' }}>这是弹出层内容</span>}
+      triggerClick={(event, action) => {
+        window.console.log({ event, action })
+        Toast.show({
+          content: '1秒后打开弹出层',
+          icon: 'loading',
+          duration: 1000,
+          afterClose: action.open,
+        })
+      }}
+    >
+      <Button>Click me</Button>
+    </BasePopup>
+  </>
+)

packages/mobile-ui/src/base-popup/index.md

@@ -0,0 +1,9 @@
+# BasePopup
+
+## 基础用法
+
+<code hideActions='["CSB", "EXTERNAL"]' src="./demo/Base.tsx" />
+
+## 通过事件手动控制打开
+
+<code hideActions='["CSB", "EXTERNAL"]' src="./demo/Event.tsx" />

packages/mobile-ui/src/base-popup/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import classNames from 'classnames'
+import type { PopupProps } from 'antd-mobile/es/components/popup'
+import Popup from 'antd-mobile/es/components/popup'
+import type { UseModalEnhancedProps } from '@template-pro/utils'
+import { useModalEnhanced } from '@template-pro/utils'
+import { defaultPrefixCls } from '../constants'
+
+export type BasePopupProps = PopupProps & Omit<UseModalEnhancedProps, 'onClick'> & {
+  triggerClick?: UseModalEnhancedProps['onClick']
+}
+
+const BasePopup = (props: BasePopupProps) => {
+  const {
+    className,
+    onClose,
+    onClick,
+    triggerClick,
+    ...restProps
+  } = props
+
+  const [
+    visible,
+    { close },
+    { trigger, content },
+  ] = useModalEnhanced({ ...restProps, onClick: triggerClick })
+
+  const handlePopupClose = () => {
+    if (onClose)
+      onClose()
+
+    return close()
+  }
+
+  return (
+    <>
+      {trigger}
+      <Popup
+        visible={visible}
+        onClose={handlePopupClose}
+        className={classNames(`${defaultPrefixCls}-base-popup`, className)}
+        destroyOnClose
+        closeOnMaskClick
+        onClick={onClick}
+        {...restProps}
+      >
+        {content}
+      </Popup>
+    </>
+  )
+}
+
+export default BasePopup

packages/mobile-ui/src/base-popup/style/index.less

@@ -0,0 +1,6 @@
+@import (less) '~antd-mobile/es/components/popup/popup.css';
+@import '../../styles/themes/default.less';
+
+.@{cls-prefix}-base-popup {
+ 
+}

packages/mobile-ui/src/base-popup/style/index.tsx

@@ -0,0 +1 @@
+import './index.less'

packages/mobile-ui/src/index.tsx

@@ -1,2 +1,14 @@
 export type { ButtonProps } from './button'
 export { default as Button } from './button'
+
+export type { BasePopupProps } from './base-popup'
+export { default as BasePopup } from './base-popup'
+
+// Third-party library
+export { ConditionInput } from '@template-pro/rc-ui'
+export type { ConditionInputProps, ConditionInputCoverProps } from '@template-pro/rc-ui'
+export type {
+  UseModalEnhancedAction,
+  UseModalEnhancedContext,
+  UseModalEnhancedProps,
+} from '@template-pro/utils'

packages/mobile-ui/src/styles/themes/default.less

@@ -1 +1,3 @@
+@import '~antd-mobile/es/global/global.css';
+
 @cls-prefix: temp-m;