feat: 支持自定义组件valueType

template/src/components/app-wrapper/index.tsx

@@ -1,4 +1,5 @@
 import { RootState } from '@/app/store';
+import { customValueTypeMap } from '@/components';
 import globalMessage from '@/components/message';
 import { Locale, Theme } from '@/enum';
 import * as langs from '@/langs';
@@ -32,6 +33,7 @@ const AppWrapper = (props: AppWrapperProps) => {
 type InsiderProps = {
   children: React.ReactNode;
 };
+
 const Insider = (props: InsiderProps) => {
   const { children } = props;
   const [message, messageContextHolder] = tocoMessage.useMessage();
@@ -83,7 +85,11 @@ const Insider = (props: InsiderProps) => {
   return (
     <HelmetProvider context={helmetContext}>
       <IntlProvider locale={locale} messages={langsMap[locale]}>
-        <ConfigProvider locale={antdLocaleMap[locale]} theme={themeConfig}>
+        <ConfigProvider
+          locale={antdLocaleMap[locale]}
+          theme={themeConfig}
+          valueTypeMap={customValueTypeMap}
+        >
           <CSSVariablesStyle />
           {messageContextHolder}
           {children}

template/src/components/fullname/index.tsx

@@ -0,0 +1,78 @@
+import { Input, RenderFieldPropsType } from '@df/toco-ui';
+import { useState } from 'react';
+
+type NameType = {
+  first?: string;
+  last?: string;
+  title?: string;
+};
+type AddressProps = {
+  defaultValue?: NameType;
+  value?: NameType;
+  onChange?: (value: NameType) => void;
+};
+
+const Fullname = (props: AddressProps) => {
+  const { value, onChange } = props;
+  const [currentValue, setCurrentValue] = useState<NameType | undefined>(value);
+
+  return (
+    <div>
+      <div>
+        <span>first</span>
+        <Input
+          defaultValue={value?.first}
+          onChange={(e) =>
+            onChange?.({
+              ...currentValue,
+              first: e.target.value,
+            })
+          }
+        />
+      </div>
+      <div>
+        <span>last</span>
+        <Input
+          defaultValue={value?.last}
+          onChange={(e) =>
+            onChange?.({
+              ...currentValue,
+              last: e.target.value,
+            })
+          }
+        />
+      </div>
+      <div>
+        <span>title</span>
+        <Input
+          defaultValue={value?.title}
+          onChange={(e) =>
+            onChange?.({
+              ...currentValue,
+              title: e.target.value,
+            })
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+export const valueTypeOptions: {
+  name: string;
+  renderFieldProps: RenderFieldPropsType;
+} = {
+  name: 'fullname',
+  renderFieldProps: {
+    render: (value) => {
+      return (
+        <span>
+          {value?.title} {value?.first} {value?.last}
+        </span>
+      );
+    },
+    renderFormItem: (props) => <Fullname {...props} />,
+  },
+};
+
+export default Fullname;

template/src/components/index.ts

@@ -0,0 +1,6 @@
+import { RenderFieldPropsType } from '@df/toco-ui';
+import { valueTypeOptions as fullnameValueTypeOptions } from './fullname';
+
+export const customValueTypeMap: Record<string, RenderFieldPropsType> = {
+  [fullnameValueTypeOptions.name]: fullnameValueTypeOptions.renderFieldProps,
+};

template/src/pages/demo/api.ts

@@ -5,6 +5,7 @@ export interface User {
   name: {
     first: string;
     last: string;
+    title: string;
   };
   phone: string;
   gender: 'female' | 'male';

template/src/pages/demo/index.tsx

@@ -1,16 +1,17 @@
 import { useAppDispatch, useAppSelector } from '@/app/hooks';
+import { customValueTypeMap } from '@/components';
 import { User } from '@/pages/demo/api';
 import { fetchUsers, selectDemo } from '@/pages/demo/slice';
 import Root from '@/Root';
 import { EditTableColumnsType, Table } from '@df/toco-ui';
 import { useEffect } from 'react';
 
-const columns: EditTableColumnsType<User> = [
+const columns: EditTableColumnsType<User, keyof typeof customValueTypeMap> = [
   {
     title: 'name',
     dataIndex: 'name',
     key: 'name',
-    render: (name) => `${name.first} ${name.last}`,
+    valueType: 'fullname',
   },
   {
     title: 'phone',
@@ -41,7 +42,13 @@ const Demo = () => {
 
   return (
     <Root>
-      <Table id="demoTable" value={users} columns={columns} editMode="none" />
+      <Table
+        id="demoTable"
+        rowKey="email"
+        value={users}
+        columns={columns}
+        editMode="single"
+      />
     </Root>
   );
 };