@hzab/list-render 1.9.11 → 1.9.12-beta

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/list-render@1.9.12
+
+fix: 修复 model query 被污染 2
+
 # @hzab/list-render@1.9.11
 
 fix: 修复 model query 被污染 2

package/README.md

@@ -117,6 +117,8 @@ const listDM = useMemo(
 | orderColWidth    | string/number |      | -         | 序号列 width 的参数                                                                          |
 | tableEmptyValue  | string/number |      | undefined | table 列表空值展示数                                                                         |
 | isTableSortXIdex | Boolean       |      | undefined | table 列表列排序是否按照 x-index 排序                                                        |
+| isDargTable      | Boolean       |      | undefined | 是否开启表格拖拽排序                                                                         |
+| dargEndBack      | function      |      | undefined | 拖拽结束后返回表格数据                                                                             |
 
 ##### tableConf.colConf[xxx]
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.9.11",
+  "version": "1.9.12-beta",
   "description": "",
   "main": "src",
   "scripts": {
@@ -55,5 +55,9 @@
   },
   "directories": {
     "lib": "lib"
+  },
+  "dependencies": {
+    "array-move": "^4.0.0",
+    "react-sortable-hoc": "^2.0.0"
   }
 }

package/src/list-render.jsx

@@ -427,6 +427,7 @@ const ListRender = forwardRef(function (props, parentRef) {
           Slots={props.Slots}
           onEdit={onEdit}
           onDel={onDel}
+          setList={setList}
           onDetail={onDetail}
           onSearch={onSearch}
           getList={getList}

package/src/table-render/index.jsx

@@ -1,6 +1,8 @@
 import { useEffect, useState, useMemo, useCallback, useRef } from "react";
 import { Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "antd";
-import { QuestionCircleOutlined, FilterOutlined, SettingOutlined } from "@ant-design/icons";
+import { QuestionCircleOutlined, FilterOutlined, SettingOutlined, MenuOutlined } from "@ant-design/icons";
+import { SortableContainer, SortableElement, SortableHandle } from "react-sortable-hoc";
+import { arrayMoveImmutable } from "array-move";
 import _ from "lodash";
 
 import EnumRender from "@hzab/formily-result-utils/src/components/EnumRender";
@@ -16,9 +18,11 @@ import "./index.less";
 const scenario = "table-render";
 
 function TableRender(props) {
-  const { config = {}, query = {}, i18n } = props;
+  const { config = {}, query = {}, i18n, setList } = props;
   const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
   const {
+    isDargTable,
+    dargEndBack,
     orderColType,
     orderColWidth,
     tableEmptyValue,
@@ -28,6 +32,28 @@ function TableRender(props) {
 
   const [columns, setColumns] = useState([]);
   const [columnList, setColumnList] = useState([]);
+  const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: "grab", color: "#999" }} />);
+
+  const SortableItem = SortableElement((props) => <tr {...props} />);
+  const SortableBody = SortableContainer((props) => <tbody {...props} />);
+
+  const onSortEnd = ({ oldIndex, newIndex }) => {
+    if (oldIndex !== newIndex) {
+      const newData = arrayMoveImmutable(props.list.slice(), oldIndex, newIndex).filter((el) => !!el);
+      setList([...newData]);
+      dargEndBack && dargEndBack(newData, query);
+    }
+  };
+
+  const DraggableContainer = (props) => (
+    <SortableBody useDragHandle disableAutoscroll helperClass="row-dragging" onSortEnd={onSortEnd} {...props} />
+  );
+
+  const DraggableBodyRow = ({ className, style, ...restProps }) => {
+    // function findIndex base on Table rowKey props and should always be a right array index
+    const index = props.list.findIndex((x) => x[props.idKey || "id"] === restProps["data-row-key"]);
+    return <SortableItem index={index} {...restProps} />;
+  };
 
   const formilyRef = useRef({
     fields: {},
@@ -240,6 +266,14 @@ function TableRender(props) {
       });
     }
 
+    if (isDargTable) {
+      columns.unshift({
+        title: "",
+        dataIndex: "sort",
+        width: 30,
+        render: () => <DragHandle />,
+      });
+    }
     setColumns(columns);
     setColumnList(columns);
   }, [props.schema, props.config]);
@@ -314,6 +348,12 @@ function TableRender(props) {
         loading={props.loading}
         onRow={config?.onRow}
         {...props.tableProps}
+        components={{
+          body: {
+            wrapper: DraggableContainer,
+            row: DraggableBodyRow,
+          },
+        }}
       />
       <FormilyField
         schema={props.schema}

package/src/table-render/index.less

@@ -5,37 +5,62 @@
     justify-content: flex-end;
     align-items: center;
     margin-bottom: 12px;
+
     .table-filter {
       font-size: 16px;
       cursor: pointer;
+
       .table-filter-icon {
         margin: 0 4px 0 10px;
         cursor: pointer;
       }
     }
   }
+
   .inline-block-max-w {
     display: inline-block;
     max-width: 100%;
   }
+
   .col-title-tooltip-icon {
     margin-left: 8px;
   }
+
   .table-render {
     border-top: 1px solid #f0f0f0;
   }
+
   .table-cell-ellipsis {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+
 }
+
+.row-dragging {
+  background: #FFF;
+  border: 1px solid #ccc;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.row-dragging td {
+  padding: 16px;
+}
+
+.row-dragging .drag-visible {
+  visibility: visible;
+}
+
 .table-popover-content {
   max-width: 400px;
   display: flex;
   flex-direction: column;
+
   .ant-checkbox-wrapper {
     margin-bottom: 8px;
     margin-left: 0 !important;
   }
-}
+}