linkmore-design 1.1.19 → 1.1.21

package/es/Descriptions/Cell.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 export interface CellProps {
     itemPrefixCls: string;
     span: number;
+    rowSpan: number;
     className?: string;
     component: string;
     style?: React.CSSProperties;

package/es/Descriptions/Cell.js

@@ -10,6 +10,7 @@ var Cell = function Cell(_ref) {
   var itemPrefixCls = _ref.itemPrefixCls,
       component = _ref.component,
       span = _ref.span,
+      rowSpan = _ref.rowSpan,
       className = _ref.className,
       style = _ref.style,
       labelStyle = _ref.labelStyle,
@@ -26,7 +27,8 @@ var Cell = function Cell(_ref) {
     return /*#__PURE__*/React.createElement(Component, {
       className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(itemPrefixCls, "-item-label"), notEmpty(label)), _defineProperty(_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", {
@@ -37,7 +39,8 @@ var Cell = function Cell(_ref) {
   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", {

package/es/Descriptions/Item.d.ts

@@ -8,6 +8,7 @@ export interface DescriptionsItemProps {
     contentStyle?: React.CSSProperties;
     children: React.ReactNode;
     span?: number;
+    rowSpan?: number;
 }
 declare const DescriptionsItem: React.FC<DescriptionsItemProps>;
 export default DescriptionsItem;

package/es/Descriptions/Row.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DescriptionsContext } from './';
+import { DescriptionsContext } from ".";
 import Cell from './Cell';
 
 function renderCells(items, _ref, _ref2) {
@@ -24,6 +24,8 @@ function renderCells(items, _ref, _ref2) {
         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') {
@@ -34,6 +36,7 @@ function renderCells(items, _ref, _ref2) {
         labelStyle: Object.assign(Object.assign({}, rootLabelStyle), labelStyle),
         contentStyle: Object.assign(Object.assign({}, rootContentStyle), contentStyle),
         span: span,
+        rowSpan: rowSpan,
         colon: colon,
         component: component,
         itemPrefixCls: itemPrefixCls,
@@ -48,6 +51,7 @@ function renderCells(items, _ref, _ref2) {
       className: className,
       style: Object.assign(Object.assign(Object.assign({}, rootLabelStyle), style), labelStyle),
       span: 1,
+      rowSpan: rowSpan,
       colon: colon,
       component: component[0],
       itemPrefixCls: itemPrefixCls,
@@ -58,6 +62,7 @@ function renderCells(items, _ref, _ref2) {
       className: className,
       style: Object.assign(Object.assign(Object.assign({}, rootContentStyle), style), contentStyle),
       span: span * 2 - 1,
+      rowSpan: rowSpan,
       component: component[1],
       itemPrefixCls: itemPrefixCls,
       bordered: bordered,

package/es/LmDrag/LmDrag.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Pick<{
+    [x: string]: any;
+}, string | number> & React.RefAttributes<unknown>>;
+export default _default;

package/es/LmDrag/LmDrag.js

@@ -0,0 +1,30 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React, { useRef, forwardRef } from 'react';
+import Root from './wrapper/Root';
+
+var LmDrag = function LmDrag(_a, ref) {
+  var resetProps = __rest(_a, []);
+
+  var defaultRef = useRef(null);
+  var defaultProps = Object.assign({
+    options: [],
+    rowKey: 'id'
+  }, resetProps);
+  return /*#__PURE__*/React.createElement(Root, Object.assign({
+    ref: ref || defaultRef
+  }, defaultProps));
+};
+
+export default /*#__PURE__*/forwardRef(LmDrag);

package/es/LmDrag/components/DndContainer.d.ts

@@ -0,0 +1,3 @@
+import type { LmDragProps } from '..';
+declare const DndContainer: ({ options, rowKey, children, move }: LmDragProps) => JSX.Element;
+export default DndContainer;

package/es/LmDrag/components/DndContainer.js

@@ -0,0 +1,121 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import { DragOverlay, DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import SortableBox from './sortableBox';
+var DragOver = /*#__PURE__*/React.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.createElement(DragOverlay, {
+    adjustScale: false
+  }, isDragging ? children({
+    item: item,
+    listeners: {}
+  }) : null);
+});
+/*
+ * restrictToParentElement 拖拽限制在父元素内
+ */
+// 可拖拽容器
+
+var DndContainer = function DndContainer(_ref2) {
+  var options = _ref2.options,
+      rowKey = _ref2.rowKey,
+      children = _ref2.children,
+      move = _ref2.move;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDragging = _React$useState2[0],
+      setIsDragging = _React$useState2[1]; // 是否拖拽中
+
+
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_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 Object.assign({}, overItem);
+      }
+
+      if (v[rowKey] === overItem[rowKey]) {
+        return Object.assign({}, 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.createElement(DndContext, {
+    sensors: sensors,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    onDragCancel: function onDragCancel() {
+      return setActiveId(null);
+    },
+    modifiers: [restrictToParentElement],
+    collisionDetection: closestCenter
+  }, /*#__PURE__*/React.createElement(SortableBox, {
+    instance: instance
+  }), /*#__PURE__*/React.createElement(DragOver, {
+    instance: instance
+  }));
+};
+
+export default DndContainer;

package/es/LmDrag/components/sortableBox.d.ts

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

package/es/LmDrag/components/sortableBox.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
+import SortableItem from './sortableItem'; // rectSortingStrategy 可交换策略
+
+var SortableBox = function SortableBox(_ref) {
+  var instance = _ref.instance;
+  var items = instance.items,
+      rowKey = instance.rowKey,
+      options = instance.options;
+  return /*#__PURE__*/React.createElement(SortableContext, {
+    items: items,
+    strategy: rectSortingStrategy
+  }, options === null || options === void 0 ? void 0 : options.map(function (item, idx) {
+    return /*#__PURE__*/React.createElement(SortableItem, {
+      instance: instance,
+      index: idx,
+      key: item[rowKey] || idx,
+      item: item
+    });
+  }));
+};
+
+export default /*#__PURE__*/React.memo(SortableBox);

package/es/LmDrag/components/sortableItem.d.ts

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

package/es/LmDrag/components/sortableItem.js

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+var SortableItem = 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 = useMemo(function () {
+    return {
+      transform: CSS.Transform.toString(transform),
+      transition: transition
+    };
+  }, [transform, transition]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({
+    className: "lm_drag_item",
+    ref: setNodeRef,
+    style: resetStyle
+  }, attributes), children === null || children === void 0 ? void 0 : children({
+    item: item,
+    listeners: listeners,
+    index: index
+  })));
+};
+
+export default /*#__PURE__*/React.memo(SortableItem);

package/es/LmDrag/index.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+import LmDrag from './LmDrag';
+export default LmDrag;
+export { LmDrag };
+export interface LmDragProps {
+    options?: Array<any>;
+    rowKey: string;
+    move?: (activeId: string, overId: string, fileList: Array<any>) => void;
+    children?: ReactNode | React.FC | null;
+}

package/es/LmDrag/index.js

@@ -0,0 +1,3 @@
+import LmDrag from './LmDrag';
+export default LmDrag;
+export { LmDrag };

package/es/LmDrag/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/LmDrag/style/index.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/LmDrag/style/variables.d.ts

@@ -0,0 +1 @@
+import './variables.less';

package/es/LmDrag/style/variables.js

@@ -0,0 +1 @@
+import "./variables.css";

package/es/LmDrag/wrapper/Root.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+export default _default;

package/es/LmDrag/wrapper/Root.js

@@ -0,0 +1,12 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import Drag from '../components/DndContainer';
+
+var Root = function Root(props, ref) {
+  // 向外暴露出的方法
+  useImperativeHandle(ref, function () {
+    return {};
+  });
+  return /*#__PURE__*/React.createElement(Drag, Object.assign({}, props));
+};
+
+export default /*#__PURE__*/forwardRef(Root);

package/es/LmUpload/LmUpload.js

@@ -73,7 +73,7 @@ var LmUpload = function LmUpload(_a, ref) {
     size: 100,
     fileSize: 10,
     fileSizeType: 'M',
-    uid: 'uid',
+    uid: 'fileName',
     accept: '',
     type: ['jpg', 'jpeg', 'png'],
     listType: 'card',
@@ -88,6 +88,7 @@ var LmUpload = function LmUpload(_a, ref) {
     itemRender: null,
     enabledPreview: true,
     enabledCrop: false,
+    enableDrag: false,
     enabledOss: false,
     // oss配置
     ossConfig: function ossConfig() {

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

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

package/es/LmUpload/UploadList/ItemPictureCard.js

@@ -64,7 +64,8 @@ var renderThumb = function renderThumb(file) {
 var PictureItem = 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,
@@ -148,6 +149,13 @@ var PictureItem = function PictureItem(_ref) {
     style: {
       fontSize: resetSize.fontSize
     }
+  })), /*#__PURE__*/React.createElement("div", Object.assign({
+    className: "action_preview"
+  }, listeners), /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-drag",
+    style: {
+      fontSize: resetSize.fontSize
+    }
   })), !readOnly && /*#__PURE__*/React.createElement("div", {
     className: "action_delete",
     onClick: function onClick() {

package/es/LmUpload/UploadList/index.js

@@ -1,14 +1,19 @@
 import React, { useMemo } from 'react';
+import { LmDrag } from 'linkmore-design';
 import { render } from '../utils';
 import RenderItem from './RenderItem';
 
 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 = useMemo(function () {
     var _a;
@@ -17,6 +22,54 @@ var LmUploadList = function LmUploadList(_ref) {
       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 Object.assign(Object.assign({}, v), {
+            seq: over[fileNames.seq]
+          });
+        }
+
+        if (getFileHasValue(v) === getFileHasValue(over)) {
+          return Object.assign(Object.assign({}, v), {
+            seq: active[fileNames.seq]
+          });
+        }
+
+        return v;
+      });
+      dispatch({
+        type: 'changeFileList',
+        fileList: fileMap
+      });
+    } catch (error) {
+      console.log('移动出现了错误', error);
+    }
+  };
+
+  if (enableDrag) {
+    return /*#__PURE__*/React.createElement(LmDrag, {
+      options: fileList,
+      rowKey: uid,
+      move: handleMove
+    }, function (_ref2) {
+      var item = _ref2.item,
+          listeners = _ref2.listeners,
+          index = _ref2.index;
+      return render(itemRender || RenderItem, {
+        type: listType,
+        key: getFileHasValue(item) || index,
+        index: index,
+        file: item,
+        fileList: fileList,
+        instance: instance,
+        listeners: listeners
+      });
+    });
+  }
+
   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,

package/es/LmUpload/fns/index.js

@@ -66,10 +66,11 @@ var useCoreOptions = function useCoreOptions(_ref) {
   }, [uid]); // 从对象中读取存在的指定属性
 
   var getFileHasValue = 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]); // 获取当前的文件列表

package/es/index.d.ts

@@ -125,3 +125,4 @@ export { default as CropImg } from './CropImg';
 export type { CropImgProps } from './CropImg';
 export { default as ImageViewer } from './ImageViewer';
 export type { ImageViewerProps } from './ImageViewer';
+export * from './LmDrag';

package/es/index.js

@@ -82,4 +82,5 @@ export { default as FullScreen } from './FullScreen';
 export * from './LmImgList';
 export { default as LmImgList } from './LmImgList';
 export { default as CropImg } from './CropImg';
-export { default as ImageViewer } from './ImageViewer';
+export { default as ImageViewer } from './ImageViewer';
+export * from './LmDrag';

package/lib/Descriptions/Cell.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 export interface CellProps {
     itemPrefixCls: string;
     span: number;
+    rowSpan: number;
     className?: string;
     component: string;
     style?: React.CSSProperties;

package/lib/Descriptions/Cell.js

@@ -23,6 +23,7 @@ var Cell = function Cell(_ref) {
   var itemPrefixCls = _ref.itemPrefixCls,
       component = _ref.component,
       span = _ref.span,
+      rowSpan = _ref.rowSpan,
       className = _ref.className,
       style = _ref.style,
       labelStyle = _ref.labelStyle,
@@ -39,7 +40,8 @@ var Cell = function Cell(_ref) {
     return /*#__PURE__*/React.createElement(Component, {
       className: (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(itemPrefixCls, "-item-label"), notEmpty(label)), (0, _defineProperty2.default)(_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", {
@@ -50,7 +52,8 @@ var Cell = function Cell(_ref) {
   return /*#__PURE__*/React.createElement(Component, {
     className: (0, _classnames.default)("".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", {

package/lib/Descriptions/Item.d.ts

@@ -8,6 +8,7 @@ export interface DescriptionsItemProps {
     contentStyle?: React.CSSProperties;
     children: React.ReactNode;
     span?: number;
+    rowSpan?: number;
 }
 declare const DescriptionsItem: React.FC<DescriptionsItemProps>;
 export default DescriptionsItem;

package/lib/Descriptions/Row.js

@@ -11,7 +11,7 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _ = require("./");
+var _ = require(".");
 
 var _Cell = _interopRequireDefault(require("./Cell"));
 
@@ -37,6 +37,8 @@ function renderCells(items, _ref, _ref2) {
         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') {
@@ -47,6 +49,7 @@ function renderCells(items, _ref, _ref2) {
         labelStyle: Object.assign(Object.assign({}, rootLabelStyle), labelStyle),
         contentStyle: Object.assign(Object.assign({}, rootContentStyle), contentStyle),
         span: span,
+        rowSpan: rowSpan,
         colon: colon,
         component: component,
         itemPrefixCls: itemPrefixCls,
@@ -61,6 +64,7 @@ function renderCells(items, _ref, _ref2) {
       className: className,
       style: Object.assign(Object.assign(Object.assign({}, rootLabelStyle), style), labelStyle),
       span: 1,
+      rowSpan: rowSpan,
       colon: colon,
       component: component[0],
       itemPrefixCls: itemPrefixCls,
@@ -71,6 +75,7 @@ function renderCells(items, _ref, _ref2) {
       className: className,
       style: Object.assign(Object.assign(Object.assign({}, rootContentStyle), style), contentStyle),
       span: span * 2 - 1,
+      rowSpan: rowSpan,
       component: component[1],
       itemPrefixCls: itemPrefixCls,
       bordered: bordered,

package/lib/LmDrag/LmDrag.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Pick<{
+    [x: string]: any;
+}, string | number> & React.RefAttributes<unknown>>;
+export default _default;