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;