From 0779a4eab37098a6f7c71f77eef0b32bcb8a80b1 Mon Sep 17 00:00:00 2001
From: katherinehhh <shunai.tang@hand-china.com>
Date: Wed, 13 Mar 2024 16:44:17 +0800
Subject: [PATCH] refactor(radio): radio support multiple field types (#3706)

* style: fieldTitleInput style improve

* refactor: radio support mutiple type

* refactor: code improve
---
 .../antd/date-picker/DatePicker.tsx                |  1 -
 .../src/schema-component/antd/radio/Radio.tsx      | 14 +++++++++-----
 .../components/FieldTitleInput.tsx                 |  2 +-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx b/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx
index 6430eddb6..60dfe93bf 100644
--- a/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx
+++ b/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} />;
 };
diff --git a/packages/core/client/src/schema-component/antd/radio/Radio.tsx b/packages/core/client/src/schema-component/antd/radio/Radio.tsx
index d34cae02a..e59deacd5 100644
--- a/packages/core/client/src/schema-component/antd/radio/Radio.tsx
+++ b/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}
diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/FieldTitleInput.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/FieldTitleInput.tsx
index fe1f6a297..c29935c9c 100644
--- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/CollectionsManager/components/FieldTitleInput.tsx
+++ b/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' },
 );