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}}
+{"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"}}

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

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 (
+    <Panel title="自定义icon">
+      <List>
+        <List.Item>
+          <Checkbox.Group>
+            <Checkbox
+              value="0"
+              renderIcon={({ checked }) =>
+                checked ? <Success theme="primary" style={{ color: 'var(--za-theme-primary)'}} /> : <Close theme="danger" />
+              }
+            >
+              选项一
+            </Checkbox>
+            <Checkbox
+              value="1"
+              renderIcon={({ checked }) =>
+                checked ? <StarFill theme="primary" style={{ color: 'var(--za-theme-primary)'}}/> : <Star theme="primary" />
+              }
+            >
+              选项二
+            </Checkbox>
+            <Checkbox value="2">选项三</Checkbox>
+          </Checkbox.Group>
+        </List.Item>
+      </List>
+    </Panel>
+  )
+}
+
+export default Demo;

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 (
+      <Checkbox
+        value={props.value}
+      >
+        {({ checked }) => (
+          <View
+            style={{
+              position: 'relative',
+              padding: '4px 8px',
+              fontSize: 14,
+              borderWidth: '1px',
+              borderStyle: 'solid',
+              borderColor: checked ? 'var(--za-theme-primary)' : 'var(--za-theme-default)',
+            }}
+          >
+            <View
+              style={{
+                display: checked ? 'inline-block' : 'none',
+                position: 'absolute',
+                right: 0,
+                top: 0,
+                fontSize: 0,
+              }}
+            >
+              <Success style={{ fontSize: 10 }} theme="primary" />
+            </View>
+            {props.label}
+          </View>
+      )}
+    </Checkbox>
+    );
+  };
+  return (
+    <Panel title="自定义">
+      <List>
+        <List.Item>
+          <Checkbox.Group
+            value={value}
+            onChange={onChange}
+            style={{
+              '--group-spacing-horizontal': '8px',
+              '--group-spacing-vertical': '6px',
+            }}
+          >
+            {items.map((item, index) => (
+              <CustomCheckbox key={+index} value={String(index)} label={item} />
+            ))}
+          </Checkbox.Group>
+        </List.Item>
+      </List>
+    </Panel>
+  );
+};
+
+export default Demo;

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 (
+    <Panel title="警告框 Alert">
+      <List>
+        <List.Item
+          title="静态方法关闭"
+          suffix={
+            <Button
+              size="xs"
+              onClick={() => {
+                Modal.alert({
+                  className: 'test',
+                  title: '警告框标题',
+                  content: '这里是警告框的内容部分',
+                  onConfirm: () => {
+                    console.log('点击确认');
+                  },
+                });
+              }}
+            >
+              开启
+            </Button>
+          }
+        />
+        <List.Item
+          title="使用 Promise 关闭"
+          suffix={
+            <Button
+              size="xs"
+              onClick={() => {
+                Modal.alert({
+                  title: '警告框标题',
+                  content: '这里是警告框的内容部分，点击关闭按钮，将触发 Promise 关闭警告框',
+                  onConfirm: async () => {
+                    await new Promise((resolve) => setTimeout(resolve, 3000));
+                    // Toast.show({ content: '提交成功' });
+                  },
+                });
+              }}
+            >
+              开启
+            </Button>
+          }
+        />
+      </List>
+      <View id="modal-alert" />
+    </Panel>
+  );
+};
+
+export default Demo;