@hzab/list-render 1.10.21-alpha.2 → 1.10.21-alpha.4

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/list-render@1.10.21
+
+feat: 增加行内编辑表格时，canEditCallback的回调，从外部控制cell是否能编辑，修复原有的hasEdit逻辑
+
 # @hzab/list-render@1.10.20
 
 fix: 修复 PaginationRender 的 全部样式

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.21-alpha.2",
+  "version": "1.10.21-alpha.4",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/CellEditTable/Template/ExpandListTemplate/index.tsx

@@ -1,5 +1,5 @@
 import { MinusSquareOutlined, PlusCircleOutlined } from "@ant-design/icons";
-import { useEffect, useState } from "react";
+import { useEffect, useState, memo } from "react";
 import "./index.less";
 export const ExpandListTemplate = (props) => {
   const [expand, setExpand] = useState<boolean>(false);
@@ -7,14 +7,18 @@ export const ExpandListTemplate = (props) => {
   const { Slots, setExpandKeys, expandKeys }: any = item;
   const onExpand = (isExpand) => {
     item?.setNewDataSource((pre) => {
+      const tempPre = [...pre];
+      const childrenIds = props?.record?.children?.map((el) => el?.groupId);
       if (isExpand) {
         const findIndex = pre?.findIndex((el) => el?.groupId == props?.record?.groupId);
-        pre.splice(findIndex + 1, 0, ...(props?.record?.children || []));
-        return [...pre];
+        const filterList = pre?.filter((el) => childrenIds?.includes(el?.groupId)) || [];
+        if (filterList?.length == 0) {
+          tempPre.splice(findIndex + 1, 0, ...(props?.record?.children || []));
+        }
+        return [...tempPre];
       }
-      const childrenIds = props?.record?.children?.map((el) => el?.groupId);
 
-      return pre?.filter((el) => !childrenIds?.includes(el?.groupId));
+      return tempPre?.filter((el) => !childrenIds?.includes(el?.groupId));
     });
   };
   useEffect(() => {
@@ -29,7 +33,6 @@ export const ExpandListTemplate = (props) => {
     // setExpand(props?.record?.expand);
   }, [props?.record]);
 
-  // console.log(props,"propspropsprops2",Slots[item?.columnId]);
   const colRender = function (text, record) {
     const Slot = Slots[item?.columnId];
     const slotProps = {
@@ -51,7 +54,7 @@ export const ExpandListTemplate = (props) => {
                 props.record["expand"] = !expand;
                 setExpandKeys((preExpandKeys) => {
                   if (preExpandKeys?.includes(props?.record?.groupId)) {
-                    return preExpandKeys?.filter((el) => el?.groupId != props?.record?.groupId);
+                    return preExpandKeys?.filter((el) => el != props?.record?.groupId);
                   }
                   return [...preExpandKeys, props?.record?.groupId];
                 });
@@ -64,6 +67,12 @@ export const ExpandListTemplate = (props) => {
               className="expandList-template-icon"
               onClick={() => {
                 props.record["expand"] = !expand;
+                setExpandKeys((preExpandKeys) => {
+                  if (preExpandKeys?.includes(props?.record?.groupId)) {
+                    return preExpandKeys?.filter((el) => el != props?.record?.groupId);
+                  }
+                  return [...preExpandKeys, props?.record?.groupId];
+                });
                 setExpand(!expand);
                 onExpand(!expand);
               }}

package/src/components/CellEditTable/Template/widthWrap.tsx

@@ -192,8 +192,8 @@ export const WidthWrap = (opt: any, edit = false) => {
     }, [cell]);
 
     const echoValue = useMemo(() => {
-      if(!cell?.getField){
-        return
+      if (!cell?.getField) {
+        return;
       }
       return getVal(
         { ...(cell?.getField && cell?.getField()), enum: cell?.getField()?.enum || cell?.values },
@@ -205,7 +205,6 @@ export const WidthWrap = (opt: any, edit = false) => {
       <div
         style={{ width: "100%", height: "100%", display: "flex", alignItems: "center" }}
         onDoubleClick={(e) => {
-          console.log(cell,"c222ellcellcellcellcell");
           if (cell?.nonEditable) {
             return;
           }

package/src/components/CellEditTable/index.tsx

@@ -107,7 +107,7 @@ export default function CellEditTable(props: any) {
           const columnsItem = tableColumns[ind];
           const cellItem = item[el];
           let type: any = columnsItem?.type ?? "text";
-          if (!rowSelection && ind == 0 && item?.children) {
+          if (!rowSelection && ind == 0) {
             type = "ExpandListTemplate";
           }
           if (rowSelection && ind == 1) {
@@ -130,7 +130,7 @@ export default function CellEditTable(props: any) {
           return {
             ...columnsItem,
             record: item,
-            rowId: item?.id || columnsItem?.type,
+            rowId: item[rowKey] || columnsItem?.type,
             type: type,
             nonEditable: columnsItem?.nonEditable,
             text: String(cellItem || ""),
@@ -153,14 +153,11 @@ export default function CellEditTable(props: any) {
         }),
       };
     });
-    setRows([...headerList, ...tempDataSource]);
+    setRows(_.uniqBy([...headerList, ...tempDataSource], "rowId"));
   }, [newDataSource, tableColumns, rowSelection]);
-  console.log(rows, "rowsrows");
 
   // 单元格编辑回调
   const handleCellsChanged = (changes) => {
-    console.log(changes, "changeschangeschanges");
-
     setRows((prevRows) => {
       changes.forEach((change) => {
         const changeRowIdx = prevRows.findIndex((el) => el.rowId == change.rowId);

package/src/components/Formily/FormilyEditTable.tsx

@@ -30,8 +30,9 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   onSave: (field: { type: string; name: string }) => void;
   onCancel: () => void;
   topProps: {
-    config: { hasEdit: boolean | Function };
+    tableConf: { hasEdit: boolean | Function };
     editMode: "modal" | "line" | "line-cell" | "cell";
+    canEditCallback: (record: Partial<Item> & { key: React.Key }, field: { type: string; name: string }, dataIndex: string) => void;
   };
   children: React.ReactNode;
 }
@@ -56,8 +57,8 @@ export const EditableCell: React.FC<EditableCellProps> = ({
   const field = getField && getField();
   const fPattern = field?.["x-pattern"];
   const fDisplay = field?.["x-display"];
-  const { editMode = "modal" } = topProps || {};
-  const { hasEdit } = topProps?.config || {};
+  const { editMode = "modal", canEditCallback } = topProps || {};
+  const { hasEdit } = topProps?.tableConf || {};
   const fieldRef = useRef();
 
   // 弹窗编辑模式
@@ -66,7 +67,11 @@ export const EditableCell: React.FC<EditableCellProps> = ({
   }
   // 无编辑权限或禁止编辑
   const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
-  let _editable = _hasEdit && editable && !(fPattern === "disabled" || fPattern === "readOnly" || fDisplay === "none");
+  let _editable =
+    _hasEdit &&
+    editable &&
+    !(fPattern === "disabled" || fPattern === "readOnly" || fDisplay === "none") &&
+    (canEditCallback ? canEditCallback(record, field, dataIndex) : true);
   if (!_editable) {
     return <td {...restProps}>{children}</td>;
   }

package/src/table-render/index.jsx

@@ -361,7 +361,7 @@ const TableRender = forwardRef(function (props, tableRef) {
 
   const tableProps = {
     className: "table-render",
-    rowKey: props.idKey || "id",
+    rowKey: props?.idKey || "id",
     rowSelection: config?.rowSelection,
     columns: columns,
     dataSource: props.list,