linkmore-design 1.1.7 → 1.1.9

package/es/LmTable/Table.js

@@ -31,10 +31,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactResizable = require("react-resizable");
 
+var _ahooks = require("ahooks");
+
 var _immer = require("immer");
 
 var _reactSortableHoc = require("react-sortable-hoc");
 
+var _useRowSelectControllableValue = _interopRequireDefault(require("./hooks/useRowSelectControllableValue"));
+
 var _ConfigProvider = _interopRequireDefault(require("../ConfigProvider"));
 
 var _IconFont = _interopRequireDefault(require("../IconFont"));
@@ -142,24 +146,31 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _React$useContext = _react.default.useContext(ConfigContext),
       locale = _React$useContext.locale;
 
-  var _useState = (0, _react.useState)({
-    selectedRows: []
+  var transformRowClick = function transformRowClick(data) {
+    return rowClick === null || rowClick === void 0 ? void 0 : rowClick(data.selectedRows || data);
+  }; // const [useSelectedRows, setSelectedRows] = useState({ selectedRows: [] }) // 复选中的值
+
+
+  var _useControllableValue = (0, _useRowSelectControllableValue.default)({
+    value: {
+      selectedRows: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRows) || (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) || []
+    },
+    onChange: rowClick ? transformRowClick : undefined
   }),
+      _useControllableValue2 = (0, _slicedToArray2.default)(_useControllableValue, 2),
+      useSelectedRows = _useControllableValue2[0],
+      setSelectedRows = _useControllableValue2[1];
+
+  var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      useSelectedRows = _useState2[0],
-      setSelectedRows = _useState2[1]; // 复选中的值
+      useActiveKey = _useState2[0],
+      setActiveKey = _useState2[1]; // 行选中
 
 
-  var _useState3 = (0, _react.useState)(''),
+  var _useState3 = (0, _react.useState)([]),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      useActiveKey = _useState4[0],
-      setActiveKey = _useState4[1]; // 行选中
-
-
-  var _useState5 = (0, _react.useState)([]),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      useColumns = _useState6[0],
-      setColumns = _useState6[1];
+      useColumns = _useState4[0],
+      setColumns = _useState4[1];
 
   var tableWarpRef = (0, _react.useRef)(null);
   var dataSourceRef = (0, _react.useRef)(null);
@@ -169,10 +180,10 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var contentMenuRef = (0, _react.useRef)(null);
   /** 当前展开的列 */
 
-  var _useState7 = (0, _react.useState)([]),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      expandedRowKeys = _useState8[0],
-      setExpandedRowKeys = _useState8[1];
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      expandedRowKeys = _useState6[0],
+      setExpandedRowKeys = _useState6[1];
 
   var deepDataSourceRef = (0, _react.useRef)([]);
   var deepColumnsRef = (0, _react.useRef)([]); //
@@ -217,7 +228,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [groupRowKeys, groupColKeys]);
   /** sheel数据的表格 */
 
