feat: add checkbox component

packages/client/src/checkbox/demos/demo1.tsx

@@ -0,0 +1,44 @@
+/**
+ * title: 勾选
+ */
+import React from 'react';
+import { SchemaComponentProvider, SchemaComponent } from '@nocobase/client';
+import { Checkbox } from '..';
+import { FormItem } from '@formily/antd';
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      interface: 'string',
+      type: 'string',
+      title: `编辑模式`,
+      'x-decorator': 'FormItem',
+      'x-component': 'Checkbox',
+      'x-reactions': {
+        target: 'read',
+        fulfill: {
+          state: {
+            value: '{{$self.value}}',
+          },
+        },
+      },
+    },
+    read: {
+      interface: 'string',
+      type: 'string',
+      title: `阅读模式`,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'Checkbox',
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Checkbox, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};

packages/client/src/checkbox/demos/demo2.tsx

@@ -0,0 +1,57 @@
+/**
+ * title: 组
+ */
+import React from 'react';
+import { SchemaComponentProvider, SchemaComponent } from '@nocobase/client';
+import { Checkbox } from '..';
+import { FormItem } from '@formily/antd';
+
+const options = [
+  {
+    label: '选项1',
+    value: 1,
+    color: 'red',
+  },
+  {
+    label: '选项2',
+    value: 2,
+    color: 'blue',
+  },
+];
+
+const schema = {
+  type: 'object',
+  properties: {
+    input: {
+      type: 'string',
+      title: `编辑模式`,
+      enum: options,
+      'x-decorator': 'FormItem',
+      'x-component': 'Checkbox.Group',
+      'x-reactions': {
+        target: 'read',
+        fulfill: {
+          state: {
+            value: '{{$self.value}}',
+          },
+        },
+      },
+    },
+    read: {
+      type: 'string',
+      title: `阅读模式`,
+      enum: options,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'Checkbox.Group',
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Checkbox, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};

packages/client/src/checkbox/index.md

@@ -6,3 +6,13 @@ group:
 ---
 
 # Checkbox
+
+## Examples
+
+### 勾选
+
+<code src="./demos/demo1.tsx" />
+
+### 组
+
+<code src="./demos/demo2.tsx" />

packages/client/src/checkbox/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
+import { Checkbox as AntdCheckbox, Tag } from 'antd';
+import { CheckboxProps, CheckboxGroupProps } from 'antd/lib/checkbox';
+import uniq from 'lodash/uniq';
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { isValid } from '@formily/shared';
+
+type ComposedCheckbox = React.FC<CheckboxProps> & {
+  Group?: React.FC<CheckboxGroupProps>;
+  __ANT_CHECKBOX?: boolean;
+};
+
+export const Checkbox: ComposedCheckbox = connect(
+  AntdCheckbox,
+  mapProps(
+    {
+      value: 'checked',
+      onInput: 'onChange',
+    },
+    (props, field) => {
+      // console.log({ props, field });
+      return {
+        ...props,
+      };
+    },
+  ),
+  mapReadPretty((props) => {
+    if (!isValid(props.value)) {
+      return <div></div>;
+    }
+    return props.value ? (
+      <CheckOutlined style={{ color: '#52c41a' }} />
+    ) : (
+      <CloseOutlined style={{ color: '#f5222d' }} />
+    );
+  }),
+);
+
+Checkbox.__ANT_CHECKBOX = true;
+
+Checkbox.Group = connect(
+  AntdCheckbox.Group,
+  mapProps({
+    dataSource: 'options',
+  }),
+  mapReadPretty((props) => {
+    if (!isValid(props.value)) {
+      return <div></div>;
+    }
+    const { options = [] } = props;
+    const field = useField<any>();
+    const dataSource = field.dataSource || [];
+    const value = uniq(field.value ? field.value : []);
+    return (
+      <div>
+        {dataSource
+          .filter((option) => value.includes(option.value))
+          .map((option, key) => (
+            <Tag key={key} color={option.color}>
+              {option.label}
+            </Tag>
+          ))}
+      </div>
+    );
+  }),
+);
+
+export default Checkbox;

packages/client/src/index.tsx

@@ -7,6 +7,7 @@ export * from './admin-layout';
 export * from './antd-config-provider';
 export * from './api-client';
 export * from './auth-layout';
+export * from './checkbox';
 export * from './collection-manager';
 export * from './current-user';
 export * from './document-title';