@fe-free/core 3.0.18 → 3.0.19

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 3.0.19
+
+### Patch Changes
+
+- feat: pro form list
+  - @fe-free/tool@3.0.19
+
 ## 3.0.18
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.18",
+  "version": "3.0.19",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "safe-stable-stringify": "^2.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "3.0.18"
+    "@fe-free/tool": "3.0.19"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/form/form.stories.tsx

@@ -170,6 +170,7 @@ export const ProFormListTextComponent: Story = {
   render: () => (
     <ProFormBase>
       <ProFormListText name="listText" />
+      <ProFormListText name="listText_isValueLabel" fieldProps={{ isValueLabel: true }} />
     </ProFormBase>
   ),
 };
@@ -178,7 +179,12 @@ export const ProFormListNumberComponent: Story = {
   render: () => (
     <ProFormBase>
       <ProFormListNumber name="listNumber" label="listNumber" />
+      <ProFormListNumber name="listNumber_isValueLabel" fieldProps={{ isValueLabel: true }} />
       <ProFormListNumber name="listInteger" label="listInteger" fieldProps={{ precision: 0 }} />
+      <ProFormListNumber
+        name="listInteger_isValueLabel"
+        fieldProps={{ isValueLabel: true, precision: 0 }}
+      />
     </ProFormBase>
   ),
 };

package/src/form/form_list/form_list.tsx

@@ -14,8 +14,18 @@ interface ListTextProps {
 
 function ListText(props: ListTextProps) {
   const { isValueLabel, placeholder } = props;
+
   return (
-    <ProFormListHelper value={props.value} onChange={props.onChange} getAdd={() => ''}>
+    <ProFormListHelper
+      value={props.value}
+      onChange={props.onChange}
+      getAdd={() => {
+        if (isValueLabel) {
+          return { value: '', label: '' };
+        }
+        return '';
+      }}
+    >
       {({ item, onItemChange }) => {
         // @ts-ignore
         const value = isValueLabel ? item.value : item;
@@ -48,7 +58,16 @@ interface ListNumberProps {
 function ListNumber(props: ListNumberProps) {
   const { isValueLabel, placeholder, precision } = props;
   return (
-    <ProFormListHelper value={props.value} onChange={props.onChange} getAdd={() => 0}>
+    <ProFormListHelper
+      value={props.value}
+      onChange={props.onChange}
+      getAdd={() => {
+        if (isValueLabel) {
+          return { value: 0, label: '0' };
+        }
+        return 0;
+      }}
+    >
       {({ item, onItemChange }) => {
         // @ts-ignore
         const value = isValueLabel ? item.value : item;
@@ -87,11 +106,9 @@ function ListBoolean(props: ListBooleanProps) {
   );
 }
 
-function ProFormListBase(props) {
+function ProFormListText(props: ProFormItemProps<ListTextProps>) {
   const { fieldProps, ...rest } = props;
 
-  const isValueLabel = fieldProps?.isValueLabel;
-
   return (
     <ProForm.Item
       {...rest}
@@ -101,17 +118,17 @@ function ProFormListBase(props) {
         // { required: true },
         {
           validator: async (_, value) => {
-            if (isValueLabel) {
-              if (value?.some((item) => item.value === undefined)) {
-                return Promise.reject('每个选项都不能为空');
+            if (fieldProps?.isValueLabel) {
+              if (value?.some((item) => item.value === undefined || item.value === '')) {
+                return Promise.reject('存在空选项');
               }
               // 不能有重复的 value
               if (uniqBy(value, 'value').length !== value.length) {
                 return Promise.reject('不能有重复');
               }
             } else {
-              if (value?.some((item) => item === undefined)) {
-                return Promise.reject('每个选项都不能为空');
+              if (value?.some((item) => item === undefined || item === '')) {
+                return Promise.reject('存在空选项');
               }
               // 不能有重复的 value
               if (uniq(value).length !== value.length) {
@@ -123,18 +140,8 @@ function ProFormListBase(props) {
         },
       ]}
     >
-      {props.children}
-    </ProForm.Item>
-  );
-}
-
-function ProFormListText(props: ProFormItemProps<ListTextProps>) {
-  const { fieldProps, ...rest } = props;
-
-  return (
-    <ProFormListBase {...rest}>
       <ListText {...fieldProps} />
-    </ProFormListBase>
+    </ProForm.Item>
   );
 }
 
@@ -142,18 +149,47 @@ function ProFormListNumber(props: ProFormItemProps<ListNumberProps>) {
   const { fieldProps, ...rest } = props;
 
   return (
-    <ProFormListBase {...rest}>
+    <ProForm.Item
+      {...rest}
+      required={props.required ?? true}
+      rules={[
+        ...(props.rules || []),
+        // { required: true },
+        {
+          validator: async (_, value) => {
+            if (fieldProps?.isValueLabel) {
+              if (value?.some((item) => item.value === undefined || item.value === null)) {
+                return Promise.reject('存在空选项');
+              }
+              // 不能有重复的 value
+              if (uniqBy(value, 'value').length !== value.length) {
+                return Promise.reject('不能有重复');
+              }
+            } else {
+              if (value?.some((item) => item === undefined || item === null)) {
+                return Promise.reject('存在空选项');
+              }
+              // 不能有重复的 value
+              if (uniq(value).length !== value.length) {
+                return Promise.reject('不能有重复');
+              }
+            }
+            return Promise.resolve();
+          },
+        },
+      ]}
+    >
       <ListNumber {...fieldProps} />
-    </ProFormListBase>
+    </ProForm.Item>
   );
 }
 
 function ProFormListBoolean(props: ProFormItemProps<ListBooleanProps>) {
   const { fieldProps, ...rest } = props;
   return (
-    <ProFormListBase {...rest}>
+    <ProForm.Item {...rest} required={props.required ?? true}>
       <ListBoolean {...fieldProps} />
-    </ProFormListBase>
+    </ProForm.Item>
   );
 }