-  var _useState9 = (0, _react.useState)({
+  var _useState7 = (0, _react.useState)({
     // 记录框选的行列坐标信息
     start: {},
     end: {},
@@ -230,9 +241,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     // 记录右下角小方块的拖动信息
     commiting: {}
   }),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      sheelStataus = _useState10[0],
-      setSheelStatus = _useState10[1];
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      sheelStataus = _useState8[0],
+      setSheelStatus = _useState8[1];
 
   var shellStatusRef = (0, _react.useRef)({
     start: {},
@@ -244,49 +255,49 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     commiting: {}
   });
 
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      selectIng = _useState10[0],
+      setSelectIng = _useState10[1];
+
   var _useState11 = (0, _react.useState)(false),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      selectIng = _useState12[0],
-      setSelectIng = _useState12[1];
+      editIng = _useState12[0],
+      setEditIng = _useState12[1];
 
   var _useState13 = (0, _react.useState)(false),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      editIng = _useState14[0],
-      setEditIng = _useState14[1];
-
-  var _useState15 = (0, _react.useState)(false),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      commitIng = _useState16[0],
-      setCommitIng = _useState16[1];
+      commitIng = _useState14[0],
+      setCommitIng = _useState14[1];
   /** 右键菜单是否显示 */
 
 
-  var _useState17 = (0, _react.useState)(false),
-      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      contextMenuStatus = _useState18[0],
-      setContextMenuStatus = _useState18[1];
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      contextMenuStatus = _useState16[0],
+      setContextMenuStatus = _useState16[1];
   /** 右键按钮的位置 */
 
 
-  var _useState19 = (0, _react.useState)({
+  var _useState17 = (0, _react.useState)({
     position: 'fixed',
     left: 300,
     top: 200
   }),
-      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      style = _useState20[0],
-      setStyle = _useState20[1];
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      style = _useState18[0],
+      setStyle = _useState18[1];
 
-  var _useState21 = (0, _react.useState)(null),
-      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      chartsModalStatus = _useState22[0],
-      setChartsModalStatus = _useState22[1]; // 列设置
+  var _useState19 = (0, _react.useState)(null),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      chartsModalStatus = _useState20[0],
+      setChartsModalStatus = _useState20[1]; // 列设置
 
 
-  var _useState23 = (0, _react.useState)(false),
-      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      columnsStateMap = _useState24[0],
-      setColumnsStateMap = _useState24[1];
+  var _useState21 = (0, _react.useState)(false),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      columnsStateMap = _useState22[0],
+      setColumnsStateMap = _useState22[1];
 
   var SortableItem = (0, _reactSortableHoc.SortableElement)(function (props) {
     return /*#__PURE__*/_react.default.createElement("tr", props);
@@ -299,7 +310,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var source = [];
 
     var deepChildren = function deepChildren(arr) {
-      arr.forEach(function (item) {
+      arr === null || arr === void 0 ? void 0 : arr.forEach(function (item) {
         source.push((0, _lodash.omit)(item, 'children')); // 展开
 
         if ((item === null || item === void 0 ? void 0 : item.children) && expandedRowKeys.includes(item.key)) {
@@ -316,7 +327,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var source = [];
 
     var deepChildren = function deepChildren(arr) {
-      arr.forEach(function (item) {
+      arr === null || arr === void 0 ? void 0 : arr.forEach(function (item) {
         if (item.children && item.children.length) {
           deepChildren(item.children);
         } else {
@@ -747,6 +758,8 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var _shellStatusRef$curre11;
 
     if (isEmpty((_shellStatusRef$curre11 = shellStatusRef.current) === null || _shellStatusRef$curre11 === void 0 ? void 0 : _shellStatusRef$curre11.editing)) {
+      var _pasteData;
+
       var _shellStatusRef$curre12 = shellStatusRef.current,
           start = _shellStatusRef$curre12.start,
           end = _shellStatusRef$curre12.end;
@@ -770,8 +783,8 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
 
       var resultEnd = [];
-      pasteData.forEach(function (row, i) {
-        row.forEach(function (value, j) {
+      (_pasteData = pasteData) === null || _pasteData === void 0 ? void 0 : _pasteData.forEach(function (row, i) {
+        row === null || row === void 0 ? void 0 : row.forEach(function (value, j) {
           resultEnd.push({
             i: start.i + i,
             j: start.j + j,
@@ -780,7 +793,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         });
       });
       var res = (0, _immer.produce)(dataSourceRef.current, function (draft) {
-        resultEnd.forEach(function (item) {
+        resultEnd === null || resultEnd === void 0 ? void 0 : resultEnd.forEach(function (item) {
           var _isSelected2;
 
           if ((_isSelected2 = isSelected(item.i, item.j)) === null || _isSelected2 === void 0 ? void 0 : _isSelected2.isSelected) {
@@ -983,7 +996,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var colIndex = 0;
 
     var traverseColumns = function traverseColumns(columns) {
-      columns.forEach(function (col) {
+      columns === null || columns === void 0 ? void 0 : columns.forEach(function (col) {
         if (col.show === false) {
           return;
         }
@@ -1031,7 +1044,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       });
     };
 
-    var innerColumns = (0, _lodash.cloneDeep)(useColumns);
+    var innerColumns = (0, _lodash.cloneDeep)(useColumns.filter(function (item) {
+      return item.show !== false;
+    }));
     traverseColumns(innerColumns, null);
 
     if (groupRowKeys === null || groupRowKeys === void 0 ? void 0 : groupRowKeys.length) {
@@ -1064,15 +1079,13 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       var selectedRows = useSelectedRows.selectedRows;
 
       if (tableRowType === 'select' || tableRowType === 'default' && selectedRows.length) {
-        var selectedRowKeys = selectedRows.map(function (v) {
-          return v[rowKey];
+        var selectIndex = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.findIndex(function (v) {
+          return (0, _lodash.isObject)(v) ? v[rowKey] === record[rowKey] : v === record[rowKey];
         });
-        var Idx = selectedRowKeys.indexOf(record[rowKey]);
-        Idx >= 0 ? selectedRows.splice(Idx, 1) : selectedRows.push(record);
+        selectIndex >= 0 ? selectedRows.splice(selectIndex, 1) : selectedRows.push((0, _lodash.isObject)(selectedRows[0]) || !selectedRows.length ? record : record[rowKey]);
         setSelectedRows({
-          selectedRows: selectedRows
-        });
-        rowClick === null || rowClick === void 0 ? void 0 : rowClick(selectedRows);
+          selectedRows: (0, _lodash.cloneDeep)(selectedRows)
+        }); // rowClick?.(selectedRows)
       }
     } else {
       rowClick === null || rowClick === void 0 ? void 0 : rowClick(record);
@@ -1120,13 +1133,13 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         showSizeChanger: true,
         showQuickJumper: true,
         showTotal: function showTotal(total) {
-          return (locale === null || locale === void 0 ? void 0 : locale.locale) === 'zh-cn' ? "\u5171 ".concat(total, " \u6761") : "total ".concat(total, " Page");
+          return (locale === null || locale === void 0 ? void 0 : locale.locale) === 'en' ? "total ".concat(total, " Page") : "\u5171 ".concat(total, " \u6761");
         },
-        locale: (locale === null || locale === void 0 ? void 0 : locale.locale) === 'zh-cn' ? {
+        locale: (locale === null || locale === void 0 ? void 0 : locale.locale) === 'en' ? (locale === null || locale === void 0 ? void 0 : locale.Pagination) || {} : {
           items_per_page: '/条',
           jump_to: '前往',
           page: '页'
-        } : (locale === null || locale === void 0 ? void 0 : locale.Pagination) || {},
+        },
         size: 'small'
       }, pagination),
       rowSelection: rowSelection === false ? undefined : (0, _objectSpread2.default)({
@@ -1134,7 +1147,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         type: 'checkbox',
         columnWidth: 36,
         selectedRowKeys: useSelectedRows.selectedRows.map(function (v) {
-          return v[rowKey];
+          return (0, _lodash.isObject)(v) ? v[rowKey] : v;
         }),
 
         /** 如果开启了行分组，则需要把checkStrictly关闭，变成受控模式 */
@@ -1142,8 +1155,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         onChange: !(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRows) ? function (selectedRowKeys, selectedRows) {
           setSelectedRows({
             selectedRows: selectedRows
-          });
-          rowClick === null || rowClick === void 0 ? void 0 : rowClick(selectedRows);
+          }); // rowClick?.(selectedRows)
         } : undefined,
         onSelectAll: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRows) ? function (selected, selectedRows, changeRows) {
           var changeRowKeys = changeRows === null || changeRows === void 0 ? void 0 : changeRows.map(function (item) {
@@ -1154,8 +1166,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           });
           setSelectedRows({
             selectedRows: reulstSelect
-          });
-          rowClick === null || rowClick === void 0 ? void 0 : rowClick(reulstSelect);
+          }); // rowClick?.(reulstSelect)
         } : undefined,
         onSelect: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRows) ? function (record, selected) {
           var reulstSelect = selected ? (0, _lodash.uniqBy)([].concat((0, _toConsumableArray2.default)(rowSelection.selectedRows), [record]), rowKey) : rowSelection.selectedRows.filter(function (item) {
@@ -1163,8 +1174,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           });
           setSelectedRows({
             selectedRows: reulstSelect
-          });
-          rowClick === null || rowClick === void 0 ? void 0 : rowClick(reulstSelect);
+          }); // rowClick?.(reulstSelect)
         } : undefined
       }, rowSelection),
       onRow: function onRow(record) {
@@ -1228,14 +1238,12 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       clearSelect: function clearSelect() {
         setSelectedRows({
           selectedRows: []
-        });
-        rowClick === null || rowClick === void 0 ? void 0 : rowClick([]);
+        }); // rowClick?.([])
       },
       customSetCheckboxRecords: function customSetCheckboxRecords(value) {
         setSelectedRows({
           selectedRows: value
-        });
-        rowClick === null || rowClick === void 0 ? void 0 : rowClick(value);
+        }); // rowClick?.(value)
       },
       checkboxRecords: useSelectedRows.selectedRows,
       columns: useColumns.map(function (item) {
@@ -1243,14 +1251,12 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       })
     };
   }); // loading触发清空选中状态
+  // useEffect(() => {
+  //   console.log(3)
+  //   setSelectedRows({ selectedRows: [] })
+  // }, [loading])
 
 
-  (0, _react.useEffect)(function () {
-    setSelectedRows({
-      selectedRows: []
-    });
-  }, [loading]);
-
   var onTableChange = function onTableChange(pagination, filters, sorter, extra) {
     var resultColumns = useColumns.map(function (item) {
       var obj = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
@@ -1450,13 +1456,13 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$autoSizer = props.autoSizer,
       autoSizer = _props$autoSizer === void 0 ? false : _props$autoSizer;
 
-  var _useState25 = (0, _react.useState)({
+  var _useState23 = (0, _react.useState)({
     width: '100%',
     height: '100%'
   }),
-      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
-      tableSize = _useState26[0],
-      setTableSize = _useState26[1];
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      tableSize = _useState24[0],
+      setTableSize = _useState24[1];
 
   var defaultRef = ref || (0, _react.useRef)(null);
   var tableWarpRef = (0, _react.useRef)(null);

package/es/LmTable/hooks/useRowSelectControllableValue.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _utils = require("ahooks/lib/utils");
+
+var _ahooks = require("ahooks");
+
+function useControllableValue() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var defaultValue = options.defaultValue,
+      _options$defaultValue = options.defaultValuePropName,
+      defaultValuePropName = _options$defaultValue === void 0 ? 'defaultValue' : _options$defaultValue,
+      _options$valuePropNam = options.valuePropName,
+      valuePropName = _options$valuePropNam === void 0 ? 'value' : _options$valuePropNam,
+      _options$trigger = options.trigger,
+      trigger = _options$trigger === void 0 ? 'onChange' : _options$trigger;
+  var value = props[valuePropName];
+  var isControlled = props === null || props === void 0 ? void 0 : props.hasOwnProperty(valuePropName);
+  var isControlledOnChange = props[trigger];
+  var initialValue = (0, _react.useMemo)(function () {
+    if (isControlled) {
+      return value;
+    }
+
+    if (props === null || props === void 0 ? void 0 : props.hasOwnProperty(defaultValuePropName)) {
+      return props[defaultValuePropName];
+    }
+
+    return defaultValue;
+  }, []);
+  var stateRef = (0, _react.useRef)(initialValue);
+
+  if (isControlled && isControlledOnChange) {
+    stateRef.current = value;
+  }
+
+  var update = (0, _ahooks.useUpdate)();
+
+  function setState(v) {
+    var r = (0, _utils.isFunction)(v) ? v(stateRef.current) : v;
+
+    if (!isControlledOnChange) {
+      stateRef.current = r;
+      update();
+    }
+
+    if (props[trigger]) {
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      props[trigger].apply(props, [r].concat(args));
+    }
+  }
+
+  return [stateRef.current, (0, _ahooks.useMemoizedFn)(setState)];
+}
+
+var _default = useControllableValue;
+exports.default = _default;

package/es/LmTable/style/index.css

@@ -1237,6 +1237,9 @@ p {
   height: 48px;
   font-size: 12px;
 }
+#lm_protable_warp .ant-table-tbody > tr.ant-table-measure-row > td {
+  padding: 0 !important;
+}
 .row-dragging {
   display: flex;
   align-items: center;
@@ -1589,9 +1592,6 @@ button.ant-table-row-expand-icon::before,
 button.ant-table-row-expand-icon::after {
   color: #bfbfbf;
 }
-.ant-table-tbody > tr.ant-table-measure-row > td {
-  padding: 0 !important;
-}
 .react-resizable-handle {
   position: absolute;
   right: -5px;

package/es/LmTable/style/variables.css

@@ -726,6 +726,9 @@
   height: 48px;
   font-size: 12px;
 }
+#lm_protable_warp .ant-table-tbody > tr.ant-table-measure-row > td {
+  padding: 0 !important;
+}
 .row-dragging {
   display: flex;
   align-items: center;
@@ -1078,9 +1081,6 @@ button.ant-table-row-expand-icon::before,
 button.ant-table-row-expand-icon::after {
   color: #bfbfbf;
 }
-.ant-table-tbody > tr.ant-table-measure-row > td {
-  padding: 0 !important;
-}
 .react-resizable-handle {
   position: absolute;
   right: -5px;

package/es/LmTable/util.js

@@ -50,10 +50,12 @@ exports.range = range;
 
 function dataGroup(data, key) {
   var result = {};
-  data.forEach(function (item) {
+  data === null || data === void 0 ? void 0 : data.forEach(function (item) {
     if (item.children) {
+      var _Object$keys;
+
       var temp = dataGroup(item.children, key);
-      Object.keys(temp).forEach(function (k) {
+      (_Object$keys = Object.keys(temp)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.forEach(function (k) {
         if (!result[k]) result[k] = [];
         result[k] = result[k].concat(temp[k]);
       });
@@ -100,7 +102,7 @@ function transformWithColGroup(columns, dataSource, groupColKeys) {
       // 表头数据的生成，生成新的 dataIndex 值
       // dataIndex最后的i：筛选的值相同需要加索引
       var handledColumns = [];
-      source.forEach(function (souItem, i) {
+      source === null || source === void 0 ? void 0 : source.forEach(function (souItem, i) {
         handledColumns = handledColumns.concat(columns.filter(function (c) {
           // 过滤掉（表头操作） 使用列分组作为key的项
           return groupColKeysCopy.indexOf(c.dataIndex) === -1;
@@ -143,9 +145,11 @@ function transformWithColGroup(columns, dataSource, groupColKeys) {
 
         return [].concat((0, _toConsumableArray2.default)(prev), [sItem]);
       } else {
+        var _Object$keys2;
+
         var str = ''; // 根据筛选条件生成对应的前缀key值，比如[name, age] => 'name_xiaoming_age_18'
 
-        groupColKeysCopy.forEach(function (dataIndex, i) {
+        groupColKeysCopy === null || groupColKeysCopy === void 0 ? void 0 : groupColKeysCopy.forEach(function (dataIndex, i) {
           if (i !== 0) {
             str += '_';
           }
@@ -153,7 +157,7 @@ function transformWithColGroup(columns, dataSource, groupColKeys) {
           str += "".concat(dataIndex, "_").concat(sItem[dataIndex]);
         }); // 对dataSource的key值进行更改：例如：'name' => 'name_xiaoming_age_18_address'
 
-        Object.keys(sItem).forEach(function (key) {
+        (_Object$keys2 = Object.keys(sItem)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.forEach(function (key) {
           if (key === '__index') {
             return;
           }

package/es/LmUpload/LmUpload.js

@@ -86,6 +86,7 @@ var LmUpload = function LmUpload(_a, ref) {
     maxCount: null,
     children: null,
     itemRender: null,
+    enabledPreview: true,
     enabledCrop: false,
     enabledOss: false,
     // oss配置

package/es/LmUpload/UploadList/ItemPictureCard.d.ts

@@ -1,5 +1,6 @@
-declare const PictureItem: ({ file, instance }: {
+declare const PictureItem: ({ file, index, instance }: {
     file: any;
+    index: any;
     instance: any;
 }) => JSX.Element;
 export default PictureItem;

package/es/LmUpload/UploadList/ItemPictureCard.js

@@ -63,8 +63,10 @@ var renderThumb = function renderThumb(file) {
 
 var PictureItem = function PictureItem(_ref) {
   var file = _ref.file,
+      index = _ref.index,
       instance = _ref.instance;
-  var readOnly = instance.readOnly,
+  var dispatch = instance.dispatch,
+      readOnly = instance.readOnly,
       size = instance.size,
       remove = instance.remove,
       preview = instance.preview,
@@ -77,11 +79,13 @@ var PictureItem = function PictureItem(_ref) {
 
 
   var resetFile = useMemo(function () {
+    var _a;
+
     var fileParams = getFileFields(file);
     var realFileName = fileParams.realFileName,
         fileName = fileParams.fileName,
         filename = fileParams.filename;
-    var fileExtension = (realFileName || fileName || filename).replace(/.*\./, '').toLowerCase();
+    var fileExtension = (_a = (realFileName || fileName || filename).replace(/.*\./, '')) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     return Object.assign(Object.assign({}, fileParams), {
       fileExtension: fileExtension
     });
@@ -105,6 +109,18 @@ var PictureItem = function PictureItem(_ref) {
       fontSize: fontSize
     };
   }, [size]);
+
+  var handlePreview = function handlePreview() {
+    preview === null || preview === void 0 ? void 0 : preview(file);
+    dispatch({
+      type: 'changePreview',
+      preview: {
+        visible: true,
+        index: index
+      }
+    });
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: cn('lm_upload_item', 'lm_upload_item_card', isError && 'lm_upload_item_error'),
     style: {
@@ -126,9 +142,7 @@ var PictureItem = function PictureItem(_ref) {
     className: "lm_upload_item_action"
   }, /*#__PURE__*/React.createElement("div", {
     className: "action_preview",
-    onClick: function onClick() {
-      return preview(file);
-    }
+    onClick: handlePreview
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lmweb-eye",
     style: {

package/es/LmUpload/UploadList/index.js

@@ -1,25 +1,29 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { render } from '../utils';
 import RenderItem from './RenderItem';
 
 var LmUploadList = function LmUploadList(_ref) {
   var instance = _ref.instance;
-
-  var _a, _b;
-
-  var uid = instance.uid,
+  var getFileHasValue = instance.getFileHasValue,
       getFileList = instance.getFileList,
       itemRender = instance.itemRender,
       listType = instance.listType,
       showUploadList = instance.showUploadList;
   if (!showUploadList) return null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, (_b = (_a = getFileList()) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
-    return a.seq - b.seq;
-  })) === null || _b === void 0 ? void 0 : _b.map(function (file, idx) {
+  var fileList = useMemo(function () {
+    var _a;
+
+    return (_a = getFileList()) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
+      return a.seq - b.seq;
+    });
+  }, [getFileList]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, fileList === null || fileList === void 0 ? void 0 : fileList.map(function (file, idx) {
     return render(itemRender || RenderItem, {
       type: listType,
-      key: file[uid] || idx,
+      key: getFileHasValue(file) || idx,
+      index: idx,
       file: file,
+      fileList: fileList,
       instance: instance
     });
   }));

package/es/LmUpload/components/Preview.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<({ instance }: {
+    instance: any;
+}) => JSX.Element>;
+export default _default;