Merge pull request #84 from ant-design/refactor/sortable-list

refact：重构 sortable-list 自动生成 id
ant-design · Sep 8, 2023 · e34479e · e34479e
2 parents a437040 + ed6a878
commit e34479e
Show file tree

Hide file tree

Showing 38 changed files with 12,406 additions and 16,051 deletions.
diff --git a/package.json b/package.json
@@ -94,7 +94,6 @@
     "lodash.unionby": "^4.8.0",
     "lodash.uniq": "^4.5.0",
     "mockjs": "^1.1.0",
-    "object-hash": "^3.0.0",
     "polished": "^4.2.2",
     "prettier": "^2.8.8",
     "rc-util": "^5.37.0",

diff --git a/src/ColumnList/ColumnItem.tsx b/src/ColumnList/ColumnItem.tsx
@@ -2,7 +2,6 @@ import {
   ColumnItemList,
   DeleteAction,
   HandleAction,
-  SortableItem,
   useSortableList,
 } from '@ant-design/pro-editor';
 import { createStyles } from 'antd-style';
@@ -69,9 +68,10 @@ const useStyle = createStyles(({ css, cx }, prefixCls) => {
   };
 });
 
-interface ItemRenderProps<T extends SortableItem = SortableItem> {
+interface ItemRenderProps<T = any> {
   columns: ColumnItemList<T>;
   item: T;
+  dragging: boolean;
   index: number;
   prefixCls: string;
   listeners: any;
@@ -80,7 +80,7 @@ interface ItemRenderProps<T extends SortableItem = SortableItem> {
 }
 
 const ColumnItem = memo<ItemRenderProps>(
-  ({ item, index, prefixCls, columns, listeners, actions, hideRemove }) => {
+  ({ item, index, prefixCls, columns, listeners, actions, hideRemove, dragging }) => {
     const { styles } = useStyle(prefixCls);
     const instance = useSortableList();
     return (
@@ -101,6 +101,7 @@ const ColumnItem = memo<ItemRenderProps>(
               value: item[col.dataIndex],
               id: item.id,
               index,
+              dragging,
               prefixCls,
               style,
               placeholder: col.placeholder,

diff --git a/src/ColumnList/ColumnList.tsx b/src/ColumnList/ColumnList.tsx
@@ -1,5 +1,4 @@
 import {
-  SortableItem,
   SortableList,
   SortableListProps,
   SortableListRef,
@@ -11,23 +10,23 @@ import { Header } from './Header';
 import { useStyle } from './style';
 import { ColumnItemList } from './types';
 
-export interface ColumnListProps<T extends SortableItem = SortableItem>
-  extends SortableListProps<T> {
+export interface ColumnListProps<T = any> extends SortableListProps<T> {
   columns: ColumnItemList<T>;
 }
 
-const ColumnList: <T extends SortableItem>(props: ColumnListProps<T>) => ReactNode = forwardRef<
+const ColumnList: <T>(props: ColumnListProps<T>) => ReactNode = forwardRef<
   SortableListRef,
   ColumnListProps
 >(({ prefixCls: customPrefixCls, className, columns, actions, hideRemove, ...props }, ref) => {
   const prefixCls = getPrefixCls('column-list', customPrefixCls);
   const { cx } = useStyle(prefixCls);
 
   const renderItem = useCallback(
-    (item, { index, listeners }) => (
+    (item, { index, listeners, dragging }) => (
       <ColumnItem
         columns={columns}
         item={item}
+        dragging={dragging}
         listeners={listeners}
         index={index}
         prefixCls={prefixCls}

diff --git a/src/ColumnList/demos/actions.tsx b/src/ColumnList/demos/actions.tsx
@@ -3,7 +3,7 @@
  * description: 可以通过 `actions` 属性自定义操作列
  */
 import { EditFilled } from '@ant-design/icons';
-import type { ColumnItemList, SortableItem } from '@ant-design/pro-editor';
+import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ActionIcon, ColumnList } from '@ant-design/pro-editor';
 import { message } from 'antd';
 import { tableColumnValueOptions } from './mock_data/options';
@@ -12,17 +12,16 @@ type SchemaItem = {
   title: string;
   valueType: string;
   dataIndex: string;
-} & SortableItem;
+};
 
 const initialValues: SchemaItem[] = [
-  { id: 'index', title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
+  { title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
   {
-    id: 'name',
     title: '授权企业名称',
     valueType: 'text',
     dataIndex: 'name',
   },
-  { id: 'authCompany', title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
+  { title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
 ];
 
 const columns: ColumnItemList<SchemaItem> = [
@@ -63,7 +62,6 @@ export default () => (
     ]}
     creatorButtonProps={{
       record: () => ({
-        id: randomIndex(),
         valueType: 'text',
         title: '示例标题',
       }),

diff --git a/src/ColumnList/demos/column.tsx b/src/ColumnList/demos/column.tsx
@@ -2,76 +2,36 @@
  * title: 自定义表单
  * description: 目前支持 `input` 和 `select`, `custom` 三种表单类型.
  */
-import type { ColumnItemList, SortableItem } from '@ant-design/pro-editor';
+import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ColorPicker, ColumnList } from '@ant-design/pro-editor';
 import { tableColumnValueOptions } from './mock_data/options';
 
 type SchemaItem = {
   title: string;
   valueType: string;
   dataIndex: string;
-} & SortableItem;
+};
 
 const initialValues = [
-  { id: 'orderId', dataIndex: 'orderId', valueType: 'text', title: '订单id', color: undefined },
   {
-    id: 'orderNumber',
-    dataIndex: 'orderNumber',
-    valueType: 'text',
-    title: '订单号',
-    color: undefined,
-  },
-  {
-    id: 'orderMoney',
-    dataIndex: 'orderMoney',
-    valueType: 'text',
-    title: '订单金额',
-    color: undefined,
-  },
-  {
-    id: 'productName',
-    dataIndex: 'productName',
-    valueType: 'text',
-    title: '产品名称',
-    color: undefined,
-  },
-  {
-    id: 'productComment',
-    dataIndex: 'productComment',
-    valueType: 'text',
-    title: '产品介绍',
-    color: undefined,
-  },
-  {
-    id: 'orderStatus',
-    dataIndex: 'orderStatus',
-    valueType: 'text',
-    title: '订单状态',
-    color: undefined,
-  },
-  {
-    id: 'orderCreated',
     dataIndex: 'orderCreated',
     valueType: 'date',
     title: '订单创建时间',
     color: undefined,
   },
   {
-    id: 'detailPic',
     dataIndex: 'detailPic',
     valueType: 'text',
     title: '产品详情图',
     color: undefined,
   },
   {
-    id: 'closeReason',
     dataIndex: 'closeReason',
     valueType: 'text',
     title: '订单关闭原因',
     color: undefined,
   },
   {
-    id: 'closeType',
     dataIndex: 'closeType',
     valueType: 'text',
     title: '订单关闭类型',

diff --git a/src/ColumnList/demos/controlled.tsx b/src/ColumnList/demos/controlled.tsx
@@ -2,7 +2,7 @@
  * title: 受控模式
  * description: 表单可通过 `value` 受控
  */
-import type { ColumnItemList, SortableItem } from '@ant-design/pro-editor';
+import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ColumnList } from '@ant-design/pro-editor';
 import { useState } from 'react';
 
@@ -12,17 +12,16 @@ type SchemaItem = {
   title: string;
   valueType: string;
   dataIndex: string;
-} & SortableItem;
+};
 
 const INIT_VALUES: SchemaItem[] = [
-  { id: 'index', title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
+  { title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
   {
-    id: 'name',
     title: '授权企业名称',
     valueType: 'text',
     dataIndex: 'name',
   },
-  { id: 'authCompany', title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
+  { title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
 ];
 
 const columns: ColumnItemList<SchemaItem> = [

diff --git a/src/ColumnList/demos/creatorButtonProps.tsx b/src/ColumnList/demos/creatorButtonProps.tsx
@@ -2,81 +2,33 @@
  * title: 自定义初始化
  * description: 可通过 `creatorButtonProps` 来自定义初始化逻辑，id 的生成逻辑是必须的。
  */
-import type { ColumnItemList, SortableItem } from '@ant-design/pro-editor';
+import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ColumnList } from '@ant-design/pro-editor';
-
 import { tableColumnValueOptions } from './mock_data/options';
 
 type SchemaItem = {
   title: string;
   valueType?: string;
   dataIndex: string;
-} & SortableItem;
+};
 
 const INIT_VALUES = [
-  { id: 'orderId', dataIndex: 'orderId', valueType: 'text', title: '订单id', color: undefined },
   {
-    id: 'orderNumber',
-    dataIndex: 'orderNumber',
-    valueType: 'text',
-    title: '订单号',
-    color: undefined,
-  },
-  {
-    id: 'orderMoney',
-    dataIndex: 'orderMoney',
-    valueType: 'text',
-    title: '订单金额',
-    color: undefined,
-  },
-  {
-    id: 'productName',
     dataIndex: 'productName',
     valueType: 'text',
     title: '产品名称',
     color: undefined,
   },
   {
-    id: 'productComment',
     dataIndex: 'productComment',
     valueType: 'text',
     title: '产品介绍',
     color: undefined,
   },
   {
-    id: 'orderStatus',
     dataIndex: 'orderStatus',
     valueType: 'text',
     title: '订单状态',
-    color: undefined,
-  },
-  {
-    id: 'orderCreated',
-    dataIndex: 'orderCreated',
-    valueType: 'date',
-    title: '订单创建时间',
-    color: undefined,
-  },
-  {
-    id: 'detailPic',
-    dataIndex: 'detailPic',
-    valueType: 'text',
-    title: '产品详情图',
-    color: undefined,
-  },
-  {
-    id: 'closeReason',
-    dataIndex: 'closeReason',
-    valueType: 'text',
-    title: '订单关闭原因',
-    color: undefined,
-  },
-  {
-    id: 'closeType',
-    dataIndex: 'closeType',
-    valueType: 'text',
-    title: '订单关闭类型',
-    color: undefined,
   },
 ];
 
@@ -114,7 +66,6 @@ export default () => (
     creatorButtonProps={{
       position: 'top',
       record: (index) => ({
-        id: randomIndex(),
         dataIndex: `${index}-${randomIndex()}`,
       }),
     }}

diff --git a/src/ColumnList/demos/customCreate.tsx b/src/ColumnList/demos/customCreate.tsx
@@ -82,7 +82,6 @@ export default () => {
       <ColumnList<SchemaItem>
         ref={ref}
         columns={columns}
-        getId={(item) => item.dataIndex}
         renderEmpty={() => (
           <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据">
             <Button type="primary" onClick={handleCreate}>

diff --git a/src/ColumnList/demos/empty.tsx b/src/ColumnList/demos/empty.tsx
@@ -3,7 +3,7 @@
  * description: 当表单值为空时，会渲染空状态
  */
 import { EditFilled } from '@ant-design/icons';
-import type { ColumnItemList, SortableItem } from '@ant-design/pro-editor';
+import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ActionIcon, ColumnList } from '@ant-design/pro-editor';
 import { message } from 'antd';
 import { useState } from 'react';
@@ -13,7 +13,7 @@ type SchemaItem = {
   title: string;
   valueType: string;
   dataIndex: string;
-} & SortableItem;
+};
 
 const columns: ColumnItemList<SchemaItem> = [
   {

diff --git a/src/ColumnList/demos/normal.tsx b/src/ColumnList/demos/normal.tsx
@@ -2,23 +2,22 @@
  * title: 基础使用
  * description: 通过配置 `columns` 渲染排序表单
  */
-import type { ColumnItemList, SortableItem } from '@ant-design/pro-editor';
+import type { ColumnItemList } from '@ant-design/pro-editor';
 import { ColumnList } from '@ant-design/pro-editor';
 
 type SchemaItem = {
   title: string;
   dataIndex: string;
-} & SortableItem;
+};
 
 const initialValues = [
-  { id: 'index', title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
+  { title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
   {
-    id: 'name',
     title: '授权企业名称',
     valueType: 'text',
     dataIndex: 'name',
   },
-  { id: 'authCompany', title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
+  { title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
 ];
 
 const columns: ColumnItemList<SchemaItem> = [
@@ -48,7 +47,6 @@ export default () => (
     }}
     creatorButtonProps={{
       record: () => ({
-        id: randomIndex(),
         valueType: 'text',
         title: '示例标题',
       }),