@hzab/list-render 1.10.20-alpha.0 → 1.10.20

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/list-render@1.10.20
+
+fix: 修复 PaginationRender 的 全部样式
+
 # @hzab/list-render@1.10.19
 
 fix: 修复 PaginationRender 的 pageSizeOptions 取值

package/README.md

@@ -107,16 +107,6 @@ const listDM = useMemo(
 | onEditReqVerify             | Function                  | 否   | -                                      | 编辑态保存时额外的规则校验函数，返回 Promise 的 resolve 或 reject 用于继续执行或停止执行                                   |
 
 - fetchOnEdit 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填
-- editMode
-  - modal 弹窗/抽屉编辑;
-  - table-edit 整个 table 一起编辑;
-  - table-edit-show 整个 table 可 一起编辑，直接显示表单;
-  - line 编辑整行，编辑按钮在操作列;
-  - line-show 编辑整行，直接显示表单，编辑按钮在操作列;
-  - line-cell 编辑整行，操作按钮在单元格;
-  - line-cell-show 编辑整行，直接显示表单，操作按钮在单元格;
-  - cell 编辑指定单元格
-  - cell-show 编辑指定单元格，直接显示表单
 
 #### tableConf
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.20-alpha.0",
+  "version": "1.10.20",
   "description": "",
   "main": "src",
   "scripts": {
@@ -26,12 +26,12 @@
   "devDependencies": {
     "@ant-design/icons": "^4.8.1",
     "@hzab/data-model": "^1.7.4",
-    "@hzab/form-render": "^1.7.12",
+    "@hzab/form-render": "^1.6.12",
     "@hzab/formily-result-utils": "^1.2.0",
     "@hzab/permissions": "^1.0.0",
     "@hzab/schema-descriptions": "^1.3.0",
-    "@hzab/utils": "^1.0.16",
     "@hzab/webpack-config": "^0.7.2",
+    "@hzab/utils": "^1.0.7",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "antd": "^4.24.12",

package/src/components/Formily/{--FormilyEditTable.tsx → FormilyEditTable.tsx}

@@ -1,9 +1,7 @@
-import React, { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import React, { useState, useCallback, useRef, useEffect } from "react";
 import { Card, Slider, Rate, Form, Button } from "antd";
 import { EditOutlined, CheckOutlined, CloseOutlined } from "@ant-design/icons";
-import { createForm, onFormValuesChange, onFieldValueChange } from "@formily/core";
 import { createSchemaField, FormProvider, FormConsumer } from "@formily/react";
-
 import { cloneDeep } from "lodash";
 
 import { antdComponents, customComponents } from "@hzab/form-render";
@@ -15,74 +13,6 @@ export interface Item {
   address: string;
 }
 
-export interface EditableRowProps extends React.HTMLAttributes<HTMLElement> {
-  SchemaField: any;
-  getField: () => {
-    type: string;
-    name: string;
-  };
-  editing: boolean;
-  dataIndex: string;
-  title: any;
-  inputType: "number" | "text";
-  record: Item;
-  index: number;
-  editable: boolean;
-  onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string, opt: Object) => void;
-  onSave: (field: { type: string; name: string }) => void;
-  onCancel: () => void;
-  topProps: {
-    config: { hasEdit: boolean | Function };
-    editMode: "modal" | "line" | "line-cell" | "cell";
-    formConf: any;
-  };
-  children: React.ReactNode;
-}
-
-export const EditableRow: React.FC<EditableRowProps> = ({
-  SchemaField,
-  getField,
-  editing,
-  dataIndex,
-  title,
-  inputType,
-  record,
-  index,
-  onEdit,
-  onSave,
-  onCancel,
-  editable,
-  topProps,
-  children,
-  ...restProps
-}) => {
-  const { formConf = {} } = topProps || {};
-  const formRender = useMemo(
-    () =>
-      createForm({
-        initialValues: record,
-        // 禁用状态（注意，自定义组件组件自行获取对应的状态）
-        readOnly: formConf.readOnly,
-        disabled: formConf.disabled,
-        ...(formConf.formOptions || {}),
-        effects(...args) {
-          formConf.onFormValuesChange && onFormValuesChange(formConf.onFormValuesChange);
-          formConf.onFieldValueChange && onFieldValueChange("*", formConf.onFieldValueChange);
-          formConf.formOptions?.effects && formConf.formOptions?.effects(...args);
-        },
-      }),
-    [],
-  );
-  // return <tr {...restProps}>{children}</tr>;
-  return (
-    <FormProvider form={formRender}>
-      <Form layout="vertical" component={false}>
-        <FormConsumer>{() => <tr {...restProps}>{children}</tr>}</FormConsumer>
-      </Form>
-    </FormProvider>
-  );
-};
-
 export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   SchemaField: any;
   getField: () => {
@@ -102,7 +32,6 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   topProps: {
     config: { hasEdit: boolean | Function };
     editMode: "modal" | "line" | "line-cell" | "cell";
-    isEditCell: (record) => boolean;
   };
   children: React.ReactNode;
 }
@@ -127,12 +56,12 @@ export const EditableCell: React.FC<EditableCellProps> = ({
   const field = getField && getField();
   const fPattern = field?.["x-pattern"];
   const fDisplay = field?.["x-display"];
-  const { editMode = "modal", isEditCell } = topProps || {};
+  const { editMode = "modal" } = topProps || {};
   const { hasEdit } = topProps?.config || {};
   const fieldRef = useRef();
 
   // 弹窗编辑模式
-  if (editMode === "modal" || (typeof isEditCell === "function" && !isEditCell(record))) {
+  if (editMode === "modal") {
     return <td {...restProps}>{children}</td>;
   }
   // 无编辑权限或禁止编辑

package/src/list-render.jsx

@@ -10,7 +10,6 @@ import axiosI, { isCancel, getCancelTokenSource } from "@hzab/data-model/src/axi
 import QueryRender from "./query-render";
 import Pagination from "./pagination-render";
 import TableRender from "./table-render";
-import EditArrayTable from "./EditArrayTable";
 import CardRender from "./card-render";
 import FormModal from "./FormModal";
 import DetailModal from "./DetailModal";
@@ -203,7 +202,6 @@ const ListRender = forwardRef(function (props, parentRef) {
           setTotal(res.pagination?.total);
           props.onGetListEnd && props.onGetListEnd(res);
           setListLoading(false);
-          return res;
         })
         .catch((err) => {
           // 兼容新老版本 data-model isCancel 取法
@@ -456,9 +454,6 @@ const ListRender = forwardRef(function (props, parentRef) {
     setShowSearch(!showSearch);
   };
 
-  const CTableRender =
-    props.editMode === "table-edit" || props.editMode === "table-edit-show" ? EditArrayTable : TableRender;
-
   return (
     <div className={`list-render ${props.className}`}>
       <div className={`list-header ${props.verticalHeader ? "vertical-header" : ""}`}>
@@ -521,10 +516,10 @@ const ListRender = forwardRef(function (props, parentRef) {
       ) : null}
 
       {layout === "default" ? (
-        <CTableRender
+        <TableRender
           idKey={idKey}
           ref={tableRef}
-          schema={schema}
+          schema={schema?.schema}
           list={list}
           config={props.tableConf}
           hasAction={props.hasAction}
@@ -545,7 +540,6 @@ const ListRender = forwardRef(function (props, parentRef) {
           i18n={i18n}
           onEditSubmit={onEditSubmit}
           topProps={props}
-          handleMessage={handleMessage}
         />
       ) : null}
 

package/src/pagination-render/index.less

@@ -1,11 +1,54 @@
-.pagination-render-wrap {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding-top: 20px;
-  .pagination-render {
-    li {
-      margin-bottom: 8px;
-    }
-  }
-}
+.pagination-render-wrap {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: 20px;
+  .pagination-render {
+    li {
+      margin-bottom: 8px;
+    }
+  }
+  .pagination-infinity {
+    .ant-pagination-options {
+      .rc-virtual-list-holder-inner {
+        .ant-select-item {
+          &:last-child {
+            .ant-select-item-option-content {
+              position: relative;
+              color: transparent;
+              &::after {
+                color: rgba(0, 0, 0, 0.85);
+                cursor: pointer;
+                transition: background 0.3s ease;
+                content: "全部";
+                position: absolute;
+                left: 0;
+                top: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .pagination-infinity-checked {
+    .ant-pagination-options {
+      .ant-select-selector {
+        .ant-select-selection-item {
+          position: relative;
+          color: transparent;
+          &::after {
+            color: rgba(0, 0, 0, 0.85);
+            cursor: pointer;
+            transition: background 0.3s ease;
+            content: "全部";
+            position: absolute;
+            left: 0;
+            top: 0;
+            visibility: visible;
+          }
+        }
+      }
+    }
+  }
+}

package/src/table-render/index.jsx

@@ -1,10 +1,13 @@
-import { useEffect, useState, useRef, forwardRef, useImperativeHandle, Fragment, useMemo } from "react";
+import { useEffect, useState, useMemo, useRef, forwardRef, useImperativeHandle } from "react";
 import { Form, Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "antd";
 import { QuestionCircleOutlined, FilterOutlined, SettingOutlined, MenuOutlined } from "@ant-design/icons";
 import { SortableContainer, SortableElement, SortableHandle } from "react-sortable-hoc";
 import { arrayMoveImmutable } from "array-move";
 import _, { isFunction } from "lodash";
 
+import { FormProvider, FormConsumer } from "@formily/react";
+import { createForm, onFormValuesChange, onFieldValueChange } from "@formily/core";
+
 import EnumRender from "@hzab/formily-result-utils/src/components/EnumRender";
 import { SHOW_MODE_TYPES } from "@hzab/formily-result-utils/src/common/constant";
 import { FormilyField } from "../components/Formily/FormilyField";
@@ -13,64 +16,42 @@ import { getColRender } from "../common/formily-utils";
 import { getVal, getFieldList } from "../common/utils";
 import { handleReactions } from "../common/handleReactions";
 
-import { useEditTable } from "../components/Formily/FormilyEditTable";
-import { EditTableRow } from "../components/Formily/FormilyEditTable/EditTableRow";
-import { EditableCell } from "../components/Formily/FormilyEditTable/EditTableCell";
-import { TableFormilyContext } from "../components/Formily/FormilyEditTable/useTableFormilyContext";
+import { useEditTable, EditableCell } from "../components/Formily/FormilyEditTable";
 
 import "./index.less";
 
 const scenario = "table-render";
 
-/**
- * 编辑按钮隐藏
- */
-const editModeHideList = ["cell", "line-cell", "table-line-show"];
-
 const TableRender = forwardRef(function (props, tableRef) {
-  const { topProps, config = {}, query = {}, i18n, setList, schema } = props;
-  const propsSchema = schema?.schema;
+  const { topProps, config = {}, query = {}, i18n, setList } = props;
   const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
   const {
     dragColConf = {},
     isDargTable,
     dargEndBack,
-    orderColType = "page",
+    orderColType,
     orderColWidth,
     tableEmptyValue,
     isShowTableFilter = false,
     isTableSortXIdex = false,
   } = config || {};
-  const [_list, _setList] = useState(props.list);
-  const antdTableRef = useRef();
-  const rowFormMapRef = useRef(new Map());
-  const editingInofRef = useRef({
-    editingRowId: "",
-    editingKey: "",
-  });
-
+  const { editMode = "modal" } = topProps || {};
+  const isEditTable = editMode !== "modal";
   useImperativeHandle(tableRef, () => ({
     onEditByTable,
   }));
 
-  useEffect(() => {
-    _setList(props.list);
-    // 数据清除问题，避免分页数据量持续累计过于庞大
-    rowFormMapRef.current.clear();
-  }, [props.list]);
-
   const [columns, setColumns] = useState([]);
   const [columnList, setColumnList] = useState([]);
   const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: "grab", color: "#999" }} />);
 
-  const SortableItem = SortableElement((props) => <Fragment children={props.children} />);
+  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]);
-      _setList([...newData]);
       dargEndBack && dargEndBack(newData, query);
     }
   };
@@ -90,27 +71,38 @@ const TableRender = forwardRef(function (props, tableRef) {
     fieldSchemas: {},
   });
 
-  const {
-    onEditSave,
-    onEdit: onEditByTable,
-    mergedColumns,
-  } = useEditTable({
+  const formRender = useMemo(
+    () =>
+      createForm({
+        initialValues: props.initialValues,
+        // 禁用状态（注意，自定义组件组件自行获取对应的状态）
+        readOnly: props.readOnly,
+        disabled: props.disabled,
+        ...(props.formOptions || {}),
+        effects(...args) {
+          props.onFormValuesChange && onFormValuesChange(props.onFormValuesChange);
+          props.onFieldValueChange && onFieldValueChange("*", props.onFieldValueChange);
+          props.formOptions?.effects && props.formOptions?.effects(...args);
+        },
+      }),
+    [],
+  );
+  const { onEdit: onEditByTable, mergedColumns } = useEditTable({
     idKey: props.idKey,
     columns,
     onEdit: props.onEdit,
     onEditSubmit: props.onEditSubmit,
+    formRender,
     components: props.components,
     schemaScope: props.schemaScope,
     topProps: props.topProps,
-    rowFormMapRef,
-    editingInofRef,
   });
 
   useEffect(() => {
-    if (!propsSchema.properties) {
+    if (!(props.schema && props.schema.properties)) {
       return;
     }
-    const fieldList = getFieldList(propsSchema, [], { ...props.getFieldListOpt, formilyRef }, isTableSortXIdex);
+    const fieldList = getFieldList(props.schema, [], { ...props.getFieldListOpt, formilyRef }, isTableSortXIdex);
     const columns = [];
 
     // 序号列
@@ -139,28 +131,10 @@ const TableRender = forwardRef(function (props, tableRef) {
     });
     _fieldList.forEach((field, colIndex) => {
       const fieldSchemas = formilyRef.current?.fields;
-      if (!field["x-decorator-props"]) {
-        field["x-decorator-props"] = {};
-      }
-      // 存储原始的 pattern，用于行内编辑还原数据
-      field["x-decorator-props"]._sourcePattern = field["x-pattern"];
       if (field.inTable !== false) {
         const { name, title } = field;
         const comName = field["x-component"];
 
-        const decoratorProps = field["x-decorator-props"] || {};
-        let _title = title;
-        if (decoratorProps.tooltip) {
-          _title = (
-            <span className="col-title-tooltip-wrap inline-block-max-w">
-              {_title}
-              <Tooltip className="col-title-tooltip" title={decoratorProps.tooltip}>
-                <QuestionCircleOutlined className="col-title-tooltip-icon" />
-              </Tooltip>
-            </span>
-          );
-        }
-
         let _colConf = {};
 
         if (props.config?.colConf && props.config?.colConf[name]) {
@@ -230,6 +204,22 @@ const TableRender = forwardRef(function (props, tableRef) {
           };
         }
 
+        let _title = isFunction(title) ? title() : title;
+        if (_colConf?.title) {
+          _title = isFunction(_colConf?.title) ? _colConf?.title() : _colConf?.title;
+        }
+        const decoratorProps = field["x-decorator-props"] || {};
+        if (decoratorProps.tooltip) {
+          _title = (
+            <span className="col-title-tooltip-wrap inline-block-max-w">
+              {_title}
+              <Tooltip className="col-title-tooltip" title={decoratorProps.tooltip}>
+                <QuestionCircleOutlined className="col-title-tooltip-icon" />
+              </Tooltip>
+            </span>
+          );
+        }
+
         columns.push({
           // field, // HACK: 直接传入 field 在 title 传入 ReactNode，内部深克隆导致页面报错白屏。使用函数获取解决
           getField: () => field,
@@ -237,8 +227,8 @@ const TableRender = forwardRef(function (props, tableRef) {
           ..._colConf,
           onCell: (record, rowIndex) =>
             _colConf?.onCell?.({ ...record, _field: { ...field, ...(fieldSchemas?.[name] || {}) } }, rowIndex) || {},
-          // 函数式传入，解决 title ReactNode 传入报错问题
-          title: () => (isFunction(_colConf?.title) ? _colConf?.title() : _title),
+          // 函数式传入，解决 title ReactNode 传入报错问题（table 组件内部对 columns 进行 lodash.deepClone 导致 ReactNode 变成对象无法正常渲染） Uncaught TypeError: this.queryFeedbacks is not a function
+          title: () => _title,
           key: name,
           dataIndex: name,
           render: getColRender(colRender),
@@ -266,7 +256,8 @@ const TableRender = forwardRef(function (props, tableRef) {
           const { editMode = "modal" } = props.topProps || {};
           // 编辑按钮权限
           const _hasEdit =
-            !editModeHideList.includes(editMode) &&
+            editMode !== "cell" &&
+            editMode !== "line-cell" &&
             (hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false);
 
           //详情按钮权限
@@ -298,10 +289,6 @@ const TableRender = forwardRef(function (props, tableRef) {
                   type="link"
                   onClick={() => {
                     props.onEdit && props.onEdit(record, index);
-                    if (editMode == "line") {
-                      // 整行编辑，编辑按钮在操作列的模式下表单数据回填
-                      return onEditByTable(record, record[props.idKey]);
-                    }
                   }}
                 >
                   {tableEdit}
@@ -340,7 +327,12 @@ const TableRender = forwardRef(function (props, tableRef) {
     }
     setColumns(columns);
     setColumnList(columns);
-  }, [propsSchema, props.config]);
+  }, [props.schema, props.config]);
+
+  // 解决 FormilyField 中无相关参数报错的问题。自定义参数都从这里传入
+  const reactionOpts = {
+    scenario: scenario,
+  };
 
   const onChange = (e, col) => {
     if (e.target.checked) {
@@ -354,66 +346,38 @@ const TableRender = forwardRef(function (props, tableRef) {
   };
 
   const tableProps = {
-    ref: antdTableRef,
     className: "table-render",
     rowKey: props.idKey || "id",
     rowSelection: config?.rowSelection,
     columns: columns,
-    dataSource: _list,
+    dataSource: props.list,
     pagination: false,
     scroll: config.scroll,
     expandable: config.expandable,
     loading: props.loading,
-    onRow: (record, index) => {
-      const _onRowRes = config?.onRow && config?.onRow(record, index);
-      return {
-        ..._onRowRes,
-        record,
-        id: record[props.idKey || "id"],
-        rowFormMapRef,
-        editingInofRef,
-        components: props.components,
-        topProps,
-        onEditSave,
-      };
-    },
+    onRow: config?.onRow,
     topProps: props.topProps,
     ...props.tableProps,
   };
 
-  tableProps.columns = mergedColumns;
+  if (isDargTable) {
+    tableProps.components = {
+      body: {
+        wrapper: DraggableContainer,
+        row: DraggableBodyRow,
+      },
+    };
+  }
 
-  // useMemo 解决 row 重复渲染问题
-  const tableComponents = useMemo(
-    () => ({
+  if (isEditTable) {
+    tableProps.columns = mergedColumns;
+    tableProps.components = {
       body: {
         ...tableProps?.components?.body,
         cell: EditableCell,
-        row: isDargTable
-          ? ({ rowFormMapRef, components, topProps, ...props }) => {
-              // 拖拽
-              return (
-                <DraggableBodyRow {...props}>
-                  <EditTableRow rowFormMapRef={rowFormMapRef} components={components} topProps={topProps} {...props} />
-                </DraggableBodyRow>
-              );
-            }
-          : EditTableRow,
-        ...(isDargTable
-          ? {
-              wrapper: DraggableContainer,
-            }
-          : {}),
       },
-    }),
-    [],
-  );
-  tableProps.components = tableComponents;
-
-  // 解决 FormilyField 中无相关参数报错的问题。自定义参数都从这里传入
-  const reactionOpts = {
-    scenario: scenario,
-  };
+    };
+  }
 
   return (
     <div className="table-render-wrap">
@@ -457,24 +421,26 @@ const TableRender = forwardRef(function (props, tableRef) {
           </Popover>
         </div>
       ) : null}
-      <TableFormilyContext.Provider
-        value={{
-          rowFormMapRef,
-          editingInofRef,
-        }}
-      >
+      {isEditTable ? (
+        <FormProvider form={formRender}>
+          <Form layout="vertical">
+            <FormConsumer>{() => <Table {...tableProps} />}</FormConsumer>
+          </Form>
+        </FormProvider>
+      ) : (
         <Table {...tableProps} />
-      </TableFormilyContext.Provider>
-      {/* <FormilyField
-        schema={propsSchema}
+      )}
+      <FormilyField
+        schema={props.schema}
         formilyRef={formilyRef}
         components={props.components}
+        topProps={topProps}
         schemaScope={{
           ...reactionOpts,
           ...props.schemaScope,
         }}
         reactionOpts={reactionOpts}
-      /> */}
+      />
     </div>
   );
 });

package/src/EditArrayTable/index.less

@@ -1,11 +0,0 @@
-.edit-array-table {
-  .edit-array-table-head {
-    display: flex;
-    justify-content: space-between;
-    .edit-array-table-actions {
-      .ant-btn + .ant-btn {
-        margin-left: 8px;
-      }
-    }
-  }
-}