@zat-design/sisyphus-react 3.4.13 → 3.5.0

package/es/ProSelect/index.js

@@ -27,7 +27,8 @@ export var ProSelect = function ProSelect(props, ref) {
   var _ref = useProConfig('ProSelect') || {},
     _ref$fieldNames = _ref.fieldNames,
     proSelectFieldNames = _ref$fieldNames === void 0 ? {} : _ref$fieldNames,
-    showCodeName = _ref.showCodeName;
+    showCodeName = _ref.showCodeName,
+    gViewportReady = _ref.viewportReady;
   var label = 'label';
   var code = 'value';
   if (proSelectFieldNames && Object.keys(proSelectFieldNames).length) {
@@ -54,16 +55,16 @@ export var ProSelect = function ProSelect(props, ref) {
     updateDataSource = props.updateDataSource,
     transformResponse = props.transformResponse,
     isViewPro = props.isView,
-    _props$viewportReady = props.viewportReady,
-    viewportReady = _props$viewportReady === void 0 ? false : _props$viewportReady,
+    __viewportReady = props.viewportReady,
     selectProps = _objectWithoutProperties(props, _excluded);
+  var viewportReady = __viewportReady || gViewportReady;
   /** 是否在可视区域出现过 */
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     viewFlag = _useState2[0],
     setViewFlag = _useState2[1];
-  var refSelect = useRef();
-  var _useInViewport = useInViewport(refSelect),
+  var refSelect1 = useRef();
+  var _useInViewport = useInViewport(refSelect1),
     _useInViewport2 = _slicedToArray(_useInViewport, 1),
     inViewport = _useInViewport2[0];
   selectProps.showCodeName = (_selectProps$showCode = selectProps.showCodeName) !== null && _selectProps$showCode !== void 0 ? _selectProps$showCode : showCodeName;
@@ -299,45 +300,51 @@ export var ProSelect = function ProSelect(props, ref) {
       fieldNames: fieldNames
     });
   }
-  return _jsx(_Select, _objectSpread(_objectSpread({
-    placeholder: locale === null || locale === void 0 ? void 0 : (_locale$ProSelect = locale.ProSelect) === null || _locale$ProSelect === void 0 ? void 0 : _locale$ProSelect.select,
-    allowClear: true,
-    showArrow: true,
-    loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading,
-    onChange: handleChange,
-    optionLabelProp: "children" // 解决warning报错，添加默认值
-    ,
-    showSearch: true,
-    filterOption: isFunction(_onSearch) ? false : function (input, option) {
-      var _option$children, _option$children$prop;
-      var value = isString(option === null || option === void 0 ? void 0 : option.children) ? option === null || option === void 0 ? void 0 : option.children : option === null || option === void 0 ? void 0 : (_option$children = option.children) === null || _option$children === void 0 ? void 0 : (_option$children$prop = _option$children.props) === null || _option$children$prop === void 0 ? void 0 : _option$children$prop.title;
-      return value.toLowerCase().includes(input.toLowerCase());
-    },
-    onSearch: function onSearch(value) {
-      _onSearch && _onSearch(value, _objectSpread({}, fetchFunction));
-    },
-    getPopupContainer: function getPopupContainer(trigger) {
-      return scrollFollowParent ? trigger.parentElement : document.body;
-    }
-  }, omit(cloneDeep(selectProps), ['isView', 'showCodeName', 'form', 'name'])), {}, {
-    value: transformValue(),
-    children: Array.isArray(newSelectList) && newSelectList.map(function (item) {
-      return _jsx(Option, {
-        value: item[code],
-        record: item,
-        disabled: !!item.disabled,
-        children: _jsx(TooltipOption, {
-          title: OptionRender ? OptionRender(item) : selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label],
-          children: OptionRender ? _jsx("span", {
-            title: OptionRender(item),
-            children: OptionRender(item)
-          }) : _jsx("span", {
-            title: "".concat(item[code], "-").concat(item[label]),
-            children: selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label]
-          })
-        }, item[code])
-      }, item[code]);
-    })
-  }));
+  return _jsx("div", {
+    ref: refSelect1,
+    style: props.style,
+    className: "ant-select-compact-item-div",
+    children: _jsx(_Select, _objectSpread(_objectSpread({
+      // id={refSelect1.current}
+      placeholder: locale === null || locale === void 0 ? void 0 : (_locale$ProSelect = locale.ProSelect) === null || _locale$ProSelect === void 0 ? void 0 : _locale$ProSelect.select,
+      allowClear: true,
+      showArrow: true,
+      loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading,
+      onChange: handleChange,
+      optionLabelProp: "children" // 解决warning报错，添加默认值
+      ,
+      showSearch: true,
+      filterOption: isFunction(_onSearch) ? false : function (input, option) {
+        var _option$children, _option$children$prop;
+        var value = isString(option === null || option === void 0 ? void 0 : option.children) ? option === null || option === void 0 ? void 0 : option.children : option === null || option === void 0 ? void 0 : (_option$children = option.children) === null || _option$children === void 0 ? void 0 : (_option$children$prop = _option$children.props) === null || _option$children$prop === void 0 ? void 0 : _option$children$prop.title;
+        return value.toLowerCase().includes(input.toLowerCase());
+      },
+      onSearch: function onSearch(value) {
+        _onSearch && _onSearch(value, _objectSpread({}, fetchFunction));
+      },
+      getPopupContainer: function getPopupContainer(trigger) {
+        return scrollFollowParent ? trigger.parentElement : document.body;
+      }
+    }, omit(cloneDeep(selectProps), ['isView', 'showCodeName', 'form', 'name', 'style'])), {}, {
+      value: transformValue(),
+      children: Array.isArray(newSelectList) && newSelectList.map(function (item) {
+        return _jsx(Option, {
+          value: item[code],
+          record: item,
+          disabled: !!item.disabled,
+          children: _jsx(TooltipOption, {
+            title: OptionRender ? OptionRender(item) : selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label],
+            children: OptionRender ? _jsx("span", {
+              title: OptionRender(item),
+              children: OptionRender(item)
+            }) : _jsx("span", {
+              title: "".concat(item[code], "-").concat(item[label]),
+              children: selectProps.showCodeName ? "".concat(item[code], "-").concat(item[label]) : item[label]
+            })
+          }, item[code])
+        }, item[code]);
+      })
+    }))
+  });
 };
 export default /*#__PURE__*/forwardRef(ProSelect);

