From eff76fb0a2d3237a12eab34ca55ebcd0efe9e54d Mon Sep 17 00:00:00 2001 From: chenos Date: Tue, 11 Jan 2022 18:13:15 +0800 Subject: [PATCH] feat: add checkbox component --- packages/client/src/checkbox/demos/demo1.tsx | 44 +++++++++++++ packages/client/src/checkbox/demos/demo2.tsx | 57 ++++++++++++++++ packages/client/src/checkbox/index.md | 10 +++ packages/client/src/checkbox/index.tsx | 69 ++++++++++++++++++++ packages/client/src/index.tsx | 1 + 5 files changed, 181 insertions(+) create mode 100644 packages/client/src/checkbox/demos/demo1.tsx create mode 100644 packages/client/src/checkbox/demos/demo2.tsx create mode 100644 packages/client/src/checkbox/index.tsx diff --git a/packages/client/src/checkbox/demos/demo1.tsx b/packages/client/src/checkbox/demos/demo1.tsx new file mode 100644 index 000000000..88eedfb28 --- /dev/null +++ b/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 ( + + + + ); +}; diff --git a/packages/client/src/checkbox/demos/demo2.tsx b/packages/client/src/checkbox/demos/demo2.tsx new file mode 100644 index 000000000..a98cbf088 --- /dev/null +++ b/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 ( + + + + ); +}; diff --git a/packages/client/src/checkbox/index.md b/packages/client/src/checkbox/index.md index ac53a9e0b..e861dea1f 100644 --- a/packages/client/src/checkbox/index.md +++ b/packages/client/src/checkbox/index.md @@ -6,3 +6,13 @@ group: --- # Checkbox + +## Examples + +### 勾选 + + + +### 组 + + diff --git a/packages/client/src/checkbox/index.tsx b/packages/client/src/checkbox/index.tsx new file mode 100644 index 000000000..75a321fb1 --- /dev/null +++ b/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 & { + Group?: React.FC; + __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
; + } + return props.value ? ( + + ) : ( + + ); + }), +); + +Checkbox.__ANT_CHECKBOX = true; + +Checkbox.Group = connect( + AntdCheckbox.Group, + mapProps({ + dataSource: 'options', + }), + mapReadPretty((props) => { + if (!isValid(props.value)) { + return
; + } + const { options = [] } = props; + const field = useField(); + const dataSource = field.dataSource || []; + const value = uniq(field.value ? field.value : []); + return ( +
+ {dataSource + .filter((option) => value.includes(option.value)) + .map((option, key) => ( + + {option.label} + + ))} +
+ ); + }), +); + +export default Checkbox; diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx index 5351d6591..83e3dcf72 100644 --- a/packages/client/src/index.tsx +++ b/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';