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:
		
							parent
							
								
									f6590d1331
								
							
						
					
					
						commit
						0779a4eab3
					
				@ -38,7 +38,6 @@ const InternalRangePicker = connect(
 | 
				
			|||||||
export const DatePicker = (props) => {
 | 
					export const DatePicker = (props) => {
 | 
				
			||||||
  const { utc = true } = useDatePickerContext();
 | 
					  const { utc = true } = useDatePickerContext();
 | 
				
			||||||
  const value = Array.isArray(props.value) ? props.value[0] : props.value;
 | 
					  const value = Array.isArray(props.value) ? props.value[0] : props.value;
 | 
				
			||||||
  console.log(value);
 | 
					 | 
				
			||||||
  props = { utc, ...props };
 | 
					  props = { utc, ...props };
 | 
				
			||||||
  return <InternalDatePicker {...props} value={value} />;
 | 
					  return <InternalDatePicker {...props} value={value} />;
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
				
			|||||||
@ -2,7 +2,7 @@ import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
 | 
				
			|||||||
import { isValid } from '@formily/shared';
 | 
					import { isValid } from '@formily/shared';
 | 
				
			||||||
import { Radio as AntdRadio, Tag } from 'antd';
 | 
					import { Radio as AntdRadio, Tag } from 'antd';
 | 
				
			||||||
import type { RadioGroupProps, RadioProps } from 'antd/es/radio';
 | 
					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';
 | 
					import { useCollectionField } from '../../../data-source/collection-field/CollectionFieldProvider';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
type ComposedRadio = React.FC<RadioProps> & {
 | 
					type ComposedRadio = React.FC<RadioProps> & {
 | 
				
			||||||
@ -25,10 +25,15 @@ Radio.Group = connect(
 | 
				
			|||||||
    {
 | 
					    {
 | 
				
			||||||
      dataSource: 'options',
 | 
					      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 {
 | 
					      return {
 | 
				
			||||||
        ...props,
 | 
					        ...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 field = useField<any>();
 | 
				
			||||||
    const collectionField = useCollectionField();
 | 
					    const collectionField = useCollectionField();
 | 
				
			||||||
    const dataSource = field.dataSource || collectionField?.uiSchema.enum || [];
 | 
					    const dataSource = field.dataSource || collectionField?.uiSchema.enum || [];
 | 
				
			||||||
    const val = value ? props.value.toString() : value;
 | 
					 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      <div>
 | 
					      <div>
 | 
				
			||||||
        {dataSource
 | 
					        {dataSource
 | 
				
			||||||
          .filter((option) => option.value === val)
 | 
					          .filter((option) => option.value == value)
 | 
				
			||||||
          .map((option, key) => (
 | 
					          .map((option, key) => (
 | 
				
			||||||
            <Tag key={key} color={option.color} icon={option.icon}>
 | 
					            <Tag key={key} color={option.color} icon={option.icon}>
 | 
				
			||||||
              {option.label}
 | 
					              {option.label}
 | 
				
			||||||
 | 
				
			|||||||
@ -38,7 +38,7 @@ export const FieldTitleInput = observer(
 | 
				
			|||||||
    useEffect(() => {
 | 
					    useEffect(() => {
 | 
				
			||||||
      setTitleValue(value);
 | 
					      setTitleValue(value);
 | 
				
			||||||
    }, [value]);
 | 
					    }, [value]);
 | 
				
			||||||
    return <Input value={titleValue} onChange={handleChange} />;
 | 
					    return <Input value={titleValue} onChange={handleChange} style={{ minWidth: '100px' }} />;
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  { displayName: 'FieldTitleInput' },
 | 
					  { displayName: 'FieldTitleInput' },
 | 
				
			||||||
);
 | 
					);
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user