@fe-free/core 2.7.0 → 2.7.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 2.7.1
+
+### Patch Changes
+
+- feat: record
+  - @fe-free/tool@2.7.1
+
 ## 2.7.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.7.0"
+    "@fe-free/tool": "2.7.1"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/form/form.stories.tsx

@@ -244,11 +244,15 @@ export const ProFormRecordComponent: Story = {
         name="record1"
         label="record1"
         fieldProps={{
-          defaultItems: [
+          labels: [
             { key: 'username', label: '用户名' },
             { key: 'password', label: '密码' },
           ],
         }}
+        initialValue={{
+          username: '',
+          password: '',
+        }}
       />
       <ProFormRecord name="record2" label="record2" />
     </ProFormBase>
@@ -262,11 +266,15 @@ export const ProFormRecordArrayComponent: Story = {
         name="recordArray1"
         label="recordArray1"
         fieldProps={{
-          defaultItems: [
+          labels: [
             { key: 'username', label: '用户名' },
             { key: 'password', label: '密码' },
           ],
         }}
+        initialValue={[
+          { key: 'username', value: undefined },
+          { key: 'password', value: undefined },
+        ]}
       />
       <ProFormRecordArray name="recordArray2" label="recordArray2" />
     </ProFormBase>

package/src/form/form_list/form_list_helper.tsx

@@ -1,5 +1,6 @@
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
+import classNames from 'classnames';
 
 interface ProFormListHelperProps<T> {
   value?: T[];
@@ -12,7 +13,10 @@ interface ProFormListHelperProps<T> {
   }) => React.ReactNode;
   addText?: string;
   getAdd: () => T;
+  disabledAdd?: boolean;
+  disabledDelete?: boolean;
   readOnly?: boolean;
+  className?: string;
 }
 
 const emptyArr = [];
@@ -20,7 +24,7 @@ function ProFormListHelper<T = any>(props: ProFormListHelperProps<T>) {
   const options = props.value || emptyArr;
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className={classNames('flex flex-col gap-2', props.className)}>
       <div className="flex flex-col gap-2">
         {options.map((item, index) => {
           return (
@@ -37,7 +41,7 @@ function ProFormListHelper<T = any>(props: ProFormListHelperProps<T>) {
                   },
                 })}
               </div>
-              {!props.readOnly && (
+              {!props.readOnly && !props.disabledDelete && (
                 <Button
                   icon={<DeleteOutlined />}
                   type="text"
@@ -52,7 +56,7 @@ function ProFormListHelper<T = any>(props: ProFormListHelperProps<T>) {
           );
         })}
       </div>
-      {!props.readOnly && (
+      {!props.readOnly && !props.disabledAdd && (
         <div className="flex justify-center">
           <Button
             size="small"

package/src/form/pro_form_record.tsx

@@ -7,7 +7,22 @@ function ProFormRecord(props: ProFormItemProps<RecordProps>) {
   const { fieldProps, ...rest } = props;
 
   return (
-    <ProForm.Item {...rest}>
+    <ProForm.Item
+      {...rest}
+      rules={[
+        ...(props.rules || []),
+        {
+          validator: async (_, value) => {
+            const values = Object.values(value || {});
+            if (values.length && values.filter(Boolean).length !== values.length) {
+              return Promise.reject('选项不能为空');
+            }
+
+            return Promise.resolve();
+          },
+        },
+      ]}
+    >
       <Record {...(fieldProps as RecordProps)} />
     </ProForm.Item>
   );
@@ -17,7 +32,22 @@ function ProFormRecordArray(props: ProFormItemProps<RecordArrayProps>) {
   const { fieldProps, ...rest } = props;
 
   return (
-    <ProForm.Item {...rest}>
+    <ProForm.Item
+      {...rest}
+      rules={[
+        ...(props.rules || []),
+        {
+          validator: async (_, value) => {
+            console.log('value', value);
+            if (value?.some((item) => item.value === undefined || item.key === undefined)) {
+              return Promise.reject('选项不能为空');
+            }
+
+            return Promise.resolve();
+          },
+        },
+      ]}
+    >
       <RecordArray {...(fieldProps as RecordArrayProps)} />
     </ProForm.Item>
   );

package/src/record/index.tsx

@@ -1,6 +1,7 @@
-import { Button, Divider, Input } from 'antd';
+import { Divider, Input } from 'antd';
 import classNames from 'classnames';
-import { Fragment, useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
+import { ProFormListHelper } from '../form';
 
 function Item({
   value,
@@ -8,7 +9,7 @@ function Item({
   onChange,
 }: {
   value?: string;
-  label: string;
+  label?: string;
   onChange: (value: string) => void;
 }) {
   return (
@@ -31,20 +32,20 @@ function Item({
 interface RecordItem {
   value?: { key?: string; value?: string };
   onChange: (value: { key?: string; value?: string }) => void;
-  item: { key?: string; label?: string; placeholder?: string };
+  label?: string;
 }
 
 function RecordItem(props: RecordItem) {
-  const { value, onChange, item } = props;
+  const { value, onChange, label } = props;
 
-  // 如果提供了 key
-  if (item.key) {
+  // 如果提供了 label
+  if (label) {
     return (
       <Item
         value={value?.value}
-        label={item.label || item.key}
+        label={label || value?.key}
         onChange={(v) => {
-          onChange({ key: item.key, value: v });
+          onChange({ key: value?.key, value: v });
         }}
       />
     );
@@ -73,45 +74,42 @@ function RecordItem(props: RecordItem) {
 interface RecordArrayProps {
   value?: { key?: string; value?: string }[];
   onChange: (value: { key?: string; value?: string }[]) => void;
-  defaultItems?: { key: string; label: string }[];
+  labels?: { key?: string; label?: string }[];
   className?: string;
 }
 
 function RecordArray(props: RecordArrayProps) {
-  const { value, onChange, defaultItems, className } = props;
-  const [items, setItems] = useState<{ name?: string; label?: string }[]>(defaultItems || [{}]);
+  const { value, onChange, labels, className } = props;
+
+  const isFixed = !!labels?.length;
 
   return (
-    <div className={classNames('c-bg flex flex-col gap-2 rounded p-2', className)}>
-      {(items || [{}])?.map((item, index) => {
-        const v = value?.[index] || {};
+    <ProFormListHelper
+      className={classNames('c-bg rounded p-2', className)}
+      value={value}
+      onChange={onChange}
+      getAdd={() => ({
+        key: undefined,
+        value: undefined,
+      })}
+      disabledDelete={isFixed}
+      disabledAdd={isFixed}
+    >
+      {({ item, index, onItemChange }) => {
         return (
-          <Fragment key={index}>
+          <>
             <RecordItem
-              item={item}
-              value={v}
+              value={item}
+              label={labels?.[index]?.label}
               onChange={(v) => {
-                const newValues = [...(value || [])];
-                newValues[index] = v || {};
-                onChange(newValues);
+                onItemChange(v);
               }}
             />
-            {!defaultItems && <Divider className="my-2" />}
-          </Fragment>
+            {!isFixed && <Divider className="mb-2" />}
+          </>
         );
-      })}
-      {!defaultItems && (
-        <div className="flex flex-col items-center">
-          <Button
-            onClick={() => {
-              setItems((v) => [...v, {}]);
-            }}
-          >
-            添加
-          </Button>
-        </div>
-      )}
-    </div>
+      }}
+    </ProFormListHelper>
   );
 }
 
@@ -121,8 +119,9 @@ interface RecordProps extends Omit<RecordArrayProps, 'value' | 'onChange'> {
 }
 
 function Record(props: RecordProps) {
-  const { value, onChange, defaultItems, className } = props;
+  const { value, onChange, ...rest } = props;
 
+  // obj 和 arr 的转换
   const newValue = useMemo(() => {
     return Object.keys(value || {}).map((key) => ({
       key,
@@ -130,13 +129,13 @@ function Record(props: RecordProps) {
     }));
   }, [value]);
 
+  // obj 和 arr 的转换
   const newOnChange = useCallback(
     (newV: { key?: string; value?: string }[]) => {
       const newValues = {};
-      newV.forEach((item) => {
-        if (item.key) {
-          newValues[item.key] = item.value;
-        }
+      newV.forEach((item, index) => {
+        // 确保有值
+        newValues[item.key || index] = item.value;
       });
 
       onChange(newValues);
@@ -144,14 +143,7 @@ function Record(props: RecordProps) {
     [onChange],
   );
 
-  return (
-    <RecordArray
-      value={newValue}
-      onChange={newOnChange}
-      defaultItems={defaultItems}
-      className={className}
-    />
-  );
+  return <RecordArray value={newValue} onChange={newOnChange} {...rest} />;
 }
 
 export { Record, RecordArray };