tachybase_todo/packages/client/src/schema-component/antd/radio/Radio.tsx
SemmyWong e40565e90a
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>
2022-01-17 15:39:52 +08:00

49 lines
1.1 KiB
TypeScript

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;