chore: modal mini

Author: Yang

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}}

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',

packages/mini-demo/src/app.scss

@@ -1,3 +1,7 @@
 page {
   height: 100%;
 }
+
+View {
+  box-sizing: border-box;
+}

packages/mini-demo/src/pages/checkbox/component/custom-icon.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { List, Loading } from 'zarm/mini';
+
+const Demo =() => {
+  return (
+    <List>
+      <List.Item title="普通" suffix={<Loading />} />
+      <List.Item title="大号" suffix={<Loading size="lg" />} />
+  </List>
+  );
+}
+
+export default Demo;

packages/mini-demo/src/pages/checkbox/component/custom.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { List, Loading } from 'zarm/mini';
+
+const Demo =() => {
+  return (
+    <List>
+      <List.Item title="普通" suffix={<Loading type="spinner" />} />
+      <List.Item title="大号" suffix={<Loading size="lg" type="spinner" />} />
+  </List>
+  );
+}
+
+export default Demo;

packages/mini-demo/src/pages/loading/component/basic.tsx

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: 'Loading'
+})

packages/mini-demo/src/pages/loading/component/spinner.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 (
+    <>
+      <Basic />
+      <Spinner />
+    </>
+  )
+}

packages/mini-demo/src/pages/loading/index.config.ts

@@ -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 = () => {
           }
         />
       </List>
-      <View id="modal-alert" />
+      <Modal id="alert" />
     </Panel>
   );
 };

packages/mini-demo/src/pages/loading/index.scss

@@ -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 = () => {
         </List.Item>
       </List>
 
-      <div id="test-div" style={{ position: 'relative', zIndex: 1 }} ref={myRef} />
-
       <Modal visible={state.normal.visible} title="标题" closable onClose={() => toggle('normal')}>
         模态框内容
       </Modal>
@@ -194,14 +191,14 @@ const Demo = () => {
         </View>
       </Modal>
 
-      <Modal
+      {/* <Modal
         visible={state.customContainer.visible}
         maskClosable
         onClose={() => toggle('customContainer')}
         mountContainer={() => myRef.current}
       >
         挂载到指定dom节点
-      </Modal>
+      </Modal> */}
 
       <Modal
         visible={state.overlength.visible}

packages/mini-demo/src/pages/loading/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { List, Button, Modal, Panel } from 'zarm/mini';
+
+/* order: 3 */
+
+const Demo = () => {
+  return (
+    <Panel title="确认框 Confirm">
+      <List>
+      <List.Item
+        title="静态方法关闭"
+        suffix={
+          <Button
+            size="xs"
+            onClick={() => {
+              Modal.confirm({
+                id: 'confirm',
+                title: '确认信息',
+                content: '这里是确认框的内容部分',
+                onCancel: () => {
+                  console.log('点击cancel');
+                },
+                onConfirm: () => {
+                  console.log('点击ok');
+                },
+              });
+            }}
+          >
+            开启
+          </Button>
+        }
+      />
+      <List.Item
+        title="使用 Promise 关闭"
+        suffix={
+          <Button
+            size="xs"
+            onClick={() => {
+              Modal.confirm({
+                id: 'confirm',
+                title: '确定要删除吗？',
+                content: '这里是确认框的内容部分，点击确定按钮，将触发 Promise 关闭确认框',
+                onConfirm: async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 3000));
+                  // Toast.show({ content: '提交成功' });
+                },
+              });
+            }}
+          >
+            开启
+          </Button>
+        }
+      />
+    </List>
+      <Modal id="confirm" />
+    </Panel>
+  );
+};
+
+export default Demo;

packages/mini-demo/src/pages/modal/component/alert.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 (
     <>
-      <Alert />
       <Basic />
       <Button />
+      <Alert />
+      <Confrim />
     </>
   )
 }

packages/mini-demo/src/pages/modal/component/basic.tsx

@@ -72,6 +72,11 @@ const siteMap = {
       //   name: '动作面板',
       //   page: '/pages/action-sheet/index',
       // },
+      {
+        key: 'Loading',
+        name: '加载中',
+        page: '/pages/loading/index',
+      },
       {
         key: 'Popup',
         name: '动作面板',