refactor(radio): radio support multiple field types (#3706)

* style: fieldTitleInput style improve

* refactor: radio support mutiple type

* refactor: code improve
This commit is contained in:
katherinehhh 2024-03-13 16:44:17 +08:00 committed by GitHub
parent f6590d1331
commit 0779a4eab3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 7 deletions

View File

@ -38,7 +38,6 @@ const InternalRangePicker = connect(
export const DatePicker = (props) => {
const { utc = true } = useDatePickerContext();
const value = Array.isArray(props.value) ? props.value[0] : props.value;
console.log(value);
props = { utc, ...props };
return <InternalDatePicker {...props} value={value} />;
};

View File

@ -2,7 +2,7 @@ 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/es/radio';
import React from 'react';
import React, { useState, useEffect } from 'react';
import { useCollectionField } from '../../../data-source/collection-field/CollectionFieldProvider';
type ComposedRadio = React.FC<RadioProps> & {
@ -25,10 +25,15 @@ Radio.Group = connect(
{
dataSource: 'options',
},
(props) => {
(props: any, field: any) => {
useEffect(() => {
const defaultOption = field.dataSource?.find((option) => option.value == props.value);
if (defaultOption) {
field.setValue(defaultOption.value);
}
}, [props.value, field.dataSource]);
return {
...props,
value: props.value && typeof props.value !== 'boolean' ? props.value.toString() : props.value,
};
},
),
@ -40,11 +45,10 @@ Radio.Group = connect(
const field = useField<any>();
const collectionField = useCollectionField();
const dataSource = field.dataSource || collectionField?.uiSchema.enum || [];
const val = value ? props.value.toString() : value;
return (
<div>
{dataSource
.filter((option) => option.value === val)
.filter((option) => option.value == value)
.map((option, key) => (
<Tag key={key} color={option.color} icon={option.icon}>
{option.label}

View File

@ -38,7 +38,7 @@ export const FieldTitleInput = observer(
useEffect(() => {
setTitleValue(value);
}, [value]);
return <Input value={titleValue} onChange={handleChange} />;
return <Input value={titleValue} onChange={handleChange} style={{ minWidth: '100px' }} />;
},
{ displayName: 'FieldTitleInput' },
);