From e40565e90a15317cfce59b5a3143ac0eaf9862df Mon Sep 17 00:00:00 2001
From: SemmyWong <67748948+semmywong@users.noreply.github.com>
Date: Mon, 17 Jan 2022 15:39:52 +0800
Subject: [PATCH] feat: add radio into schema component (#154)

* feat: add radio to schema component

* docs: add Radio  demos into schema component

* rafactor: change import path

* docs: change demo language

* fix: add title and description to demos

Co-authored-by: chenos <chenlinxh@gmail.com>
---
 .../antd/{index.tsx => index.ts}              |  1 +
 .../src/schema-component/antd/radio/Radio.tsx | 48 ++++++++++++++++
 .../antd/radio/demos/demo1.tsx                | 42 ++++++++++++++
 .../antd/radio/demos/demo2.tsx                | 55 ++++++++++++++++++
 .../antd/radio/demos/demo3.tsx                | 56 +++++++++++++++++++
 .../src/schema-component/antd/radio/index.md  | 14 +++++
 .../src/schema-component/antd/radio/index.ts  |  1 +
 7 files changed, 217 insertions(+)
 rename packages/client/src/schema-component/antd/{index.tsx => index.ts} (89%)
 create mode 100644 packages/client/src/schema-component/antd/radio/Radio.tsx
 create mode 100644 packages/client/src/schema-component/antd/radio/demos/demo1.tsx
 create mode 100644 packages/client/src/schema-component/antd/radio/demos/demo2.tsx
 create mode 100644 packages/client/src/schema-component/antd/radio/demos/demo3.tsx
 create mode 100644 packages/client/src/schema-component/antd/radio/index.ts

diff --git a/packages/client/src/schema-component/antd/index.tsx b/packages/client/src/schema-component/antd/index.ts
similarity index 89%
rename from packages/client/src/schema-component/antd/index.tsx
rename to packages/client/src/schema-component/antd/index.ts
index 7c8f30ea5..8520f1ccb 100644
--- a/packages/client/src/schema-component/antd/index.tsx
+++ b/packages/client/src/schema-component/antd/index.ts
@@ -6,3 +6,4 @@ export * from './dnd-context';
 export * from './form';
 export * from './form-item';
 export * from './grid';
+export * from './radio';
diff --git a/packages/client/src/schema-component/antd/radio/Radio.tsx b/packages/client/src/schema-component/antd/radio/Radio.tsx
new file mode 100644
index 000000000..ed205eea8
--- /dev/null
+++ b/packages/client/src/schema-component/antd/radio/Radio.tsx
@@ -0,0 +1,48 @@
+import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
+import { isValid } from '@formily/shared';
+import { Radio as AntdRadio, Tag } from 'antd';
+import type { RadioGroupProps, RadioProps } from 'antd/lib/radio';
+import React from 'react';
+
+type ComposedRadio = React.FC<RadioProps> & {
+  Group?: React.FC<RadioGroupProps>;
+  __ANT_RADIO?: boolean;
+};
+
+export const Radio: ComposedRadio = connect(
+  AntdRadio,
+  mapProps({
+    value: 'checked',
+    onInput: 'onChange',
+  }),
+);
+Radio.__ANT_RADIO = true;
+
+Radio.Group = connect(
+  AntdRadio.Group,
+  mapProps({
+    dataSource: 'options',
+  }),
+  mapReadPretty((props) => {
+    if (!isValid(props.value)) {
+      return <div></div>;
+    }
+    const { options = [], value } = props;
+    const field = useField<any>();
+    const dataSource = field.dataSource || [];
+    console.log({ dataSource });
+    return (
+      <div>
+        {dataSource
+          .filter((option) => option.value === value)
+          .map((option, key) => (
+            <Tag key={key} color={option.color}>
+              {option.label}
+            </Tag>
+          ))}
+      </div>
+    );
+  }),
+);
+
+export default Radio;
diff --git a/packages/client/src/schema-component/antd/radio/demos/demo1.tsx b/packages/client/src/schema-component/antd/radio/demos/demo1.tsx
new file mode 100644
index 000000000..a7c624991
--- /dev/null
+++ b/packages/client/src/schema-component/antd/radio/demos/demo1.tsx
@@ -0,0 +1,42 @@
+/**
+ * title: Basic
+ * desc: The simplest use.
+ */
+import { FormItem } from '@formily/antd';
+import { Radio, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
+import React from 'react';
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'string',
+      title: `编辑模式`,
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio',
+      'x-reactions': {
+        target: 'read',
+        fulfill: {
+          state: {
+            value: '{{$self.value}}',
+          },
+        },
+      },
+    },
+    read: {
+      type: 'string',
+      title: `阅读模式`,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio',
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Radio, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};
diff --git a/packages/client/src/schema-component/antd/radio/demos/demo2.tsx b/packages/client/src/schema-component/antd/radio/demos/demo2.tsx
new file mode 100644
index 000000000..1a9b46a34
--- /dev/null
+++ b/packages/client/src/schema-component/antd/radio/demos/demo2.tsx
@@ -0,0 +1,55 @@
+/**
+ * title: Radio Group
+ * desc: A group of radio components.
+ */
+import { FormItem } from '@formily/antd';
+import { Radio, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
+import React from 'react';
+
+const options = [
+  {
+    label: '男',
+    value: 1,
+  },
+  {
+    label: '女',
+    value: 2,
+  },
+];
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'number',
+      title: `编辑模式`,
+      enum: options,
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+      'x-reactions': {
+        target: 'read',
+        fulfill: {
+          state: {
+            value: '{{$self.value}}',
+          },
+        },
+      },
+    },
+    read: {
+      type: 'number',
+      title: `阅读模式`,
+      enum: options,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Radio, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};
diff --git a/packages/client/src/schema-component/antd/radio/demos/demo3.tsx b/packages/client/src/schema-component/antd/radio/demos/demo3.tsx
new file mode 100644
index 000000000..2e375999f
--- /dev/null
+++ b/packages/client/src/schema-component/antd/radio/demos/demo3.tsx
@@ -0,0 +1,56 @@
+/**
+ * title: Radio Group with color
+ */
+import { FormItem } from '@formily/antd';
+import { Radio, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
+import React from 'react';
+
+const options = [
+  {
+    label: '男',
+    value: 1,
+    color: 'blue',
+  },
+  {
+    label: '女',
+    value: 2,
+    color: 'red',
+  },
+];
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'number',
+      title: `编辑模式`,
+      enum: options,
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+      'x-reactions': {
+        target: 'read',
+        fulfill: {
+          state: {
+            value: '{{$self.value}}',
+          },
+        },
+      },
+    },
+    read: {
+      type: 'number',
+      title: `阅读模式`,
+      enum: options,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Radio, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};
diff --git a/packages/client/src/schema-component/antd/radio/index.md b/packages/client/src/schema-component/antd/radio/index.md
index 9f570654f..14c669b99 100644
--- a/packages/client/src/schema-component/antd/radio/index.md
+++ b/packages/client/src/schema-component/antd/radio/index.md
@@ -6,3 +6,17 @@ group:
 ---
 
 # Radio
+
+## Examples
+
+### Basic
+
+<code src="./demos/demo1.tsx" />
+
+### Radio Group
+
+<code src="./demos/demo2.tsx" />
+
+### Radio Group with color
+
+<code src="./demos/demo3.tsx" />
diff --git a/packages/client/src/schema-component/antd/radio/index.ts b/packages/client/src/schema-component/antd/radio/index.ts
new file mode 100644
index 000000000..bfbe6d09b
--- /dev/null
+++ b/packages/client/src/schema-component/antd/radio/index.ts
@@ -0,0 +1 @@
+export * from './Radio';