linkmore-design 1.1.8 → 1.1.9

package/lib/Form/FormItem/index.d.ts

@@ -1,5 +1,6 @@
 import type { FormInstance } from 'rc-field-form';
 import type { FieldProps } from 'rc-field-form/lib/Field';
+import type { Rule } from 'rc-field-form/lib/interface';
 import * as React from 'react';
 import useFormItemStatus from '../hooks/useFormItemStatus';
 import type { FormItemInputProps } from '../FormItemInput';
@@ -9,7 +10,10 @@ export declare type ValidateStatus = typeof ValidateStatuses[number];
 declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 declare type RcFieldProps<Values = any> = Omit<FieldProps<Values>, 'children'>;
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
-export interface FormItemProps<Values = any> extends FormItemLabelProps, FormItemInputProps, RcFieldProps<Values> {
+export declare type LmRule = Rule & {
+    time?: number;
+};
+export interface FormItemProps<Values = any> extends FormItemLabelProps, FormItemInputProps, Omit<RcFieldProps<Values>, 'rules'> {
     prefixCls?: string;
     noStyle?: boolean;
     style?: React.CSSProperties;
@@ -25,6 +29,8 @@ export interface FormItemProps<Values = any> extends FormItemLabelProps, FormIte
     tooltip?: LabelTooltipType;
     /** @deprecated No need anymore */
     fieldKey?: React.Key | React.Key[];
+    /** 变更 */
+    rules?: LmRule[];
     errorPlacement?: string;
     responsive?: boolean;
 }

package/lib/Form/FormItem/index.js

@@ -9,15 +9,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+
 var _rcFieldForm = require("rc-field-form");
 
-var _useState3 = _interopRequireDefault(require("rc-util/lib/hooks/useState"));
+var _useState7 = _interopRequireDefault(require("rc-util/lib/hooks/useState"));
 
 var _ref2 = require("rc-util/lib/ref");
 
@@ -70,6 +72,31 @@ function genEmptyMeta() {
   };
 }
 