package/es/ProSelect/index.less

@@ -9,3 +9,9 @@
   text-overflow: ellipsis;
   word-break: keep-all;
 }
+.ant-select-compact-item-div {
+  width: 100%;
+  >.ant-select {
+    width: 100%;
+  }
+}

package/es/ProTable/components/DndWrapper/index.d.ts

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    'data-row-key': string;
+    'data-hide'?: boolean;
+    disabled?: boolean;
+}
+export declare const Row: FC<RowProps>;
+declare const DndWrapper: ({ draggable, value, onChange, disabled, children }: {
+    draggable: any;
+    value: any;
+    onChange: any;
+    disabled: any;
+    children: any;
+}) => any;
+export default DndWrapper;

package/es/ProTable/components/DndWrapper/index.js

@@ -0,0 +1,94 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["disabled", "children"];
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { DndContext } from '@dnd-kit/core';
+import { arrayMove, useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import ProIcon from '../../../ProIcon';
+export var Row = function Row(props) {
+  var disabled = props.disabled,
+    children = props.children,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var data = useSortable({
+    id: props['data-row-key'],
+    disabled: disabled
+  });
+  var attributes = data.attributes,
+    listeners = data.listeners,
+    setNodeRef = data.setNodeRef,
+    transform = data.transform,
+    transition = data.transition,
+    isDragging = data.isDragging;
+  var style = _objectSpread(_objectSpread({}, props.style), {}, {
+    transform: CSS.Transform.toString(transform && _objectSpread(_objectSpread({}, transform), {}, {
+      scaleY: 1
+    })),
+    transition: transition
+  }, isDragging ? {
+    position: 'relative',
+    zIndex: 2
+  } : {});
+  return _jsx("tr", _objectSpread(_objectSpread(_objectSpread({}, restProps), {}, {
+    ref: setNodeRef,
+    style: style
+  }, attributes), {}, {
+    children: React.Children.map(children, function (child) {
+      if (child.key === 'RC_TABLE_KEY') {
+        var _ref = (child === null || child === void 0 ? void 0 : child.props) || {},
+          render = _ref.render,
+          record = _ref.record,
+          renderIndex = _ref.renderIndex;
+        return /*#__PURE__*/React.cloneElement(child, {
+          children: _jsxs("span", {
+            className: "drag-wrapper".concat(props['data-hide'] ? ' no-check' : ''),
+            children: [_jsx(ProIcon, _objectSpread({
+              className: "drag-icon",
+              style: {
+                touchAction: 'none',
+                cursor: disabled ? 'no-drop' : 'move'
+              },
+              type: "drag",
+              size: 20
+            }, listeners)), props['data-hide'] ? null : render === null || render === void 0 ? void 0 : render(null, record, renderIndex)]
+          })
+        });
+      }
+      return child;
+    })
+  }));
+};
+var DndWrapper = function DndWrapper(_ref2) {
+  var _value$;
+  var draggable = _ref2.draggable,
+    value = _ref2.value,
+    onChange = _ref2.onChange,
+    disabled = _ref2.disabled,
+    children = _ref2.children;
+  var onDragEnd = function onDragEnd(_ref3) {
+    var active = _ref3.active,
+      over = _ref3.over;
+    if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+      var activeIndex = value.findIndex(function (i) {
+        return i.rowKey === active.id;
+      });
+      var overIndex = value.findIndex(function (i) {
+        return i.rowKey === (over === null || over === void 0 ? void 0 : over.id);
+      });
+      var nextValue = arrayMove(value, activeIndex, overIndex);
+      onChange(nextValue);
+    }
+  };
+  return draggable && !disabled ? _jsx(DndContext, {
+    onDragEnd: onDragEnd,
+    children: _jsx(SortableContext, {
+      items: (value === null || value === void 0 ? void 0 : (_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.rowKey) ? value.map(function (i) {
+        return i.rowKey;
+      }) : [],
+      strategy: verticalListSortingStrategy,
+      children: children
+    })
+  }) : children;
+};
+export default DndWrapper;

package/es/ProTable/components/index.d.ts

@@ -1,2 +1,3 @@
 export { default as ResizableLine } from './ResizableLine';
 export { default as TableResizable } from './TableResizable';
+export { default as DndWrapper, Row } from './DndWrapper';

package/es/ProTable/components/index.js

@@ -1,2 +1,3 @@
 export { default as ResizableLine } from './ResizableLine';
-export { default as TableResizable } from './TableResizable';
+export { default as TableResizable } from './TableResizable';
+export { default as DndWrapper, Row } from './DndWrapper';

package/es/ProTable/index.d.ts

@@ -10,6 +10,9 @@ declare namespace ProTable {
     var defaultProps: {
         quickConfig: boolean;
         stripe: boolean;
+        draggable: boolean;
+        disabled: boolean;
+        isView: boolean;
     };
     var useAntdTable: typeof import("./useAntdTable").default;
 }

package/es/ProTable/index.js

@@ -1,6 +1,8 @@
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import "antd/es/button/style";
 import _Button from "antd/es/button";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import "antd/es/table/style";
 import _Table from "antd/es/table";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
@@ -8,18 +10,18 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["tableId", "headerRender", "footerRender", "quickConfig", "stripe", "columns", "className", "summary", "emptyText", "originalDataSource"],
+var _excluded = ["tableId", "headerRender", "footerRender", "quickConfig", "stripe", "columns", "className", "draggable", "disabled", "isView", "rowDisabled", "summary", "emptyText", "originalDataSource"],
   _excluded2 = ["resizeColumn", "columnConfig", "cacheTime", "storage"];
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState, createContext } from 'react';
-import { cloneDeep, get, keyBy } from 'lodash';
-import { useDebounceEffect, useDeepCompareEffect } from 'ahooks';
+import { cloneDeep, get, keyBy, assign } from 'lodash';
+import { useDebounceEffect, useDeepCompareEffect, useSetState } from 'ahooks';
 import { ReactSVG } from 'react-svg';
 import classnames from 'classnames';
 import { tools } from '@zat-design/utils';
 import { useProConfig, ProTreeModal } from '../index';
 import { valueTypeRender } from '../ProUtils/utils';
