From 43067932ea736dcc76dcb7b6a0f2bb86ad233806 Mon Sep 17 00:00:00 2001 From: Yang Date: Wed, 13 Dec 2023 18:18:16 +0800 Subject: [PATCH 1/6] fix: dumi tarojs config --- site/.dumirc.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/site/.dumirc.ts b/site/.dumirc.ts index 13a0c6d1d..4d50f1f33 100644 --- a/site/.dumirc.ts +++ b/site/.dumirc.ts @@ -16,6 +16,7 @@ export default defineConfig({ 'zarm/lib': path.resolve(__dirname, '../packages/zarm/src'), 'zarm/es': path.resolve(__dirname, '../packages/zarm/src'), zarm: require.resolve('../packages/zarm/src/index.ts'), + '@tarojs/taro': '@tarojs/taro-h5', ['@tarojs/components$']: '@tarojs/components/lib/react', }, extraBabelPlugins: [ @@ -48,4 +49,15 @@ export default defineConfig({ autoAlias: {}, prefersColor: { default: 'auto' }, }, + define: { + 'process.env.TARO_ENV': JSON.stringify('h5'), + ENABLE_INNER_HTML: JSON.stringify(false), + ENABLE_ADJACENT_HTML: JSON.stringify(false), + ENABLE_SIZE_APIS: JSON.stringify(false), + ENABLE_TEMPLATE_CONTENT: JSON.stringify(false), + ENABLE_CLONE_NODE: JSON.stringify(false), + ENABLE_CONTAINS: JSON.stringify(false), + ENABLE_MUTATION_OBSERVER: JSON.stringify(false), + DEPRECATED_ADAPTER_COMPONENT: JSON.stringify(false), + } }); From ece9be422a459e8eeff3d740bb122afb1cbf8526 Mon Sep 17 00:00:00 2001 From: Yang Date: Thu, 14 Dec 2023 17:13:52 +0800 Subject: [PATCH 2/6] chore: modal mini --- packages/mini-demo/order.json | 2 +- packages/mini-demo/src/app.config.ts | 1 + .../pages/checkbox/component/custom-icon.tsx | 37 +++ .../src/pages/checkbox/component/custom.tsx | 73 ++++++ .../src/pages/modal/component/alert.tsx | 57 +++++ .../src/pages/modal/component/basic.tsx | 224 ++++++++++++++++++ .../src/pages/modal/component/button.tsx | 70 ++++++ .../mini-demo/src/pages/modal/index.config.ts | 3 + packages/mini-demo/src/pages/modal/index.scss | 0 packages/mini-demo/src/pages/modal/index.tsx | 17 ++ packages/mini-demo/src/site.ts | 5 + .../src/checkbox/demo/custom-icon.mini.tsx | 37 +++ .../zarm/src/checkbox/demo/custom.mini.tsx | 73 ++++++ packages/zarm/src/modal/Alert.tsx | 1 + packages/zarm/src/modal/Modal.mini.tsx | 123 ++++++++++ packages/zarm/src/modal/demo/alert.mini.tsx | 57 +++++ packages/zarm/src/modal/demo/basic.mini.tsx | 224 ++++++++++++++++++ packages/zarm/src/modal/demo/button.mini.tsx | 70 ++++++ packages/zarm/src/modal/index.mini.ts | 17 ++ packages/zarm/src/modal/style/index.mini.scss | 2 + packages/zarm/src/modal/style/index.mini.ts | 4 + packages/zarm/src/popup/Popup.tsx | 4 +- packages/zarm/src/utils/dom/dom.mini.ts | 19 ++ 23 files changed, 1117 insertions(+), 3 deletions(-) create mode 100644 packages/mini-demo/src/pages/checkbox/component/custom-icon.tsx create mode 100644 packages/mini-demo/src/pages/checkbox/component/custom.tsx create mode 100644 packages/mini-demo/src/pages/modal/component/alert.tsx create mode 100644 packages/mini-demo/src/pages/modal/component/basic.tsx create mode 100644 packages/mini-demo/src/pages/modal/component/button.tsx create mode 100644 packages/mini-demo/src/pages/modal/index.config.ts create mode 100644 packages/mini-demo/src/pages/modal/index.scss create mode 100644 packages/mini-demo/src/pages/modal/index.tsx create mode 100644 packages/zarm/src/checkbox/demo/custom-icon.mini.tsx create mode 100644 packages/zarm/src/checkbox/demo/custom.mini.tsx create mode 100644 packages/zarm/src/modal/Modal.mini.tsx create mode 100644 packages/zarm/src/modal/demo/alert.mini.tsx create mode 100644 packages/zarm/src/modal/demo/basic.mini.tsx create mode 100644 packages/zarm/src/modal/demo/button.mini.tsx create mode 100644 packages/zarm/src/modal/index.mini.ts create mode 100644 packages/zarm/src/modal/style/index.mini.scss create mode 100644 packages/zarm/src/modal/style/index.mini.ts diff --git a/packages/mini-demo/order.json b/packages/mini-demo/order.json index 8f23290e8..f7b596f53 100644 --- a/packages/mini-demo/order.json +++ b/packages/mini-demo/order.json @@ -1 +1 @@ -{"input":{"AutoHeight":"6","Basic":"1","Clearable":"2","Disabled":"5","Native":"3","ReadOnly":"4","ShowLength":"7","Vertical":"8","Readonly":"4","Disable":0},"swipe-action":{"Basic":0}} +{"input":{"AutoHeight":"6","Basic":"1","Clearable":"2","Disabled":"5","Native":"3","ReadOnly":"4","ShowLength":"7","Vertical":"8","Readonly":"4","Disable":0},"swipe-action":{"Basic":0},"modal":{"Basic":"1","Button":"2","Alert":"1"}} diff --git a/packages/mini-demo/src/app.config.ts b/packages/mini-demo/src/app.config.ts index df9ea8bc8..6d2c6b572 100644 --- a/packages/mini-demo/src/app.config.ts +++ b/packages/mini-demo/src/app.config.ts @@ -8,6 +8,7 @@ export default defineAppConfig({ 'pages/tabs/index', 'pages/input/index', 'pages/swipe-action/index', + 'pages/modal/index', ], window: { backgroundTextStyle: 'light', diff --git a/packages/mini-demo/src/pages/checkbox/component/custom-icon.tsx b/packages/mini-demo/src/pages/checkbox/component/custom-icon.tsx new file mode 100644 index 000000000..daaa562f2 --- /dev/null +++ b/packages/mini-demo/src/pages/checkbox/component/custom-icon.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { List, Checkbox, Panel } from 'zarm/mini'; +import { Star, StarFill, Success, Close } from '@zarm-design/icons'; + +/* order: 6 */ + +const Demo = () => { + return ( + + + + + + checked ? : + } + > + 选项一 + + + checked ? : + } + > + 选项二 + + 选项三 + + + + + ) +} + +export default Demo; diff --git a/packages/mini-demo/src/pages/checkbox/component/custom.tsx b/packages/mini-demo/src/pages/checkbox/component/custom.tsx new file mode 100644 index 000000000..ff1675394 --- /dev/null +++ b/packages/mini-demo/src/pages/checkbox/component/custom.tsx @@ -0,0 +1,73 @@ +import React, { useState, useRef } from 'react'; +import { List, Checkbox, Panel } from 'zarm/mini'; +import { Success } from '@zarm-design/icons'; +import { View } from '@tarojs/components'; + +/* order: 6 */ + +const items = ['选项一', '选项二', '选项三']; + +const Demo = () => { + const [value, setValue] = useState(['0']); + + const onChange = (v) => { + console.log('onChange', v); + setValue(v); + }; + + const CustomCheckbox = (props) => { + return ( + + {({ checked }) => ( + + + + + {props.label} + + )} + + ); + }; + return ( + + + + + {items.map((item, index) => ( + + ))} + + + + + ); +}; + +export default Demo; diff --git a/packages/mini-demo/src/pages/modal/component/alert.tsx b/packages/mini-demo/src/pages/modal/component/alert.tsx new file mode 100644 index 000000000..a596c7e84 --- /dev/null +++ b/packages/mini-demo/src/pages/modal/component/alert.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { List, Button, Modal, Panel } from 'zarm/mini'; +import { View } from '@tarojs/components'; + +/* order: 1 */ + +const Demo = () => { + return ( + + + { + Modal.alert({ + className: 'test', + title: '警告框标题', + content: '这里是警告框的内容部分', + onConfirm: () => { + console.log('点击确认'); + }, + }); + }} + > + 开启 + + } + /> + { + Modal.alert({ + title: '警告框标题', + content: '这里是警告框的内容部分，点击关闭按钮，将触发 Promise 关闭警告框', + onConfirm: async () => { + await new Promise((resolve) => setTimeout(resolve, 3000)); + // Toast.show({ content: '提交成功' }); + }, + }); + }} + > + 开启 + + } + /> + + + + ); +}; + +export default Demo; \ No newline at end of file diff --git a/packages/mini-demo/src/pages/modal/component/basic.tsx b/packages/mini-demo/src/pages/modal/component/basic.tsx new file mode 100644 index 000000000..b14fb73a3 --- /dev/null +++ b/packages/mini-demo/src/pages/modal/component/basic.tsx @@ -0,0 +1,224 @@ +import React, { useRef, useReducer } from 'react'; +import { Modal, List, Button, Panel } from 'zarm/mini'; +import { View } from '@tarojs/components'; + +/* order: 1 */ + +const initState = { + normal: { + visible: false, + }, + hasFooter: { + visible: false, + }, + closable: { + visible: false, + }, + onlyBody: { + visible: false, + }, + animation: { + visible: false, + animationType: 'fade', + }, + customContainer: { + visible: false, + }, + overlength: { + visible: false, + }, +}; + +const reducer = (state, action) => { + const { type, key, animationType } = action; + + switch (type) { + case 'visible': + return { + ...state, + [key]: { + ...state[key], + visible: !state[key].visible, + }, + }; + + case 'animation': + return { + ...state, + [key]: { + ...state[key], + animationType, + }, + }; + + default: + } +}; + +const Demo = () => { + const myRef = useRef(); + const [state, dispatch] = useReducer(reducer, initState); + + const toggle = (key) => dispatch({ type: 'visible', key }); + + return ( + + + toggle('normal')}> + 开启 + + } + /> + toggle('hasFooter')}> + 开启 + + } + /> + toggle('closable')}> + 开启 + + } + /> + toggle('onlyBody')}> + 开启 + + } + /> + {/* toggle('animation')}> + 开启 + + } + > */} + {/* data && `${data.label}（${data.value}）`} + displayRender={(selected) => selected.map((item) => item && item.label)} + onConfirm={(selected) => { + dispatch({ + type: 'animation', + key: 'animation', + animationType: selected[0], + }); + }} + /> + */} + toggle('customContainer')}> + 开启 + + } + > + 挂载到指定 DOM 节点 + + toggle('overlength')}> + 开启 + + } + > + 超长内容 + + + +
+ + toggle('normal')}> + 模态框内容 + + + toggle('hasFooter')}> + 确定 + + } + > + 模态框内容 + + + toggle('closable')} + > + 点击遮罩层关闭 + + + toggle('onlyBody')}> + 无头部，无底部 + + + toggle('animation')} + > + + 当前使用的动画类型animationType：{state.animation.animationType} + + + + toggle('customContainer')} + mountContainer={() => myRef.current} + > + 挂载到指定dom节点 + + + toggle('overlength')} + maskClosable + > + {Array.from(Array(100).fill(0)).map((_, index) => ( +
+ 模态框内容 +
+
+ ))} + + + ); +}; + +export default Demo; \ No newline at end of file diff --git a/packages/zarm/src/modal/demo/button.mini.tsx b/packages/zarm/src/modal/demo/button.mini.tsx new file mode 100644 index 000000000..f1fa87c7b --- /dev/null +++ b/packages/zarm/src/modal/demo/button.mini.tsx @@ -0,0 +1,70 @@ +import React, { useState } from 'react'; +import { Modal, List, Button, Panel } from 'zarm/mini'; + +/* order: 2 */ + +const Demo = () => { + const [visible, setVisible] = useState(false); + const toggle = () => setVisible(!visible); + + return ( + + + + 开启 + + } + /> + + + { + switch (action.key) { + case 'cancel': + toggle(); + break; + default: + // 模拟异步操作 + await new Promise((resolve) => setTimeout(resolve, 3000)); + toggle(); + } + console.log(action); + }} + > + 模态框内容 + + + ); +}; + +export default Demo; \ No newline at end of file diff --git a/packages/zarm/src/modal/index.mini.ts b/packages/zarm/src/modal/index.mini.ts new file mode 100644 index 000000000..01a53694c --- /dev/null +++ b/packages/zarm/src/modal/index.mini.ts @@ -0,0 +1,17 @@ +import attachPropertiesToComponent from '../utils/attachPropertiesToComponent'; +import { alert } from './Alert'; +import { confirm } from './Confirm'; +import { clear, show } from './methods'; +import Modal from './Modal'; + +export type { ModalAlertProps } from './Alert'; +export type { ModalConfirmProps } from './Confirm'; +export type { ModalShowProps } from './methods'; +export type { ModalCssVars, ModalProps } from './Modal'; + +export default attachPropertiesToComponent(Modal, { + show, + clear, + alert, + confirm, +}); \ No newline at end of file diff --git a/packages/zarm/src/modal/style/index.mini.scss b/packages/zarm/src/modal/style/index.mini.scss new file mode 100644 index 000000000..f7e6e5afd --- /dev/null +++ b/packages/zarm/src/modal/style/index.mini.scss @@ -0,0 +1,2 @@ +@import '../../style/core/index'; +@import 'component'; diff --git a/packages/zarm/src/modal/style/index.mini.ts b/packages/zarm/src/modal/style/index.mini.ts new file mode 100644 index 000000000..b568eebb0 --- /dev/null +++ b/packages/zarm/src/modal/style/index.mini.ts @@ -0,0 +1,4 @@ +import '../../loading/style'; +import '../../popup/style'; +import '../../style'; +import './index.scss'; \ No newline at end of file diff --git a/packages/zarm/src/popup/Popup.tsx b/packages/zarm/src/popup/Popup.tsx index dd127dc8b..f3f0cfc1b 100644 --- a/packages/zarm/src/popup/Popup.tsx +++ b/packages/zarm/src/popup/Popup.tsx @@ -55,10 +55,10 @@ const Popup = React.forwardRef((props, ref) => { }, []); const handleClick = (event: React.MouseEvent) => { - if (nodeRef.current !== event.target && nodeRef.current.contains(event.target as HTMLElement)) { + if (nodeRef.current !== event.target && nodeRef?.current?.contains?.(event.target as HTMLElement)) { return; } - maskRef.current?.click(); + onMaskClick?.(); }; const transitionName = animationType ?? TRANSITION_NAMES[direction!]; diff --git a/packages/zarm/src/utils/dom/dom.mini.ts b/packages/zarm/src/utils/dom/dom.mini.ts index c7e26d137..ef42a3671 100644 --- a/packages/zarm/src/utils/dom/dom.mini.ts +++ b/packages/zarm/src/utils/dom/dom.mini.ts @@ -23,3 +23,22 @@ export const getRects = ( }); }); }; + +/* global WechatMiniprogram */ +/* global getCurrentPages */ + +type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance; + +export const getInstance = function (context?: Context, selector?: string) { + if (!context) { + const pages = getCurrentPages(); + const page = pages[pages.length - 1]; + context = page.$$basePage || page; + } + const instance = context ? context.selectComponent(selector) : null; + if (!instance) { + console.warn('未找到组件,请检查selector是否正确'); + return null; + } + return instance; +}; \ No newline at end of file From f7c3b55dd9b8e1f744f4fa91f03cc3b1b35ea71c Mon Sep 17 00:00:00 2001 From: Yang Date: Tue, 19 Dec 2023 18:27:51 +0800 Subject: [PATCH 3/6] chore: modal mini --- packages/mini-demo/order.json | 2 +- packages/mini-demo/src/app.config.ts | 1 + packages/mini-demo/src/app.scss | 4 + .../pages/checkbox/component/custom-icon.tsx | 37 --------- .../src/pages/checkbox/component/custom.tsx | 73 ----------------- .../src/pages/loading/component/basic.tsx | 13 +++ .../src/pages/loading/component/spinner.tsx | 13 +++ .../src/pages/loading/index.config.ts | 3 + .../mini-demo/src/pages/loading/index.scss | 0 .../mini-demo/src/pages/loading/index.tsx | 15 ++++ .../src/pages/modal/component/alert.tsx | 7 +- .../src/pages/modal/component/basic.tsx | 9 +- .../src/pages/modal/component/confrim.tsx | 60 ++++++++++++++ packages/mini-demo/src/pages/modal/index.tsx | 4 +- packages/mini-demo/src/site.ts | 5 ++ .../src/checkbox/demo/custom-icon.mini.tsx | 37 --------- .../zarm/src/checkbox/demo/custom.mini.tsx | 73 ----------------- packages/zarm/src/loading/demo/basic.mini.tsx | 13 +++ .../zarm/src/loading/demo/spinner.mini.tsx | 13 +++ packages/zarm/src/loading/index.mini.ts | 6 ++ packages/zarm/src/loading/index.tsx | 15 +--- packages/zarm/src/loading/interface.ts | 11 +++ packages/zarm/src/loading/loading.mini.tsx | 82 +++++++++++++++++++ .../zarm/src/loading/style/index.mini.scss | 34 ++++++++ packages/zarm/src/loading/style/index.mini.ts | 2 + packages/zarm/src/modal/Alert.mini.tsx | 39 +++++++++ packages/zarm/src/modal/Alert.tsx | 1 - packages/zarm/src/modal/Confirm.mini.tsx | 59 +++++++++++++ packages/zarm/src/modal/Modal.mini.tsx | 63 +++++++------- packages/zarm/src/modal/Modal.tsx | 24 +----- packages/zarm/src/modal/ModalAction.mini.tsx | 45 ++++++++++ packages/zarm/src/modal/demo/alert.mini.tsx | 7 +- packages/zarm/src/modal/demo/basic.mini.tsx | 9 +- packages/zarm/src/modal/demo/confrim.mini.tsx | 60 ++++++++++++++ packages/zarm/src/modal/index.mini.ts | 15 ++-- packages/zarm/src/modal/index.ts | 3 +- packages/zarm/src/modal/interface.ts | 22 +++++ packages/zarm/src/modal/methods.mini.tsx | 38 +++++++++ packages/zarm/src/modal/style/index.mini.ts | 2 +- packages/zarm/src/utils/dom/dom.mini.ts | 44 ++++++---- 40 files changed, 628 insertions(+), 335 deletions(-) delete mode 100644 packages/mini-demo/src/pages/checkbox/component/custom-icon.tsx delete mode 100644 packages/mini-demo/src/pages/checkbox/component/custom.tsx create mode 100644 packages/mini-demo/src/pages/loading/component/basic.tsx create mode 100644 packages/mini-demo/src/pages/loading/component/spinner.tsx create mode 100644 packages/mini-demo/src/pages/loading/index.config.ts create mode 100644 packages/mini-demo/src/pages/loading/index.scss create mode 100644 packages/mini-demo/src/pages/loading/index.tsx create mode 100644 packages/mini-demo/src/pages/modal/component/confrim.tsx delete mode 100644 packages/zarm/src/checkbox/demo/custom-icon.mini.tsx delete mode 100644 packages/zarm/src/checkbox/demo/custom.mini.tsx create mode 100644 packages/zarm/src/loading/demo/basic.mini.tsx create mode 100644 packages/zarm/src/loading/demo/spinner.mini.tsx create mode 100644 packages/zarm/src/loading/index.mini.ts create mode 100644 packages/zarm/src/loading/loading.mini.tsx create mode 100644 packages/zarm/src/loading/style/index.mini.scss create mode 100644 packages/zarm/src/loading/style/index.mini.ts create mode 100644 packages/zarm/src/modal/Alert.mini.tsx create mode 100644 packages/zarm/src/modal/Confirm.mini.tsx create mode 100644 packages/zarm/src/modal/ModalAction.mini.tsx create mode 100644 packages/zarm/src/modal/demo/confrim.mini.tsx create mode 100644 packages/zarm/src/modal/methods.mini.tsx diff --git a/packages/mini-demo/order.json b/packages/mini-demo/order.json index f7b596f53..146e93683 100644 --- a/packages/mini-demo/order.json +++ b/packages/mini-demo/order.json @@ -1 +1 @@ -{"input":{"AutoHeight":"6","Basic":"1","Clearable":"2","Disabled":"5","Native":"3","ReadOnly":"4","ShowLength":"7","Vertical":"8","Readonly":"4","Disable":0},"swipe-action":{"Basic":0},"modal":{"Basic":"1","Button":"2","Alert":"1"}} +{"input":{"AutoHeight":"6","Basic":"1","Clearable":"2","Disabled":"5","Native":"3","ReadOnly":"4","ShowLength":"7","Vertical":"8","Readonly":"4","Disable":0},"swipe-action":{"Basic":0},"modal":{"Basic":"1","Button":"2","Alert":"3","Confrim":"3"},"loading":{"Basic":0,"Spinner":0}} diff --git a/packages/mini-demo/src/app.config.ts b/packages/mini-demo/src/app.config.ts index 6d2c6b572..0800d7875 100644 --- a/packages/mini-demo/src/app.config.ts +++ b/packages/mini-demo/src/app.config.ts @@ -9,6 +9,7 @@ export default defineAppConfig({ 'pages/input/index', 'pages/swipe-action/index', 'pages/modal/index', + 'pages/loading/index', ], window: { backgroundTextStyle: 'light', diff --git a/packages/mini-demo/src/app.scss b/packages/mini-demo/src/app.scss index c2d08aa0e..8ae1faad8 100644 --- a/packages/mini-demo/src/app.scss +++ b/packages/mini-demo/src/app.scss @@ -1,3 +1,7 @@ page { height: 100%; } + +View { + box-sizing: border-box; +} diff --git a/packages/mini-demo/src/pages/checkbox/component/custom-icon.tsx b/packages/mini-demo/src/pages/checkbox/component/custom-icon.tsx deleted file mode 100644 index daaa562f2..000000000 --- a/packages/mini-demo/src/pages/checkbox/component/custom-icon.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { List, Checkbox, Panel } from 'zarm/mini'; -import { Star, StarFill, Success, Close } from '@zarm-design/icons'; - -/* order: 6 */ - -const Demo = () => { - return ( - - - - - - checked ? : - } - > - 选项一 - - - checked ? : - } - > - 选项二 - - 选项三 - - - - - ) -} - -export default Demo; diff --git a/packages/mini-demo/src/pages/checkbox/component/custom.tsx b/packages/mini-demo/src/pages/checkbox/component/custom.tsx deleted file mode 100644 index ff1675394..000000000 --- a/packages/mini-demo/src/pages/checkbox/component/custom.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React, { useState, useRef } from 'react'; -import { List, Checkbox, Panel } from 'zarm/mini'; -import { Success } from '@zarm-design/icons'; -import { View } from '@tarojs/components'; - -/* order: 6 */ - -const items = ['选项一', '选项二', '选项三']; - -const Demo = () => { - const [value, setValue] = useState(['0']); - - const onChange = (v) => { - console.log('onChange', v); - setValue(v); - }; - - const CustomCheckbox = (props) => { - return ( - - {({ checked }) => ( - - - - - {props.label} - - )} - - ); - }; - return ( - - - - - {items.map((item, index) => ( - - ))} - - - - - ); -}; - -export default Demo; diff --git a/packages/mini-demo/src/pages/loading/component/basic.tsx b/packages/mini-demo/src/pages/loading/component/basic.tsx new file mode 100644 index 000000000..9b84bee8d --- /dev/null +++ b/packages/mini-demo/src/pages/loading/component/basic.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { List, Loading } from 'zarm/mini'; + +const Demo =() => { + return ( + + } /> + } /> + + ); +} + +export default Demo; \ No newline at end of file diff --git a/packages/mini-demo/src/pages/loading/component/spinner.tsx b/packages/mini-demo/src/pages/loading/component/spinner.tsx new file mode 100644 index 000000000..f47cd713b --- /dev/null +++ b/packages/mini-demo/src/pages/loading/component/spinner.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { List, Loading } from 'zarm/mini'; + +const Demo =() => { + return ( + + } /> + } /> + + ); +} + +export default Demo; \ No newline at end of file diff --git a/packages/mini-demo/src/pages/loading/index.config.ts b/packages/mini-demo/src/pages/loading/index.config.ts new file mode 100644 index 000000000..f740c6423 --- /dev/null +++ b/packages/mini-demo/src/pages/loading/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: 'Loading' +}) \ No newline at end of file diff --git a/packages/mini-demo/src/pages/loading/index.scss b/packages/mini-demo/src/pages/loading/index.scss new file mode 100644 index 000000000..e69de29bb diff --git a/packages/mini-demo/src/pages/loading/index.tsx b/packages/mini-demo/src/pages/loading/index.tsx new file mode 100644 index 000000000..d554ee087 --- /dev/null +++ b/packages/mini-demo/src/pages/loading/index.tsx @@ -0,0 +1,15 @@ + +import * as React from 'react'; +import Basic from './component/basic'; +import Spinner from './component/spinner'; + +import './index.scss'; + +export default () => { + return ( + <> + + + + ) +} \ No newline at end of file diff --git a/packages/mini-demo/src/pages/modal/component/alert.tsx b/packages/mini-demo/src/pages/modal/component/alert.tsx index a596c7e84..f32e5807d 100644 --- a/packages/mini-demo/src/pages/modal/component/alert.tsx +++ b/packages/mini-demo/src/pages/modal/component/alert.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { List, Button, Modal, Panel } from 'zarm/mini'; -import { View } from '@tarojs/components'; -/* order: 1 */ +/* order: 3 */ const Demo = () => { return ( @@ -15,6 +14,7 @@ const Demo = () => { size="xs" onClick={() => { Modal.alert({ + id: 'alert', className: 'test', title: '警告框标题', content: '这里是警告框的内容部分', @@ -35,6 +35,7 @@ const Demo = () => { size="xs" onClick={() => { Modal.alert({ + id: 'alert', title: '警告框标题', content: '这里是警告框的内容部分，点击关闭按钮，将触发 Promise 关闭警告框', onConfirm: async () => { @@ -49,7 +50,7 @@ const Demo = () => { } /> - + ); }; diff --git a/packages/mini-demo/src/pages/modal/component/basic.tsx b/packages/mini-demo/src/pages/modal/component/basic.tsx index b14fb73a3..53ba6c5ea 100644 --- a/packages/mini-demo/src/pages/modal/component/basic.tsx +++ b/packages/mini-demo/src/pages/modal/component/basic.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useReducer } from 'react'; +import React, { useReducer } from 'react'; import { Modal, List, Button, Panel } from 'zarm/mini'; import { View } from '@tarojs/components'; @@ -56,7 +56,6 @@ const reducer = (state, action) => { }; const Demo = () => { - const myRef = useRef(); const [state, dispatch] = useReducer(reducer, initState); const toggle = (key) => dispatch({ type: 'visible', key }); @@ -152,8 +151,6 @@ const Demo = () => { -
- toggle('normal')}> 模态框内容 @@ -194,14 +191,14 @@ const Demo = () => { - toggle('customContainer')} mountContainer={() => myRef.current} > 挂载到指定dom节点 - + */} { + return ( + + + { + Modal.confirm({ + id: 'confirm', + title: '确认信息', + content: '这里是确认框的内容部分', + onCancel: () => { + console.log('点击cancel'); + }, + onConfirm: () => { + console.log('点击ok'); + }, + }); + }} + > + 开启 + + } + /> + { + Modal.confirm({ + id: 'confirm', + title: '确定要删除吗？', + content: '这里是确认框的内容部分，点击确定按钮，将触发 Promise 关闭确认框', + onConfirm: async () => { + await new Promise((resolve) => setTimeout(resolve, 3000)); + // Toast.show({ content: '提交成功' }); + }, + }); + }} + > + 开启 + + } + /> + + + + ); +}; + +export default Demo; \ No newline at end of file diff --git a/packages/mini-demo/src/pages/modal/index.tsx b/packages/mini-demo/src/pages/modal/index.tsx index 2d2a8fe5d..4e47dbad2 100644 --- a/packages/mini-demo/src/pages/modal/index.tsx +++ b/packages/mini-demo/src/pages/modal/index.tsx @@ -3,15 +3,17 @@ import * as React from 'react'; import Alert from './component/alert'; import Basic from './component/basic'; import Button from './component/button'; +import Confrim from './component/confrim'; import './index.scss'; export default () => { return ( <> - + } + /> + { + Modal.confirm({ + id: 'confirm', + title: '确定要删除吗？', + content: '这里是确认框的内容部分，点击确定按钮，将触发 Promise 关闭确认框', + onConfirm: async () => { + await new Promise((resolve) => setTimeout(resolve, 3000)); + // Toast.show({ content: '提交成功' }); + }, + }); + }} + > + 开启 + + } + /> + + + + ); +}; + +export default Demo; \ No newline at end of file diff --git a/packages/zarm/src/modal/index.mini.ts b/packages/zarm/src/modal/index.mini.ts index 01a53694c..2287a49e5 100644 --- a/packages/zarm/src/modal/index.mini.ts +++ b/packages/zarm/src/modal/index.mini.ts @@ -1,13 +1,14 @@ import attachPropertiesToComponent from '../utils/attachPropertiesToComponent'; -import { alert } from './Alert'; -import { confirm } from './Confirm'; -import { clear, show } from './methods'; -import Modal from './Modal'; +import { alert } from './Alert.mini'; +import { confirm } from './Confirm.mini'; +import { clear, show } from './methods.mini'; +import Modal from './Modal.mini'; -export type { ModalAlertProps } from './Alert'; -export type { ModalConfirmProps } from './Confirm'; +export type { ModalAlertProps } from './Alert.mini'; +export type { ModalConfirmProps } from './Confirm.mini'; export type { ModalShowProps } from './methods'; -export type { ModalCssVars, ModalProps } from './Modal'; +export type { ModalProps } from './Modal.mini'; +export type { ModalCssVars } from './interface'; export default attachPropertiesToComponent(Modal, { show, diff --git a/packages/zarm/src/modal/index.ts b/packages/zarm/src/modal/index.ts index 7037c5ef0..1576e9bdf 100644 --- a/packages/zarm/src/modal/index.ts +++ b/packages/zarm/src/modal/index.ts @@ -7,7 +7,8 @@ import Modal from './Modal'; export type { ModalAlertProps } from './Alert'; export type { ModalConfirmProps } from './Confirm'; export type { ModalShowProps } from './methods'; -export type { ModalCssVars, ModalProps } from './Modal'; +export type { ModalProps } from './Modal'; +export type { ModalCssVars } from './interface'; export default attachPropertiesToComponent(Modal, { show, diff --git a/packages/zarm/src/modal/interface.ts b/packages/zarm/src/modal/interface.ts index c1a09ac41..3940d3c88 100644 --- a/packages/zarm/src/modal/interface.ts +++ b/packages/zarm/src/modal/interface.ts @@ -19,3 +19,25 @@ export interface BaseModalActionProps { bold?: boolean; onClick?: () => void; } + +export interface ModalCssVars { + '--background'?: React.CSSProperties['background']; + '--border-radius'?: React.CSSProperties['borderRadius']; + '--shadow'?: React.CSSProperties['boxShadow']; + '--title-font-size'?: React.CSSProperties['fontSize']; + '--title-font-weight'?: React.CSSProperties['fontWeight']; + '--title-text-color'?: React.CSSProperties['color']; + '--close-size'?: React.CSSProperties['fontSize']; + '--close-color'?: React.CSSProperties['color']; + '--close-active-color'?: React.CSSProperties['color']; + '--body-font-size'?: React.CSSProperties['fontSize']; + '--body-text-color'?: React.CSSProperties['color']; + '--body-padding'?: React.CSSProperties['padding']; + '--button-height'?: React.CSSProperties['height']; + '--button-font-size'?: React.CSSProperties['fontSize']; + '--button-font-weight'?: React.CSSProperties['fontWeight']; + '--button-text-color'?: React.CSSProperties['color']; + '--button-background'?: React.CSSProperties['background']; + '--button-active-background'?: React.CSSProperties['background']; + '--button-disabled-opacity'?: React.CSSProperties['opacity']; +} \ No newline at end of file diff --git a/packages/zarm/src/modal/methods.mini.tsx b/packages/zarm/src/modal/methods.mini.tsx new file mode 100644 index 000000000..9e9a56c07 --- /dev/null +++ b/packages/zarm/src/modal/methods.mini.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import { ImperativeHandler } from '../utils/dom'; +import { ModalProps } from './Modal.mini'; +import { getCustomEventsPath, customEvents } from '../utils/dom/dom.mini'; + +export interface ModalShowProps + extends Omit { + content?: React.ReactNode; + id: string; +} + +export type ModalShowHandler = Pick; + +const closeFn = new Set<() => void>(); + +export const show = (props: ModalShowProps) => { + const path = getCustomEventsPath(props.id); + + customEvents.trigger(path, { + ...props, + visible: true, + }); + + const close = () => { + customEvents.trigger(path, { + ...props, + visible: false, + }); + } + closeFn.add(close); + return { + close, + }; +}; + +export const clear = () => { + closeFn.forEach((close) => close()); +}; diff --git a/packages/zarm/src/modal/style/index.mini.ts b/packages/zarm/src/modal/style/index.mini.ts index b568eebb0..240bd4650 100644 --- a/packages/zarm/src/modal/style/index.mini.ts +++ b/packages/zarm/src/modal/style/index.mini.ts @@ -1,4 +1,4 @@ -import '../../loading/style'; +import '../../loading/style/index.mini'; import '../../popup/style'; import '../../style'; import './index.scss'; \ No newline at end of file diff --git a/packages/zarm/src/utils/dom/dom.mini.ts b/packages/zarm/src/utils/dom/dom.mini.ts index ef42a3671..06bd768c2 100644 --- a/packages/zarm/src/utils/dom/dom.mini.ts +++ b/packages/zarm/src/utils/dom/dom.mini.ts @@ -1,8 +1,9 @@ -import Taro from '@tarojs/taro'; +import { useEffect } from 'react' +import { Events, getCurrentInstance, createSelectorQuery } from '@tarojs/taro' export const getRect = (id): Promise => { return new Promise((resolve) => { - Taro.createSelectorQuery() + createSelectorQuery() .select(`#${id}`) .boundingClientRect() .exec(([rect]) => { @@ -15,7 +16,7 @@ export const getRects = ( query: string, ): Promise => { return new Promise((resolve) => { - Taro.createSelectorQuery() + createSelectorQuery() .selectAll(query) .boundingClientRect() .exec(([rect]) => { @@ -24,21 +25,30 @@ export const getRects = ( }); }; -/* global WechatMiniprogram */ -/* global getCurrentPages */ +export const customEvents = new Events(); -type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance; +export function getCustomEventsPath(selector?: string) { + selector = selector || '' + const path = getCurrentInstance().router?.path; + return path ? `${path}_${selector}` : selector; +} -export const getInstance = function (context?: Context, selector?: string) { - if (!context) { - const pages = getCurrentPages(); - const page = pages[pages.length - 1]; - context = page.$$basePage || page; +export function useCustomEvent(selector: string, callback: any) { + const path = getCustomEventsPath(selector); + useEffect(() => { + customEvents.on(path, callback); + return () => { + customEvents.off(path); + } + }, []); + + const trigger = (args: T) => { + customEvents.trigger(path, args); } - const instance = context ? context.selectComponent(selector) : null; - if (!instance) { - console.warn('未找到组件,请检查selector是否正确'); - return null; + + const off = () => { + customEvents.off(path); } - return instance; -}; \ No newline at end of file + + return [trigger, off]; +} From 3eaff71801f851f215998cd80ecab4719ae24278 Mon Sep 17 00:00:00 2001 From: Yang Date: Tue, 19 Dec 2023 19:15:03 +0800 Subject: [PATCH 4/6] chore: modal mini --- packages/mini-demo/src/app.scss | 2 +- packages/mini-demo/src/pages/loading/index.scss | 3 +++ packages/mini-demo/src/pages/modal/index.scss | 3 +++ packages/zarm/src/loading/style/index.mini.scss | 2 +- 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/mini-demo/src/app.scss b/packages/mini-demo/src/app.scss index 8ae1faad8..9e84a282b 100644 --- a/packages/mini-demo/src/app.scss +++ b/packages/mini-demo/src/app.scss @@ -2,6 +2,6 @@ page { height: 100%; } -View { +view { box-sizing: border-box; } diff --git a/packages/mini-demo/src/pages/loading/index.scss b/packages/mini-demo/src/pages/loading/index.scss index e69de29bb..c2d08aa0e 100644 --- a/packages/mini-demo/src/pages/loading/index.scss +++ b/packages/mini-demo/src/pages/loading/index.scss @@ -0,0 +1,3 @@ +page { + height: 100%; +} diff --git a/packages/mini-demo/src/pages/modal/index.scss b/packages/mini-demo/src/pages/modal/index.scss index e69de29bb..5e4126d1c 100644 --- a/packages/mini-demo/src/pages/modal/index.scss +++ b/packages/mini-demo/src/pages/modal/index.scss @@ -0,0 +1,3 @@ +page { + height: 100%; +} \ No newline at end of file diff --git a/packages/zarm/src/loading/style/index.mini.scss b/packages/zarm/src/loading/style/index.mini.scss index 8607cde87..2cbaa1b14 100644 --- a/packages/zarm/src/loading/style/index.mini.scss +++ b/packages/zarm/src/loading/style/index.mini.scss @@ -31,4 +31,4 @@ 50% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); } 75% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%); } 100% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0); } -} \ No newline at end of file +} From 27bc0562ffe95a72a5dedcc4cf577cf07a577f0c Mon Sep 17 00:00:00 2001 From: Yang Date: Tue, 19 Dec 2023 19:22:00 +0800 Subject: [PATCH 5/6] chore: modal mini --- packages/mini-demo/src/pages/modal/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mini-demo/src/pages/modal/index.scss b/packages/mini-demo/src/pages/modal/index.scss index 5e4126d1c..c2d08aa0e 100644 --- a/packages/mini-demo/src/pages/modal/index.scss +++ b/packages/mini-demo/src/pages/modal/index.scss @@ -1,3 +1,3 @@ page { height: 100%; -} \ No newline at end of file +} From f5d4814563de867e6b9ca4d4e9944c2e18aa6d9f Mon Sep 17 00:00:00 2001 From: Yang Date: Wed, 27 Dec 2023 17:44:17 +0800 Subject: [PATCH 6/6] chore: modal mini --- packages/mini-demo/src/pages/modal/component/basic.tsx | 9 ++++----- packages/mini-demo/src/pages/modal/component/button.tsx | 7 +++---- packages/zarm/src/modal/Modal.mini.tsx | 6 +++++- packages/zarm/src/modal/demo/basic.mini.tsx | 9 ++++----- packages/zarm/src/modal/demo/button.mini.tsx | 7 +++---- 5 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/mini-demo/src/pages/modal/component/basic.tsx b/packages/mini-demo/src/pages/modal/component/basic.tsx index 53ba6c5ea..2f7718c33 100644 --- a/packages/mini-demo/src/pages/modal/component/basic.tsx +++ b/packages/mini-demo/src/pages/modal/component/basic.tsx @@ -131,7 +131,7 @@ const Demo = () => { }} /> */} - toggle('customContainer')}> 开启 @@ -139,7 +139,7 @@ const Demo = () => { } > 挂载到指定 DOM 节点 - + */} toggle('overlength')}> @@ -208,10 +208,9 @@ const Demo = () => { maskClosable > {Array.from(Array(100).fill(0)).map((_, index) => ( -
+ 模态框内容 -
-
+ ))} diff --git a/packages/mini-demo/src/pages/modal/component/button.tsx b/packages/mini-demo/src/pages/modal/component/button.tsx index f1fa87c7b..dbd31370d 100644 --- a/packages/mini-demo/src/pages/modal/component/button.tsx +++ b/packages/mini-demo/src/pages/modal/component/button.tsx @@ -5,7 +5,6 @@ import { Modal, List, Button, Panel } from 'zarm/mini'; const Demo = () => { const [visible, setVisible] = useState(false); - const toggle = () => setVisible(!visible); return ( @@ -13,7 +12,7 @@ const Demo = () => { + } @@ -51,12 +50,12 @@ const Demo = () => { onAction={async (action) => { switch (action.key) { case 'cancel': - toggle(); + setVisible(false); break; default: // 模拟异步操作 await new Promise((resolve) => setTimeout(resolve, 3000)); - toggle(); + setVisible(false); } console.log(action); }} diff --git a/packages/zarm/src/modal/Modal.mini.tsx b/packages/zarm/src/modal/Modal.mini.tsx index 3cf2968b0..707efa9ed 100644 --- a/packages/zarm/src/modal/Modal.mini.tsx +++ b/packages/zarm/src/modal/Modal.mini.tsx @@ -89,7 +89,11 @@ const Modal = React.forwardRef((props, ref) => { direction="center" onMaskClick={maskClosable ? onClose : noop} > - + { + event.stopPropagation(); + }}> {showHeader && ( <> diff --git a/packages/zarm/src/modal/demo/basic.mini.tsx b/packages/zarm/src/modal/demo/basic.mini.tsx index 53ba6c5ea..2f7718c33 100644 --- a/packages/zarm/src/modal/demo/basic.mini.tsx +++ b/packages/zarm/src/modal/demo/basic.mini.tsx @@ -131,7 +131,7 @@ const Demo = () => { }} /> */} - toggle('customContainer')}> 开启 @@ -139,7 +139,7 @@ const Demo = () => { } > 挂载到指定 DOM 节点 - + */} toggle('overlength')}> @@ -208,10 +208,9 @@ const Demo = () => { maskClosable > {Array.from(Array(100).fill(0)).map((_, index) => ( -
+ 模态框内容 -
-
+ ))} diff --git a/packages/zarm/src/modal/demo/button.mini.tsx b/packages/zarm/src/modal/demo/button.mini.tsx index f1fa87c7b..dbd31370d 100644 --- a/packages/zarm/src/modal/demo/button.mini.tsx +++ b/packages/zarm/src/modal/demo/button.mini.tsx @@ -5,7 +5,6 @@ import { Modal, List, Button, Panel } from 'zarm/mini'; const Demo = () => { const [visible, setVisible] = useState(false); - const toggle = () => setVisible(!visible); return ( @@ -13,7 +12,7 @@ const Demo = () => { + } @@ -51,12 +50,12 @@ const Demo = () => { onAction={async (action) => { switch (action.key) { case 'cancel': - toggle(); + setVisible(false); break; default: // 模拟异步操作 await new Promise((resolve) => setTimeout(resolve, 3000)); - toggle(); + setVisible(false); } console.log(action); }}