@fe-free/core 3.0.17 → 3.0.19

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.17",
+  "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.17"
+    "@fe-free/tool": "3.0.19"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/form/form.stories.tsx

@@ -16,6 +16,7 @@ import {
   ProFormUpload,
   ProFormUploadDragger,
 } from '@fe-free/core';
+import { sleep } from '@fe-free/tool';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
@@ -169,6 +170,7 @@ export const ProFormListTextComponent: Story = {
   render: () => (
     <ProFormBase>
       <ProFormListText name="listText" />
+      <ProFormListText name="listText_isValueLabel" fieldProps={{ isValueLabel: true }} />
     </ProFormBase>
   ),
 };
@@ -177,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>
   ),
 };
@@ -191,31 +198,19 @@ export const ProFormListBooleanComponent: Story = {
 };
 
 function customRequest(option: any) {
-  const { file, onProgress, onSuccess } = option;
-
-  // 模拟上传进度
-  let percent = 0;
-  const interval = setInterval(() => {
-    percent += 10;
-    onProgress({ percent });
-
-    if (percent >= 100) {
-      clearInterval(interval);
-      // 模拟上传成功
-      onSuccess({
-        data: {
-          url: `https://picsum.photos/200/300?random=${Date.now()}`,
-          name: file.name,
-          uid: file.uid,
-        },
-      });
-    }
-  }, 1000);
+  const { onSuccess } = option;
+  // fake request
+  sleep(1000).then(() => {
+    onSuccess({
+      data: {
+        url: `https://picsum.photos/200/300?random=${Date.now()}`,
+      },
+    });
+  });
 
   // 返回 abort 方法，用于取消上传
   return {
     abort: () => {
-      clearInterval(interval);
       console.log('上传已取消');
     },
   };

package/src/form/form_list/form_list.tsx

@@ -2,6 +2,7 @@ import type { ProFormItemProps } from '@ant-design/pro-components';
 import { ProForm } from '@ant-design/pro-components';
 import { Input, InputNumber, Switch } from 'antd';
 
+import { uniq, uniqBy } from 'lodash-es';
 import { ProFormListHelper } from './form_list_helper';
 
 interface ListTextProps {
@@ -13,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;
@@ -47,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;
@@ -86,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}
@@ -100,13 +118,21 @@ 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) {
+                return Promise.reject('不能有重复');
               }
             }
             return Promise.resolve();
@@ -114,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>
   );
 }
 
@@ -133,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>
   );
 }
 

package/src/upload/index.tsx

@@ -41,7 +41,7 @@ function useUpload(
   const [fileList, setFileList] = useState<UploadFile[]>(defaultFileList);
 
   // 找到真正上传成功的。
-  const successList = fileList.map((item) => item.url || item.response?.data.url).filter(Boolean);
+  const successList = fileList.map((item) => item.url || item.response?.data?.url).filter(Boolean);
 
   const handleChange = useCallback(
     (info) => {
@@ -49,7 +49,7 @@ function useUpload(
 
       // 找到真正上传成功的。
       const newValue = info.fileList
-        .map((item) => item.url || item.response?.data.url)
+        .map((item) => item.url || item.response?.data?.url)
         .filter(Boolean);
 
       onChange?.(multiple ? newValue : newValue[0]);
@@ -245,7 +245,7 @@ function AvatarImageUpload(props: AvatarImageUploadProps) {
             action={action}
             customRequest={customRequest}
             onChange={(info) => {
-              const url = info.file.response?.data.url;
+              const url = info.file.response?.data?.url;
               if (url) {
                 onChange?.(url);
               }