feat: add checkbox component
This commit is contained in:
parent
a87a089acf
commit
eff76fb0a2
44
packages/client/src/checkbox/demos/demo1.tsx
Normal file
44
packages/client/src/checkbox/demos/demo1.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
57
packages/client/src/checkbox/demos/demo2.tsx
Normal file
57
packages/client/src/checkbox/demos/demo2.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
};
|
@ -6,3 +6,13 @@ group:
|
|||||||
---
|
---
|
||||||
|
|
||||||
# Checkbox
|
# Checkbox
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### 勾选
|
||||||
|
|
||||||
|
<code src="./demos/demo1.tsx" />
|
||||||
|
|
||||||
|
### 组
|
||||||
|
|
||||||
|
<code src="./demos/demo2.tsx" />
|
||||||
|
69
packages/client/src/checkbox/index.tsx
Normal file
69
packages/client/src/checkbox/index.tsx
Normal file
@ -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;
|
@ -7,6 +7,7 @@ export * from './admin-layout';
|
|||||||
export * from './antd-config-provider';
|
export * from './antd-config-provider';
|
||||||
export * from './api-client';
|
export * from './api-client';
|
||||||
export * from './auth-layout';
|
export * from './auth-layout';
|
||||||
|
export * from './checkbox';
|
||||||
export * from './collection-manager';
|
export * from './collection-manager';
|
||||||
export * from './current-user';
|
export * from './current-user';
|
||||||
export * from './document-title';
|
export * from './document-title';
|
||||||
|
Loading…
Reference in New Issue
Block a user