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>
This commit is contained in:
parent
50e13fe93a
commit
e40565e90a
@ -6,3 +6,4 @@ export * from './dnd-context';
|
|||||||
export * from './form';
|
export * from './form';
|
||||||
export * from './form-item';
|
export * from './form-item';
|
||||||
export * from './grid';
|
export * from './grid';
|
||||||
|
export * from './radio';
|
48
packages/client/src/schema-component/antd/radio/Radio.tsx
Normal file
48
packages/client/src/schema-component/antd/radio/Radio.tsx
Normal file
@ -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;
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
@ -6,3 +6,17 @@ group:
|
|||||||
---
|
---
|
||||||
|
|
||||||
# Radio
|
# Radio
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Basic
|
||||||
|
|
||||||
|
<code src="./demos/demo1.tsx" />
|
||||||
|
|
||||||
|
### Radio Group
|
||||||
|
|
||||||
|
<code src="./demos/demo2.tsx" />
|
||||||
|
|
||||||
|
### Radio Group with color
|
||||||
|
|
||||||
|
<code src="./demos/demo3.tsx" />
|
||||||
|
1
packages/client/src/schema-component/antd/radio/index.ts
Normal file
1
packages/client/src/schema-component/antd/radio/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './Radio';
|
Loading…
Reference in New Issue
Block a user