From d181aa685891df63121858f84ac283336af0d20f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=A2=A6=E8=89=AF?=
 <wangmengliang@wangmengliangdeMacBook-Pro.local>
Date: Tue, 29 Aug 2023 10:52:55 +0800
Subject: [PATCH] chore: radio mini demo

---
 .../src/pages/radio/component/basic.tsx       | 27 ++++++
 .../src/pages/radio/component/button.tsx      | 39 ++++++++
 .../src/pages/radio/component/group.tsx       | 27 ++++++
 .../src/pages/radio/component/list.tsx        | 28 ++++++
 packages/mini-demo/src/pages/radio/index.tsx  | 96 +++----------------
 packages/zarm/src/radio/demo/basic.mini.tsx   |  8 +-
 packages/zarm/src/radio/demo/button.mini.tsx  |  8 +-
 packages/zarm/src/radio/demo/group.mini.tsx   |  8 +-
 packages/zarm/src/radio/demo/list.mini.tsx    | 33 +++----
 packages/zarm/src/radio/style/index.mini.ts   |  3 +-
 10 files changed, 160 insertions(+), 117 deletions(-)
 create mode 100644 packages/mini-demo/src/pages/radio/component/basic.tsx
 create mode 100644 packages/mini-demo/src/pages/radio/component/button.tsx
 create mode 100644 packages/mini-demo/src/pages/radio/component/group.tsx
 create mode 100644 packages/mini-demo/src/pages/radio/component/list.tsx

diff --git a/packages/mini-demo/src/pages/radio/component/basic.tsx b/packages/mini-demo/src/pages/radio/component/basic.tsx
new file mode 100644
index 000000000..8d7d0f900
--- /dev/null
+++ b/packages/mini-demo/src/pages/radio/component/basic.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { List, Panel, Radio } from 'zarm/mini';
+
+const Demo = () => {
+  return (
+    <Panel title="基本用法">
+      <List>
+        <List.Item>
+          <Radio>普通</Radio>
+        </List.Item>
+        <List.Item>
+          <Radio defaultChecked>默认选中</Radio>
+        </List.Item>
+        <List.Item>
+          <Radio disabled>禁用</Radio>
+        </List.Item>
+        <List.Item>
+          <Radio defaultChecked disabled>
+            选中且禁用
+          </Radio>
+        </List.Item>
+      </List>
+    </Panel>
+  );
+};
+
+export default Demo;
diff --git a/packages/mini-demo/src/pages/radio/component/button.tsx b/packages/mini-demo/src/pages/radio/component/button.tsx
new file mode 100644
index 000000000..41fccbfc5
--- /dev/null
+++ b/packages/mini-demo/src/pages/radio/component/button.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { List, Panel, Radio } from 'zarm/mini';
+
+const Demo = () => {
+  return (
+    <Panel title="按钮样式">
+      <List.Item title="普通">
+        <Radio.Group type="button">
+          <Radio value="0">选项一</Radio>
+          <Radio value="1">选项二</Radio>
+          <Radio value="2">选项三</Radio>
+        </Radio.Group>
+      </List.Item>
+      <List.Item title="禁用">
+        <Radio.Group type="button" disabled>
+          <Radio value="0">选项一</Radio>
+          <Radio value="1">选项二</Radio>
+          <Radio value="2">选项三</Radio>
+        </Radio.Group>
+      </List.Item>
+      <List.Item title="通栏">
+        <Radio.Group type="button" block>
+          <Radio value="0">选项一</Radio>
+          <Radio value="1">选项二</Radio>
+          <Radio value="2">选项三</Radio>
+        </Radio.Group>
+      </List.Item>
+      <List.Item title="紧凑">
+        <Radio.Group type="button" compact>
+          <Radio value="0">选项一</Radio>
+          <Radio value="1">选项二</Radio>
+          <Radio value="2">选项三</Radio>
+        </Radio.Group>
+      </List.Item>
+    </Panel>
+  );
+};
+
+export default Demo;
diff --git a/packages/mini-demo/src/pages/radio/component/group.tsx b/packages/mini-demo/src/pages/radio/component/group.tsx
new file mode 100644
index 000000000..78c0f2b32
--- /dev/null
+++ b/packages/mini-demo/src/pages/radio/component/group.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { List, Panel, Radio } from 'zarm/mini';
+
+const Demo = () => {
+  const [value, setValue] = React.useState([]);
+
+  const onChange = (val) => {
+    console.log('onChange', val);
+    setValue(val);
+  };
+
+  return (
+    <Panel title="组合使用">
+      <List>
+        <List.Item>
+          <Radio.Group value={value} onChange={onChange}>
+            <Radio value="0">选项一</Radio>
+            <Radio value="1">选项二</Radio>
+            <Radio value="2">选项三</Radio>
+          </Radio.Group>
+        </List.Item>
+      </List>
+    </Panel>
+  );
+};
+
+export default Demo;
diff --git a/packages/mini-demo/src/pages/radio/component/list.tsx b/packages/mini-demo/src/pages/radio/component/list.tsx
new file mode 100644
index 000000000..4d6c30e9b
--- /dev/null
+++ b/packages/mini-demo/src/pages/radio/component/list.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { List, Panel, Radio } from 'zarm/mini';
+
+const Demo = () => {
+  return (
+    <>
+      <Panel title="列表样式">
+        <Radio.Group type="list">
+          <Radio value="0">选项一</Radio>
+          <Radio value="1">选项二</Radio>
+          <Radio value="2" disabled>
+            选项三（禁止选择）
+          </Radio>
+        </Radio.Group>
+      </Panel>
+      <Panel title="通栏样式">
+        <List.Item>
+          <Radio.Group block>
+            <Radio value="0">选项一</Radio>
+            <Radio value="1">选项二</Radio>
+          </Radio.Group>
+        </List.Item>
+      </Panel>
+    </>
+  );
+};
+
+export default Demo;
diff --git a/packages/mini-demo/src/pages/radio/index.tsx b/packages/mini-demo/src/pages/radio/index.tsx
index 17adfe7be..c833f9816 100644
--- a/packages/mini-demo/src/pages/radio/index.tsx
+++ b/packages/mini-demo/src/pages/radio/index.tsx
@@ -1,91 +1,17 @@
-import { View } from '@tarojs/components';
 import * as React from 'react';
