linkmore-design 1.1.19 → 1.1.21

package/dist/index.umd.js

@@ -181483,10 +181483,11 @@
     }, [uid]); // 从对象中读取存在的指定属性
 
     var getFileHasValue = React.useCallback(function (obj) {
+      if (!obj) return '';
       var extend = [uid, 'fileName'];
       var val = '';
       extend.forEach(function (v) {
-        if (!val) val = obj[v];
+        if (!val && obj[v]) val = obj[v];
       });
       return val;
     }, [uid]); // 获取当前的文件列表
@@ -182185,7 +182186,8 @@
   var PictureItem$1 = function PictureItem(_ref) {
     var file = _ref.file,
         index = _ref.index,
-        instance = _ref.instance;
+        instance = _ref.instance,
+        listeners = _ref.listeners;
     var dispatch = instance.dispatch,
         readOnly = instance.readOnly,
         size = instance.size,
@@ -182269,6 +182271,13 @@
       style: {
         fontSize: resetSize.fontSize
       }
+    })), /*#__PURE__*/React__default['default'].createElement("div", _objectSpread({
+      className: "action_preview"
+    }, listeners), /*#__PURE__*/React__default['default'].createElement(IconFont, {
+      type: "lmweb-drag",
+      style: {
+        fontSize: resetSize.fontSize
+      }
     })), !readOnly && /*#__PURE__*/React__default['default'].createElement("div", {
       className: "action_delete",
       onClick: function onClick() {
@@ -182300,11 +182309,15 @@
 
   var LmUploadList = function LmUploadList(_ref) {
     var instance = _ref.instance;
-    var getFileHasValue = instance.getFileHasValue,
+    var uid = instance.uid,
+        dispatch = instance.dispatch,
+        getFileHasValue = instance.getFileHasValue,
         getFileList = instance.getFileList,
         itemRender = instance.itemRender,
         listType = instance.listType,
-        showUploadList = instance.showUploadList;
+        showUploadList = instance.showUploadList,
+        enableDrag = instance.enableDrag,
+        fileNames = instance.fileNames;
     if (!showUploadList) return null;
     var fileList = React.useMemo(function () {
       var _getFileList;
@@ -182313,6 +182326,54 @@
         return a.seq - b.seq;
       });
     }, [getFileList]);
+
+    var handleMove = function handleMove(active, over, fileList) {
+      try {
+        var fileMap = fileList.map(function (v) {
+          if (getFileHasValue(v) === getFileHasValue(active)) {
+            return _objectSpread(_objectSpread({}, v), {}, {
+              seq: over[fileNames.seq]
+            });
+          }
+
+          if (getFileHasValue(v) === getFileHasValue(over)) {
+            return _objectSpread(_objectSpread({}, v), {}, {
+              seq: active[fileNames.seq]
+            });
+          }
+
+          return v;
+        });
+        dispatch({
+          type: 'changeFileList',
+          fileList: fileMap
+        });
+      } catch (error) {
+        console.log('移动出现了错误', error);
+      }
+    };
+
+    if (enableDrag) {
+      return /*#__PURE__*/React__default['default'].createElement(LmDrag$1, {
+        options: fileList,
+        rowKey: uid,
+        move: handleMove
+      }, function (_ref2) {
+        var item = _ref2.item,
+            listeners = _ref2.listeners,
+            index = _ref2.index;
+        return render$1(itemRender || RenderItem, {
+          type: listType,
+          key: getFileHasValue(item) || index,
+          index: index,
+          file: item,
+          fileList: fileList,
+          instance: instance,
+          listeners: listeners
+        });
+      });
+    }
+
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, fileList === null || fileList === void 0 ? void 0 : fileList.map(function (file, idx) {
       return render$1(itemRender || RenderItem, {
         type: listType,
@@ -182543,7 +182604,7 @@
       size: 100,
       fileSize: 10,
       fileSizeType: 'M',
-      uid: 'uid',
+      uid: 'fileName',
       accept: '',
       type: ['jpg', 'jpeg', 'png'],
       listType: 'card',
@@ -182558,6 +182619,7 @@
       itemRender: null,
       enabledPreview: true,
       enabledCrop: false,
+      enableDrag: false,
       enabledOss: false,
       // oss配置
       ossConfig: function ossConfig() {
@@ -227257,6 +227319,20 @@
     return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
   }
 
+  function getRelativeTransformOrigin(event, rect) {
+    const eventCoordinates = getEventCoordinates(event);
+
+    if (!eventCoordinates) {
+      return '0 0';
+    }
+
+    const transformOrigin = {
+      x: (eventCoordinates.x - rect.left) / rect.width * 100,
+      y: (eventCoordinates.y - rect.top) / rect.height * 100
+    };
+    return `${transformOrigin.x}% ${transformOrigin.y}%`;
+  }
+
   /**
    * Sort collisions from smallest to greatest value
    */
@@ -229650,6 +229726,237 @@
     };
   }
 
+  const defaultDropAnimation = {
+    duration: 250,
+    easing: 'ease',
+    dragSourceOpacity: 0
+  };
+  function useDropAnimation({
+    animate,
+    adjustScale,
+    activeId,
+    draggableNodes,
+    duration,
+    dragSourceOpacity,
+    easing,
+    node,
+    transform
+  }) {
+    const [dropAnimationComplete, setDropAnimationComplete] = React.useState(false);
+    useIsomorphicLayoutEffect$a(() => {
+      var _draggableNodes$activ;
+
+      if (!animate || !activeId || !easing || !duration) {
+        if (animate) {
+          setDropAnimationComplete(true);
+        }
+
+        return;
+      }
+
+      const finalNode = (_draggableNodes$activ = draggableNodes[activeId]) == null ? void 0 : _draggableNodes$activ.node.current;
+
+      if (transform && node && finalNode && finalNode.parentNode !== null) {
+        const fromNode = getMeasurableNode(node);
+
+        if (fromNode) {
+          const from = fromNode.getBoundingClientRect();
+          const to = getTransformAgnosticClientRect(finalNode);
+          const delta = {
+            x: from.left - to.left,
+            y: from.top - to.top
+          };
+
+          if (Math.abs(delta.x) || Math.abs(delta.y)) {
+            const scaleDelta = {
+              scaleX: adjustScale ? to.width * transform.scaleX / from.width : 1,
+              scaleY: adjustScale ? to.height * transform.scaleY / from.height : 1
+            };
+            const finalTransform = CSS.Transform.toString({
+              x: transform.x - delta.x,
+              y: transform.y - delta.y,
+              ...scaleDelta
+            });
+            const originalOpacity = finalNode.style.opacity;
+
+            if (dragSourceOpacity != null) {
+              finalNode.style.opacity = `${dragSourceOpacity}`;
+            }
+
+            const nodeAnimation = node.animate([{
+              transform: CSS.Transform.toString(transform)
+            }, {
+              transform: finalTransform
+            }], {
+              easing,
+              duration
+            });
+
+            nodeAnimation.onfinish = () => {
+              node.style.display = 'none';
+              setDropAnimationComplete(true);
+
+              if (finalNode && dragSourceOpacity != null) {
+                finalNode.style.opacity = originalOpacity;
+              }
+            };
+
+            return;
+          }
+        }
+      }
+
+      setDropAnimationComplete(true);
+    }, [animate, activeId, adjustScale, draggableNodes, duration, easing, dragSourceOpacity, node, transform]);
+    useIsomorphicLayoutEffect$a(() => {
+      if (dropAnimationComplete) {
+        setDropAnimationComplete(false);
+      }
+    }, [dropAnimationComplete]);
+    return dropAnimationComplete;
+  }
+
+  const defaultTransform = {
+    x: 0,
+    y: 0,
+    scaleX: 1,
+    scaleY: 1
+  };
+
+  const defaultTransition = activatorEvent => {
+    const isKeyboardActivator = isKeyboardEvent(activatorEvent);
+    return isKeyboardActivator ? 'transform 250ms ease' : undefined;
+  };
+
+  const DragOverlay = /*#__PURE__*/React__default['default'].memo(({
+    adjustScale = false,
+    children,
+    dropAnimation = defaultDropAnimation,
+    style: styleProp,
+    transition = defaultTransition,
+    modifiers,
+    wrapperElement = 'div',
+    className,
+    zIndex = 999
+  }) => {
+    var _active$id, _attributesSnapshot$c;
+
+    const {
+      active,
+      activeNodeRect,
+      containerNodeRect,
+      draggableNodes,
+      activatorEvent,
+      over,
+      dragOverlay,
+      scrollableAncestors,
+      scrollableAncestorRects,
+      windowRect
+    } = useDndContext();
+    const transform = React.useContext(ActiveDraggableContext);
+    const modifiedTransform = applyModifiers(modifiers, {
+      activatorEvent,
+      active,
+      activeNodeRect,
+      containerNodeRect,
+      draggingNodeRect: dragOverlay.rect,
+      over,
+      overlayNodeRect: dragOverlay.rect,
+      scrollableAncestors,
+      scrollableAncestorRects,
+      transform,
+      windowRect
+    });
+    const isDragging = active !== null;
+    const finalTransform = adjustScale ? modifiedTransform : { ...modifiedTransform,
+      scaleX: 1,
+      scaleY: 1
+    };
+    const initialRect = useLazyMemo(previousValue => {
+      if (isDragging) {
+        if (previousValue) {
+          return previousValue;
+        }
+
+        if (!activeNodeRect) {
+          return null;
+        }
+
+        return { ...activeNodeRect
+        };
+      }
+
+      return null;
+    }, [isDragging, activeNodeRect]);
+    const style = initialRect ? {
+      position: 'fixed',
+      width: initialRect.width,
+      height: initialRect.height,
+      top: initialRect.top,
+      left: initialRect.left,
+      zIndex,
+      transform: CSS.Transform.toString(finalTransform),
+      touchAction: 'none',
+      transformOrigin: adjustScale && activatorEvent ? getRelativeTransformOrigin(activatorEvent, initialRect) : undefined,
+      transition: typeof transition === 'function' ? transition(activatorEvent) : transition,
+      ...styleProp
+    } : undefined;
+    const attributes = isDragging ? {
+      style,
+      children,
+      className,
+      transform: finalTransform
+    } : undefined;
+    const attributesSnapshot = React.useRef(attributes);
+    const derivedAttributes = attributes != null ? attributes : attributesSnapshot.current;
+    const {
+      children: finalChildren,
+      transform: _,
+      ...otherAttributes
+    } = derivedAttributes != null ? derivedAttributes : {};
+    const prevActiveId = React.useRef((_active$id = active == null ? void 0 : active.id) != null ? _active$id : null);
+    const dropAnimationComplete = useDropAnimation({
+      animate: Boolean(dropAnimation && prevActiveId.current && !active),
+      adjustScale,
+      activeId: prevActiveId.current,
+      draggableNodes,
+      duration: dropAnimation == null ? void 0 : dropAnimation.duration,
+      easing: dropAnimation == null ? void 0 : dropAnimation.easing,
+      dragSourceOpacity: dropAnimation == null ? void 0 : dropAnimation.dragSourceOpacity,
+      node: dragOverlay.nodeRef.current,
+      transform: (_attributesSnapshot$c = attributesSnapshot.current) == null ? void 0 : _attributesSnapshot$c.transform
+    });
+    const shouldRender = Boolean(finalChildren && (children || dropAnimation && !dropAnimationComplete));
+    React.useEffect(() => {
+      if ((active == null ? void 0 : active.id) !== prevActiveId.current) {
+        var _active$id2;
+
+        prevActiveId.current = (_active$id2 = active == null ? void 0 : active.id) != null ? _active$id2 : null;
+      }
+
+      if (active && attributesSnapshot.current !== attributes) {
+        attributesSnapshot.current = attributes;
+      }
+    }, [active, attributes]);
+    React.useEffect(() => {
+      if (dropAnimationComplete) {
+        attributesSnapshot.current = undefined;
+      }
+    }, [dropAnimationComplete]);
+
+    if (!shouldRender) {
+      return null;
+    }
+
+    return React__default['default'].createElement(InternalContext.Provider, {
+      value: defaultInternalContext
+    }, React__default['default'].createElement(ActiveDraggableContext.Provider, {
+      value: defaultTransform
+    }, React__default['default'].createElement(wrapperElement, { ...otherAttributes,
+      ref: dragOverlay.setRef
+    }, finalChildren)));
+  });
+
   /**
    * Move an array item to a different position. Returns a new array with the item moved to the new position.
    */
@@ -229939,7 +230246,7 @@
 
     return newIndex !== index && containerId === previousContainerId;
   };
-  const defaultTransition = {
+  const defaultTransition$1 = {
     duration: 200,
     easing: 'ease'
   };
@@ -230010,7 +230317,7 @@
     id,
     strategy: localStrategy,
     resizeObserverConfig,
-    transition = defaultTransition
+    transition = defaultTransition$1
   }) {
     const {
       items,
@@ -321488,6 +321795,7 @@
     var itemPrefixCls = _ref.itemPrefixCls,
         component = _ref.component,
         span = _ref.span,
+        rowSpan = _ref.rowSpan,
         className = _ref.className,
         style = _ref.style,
         labelStyle = _ref.labelStyle,
@@ -321504,7 +321812,8 @@
       return /*#__PURE__*/React.createElement(Component, {
         className: classnames((_classNames = {}, _defineProperty$1(_classNames, "".concat(itemPrefixCls, "-item-label"), notEmpty(label)), _defineProperty$1(_classNames, "".concat(itemPrefixCls, "-item-content"), notEmpty(content)), _classNames), className),
         style: style,
-        colSpan: span
+        colSpan: span,
+        rowSpan: rowSpan
       }, notEmpty(label) && /*#__PURE__*/React.createElement("span", {
         style: labelStyle
       }, label), notEmpty(content) && /*#__PURE__*/React.createElement("span", {
@@ -321515,7 +321824,8 @@
     return /*#__PURE__*/React.createElement(Component, {
       className: classnames("".concat(itemPrefixCls, "-item"), className),
       style: style,
-      colSpan: span
+      colSpan: span,
+      rowSpan: rowSpan
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(itemPrefixCls, "-item-container")
     }, (label || label === 0) && /*#__PURE__*/React.createElement("span", {
@@ -321549,6 +321859,8 @@
           contentStyle = _ref3$props.contentStyle,
           _ref3$props$span = _ref3$props.span,
           span = _ref3$props$span === void 0 ? 1 : _ref3$props$span,
+          _ref3$props$rowSpan = _ref3$props.rowSpan,
+          rowSpan = _ref3$props$rowSpan === void 0 ? 1 : _ref3$props$rowSpan,
           key = _ref3.key;
 
       if (typeof component === 'string') {
@@ -321559,6 +321871,7 @@
           labelStyle: _objectSpread(_objectSpread({}, rootLabelStyle), labelStyle),
           contentStyle: _objectSpread(_objectSpread({}, rootContentStyle), contentStyle),
           span: span,
+          rowSpan: rowSpan,
           colon: colon,
           component: component,
           itemPrefixCls: itemPrefixCls,
@@ -321573,6 +321886,7 @@
         className: className,
         style: _objectSpread(_objectSpread(_objectSpread({}, rootLabelStyle), style), labelStyle),
         span: 1,
+        rowSpan: rowSpan,
         colon: colon,
         component: component[0],
         itemPrefixCls: itemPrefixCls,
@@ -321583,6 +321897,7 @@
         className: className,
         style: _objectSpread(_objectSpread(_objectSpread({}, rootContentStyle), style), contentStyle),
         span: span * 2 - 1,
+        rowSpan: rowSpan,
         component: component[1],
         itemPrefixCls: itemPrefixCls,
         bordered: bordered,
@@ -324672,6 +324987,205 @@
 
   var LmImageViewer$1 = /*#__PURE__*/React.forwardRef(LmImageViewer);
 
+  var SortableItem$3 = function SortableItem(_ref) {
+    var index = _ref.index,
+        item = _ref.item,
+        instance = _ref.instance;
+    var children = instance.children,
+        rowKey = instance.rowKey;
+
+    var _useSortable = useSortable({
+      id: item[rowKey] || index,
+      data: {
+        item: item
+      }
+    }),
+        attributes = _useSortable.attributes,
+        listeners = _useSortable.listeners,
+        setNodeRef = _useSortable.setNodeRef,
+        transform = _useSortable.transform,
+        transition = _useSortable.transition;
+
+    var resetStyle = React.useMemo(function () {
+      return {
+        transform: CSS.Transform.toString(transform),
+        transition: transition
+      };
+    }, [transform, transition]);
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", _objectSpread({
+      className: "lm_drag_item",
+      ref: setNodeRef,
+      style: resetStyle
+    }, attributes), children === null || children === void 0 ? void 0 : children({
+      item: item,
+      listeners: listeners,
+      index: index
+    })));
+  };
+
+  var SortableItem$4 = /*#__PURE__*/React__default['default'].memo(SortableItem$3);
+
+  var SortableBox$3 = function SortableBox(_ref) {
+    var instance = _ref.instance;
+    var items = instance.items,
+        rowKey = instance.rowKey,
+        options = instance.options;
+    return /*#__PURE__*/React__default['default'].createElement(SortableContext$1, {
+      items: items,
+      strategy: rectSortingStrategy
+    }, options === null || options === void 0 ? void 0 : options.map(function (item, idx) {
+      return /*#__PURE__*/React__default['default'].createElement(SortableItem$4, {
+        instance: instance,
+        index: idx,
+        key: item[rowKey] || idx,
+        item: item
+      });
+    }));
+  };
+
+  var SortableBox$4 = /*#__PURE__*/React__default['default'].memo(SortableBox$3);
+
+  var DragOver = /*#__PURE__*/React__default['default'].memo(function (_ref) {
+    var instance = _ref.instance;
+    var isDragging = instance.isDragging,
+        activeId = instance.activeId,
+        rowKey = instance.rowKey,
+        children = instance.children,
+        options = instance.options;
+    var item = activeId && options.find(function (v) {
+      return v[rowKey] === activeId;
+    });
+    return /*#__PURE__*/React__default['default'].createElement(DragOverlay, {
+      adjustScale: false
+    }, isDragging ? children({
+      item: item,
+      listeners: {}
+    }) : null);
+  });
+  /*
+   * restrictToParentElement 拖拽限制在父元素内
+   */
+  // 可拖拽容器
+
+  var DndContainer$2 = function DndContainer(_ref2) {
+    var options = _ref2.options,
+        rowKey = _ref2.rowKey,
+        children = _ref2.children,
+        move = _ref2.move;
+
+    var _React$useState = React__default['default'].useState(false),
+        _React$useState2 = _slicedToArray$1(_React$useState, 2),
+        isDragging = _React$useState2[0],
+        setIsDragging = _React$useState2[1]; // 是否拖拽中
+
+
+    var _React$useState3 = React__default['default'].useState(null),
+        _React$useState4 = _slicedToArray$1(_React$useState3, 2),
+        activeId = _React$useState4[0],
+        setActiveId = _React$useState4[1]; // 是否拖拽中
+
+
+    var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    }));
+
+    var handleMove = function handleMove(activeItem, overItem) {
+      var fileMap = options.map(function (v) {
+        if (v[rowKey] === activeItem[rowKey]) {
+          return _objectSpread({}, overItem);
+        }
+
+        if (v[rowKey] === overItem[rowKey]) {
+          return _objectSpread({}, activeItem);
+        }
+
+        return v;
+      });
+      move === null || move === void 0 ? void 0 : move(activeItem, overItem, fileMap);
+    }; // 开始拖拽
+
+
+    var handleDragStart = function handleDragStart(_ref3) {
+      var active = _ref3.active;
+      setIsDragging(true);
+
+      if (!active) {
+        return;
+      }
+
+      setActiveId(active.id);
+    }; // 拖拽结束
+
+
+    var handleDragEnd = function handleDragEnd(event) {
+      var active = event.active,
+          over = event.over;
+      setActiveId(null); // 未移入时触发
+
+      if (!(over === null || over === void 0 ? void 0 : over.id)) {
+        return;
+      } // 移入时触发更新数据
+
+
+      if (active.id !== over.id) {
+        handleMove(active.data.current.item, over.data.current.item);
+      }
+    };
+
+    var instance = {
+      isDragging: isDragging,
+      activeId: activeId,
+      options: options,
+      rowKey: rowKey,
+      children: children,
+      move: move,
+      items: options === null || options === void 0 ? void 0 : options.map(function (v) {
+        return v[rowKey];
+      })
+    };
+    return /*#__PURE__*/React__default['default'].createElement(DndContext, {
+      sensors: sensors,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      onDragCancel: function onDragCancel() {
+        return setActiveId(null);
+      },
+      modifiers: [restrictToParentElement],
+      collisionDetection: closestCenter
+    }, /*#__PURE__*/React__default['default'].createElement(SortableBox$4, {
+      instance: instance
+    }), /*#__PURE__*/React__default['default'].createElement(DragOver, {
+      instance: instance
+    }));
+  };
+
+  var Root$1 = function Root(props, ref) {
+    // 向外暴露出的方法
+    React.useImperativeHandle(ref, function () {
+      return {};
+    });
+    return /*#__PURE__*/React__default['default'].createElement(DndContainer$2, _objectSpread({}, props));
+  };
+
+  var Root$2 = /*#__PURE__*/React.forwardRef(Root$1);
+
+  var LmDrag = function LmDrag(_ref, ref) {
+    var resetProps = _extends$2({}, _ref);
+
+    var defaultRef = React.useRef(null);
+
+    var defaultProps = _objectSpread({
+      options: [],
+      rowKey: 'id'
+    }, resetProps);
+
+    return /*#__PURE__*/React__default['default'].createElement(Root$2, _objectSpread({
+      ref: ref || defaultRef
+    }, defaultProps));
+  };
+
+  var LmDrag$1 = /*#__PURE__*/React.forwardRef(LmDrag);
+
   exports.Alert = Alert$1;
   exports.Approval = LMApproval;
   exports.AutoComplete = RefAutoComplete$1;
@@ -324714,6 +325228,7 @@
   exports.Layout = Layout$1;
   exports.LeftTable = LeftSide;
   exports.List = List$2;
+  exports.LmDrag = LmDrag$1;
   exports.LmEditTable = LmEditTable;
   exports.LmFilter = LmFilter$1;
   exports.LmImgList = LmImgList;