🐛 feat: auto generate id

src/ColumnList/ColumnList.tsx

@@ -1,6 +1,6 @@
 import { getPrefixCls, SortableList } from '@ant-design/pro-editor';
 import { cx } from 'antd-style';
-import { forwardRef, ReactNode, useCallback } from 'react';
+import { forwardRef, ReactNode, useCallback, useMemo } from 'react';
 
 import { SortableListProps, SortableListRef } from '../SortableList';
 import ColumnItem from './ColumnItem';
@@ -11,16 +11,43 @@ export interface ColumnListProps<T = any> extends SortableListProps<T> {
   columns: ColumnItemList<T>;
 }
 
+const genUniqueID = (_, index) => {
+  return `columnlist_${index}_${Math.floor(Math.random() * 10000)}_${Date.now()}`;
+};
+
 const ColumnList: <T = any>(props: ColumnListProps<T>) => ReactNode = forwardRef<
-  SortableListRef<any>,
+  SortableListRef,
   ColumnListProps
->(({ prefixCls: customPrefixCls, className, columns, ...props }, ref) => {
+>(({ prefixCls: customPrefixCls, className, columns, value, initialValues, ...props }, ref) => {
   const prefixCls = getPrefixCls('column-list', customPrefixCls);
+  // 校验是否传入 ID，如果没有传入 ID，就生成一个 ID
+  const parsedValue = useMemo(
+    () =>
+      value
+        ? value.map((item, index) => ({
+            id: genUniqueID(item, index),
+            ...item,
+          }))
+        : undefined,
+    [value],
+  );
+  // 校验是否传入 ID，如果没有传入 ID，就生成一个 ID
+  const parsedInitialValues = useMemo(
+    () =>
+      initialValues
+        ? initialValues.map((item, index) => ({
+            id: genUniqueID(item, index),
+            ...item,
+          }))
+        : undefined,
+    [initialValues],
+  );
 
   const renderHeader = useCallback(
     () => <Header prefixCls={prefixCls} columns={columns} />,
     [columns],
   );
+
   const renderContent = useCallback(
     (item, index) => (
       <ColumnItem columns={columns} item={item} index={index} prefixCls={prefixCls} />
@@ -29,11 +56,13 @@ const ColumnList: <T = any>(props: ColumnListProps<T>) => ReactNode = forwardRef
   );
 
   return (
-    <SortableList<any>
+    <SortableList
       ref={ref}
       compact
       renderContent={renderContent}
       renderHeader={renderHeader}
+      value={parsedValue}
+      initialValues={parsedInitialValues}
       className={cx(prefixCls, className)}
       {...props}
     />

src/SortableList/container/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, memo, ReactNode } from 'react';
 import { ConfigProvider } from '../../ConfigProvider';
-import type { StoreUpdaterProps } from '../type';
+import type { SortableItem, StoreUpdaterProps } from '../type';
 import type { AppProps } from './App';
 import App from './App';
 import { SortableListProvider } from './Provider';
@@ -10,7 +10,9 @@ export { SortableListProvider } from './Provider';
 
 export interface SortableListProps<T> extends StoreUpdaterProps<T>, AppProps {}
 
-export const SortableList: <T>(props: SortableListProps<T>) => ReactNode = memo(
+export const SortableList: <T extends SortableItem = SortableItem>(
+  props: SortableListProps<T>,
+) => ReactNode = memo(
   forwardRef((props, ref) => {
     const { SHOW_STORE_IN_DEVTOOLS, className, style, ...res } = props;
     return (

src/SortableList/demos/_ItemRender.tsx

@@ -20,7 +20,8 @@ const ItemRender = ({ item, index, compact = false }: ItemRenderProps) => {
     const value = instance.getValue() || [];
     // 如果是最后一个节点，按下回车后，会自动添加一个新的节点
     if (index + 1 === value.length) {
-      instance.addItem({ title: `new-${randomIndex()}` });
+      const id = randomIndex();
+      instance.addItem({ id, title: `new-${randomIndex()}` });
     } else {
       const nextNodeEl = document.getElementById(`index-${index + 1}`);
       nextNodeEl?.focus();

src/SortableList/demos/controlled.tsx

@@ -3,13 +3,14 @@
  * description: onChange 会返回变更数据
  * compact: true
  */
+import type { SortableItemList } from '@ant-design/pro-editor';
 import { SortableList } from '@ant-design/pro-editor';
 import { useTheme } from 'antd-style';
 import { useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 const Demo = () => {
-  const [list, setList] = useState([{ id: 'hello' }, { id: 'world' }]);
+  const [list, setList] = useState<SortableItemList>([{ id: 'hello' }, { id: 'world' }]);
 
   const token = useTheme();
   return (

src/SortableList/demos/data.ts

@@ -1,7 +1,9 @@
-export type SchemaItem = {
+import { SortableItem } from '@ant-design/pro-editor';
+
+export type SchemaItem = SortableItem<{
   title?: string;
   dataIndex?: string;
-};
+}>;
 
 export interface ItemRenderProps {
   item: SchemaItem;
@@ -19,12 +21,13 @@ export const fieldStyle: React.CSSProperties = {
 };
 
 export const INIT_VALUES = [
-  { title: '序号', dataIndex: 'indexBorder' },
+  { id: 'index', title: '序号', dataIndex: 'indexBorder' },
   {
+    id: 'authName',
     title: '授权企业名称',
     dataIndex: 'text',
   },
-  { title: '被授权企业', dataIndex: 'select' },
+  { id: 'authedName', title: '被授权企业', dataIndex: 'select' },
 ];
 
 /*

src/SortableList/hooks/useSortableList.ts

@@ -1,11 +1,11 @@
 import { useMemoizedFn } from 'ahooks';
 import { useStoreApi } from '../store';
-import { UniqueIdentifier } from '../type/type';
+import { SortableItem, UniqueIdentifier } from '../type';
 /**
  * SortableList 实例对象
  * @template T 节点数据类型
  */
-export interface SortableListInstance<T = any> {
+export interface SortableListInstance {
   /**
    * 获取当前激活节点的 id
    * @returns 当前激活节点的 id
@@ -15,14 +15,14 @@ export interface SortableListInstance<T = any> {
    * 获取当前树的数据
    * @returns 当前树的数据
    */
-  getValue: () => T[];
+  getValue: () => SortableItem[];
   /**
    * 添加项
    * @param item 数据
    * @param index 列表索引
    * @returns
    */
-  addItem: (item?: T, index?: number) => void;
+  addItem: (item?: SortableItem, index?: number) => void;
   /**
    * 删除项
    * @param index 列表索引
@@ -35,19 +35,19 @@ export interface SortableListInstance<T = any> {
    * @param index 列表索引
    * @returns
    */
-  updateItem: (item: T, index: number) => void;
+  updateItem: (item: Partial<SortableItem>, index: number) => void;
 }
 
-export const useSortableList = <T>(): SortableListInstance<T> => {
+export const useSortableList = (): SortableListInstance => {
   const storeApi = useStoreApi();
 
   const getActiveId = useMemoizedFn(() => storeApi.getState().activeId);
   const getValue = useMemoizedFn(() => storeApi.getState().value);
-  const addItem = (item?: T, index?: number) =>
+  const addItem = (item?: SortableItem, index?: number) =>
     storeApi.getState().dispatchListData({ type: 'addItem', item, index });
   const removeItem = (index: number) =>
     storeApi.getState().dispatchListData({ type: 'removeItem', index });
-  const updateItem = (item: T, index: number) =>
+  const updateItem = (item: Partial<SortableItem>, index: number) =>
     storeApi.getState().dispatchListData({ type: 'updateItem', item, index });
 
   return {

src/SortableList/index.ts

@@ -1,8 +1,12 @@
 export * from './container';
 
 // hooks 和相关类型定义
-export type { SortableListRef } from './container/StoreUpdater';
 export { useSortableList } from './hooks/useSortableList';
 export type { SortableListInstance } from './hooks/useSortableList';
-export type { SortableListDispatchPayload } from './store';
-export type { CreatorButtonProps } from './type/type';
+export type {
+  CreatorButtonProps,
+  SortableItem,
+  SortableItemList,
+  SortableListDispatchPayload,
+  SortableListRef,
+} from './type';

src/SortableList/store/listDataReducer.ts

@@ -12,7 +12,6 @@ export const listDataReducer = (value: any[], payload: SortableListDispatchPaylo
       const overIndex = getIndexOfActiveItem(value, targetId);
       if (activeIndex === overIndex) return;
 
-      // Do not handle out of range
       if (
         activeIndex < 0 ||
         activeIndex >= value.length ||

src/SortableList/store/store.ts

@@ -2,6 +2,7 @@ import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
 import isEqual from 'lodash.isequal';
 import type { StateCreator } from 'zustand/vanilla';
 import type { SortableListState } from '../type';
+import { SortableListDispatchPayload } from '../type';
 import { initialState } from './initialState';
 import { listDataReducer } from './listDataReducer';
 
@@ -10,7 +11,7 @@ interface Action {
   handleDragStart: (event: DragStartEvent) => void;
   handleDragEnd: (event: DragEndEvent) => void;
   handleDragCancel: () => void;
-  dispatchListData: (payload: any) => void;
+  dispatchListData: (payload: SortableListDispatchPayload) => void;
 }
 
 export type Store = SortableListState & Action;

src/SortableList/type/action.ts

@@ -59,7 +59,7 @@ export interface UpdateItemAction {
   /**
    * 修改后的节点内容
    */
-  item: SortableItem;
+  item: Partial<SortableItem>;
 }
 
 /**

src/SortableList/type/component.ts

@@ -63,7 +63,7 @@ export interface CreatorButtonProps {
   /**
    * 生成初始值逻辑
    */
-  record?: (index: number) => Record<string, any>;
+  record?: (index: number) => SortableItem;
   /**
    * 新增一行按钮文案
    */

src/SortableList/type/store.ts

@@ -4,6 +4,7 @@ import type {
   GetItemStyles,
   RenderActionProps,
   RenderItemProps,
+  SortableItem,
   SortableItemList,
   SortableListDispatchPayload,
   UniqueIdentifier,
@@ -61,13 +62,13 @@ export interface SortableListState {
 /**
  * 供外部使用的 ref 方法
  */
-export interface SortableListRef<T> {
-  addItem: (item?: T, index?: number) => void;
+export interface SortableListRef {
+  addItem: (item?: SortableItem, index?: number) => void;
   removeItem: (index: number) => void;
-  updateItem: (item: T, index: number) => void;
+  updateItem: (item: SortableItem, index: number) => void;
 }
 
-export interface StoreUpdaterProps<T = any> {
+export interface StoreUpdaterProps<T = SortableItem> {
   /**
    * 值
    */
@@ -95,7 +96,7 @@ export interface StoreUpdaterProps<T = any> {
   /**
    * 对外部暴露方法
    */
-  ref?: ForwardedRef<SortableListRef<T>>;
+  ref?: ForwardedRef<SortableListRef>;
   /**
    * 新建对象相关属性
    */