+function getRuleTime(rules) {
+  if (!rules) {
+    return 0;
+  }
+
+  var _iterator = (0, _createForOfIteratorHelper2.default)(rules),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var rule = _step.value;
+
+      if (rule && (0, _typeof2.default)(rule) === 'object' && rule.time) {
+        return rule.time;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return 0;
+}
+
 function InternalFormItem(props) {
   var name = props.name,
       noStyle = props.noStyle,
@@ -85,6 +112,17 @@ function InternalFormItem(props) {
       trigger = _props$trigger === void 0 ? 'onChange' : _props$trigger,
       validateTrigger = props.validateTrigger,
       hidden = props.hidden;
+  var timerRef = (0, React.useRef)(null);
+
+  var _useState = (0, _useState7.default)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      mergedErrors = _useState2[0],
+      setMergedErrors = _useState2[1];
+
+  var _useState3 = (0, _useState7.default)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      mergedWarnings = _useState4[0],
+      setMergedWarnings = _useState4[1];
 
   var _useContext = (0, React.useContext)(_ConfigProvider.ConfigContext),
       getPrefixCls = _useContext.getPrefixCls;
@@ -113,12 +151,12 @@ function InternalFormItem(props) {
       setSubFieldErrors = _useFrameState2[1]; // >>>>> Current field errors
 
 
-  var _useState = (0, _useState3.default)(function () {
+  var _useState5 = (0, _useState7.default)(function () {
     return genEmptyMeta();
   }),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      meta = _useState2[0],
-      setMeta = _useState2[1];
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      meta = _useState6[0],
+      setMeta = _useState6[1];
 
   var onMetaChange = function onMetaChange(nextMeta) {
     // This keyInfo is not correct when field is removed
@@ -171,19 +209,25 @@ function InternalFormItem(props) {
   }; // >>>>> Get merged errors
 
 
-  var _React$useMemo = React.useMemo(function () {
+  (0, React.useEffect)(function () {
     var errorList = (0, _toConsumableArray2.default)(meta.errors);
     var warningList = (0, _toConsumableArray2.default)(meta.warnings);
     Object.values(subFieldErrors).forEach(function (subFieldError) {
       errorList.push.apply(errorList, (0, _toConsumableArray2.default)(subFieldError.errors || []));
       warningList.push.apply(warningList, (0, _toConsumableArray2.default)(subFieldError.warnings || []));
     });
-    return [errorList, warningList];
-  }, [subFieldErrors, meta.errors, meta.warnings]),
-      _React$useMemo2 = (0, _slicedToArray2.default)(_React$useMemo, 2),
-      mergedErrors = _React$useMemo2[0],
-      mergedWarnings = _React$useMemo2[1]; // ===================== Children Ref =====================
-
+    setMergedErrors(errorList);
+    setMergedWarnings(warningList);
+    var time = getRuleTime(rules);
+
+    if (time) {
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(function () {
+        setMergedErrors([]);
+        setMergedWarnings([]);
+      }, time);
+    }
+  }, [subFieldErrors, meta.errors, meta.warnings]); // ===================== Children Ref =====================
 
   var getItemRef = (0, _useItemRef.default)(); // ======================== Render ========================
 

package/lib/LmEditTable/EditTable.js

@@ -766,13 +766,15 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var onColSortEnd = function onColSortEnd(active, over) {
+    var _a;
+
     var oldIndex = columns.findIndex(function (item) {
       return item.dataIndex === active;
     });
     var newIndex = columns.findIndex(function (item) {
       return item.dataIndex === over;
     });
-    filterChange === null || filterChange === void 0 ? void 0 : filterChange((0, _sortable.arrayMove)(columns, oldIndex, newIndex).map(function (item, index) {
+    filterChange === null || filterChange === void 0 ? void 0 : filterChange((_a = (0, _sortable.arrayMove)(columns, oldIndex, newIndex)) === null || _a === void 0 ? void 0 : _a.map(function (item, index) {
       return Object.assign(Object.assign({}, item), {
         order: index
       });
@@ -806,7 +808,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     dataSourceRef.current = dataSource;
 
     if (sortOpen) {
-      var dataSourceKeys = dataSource.map(function (item) {
+      var dataSourceKeys = dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (item) {
         return item[_rowKey];
       }).join(',');
       var setCallBackFalgKeys = ((_a = sortDataSorceRef.current) === null || _a === void 0 ? void 0 : _a.map(function (item) {
@@ -850,12 +852,12 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
         if ((preKeys === null || preKeys === void 0 ? void 0 : preKeys.length) > 1) {
           var deeps = function deeps(children) {
-            children.forEach(function (item) {
+            children === null || children === void 0 ? void 0 : children.forEach(function (item) {
               var _a;
 
               if (preKeys.includes(item[_rowKey])) {
                 if (item[_rowKey] === row[_rowKey]) {
-                  children.forEach(function (c) {
+                  children === null || children === void 0 ? void 0 : children.forEach(function (c) {
                     c[key] = value;
                   });
                   (_a = Object.keys(item)) === null || _a === void 0 ? void 0 : _a.forEach(function (v) {
@@ -870,7 +872,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
           deeps(draft);
         } else {
-          draft.forEach(function (item, index) {
+          draft === null || draft === void 0 ? void 0 : draft.forEach(function (item, index) {
             if (row[_rowKey] === item[_rowKey]) {
               draft[index] = row;
             } else {
@@ -881,7 +883,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       } else {
         if ((preKeys === null || preKeys === void 0 ? void 0 : preKeys.length) > 1) {
           var _deeps = function _deeps(children) {
-            children.forEach(function (item) {
+            children === null || children === void 0 ? void 0 : children.forEach(function (item) {
               var _a;
 
               if (preKeys.includes(item[_rowKey])) {
@@ -918,7 +920,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var reWriteOriginSource = function reWriteOriginSource(rowKey, rowValue, dataIndex, nextValue) {
     setDataSource(function (prevDataSource) {
-      return prevDataSource.map(function (item) {
+      return prevDataSource === null || prevDataSource === void 0 ? void 0 : prevDataSource.map(function (item) {
         if ((0, _lodash.get)(item, rowKey) === rowValue) {
           (0, _lodash.set)(item, dataIndex, nextValue);
         }
@@ -937,10 +939,10 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (preKeys.length > 1) {
       /** 说明删除的是children中的数据 */
       var filter = function filter(data, key) {
-        var newData = data.filter(function (x) {
+        var newData = data === null || data === void 0 ? void 0 : data.filter(function (x) {
           return x[_rowKey] !== key;
         });
-        newData.forEach(function (x) {
+        newData === null || newData === void 0 ? void 0 : newData.forEach(function (x) {
           if (x.children) {
             var c = filter(x.children, key);
             x.children = c;
@@ -988,13 +990,12 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var handleTableRowAdd = function handleTableRowAdd(record) {
     var _a, _b;
 
-    console.log(record, '-rrrrr');
     var preKeys = (_b = (_a = deepDataSourceRef === null || deepDataSourceRef === void 0 ? void 0 : deepDataSourceRef.current) === null || _a === void 0 ? void 0 : _a[record[_rowKey]]) === null || _b === void 0 ? void 0 : _b.preKeys;
     var res = (0, _immer.produce)(dataSourceRef.current, function (draft) {
       if (preKeys.length > 1) {
         var deeps = function deeps(children) {
-          children.forEach(function (item, index) {
-            if (preKeys.includes(item[_rowKey])) {
+          children === null || children === void 0 ? void 0 : children.forEach(function (item, index) {
+            if (preKeys === null || preKeys === void 0 ? void 0 : preKeys.includes(item[_rowKey])) {
               if (item[_rowKey] === record[_rowKey]) {
                 children.splice(index + 1, 0, (0, _defineProperty2.default)({}, _rowKey, "".concat(Date.now())));
               } else if (item.children) {
@@ -1025,7 +1026,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var handleCopy = function handleCopy(key, value) {
     var res = (0, _immer.produce)(dataSourceRef.current, function (draft) {
-      draft.forEach(function (item) {
+      draft === null || draft === void 0 ? void 0 : draft.forEach(function (item) {
         return item[key] = value;
       });
     });
@@ -1047,7 +1048,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     });
 
     if (hasOnlyOptionsDatas.length) {
-      return hasOnlyOptionsDatas.map(function (item) {
+      return hasOnlyOptionsDatas === null || hasOnlyOptionsDatas === void 0 ? void 0 : hasOnlyOptionsDatas.map(function (item) {
         return item.dataIndex;
       });
     }
@@ -1064,10 +1065,10 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
       if (optionOnly && options) {
         var dataIndex = item.dataIndex;
-        var dataIndexData = dataSource.map(function (d) {
+        var dataIndexData = dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (d) {
           return d[dataIndex];
         });
-        var newOptions = options.map(function (o) {
+        var newOptions = options === null || options === void 0 ? void 0 : options.map(function (o) {
           return Object.assign(Object.assign({}, o), {
             disabled: !!dataIndexData.includes(o === null || o === void 0 ? void 0 : o.value)
           });
@@ -1123,7 +1124,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var leftColumns = [];
     var mainColumns = [];
     var rightColumns = [];
-    localColumns.forEach(function (item) {
+    localColumns === null || localColumns === void 0 ? void 0 : localColumns.forEach(function (item) {
       if ((item === null || item === void 0 ? void 0 : item.fixed) === 'left') {
         leftColumns.push(item);
       } else if ((item === null || item === void 0 ? void 0 : item.fixed) === 'right') {
@@ -1136,7 +1137,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     /** 为了支持colums中的分组之后，进行递归处理 */
 
     var mapColumns = function mapColumns(col, index) {
-      var _a;
+      var _a, _b;
 
       if (!col.editable && !((_a = col.children) === null || _a === void 0 ? void 0 : _a.length)) {
         return col;
@@ -1185,7 +1186,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       });
 
       if (col === null || col === void 0 ? void 0 : col.children) {
-        newCol.children = col.children.map(mapColumns);
+        newCol.children = (_b = col.children) === null || _b === void 0 ? void 0 : _b.map(mapColumns);
       }
 
       return newCol;
@@ -1210,9 +1211,11 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, /*#__PURE__*/_react.default.createElement("tbody", Object.assign({}, props))));
   }, [sortEditTable]);
   var colDraggableContainer = (0, _react.useCallback)(function (_a) {
+    var _b;
+
     var props = __rest(_a, []);
 
-    return /*#__PURE__*/_react.default.createElement("tr", null, _react.default.Children.map(props.children, function (child) {
+    return /*#__PURE__*/_react.default.createElement("tr", null, (_b = _react.default.Children) === null || _b === void 0 ? void 0 : _b.map(props.children, function (child) {
       var _a, _b;
 
       if ((_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.column) === null || _b === void 0 ? void 0 : _b.fixed) {
@@ -1353,7 +1356,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fixed: true,
       type: 'checkbox',
       columnWidth: 36,
-      selectedRowKeys: localRowSelectList.map(function (v) {
+      selectedRowKeys: localRowSelectList === null || localRowSelectList === void 0 ? void 0 : localRowSelectList.map(function (v) {
         return v[_rowKey];
       }),
       onChange: function onChange(selectedRowKeys, selectedRows) {

package/lib/LmEditTable/util.js

@@ -24,13 +24,13 @@ function deepDataSourcePreKeys(dataSource, rowKey) {
   var deepDataSource = [];
 
   var eachChildren = function eachChildren(children, preKeys) {
-    children.forEach(function (item) {
+    children === null || children === void 0 ? void 0 : children.forEach(function (item) {
       deepDataSource.push(Object.assign(Object.assign({}, item), {
-        preKeys: [].concat((0, _toConsumableArray2.default)(preKeys), [item[rowKey]])
+        preKeys: [].concat((0, _toConsumableArray2.default)(preKeys), [item === null || item === void 0 ? void 0 : item[rowKey]])
       }));
 
-      if (item.children) {
-        eachChildren(item.children, [].concat((0, _toConsumableArray2.default)(preKeys), [item[rowKey]])); // deepDataSource.push({ ...item, preKeys: [...preKeys, item[rowKey]] })
+      if (item === null || item === void 0 ? void 0 : item.children) {
+        eachChildren(item === null || item === void 0 ? void 0 : item.children, [].concat((0, _toConsumableArray2.default)(preKeys), [item === null || item === void 0 ? void 0 : item[rowKey]])); // deepDataSource.push({ ...item, preKeys: [...preKeys, item[rowKey]] })
       }
     });
   };

package/lib/LmTable/Table.js

@@ -310,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)) {
@@ -327,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 {
@@ -758,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;
@@ -781,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,
@@ -791,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) {
@@ -994,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;
         }

package/lib/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/lib/LmUpload/LmUpload.js

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

package/lib/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/lib/LmUpload/UploadList/ItemPictureCard.js

@@ -77,8 +77,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,
@@ -121,6 +123,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.default.createElement("div", {
     className: (0, _classnames.default)('lm_upload_item', 'lm_upload_item_card', isError && 'lm_upload_item_error'),
     style: {
@@ -142,9 +156,7 @@ var PictureItem = function PictureItem(_ref) {
     className: "lm_upload_item_action"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "action_preview",
-    onClick: function onClick() {
-      return preview(file);
-    }
+    onClick: handlePreview
   }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
     type: "lmweb-eye",
     style: {

package/lib/LmUpload/UploadList/index.js

@@ -2,12 +2,14 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("../utils");
 
@@ -15,22 +17,26 @@ var _RenderItem = _interopRequireDefault(require("./RenderItem"));
 
 var LmUploadList = function LmUploadList(_ref) {
   var instance = _ref.instance;
-
-  var _a, _b;
-
   var getFileHasValue = instance.getFileHasValue,
       getFileList = instance.getFileList,
       itemRender = instance.itemRender,
       listType = instance.listType,
       showUploadList = instance.showUploadList;
   if (!showUploadList) return null;
-  return /*#__PURE__*/_react.default.createElement(_react.default.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 = (0, _react.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.default.createElement(_react.default.Fragment, null, fileList === null || fileList === void 0 ? void 0 : fileList.map(function (file, idx) {
     return (0, _utils.render)(itemRender || _RenderItem.default, {
       type: listType,
       key: getFileHasValue(file) || idx,
+      index: idx,
       file: file,
+      fileList: fileList,
       instance: instance
     });
   }));

package/lib/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;

package/lib/LmUpload/components/Preview.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var Preview = function Preview(_ref) {
+  var instance = _ref.instance;
+  var enabledPreview = instance.enabledPreview,
+      state = instance.state,
+      dispatch = instance.dispatch,
+      getFileList = instance.getFileList;
+  if (!enabledPreview) return null; // 与展示顺序保持一致
+
+  var fileList = (0, _react.useMemo)(function () {
+    var _a;
+
+    return (_a = getFileList()) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
+      return a.seq - b.seq;
+    });
+  }, [getFileList]);
+  var config = (0, _react.useMemo)(function () {
+    var _state$preview = state.preview,
+        index = _state$preview.index,
+        visible = _state$preview.visible;
+    return {
+      urlList: fileList === null || fileList === void 0 ? void 0 : fileList.map(function (_ref2) {
+        var url = _ref2.url;
+        return url;
+      }),
+      initialIndex: index,
+      visible: visible,
+      close: function close() {
+        dispatch({
+          type: 'changePreview',
+          preview: {
+            visible: false
+          }
+        });
+      }
+    };
+  }, [fileList, state.preview]);
+  return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.ImageViewer, Object.assign({}, config));
+};
+
+var _default = /*#__PURE__*/_react.default.memo(Preview);
+
+exports.default = _default;

package/lib/LmUpload/wrapper/UploadWrapper.js

@@ -15,6 +15,8 @@ var _view = _interopRequireDefault(require("../view"));
 
 var _Crop = _interopRequireDefault(require("../components/Crop"));
 
+var _Preview = _interopRequireDefault(require("../components/Preview"));
+
 // 包裹上传组件区域： 拓展其他结构
 var LmUploadWrapper = function LmUploadWrapper(_ref) {
   var instance = _ref.instance;
@@ -26,6 +28,8 @@ var LmUploadWrapper = function LmUploadWrapper(_ref) {
     instance: instance
   }), /*#__PURE__*/_react.default.createElement(_Crop.default, {
     instance: instance
+  }), /*#__PURE__*/_react.default.createElement(_Preview.default, {
+    instance: instance
   }));
 };
 

package/lib/LmUpload/wrapper/reducer.d.ts

@@ -5,5 +5,9 @@ export declare const initialState: (props: any) => {
     status: string;
     fileList: any;
     cropFile: any;
+    preview: {
+        index: number;
+        visible: boolean;
+    };
 };
 export default reducer;