-import { TableResizable, ResizableLine } from './components';
+import { TableResizable, ResizableLine, DndWrapper, Row } from './components';
 import useAntdTable from './useAntdTable';
 import empty from '../assets/empty.png';
 import resetSvg from '../assets/reset.svg';
@@ -49,6 +51,10 @@ function ProTable(props) {
     _props$columns = props.columns,
     propsColumns = _props$columns === void 0 ? [] : _props$columns,
     className = props.className,
+    draggable = props.draggable,
+    disabled = props.disabled,
+    isView = props.isView,
+    rowDisabled = props.rowDisabled,
     summary = props.summary,
     _props$emptyText = props.emptyText,
     emptyText = _props$emptyText === void 0 ? locale === null || locale === void 0 ? void 0 : (_locale$ProTable = locale.ProTable) === null || _locale$ProTable === void 0 ? void 0 : _locale$ProTable.noData : _props$emptyText,
@@ -74,8 +80,24 @@ function ProTable(props) {
     pagination = _ref3.pagination,
     dataSource = _ref3.dataSource,
     rowKey = _ref3.rowKey;
+  var initDataSource = dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      rowKey: item === null || item === void 0 ? void 0 : item[rowKey]
+    });
+  });
+  var _useSetState = useSetState({
+      dataSource: initDataSource
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    _dataSource = _useSetState2[0].dataSource,
+    setState = _useSetState2[1];
+  useDeepCompareEffect(function () {
+    setState({
+      dataSource: initDataSource
+    });
+  }, [initDataSource]);
   var originalObj = originalDataSource ? keyBy(originalDataSource, rowKey) : undefined;
-  var dataSourceObj = dataSource ? keyBy(dataSource, rowKey) : {};
+  var dataSourceObj = _dataSource ? keyBy(_dataSource, rowKey) : {};
   var propsColumnObj = useMemo(function () {
     return propsColumns.reduce(function (acc, cur) {
       // @ts-ignore
@@ -222,7 +244,7 @@ function ProTable(props) {
     var _ref6 = tableProps || {},
       dataSource = _ref6.dataSource;
     // 没有数据时，不展示合计栏
-    if (!(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length)) {
+    if (!(_dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.length)) {
       return null;
     }
     return _jsx(_Table.Summary, {
@@ -243,7 +265,7 @@ function ProTable(props) {
           } else if (total && key) {
             var _dataSource$reduce;
             var format = valueTypeRender === null || valueTypeRender === void 0 ? void 0 : valueTypeRender[valueType];
-            var sum = dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$reduce = dataSource.reduce) === null || _dataSource$reduce === void 0 ? void 0 : _dataSource$reduce.call(dataSource, function (pre, cur) {
+            var sum = _dataSource === null || _dataSource === void 0 ? void 0 : (_dataSource$reduce = _dataSource.reduce) === null || _dataSource$reduce === void 0 ? void 0 : _dataSource$reduce.call(_dataSource, function (pre, cur) {
               var _get;
               return tools.calc(pre, '+', (_get = get(cur, key)) !== null && _get !== void 0 ? _get : 0);
             }, 0);
@@ -261,91 +283,172 @@ function ProTable(props) {
   };
   var cls = classnames(_defineProperty({
     'pro-table': true,
-    'pro-table-no-stripe': !stripe
+    'pro-table-no-stripe': !stripe,
+    'pro-table-draggable-only': draggable && !(tableProps === null || tableProps === void 0 ? void 0 : tableProps.rowSelection)
   }, className, className));
+  // 复选框
+  var _rowSelection = tableProps.rowSelection ? _objectSpread({
+    fixed: draggable,
+    getCheckboxProps: function getCheckboxProps(record) {
+      if (rowDisabled) {
+        var _disabled = rowDisabled(record);
+        return {
+          disabled: _disabled
+        };
+      }
+      return {};
+    },
+    hideSelectAll: disabled || isView
+  }, tableProps.rowSelection) : undefined;
+  /**
+   * 渲染表格选择器
+   * @returns rowSelection
+   */
+  var renderRowSelection = function renderRowSelection() {
+    if (disabled || isView) {
+      return null;
+    }
+    if (draggable && !tableProps.rowSelection) {
+      return {
+        fixed: true,
+        hideSelectAll: true,
+        renderCell: function renderCell() {
+          return _jsx(_Fragment, {});
+        }
+      };
+    }
+    return _rowSelection;
+  };
+  var onDataSourceChange = /*#__PURE__*/function () {
+    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(nextDataSource) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setState({
+              dataSource: nextDataSource
+            });
+            // 覆盖引用值
+            assign(dataSource, nextDataSource);
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onDataSourceChange(_x) {
+      return _ref8.apply(this, arguments);
+    };
+  }();
+  var renderComponents = function renderComponents() {
+    if (draggable) {
+      return {
+        body: {
+          row: Row
+        }
+      };
+    }
+    if (resizeColumn) {
+      return TableResizable.components;
+    }
+    return null;
+  };
   return _jsx(TableContext.Provider, {
     value: {
       pathKey: pathKey,
       tableConfig: tableConfig,
       Storage: Storage
     },
-    children: _jsxs("div", {
+    children: _jsx("div", {
       className: cls,
-      children: [(headerRender || columnConfig || resizeColumn) && _jsxs("div", {
-        className: "column-config",
-        children: [_jsx("div", {
-          className: "left-contain",
-          children: headerRender ? typeof headerRender === 'function' ? headerRender() : headerRender : null
-        }), _jsxs("div", {
-          className: "right-actions",
-          children: [resizeColumn && _jsx(_Button, {
-            icon: _jsx(ReactSVG, {
-              className: "anticon",
-              wrapper: "span",
-              src: resetSvg
-            }),
-            onClick: resetColumnWidth,
-            children: locale === null || locale === void 0 ? void 0 : (_locale$ProTable2 = locale.ProTable) === null || _locale$ProTable2 === void 0 ? void 0 : _locale$ProTable2.resetColumnWidth
-          }), columnConfig && _jsx(ProTreeModal, {
-            title: locale === null || locale === void 0 ? void 0 : (_locale$ProTable3 = locale.ProTable) === null || _locale$ProTable3 === void 0 ? void 0 : _locale$ProTable3.customColumns,
-            span: 8,
-            mode: "list",
-            draggable: true,
-            dataSource: customColumns,
-            value: checkColumns,
-            allValue: "all",
-            onChange: handleColumnConfig,
-            trigger: _jsx(_Button, {
-              className: "custom-column-btn",
+      children: _jsxs(DndWrapper, {
+        value: _dataSource,
+        onChange: onDataSourceChange,
+        disabled: false,
+        draggable: draggable,
+        children: [(headerRender || columnConfig || resizeColumn) && _jsxs("div", {
+          className: "column-config",
+          children: [_jsx("div", {
+            className: "left-contain",
+            children: headerRender ? typeof headerRender === 'function' ? headerRender() : headerRender : null
+          }), _jsxs("div", {
+            className: "right-actions",
+            children: [resizeColumn && _jsx(_Button, {
               icon: _jsx(ReactSVG, {
                 className: "anticon",
                 wrapper: "span",
-                src: customColumnSvg
+                src: resetSvg
               }),
-              children: locale === null || locale === void 0 ? void 0 : (_locale$ProTable4 = locale.ProTable) === null || _locale$ProTable4 === void 0 ? void 0 : _locale$ProTable4.customColumns
-            })
+              onClick: resetColumnWidth,
+              children: locale === null || locale === void 0 ? void 0 : (_locale$ProTable2 = locale.ProTable) === null || _locale$ProTable2 === void 0 ? void 0 : _locale$ProTable2.resetColumnWidth
+            }), columnConfig && _jsx(ProTreeModal, {
+              title: locale === null || locale === void 0 ? void 0 : (_locale$ProTable3 = locale.ProTable) === null || _locale$ProTable3 === void 0 ? void 0 : _locale$ProTable3.customColumns,
+              span: 8,
+              mode: "list",
+              draggable: true,
+              dataSource: customColumns,
+              value: checkColumns,
+              allValue: "all",
+              onChange: handleColumnConfig,
+              trigger: _jsx(_Button, {
+                className: "custom-column-btn",
+                icon: _jsx(ReactSVG, {
+                  className: "anticon",
+                  wrapper: "span",
+                  src: customColumnSvg
+                }),
+                children: locale === null || locale === void 0 ? void 0 : (_locale$ProTable4 = locale.ProTable) === null || _locale$ProTable4 === void 0 ? void 0 : _locale$ProTable4.customColumns
+              })
+            })]
           })]
-        })]
-      }), _jsxs("div", {
-        className: "pro-table-container",
-        children: [_jsx(_Table, _objectSpread({
-          components: resizeColumn ? TableResizable.components : undefined,
-          // @ts-ignore
-          columns: columns,
-          locale: {
-            emptyText: _jsxs("div", {
-              className: "pro-table-empty",
-              children: [_jsx("div", {
-                className: "empty-image",
-                children: _jsx("img", {
-                  src: empty,
-                  alt: locale === null || locale === void 0 ? void 0 : (_locale$ProTable5 = locale.ProTable) === null || _locale$ProTable5 === void 0 ? void 0 : _locale$ProTable5.noData
-                })
-              }), _jsx("div", {
-                className: "empty-description",
-                children: typeof emptyText === 'function' ? emptyText() : emptyText
-              })]
-            })
-          },
-          summary: _typeof(summary) === 'object' ? function () {
-            return renderSummary();
-          } : summary,
-          rowClassName: function rowClassName(record, index) {
-            if (originalDataSource && !originalObj.hasOwnProperty(get(record, rowKey))) {
-              return 'new-cell';
+        }), _jsxs("div", {
+          className: "pro-table-container",
+          children: [_jsx(_Table, _objectSpread(_objectSpread({
+            className: draggable ? 'pro-edit-table-drag' : '',
+            // components={resizeColumn ? TableResizable.components : undefined}
+            components: renderComponents(),
+            // @ts-ignore
+            columns: columns,
+            locale: {
+              emptyText: _jsxs("div", {
+                className: "pro-table-empty",
+                children: [_jsx("div", {
+                  className: "empty-image",
+                  children: _jsx("img", {
+                    src: empty,
+                    alt: locale === null || locale === void 0 ? void 0 : (_locale$ProTable5 = locale.ProTable) === null || _locale$ProTable5 === void 0 ? void 0 : _locale$ProTable5.noData
+                  })
+                }), _jsx("div", {
+                  className: "empty-description",
+                  children: typeof emptyText === 'function' ? emptyText() : emptyText
+                })]
+              })
+            },
+            summary: _typeof(summary) === 'object' ? function () {
+              return renderSummary();
+            } : summary,
+            rowClassName: function rowClassName(record, index) {
+              if (originalDataSource && !originalObj.hasOwnProperty(get(record, rowKey))) {
+                return 'new-cell';
+              }
             }
-          }
-        }, tableProps)), _jsx(ResizableLine, {})]
-      }), footerRender ? _jsx("div", {
-        className: "pro-table-footer ".concat(pagination && !!(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) ? 'has-page' : 'no-page'),
-        children: typeof footerRender === 'function' ? footerRender() : footerRender
-      }) : null]
+          }, tableProps), {}, {
+            dataSource: _dataSource,
+            rowSelection: renderRowSelection()
+          })), _jsx(ResizableLine, {})]
+        }), footerRender ? _jsx("div", {
+          className: "pro-table-footer ".concat(pagination && !!(_dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.length) ? 'has-page' : 'no-page'),
+          children: typeof footerRender === 'function' ? footerRender() : footerRender
+        }) : null]
+      })
     })
   });
 }
 ProTable.defaultProps = {
   quickConfig: false,
-  stripe: true
+  stripe: true,
+  draggable: false,
+  disabled: false,
+  isView: false
 };
 ProTable.useAntdTable = useAntdTable;
 export default ProTable;

package/es/ProTable/propsType.d.ts

@@ -35,7 +35,7 @@ export interface ProTableColumn extends Omit<ColumnType<any>, 'dataIndex'> {
     };
     transform?: (value: any, record?: any) => string[];
 }
-export interface ProTableProps extends Omit<TableProps<any>, 'summary' | 'columns'> {
+export interface ProTableProps<T = any> extends Omit<TableProps<any>, 'summary' | 'columns'> {
     tableId?: string;
     rowKey?: string | GetRowKey<any>;
     headerRender?: ReactNode | (() => ReactNode);
@@ -49,6 +49,10 @@ export interface ProTableProps extends Omit<TableProps<any>, 'summary' | 'column
     footerRender?: ReactNode | (() => ReactNode);
     emptyText?: string | ReactNode | (() => ReactNode);
     summary?: ProTableSummaryProps | TableProps<any>['summary'];
+    draggable?: boolean;
+    disabled?: boolean;
+    isView?: boolean;
+    rowDisabled?: (record?: T) => string | boolean;
     /**
      * 斑马纹设置
      */