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>

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

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;

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>
+  );
+};

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>
+  );
+};

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>
+  );
+};

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" />

packages/client/src/schema-component/antd/radio/index.ts

@@ -0,0 +1 @@
+export * from './Radio';