-import { List, Radio } from 'zarm/mini';
+import Basic from './component/basic';
+import Button from './component/button';
+import Group from './component/group';
+import List from './component/list';
 import './index.scss';
 
-const Demo = () => {
-  const [value, setValue] = React.useState([]);
-
-  const onChange = (value) => {
-    console.log('onChange', value);
-    setValue(value);
-  };
-
+export default () => {
   return (
-    <View style={{ padding: 20 }}>
-      <View>基本用法</View>
-      <List>
-        <List.Item>
-          <Radio>普通</Radio>
-        </List.Item>
-        <List.Item>
-          <Radio defaultChecked>默认选中</Radio>
-        </List.Item>
-        <List.Item>
-          <Radio disabled>禁用</Radio>
-        </List.Item>
-        <List.Item>
-          <Radio defaultChecked disabled>
-            选中且禁用
-          </Radio>
-        </List.Item>
-      </List>
-      <View>组合使用</View>
-      <List>
-        <List.Item>
-          <Radio.Group value={value} onChange={onChange}>
-            <Radio value="0">选项一</Radio>
-            <Radio value="1">选项二</Radio>
-            <Radio value="2">选项三</Radio>
-          </Radio.Group>
-        </List.Item>
-      </List>
-      <View>列表样式</View>
-      <Radio.Group type="list">
-        <Radio value="0">选项一</Radio>
-        <Radio value="1">选项二</Radio>
-        <Radio value="2" disabled>
-          选项三（禁止选择）
-        </Radio>
-      </Radio.Group>
-      <View>通栏样式</View>
-      <List.Item>
-        <Radio.Group block>
-          <Radio value="0">选项一</Radio>
-          <Radio value="1">选项二</Radio>
-        </Radio.Group>
-      </List.Item>
-      <View>按钮样式</View>
-      <List.Item title="普通">
-        <Radio.Group type="button">
-          <Radio value="0">选项一</Radio>
-          <Radio value="1">选项二</Radio>
-          <Radio value="2">选项三</Radio>
-        </Radio.Group>
-      </List.Item>
-      <List.Item title="禁用">
-        <Radio.Group type="button" disabled>
-          <Radio value="0">选项一</Radio>
-          <Radio value="1">选项二</Radio>
-          <Radio value="2">选项三</Radio>
-        </Radio.Group>
-      </List.Item>
-      <List.Item title="通栏">
-        <Radio.Group type="button" block>
-          <Radio value="0">选项一</Radio>
-          <Radio value="1">选项二</Radio>
-          <Radio value="2">选项三</Radio>
-        </Radio.Group>
-      </List.Item>
-      <List.Item title="紧凑">
-        <Radio.Group type="button" compact>
-          <Radio value="0">选项一</Radio>
-          <Radio value="1">选项二</Radio>
-          <Radio value="2">选项三</Radio>
-        </Radio.Group>
-      </List.Item>
-    </View>
+    <>
+      <Basic />
+      <Group />
+      <List />
+      <Button />
+    </>
   );
 };
-
-export default Demo;
diff --git a/packages/zarm/src/radio/demo/basic.mini.tsx b/packages/zarm/src/radio/demo/basic.mini.tsx
index f0d153bc2..8d7d0f900 100644
--- a/packages/zarm/src/radio/demo/basic.mini.tsx
+++ b/packages/zarm/src/radio/demo/basic.mini.tsx
@@ -1,11 +1,9 @@
-import { View } from '@tarojs/components';
 import * as React from 'react';
-import { List, Radio } from 'zarm/mini';
+import { List, Panel, Radio } from 'zarm/mini';
 
 const Demo = () => {
   return (
-    <View style={{ padding: 20 }}>
-      <View>基本用法</View>
+    <Panel title="基本用法">
       <List>
         <List.Item>
           <Radio>普通</Radio>
@@ -22,7 +20,7 @@ const Demo = () => {
           </Radio>
         </List.Item>
       </List>
-    </View>
+    </Panel>
   );
 };
 
diff --git a/packages/zarm/src/radio/demo/button.mini.tsx b/packages/zarm/src/radio/demo/button.mini.tsx
index 009ed2df3..41fccbfc5 100644
--- a/packages/zarm/src/radio/demo/button.mini.tsx
+++ b/packages/zarm/src/radio/demo/button.mini.tsx
@@ -1,11 +1,9 @@
-import { View } from '@tarojs/components';
 import * as React from 'react';
-import { List, Radio } from 'zarm/mini';
+import { List, Panel, Radio } from 'zarm/mini';
 
 const Demo = () => {
   return (
-    <View style={{ padding: 20 }}>
-      <View>按钮样式</View>
+    <Panel title="按钮样式">
       <List.Item title="普通">
         <Radio.Group type="button">
           <Radio value="0">选项一</Radio>
@@ -34,7 +32,7 @@ const Demo = () => {
           <Radio value="2">选项三</Radio>
         </Radio.Group>
       </List.Item>
-    </View>
+    </Panel>
   );
 };
 
diff --git a/packages/zarm/src/radio/demo/group.mini.tsx b/packages/zarm/src/radio/demo/group.mini.tsx
index 65496e26e..78c0f2b32 100644
--- a/packages/zarm/src/radio/demo/group.mini.tsx
+++ b/packages/zarm/src/radio/demo/group.mini.tsx
@@ -1,6 +1,5 @@
-import { View } from '@tarojs/components';
 import * as React from 'react';
-import { List, Radio } from 'zarm/mini';
+import { List, Panel, Radio } from 'zarm/mini';
 
 const Demo = () => {
   const [value, setValue] = React.useState([]);
@@ -11,8 +10,7 @@ const Demo = () => {
   };
 
   return (
-    <View style={{ padding: 20 }}>
-      <View>组合使用</View>
+    <Panel title="组合使用">
       <List>
         <List.Item>
           <Radio.Group value={value} onChange={onChange}>
@@ -22,7 +20,7 @@ const Demo = () => {
           </Radio.Group>
         </List.Item>
       </List>
-    </View>
+    </Panel>
   );
 };
 
diff --git a/packages/zarm/src/radio/demo/list.mini.tsx b/packages/zarm/src/radio/demo/list.mini.tsx
index a71ecd784..4d6c30e9b 100644
--- a/packages/zarm/src/radio/demo/list.mini.tsx
+++ b/packages/zarm/src/radio/demo/list.mini.tsx
@@ -1,26 +1,27 @@
-import { View } from '@tarojs/components';
 import * as React from 'react';
-import { List, Radio } from 'zarm/mini';
+import { List, Panel, Radio } from 'zarm/mini';
 
 const Demo = () => {
   return (
-    <View style={{ padding: 20 }}>
-      <View>列表样式</View>
-      <Radio.Group type="list">
-        <Radio value="0">选项一</Radio>
-        <Radio value="1">选项二</Radio>
-        <Radio value="2" disabled>
-          选项三（禁止选择）
-        </Radio>
-      </Radio.Group>
-      <View>通栏样式</View>
-      <List.Item>
-        <Radio.Group block>
+    <>
+      <Panel title="列表样式">
+        <Radio.Group type="list">
           <Radio value="0">选项一</Radio>
           <Radio value="1">选项二</Radio>
+          <Radio value="2" disabled>
+            选项三（禁止选择）
+          </Radio>
         </Radio.Group>
-      </List.Item>
-    </View>
+      </Panel>
+      <Panel title="通栏样式">
+        <List.Item>
+          <Radio.Group block>
+            <Radio value="0">选项一</Radio>
+            <Radio value="1">选项二</Radio>
+          </Radio.Group>
+        </List.Item>
+      </Panel>
+    </>
   );
 };
 
diff --git a/packages/zarm/src/radio/style/index.mini.ts b/packages/zarm/src/radio/style/index.mini.ts
index c2e730a0c..5229a6cd9 100644
--- a/packages/zarm/src/radio/style/index.mini.ts
+++ b/packages/zarm/src/radio/style/index.mini.ts
@@ -1,4 +1,5 @@
+import '../../button/style/index.mini';
 import '../../icon/style';
-import '../../list/style';
+import '../../list/style/index.mini';
 import '../../style';
 import './index.scss';