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

* style: fieldTitleInput style improve

* refactor: radio support mutiple type

* refactor: code improve

packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx

@@ -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} />;
 };

packages/core/client/src/schema-component/antd/radio/Radio.tsx

@@ -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}

packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/FieldTitleInput.tsx

@@ -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' },
 );