linkmore-design 1.1.13-alpha.4 → 1.1.13-alpha.6

package/lib/LmUpload/UploadList/ItemPictureCard.js

@@ -78,7 +78,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,
@@ -135,13 +136,13 @@ var PictureItem = function PictureItem(_ref) {
     });
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     className: (0, _classnames.default)('lm_upload_item', 'lm_upload_item_card', isError && 'lm_upload_item_error'),
     style: {
       height: size,
       width: size
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, listeners || {}), /*#__PURE__*/_react.default.createElement("div", {
     className: "lm_upload_item_thumb"
   }, isError || !isImg ? renderThumb(resetFile) : /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Image, {
     width: resetSize.width,

package/lib/LmUpload/UploadList/index.js

@@ -11,17 +11,23 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _linkmoreDesign = require("linkmore-design");
+
 var _utils = require("../utils");
 
 var _RenderItem = _interopRequireDefault(require("./RenderItem"));
 
 var LmUploadList = function LmUploadList(_ref) {
   var instance = _ref.instance;
-  var getFileHasValue = instance.getFileHasValue,
+  var uid = instance.uid,
+      getFileHasValue = instance.getFileHasValue,
       getFileList = instance.getFileList,
       itemRender = instance.itemRender,
       listType = instance.listType,
-      showUploadList = instance.showUploadList;
+      showUploadList = instance.showUploadList,
+      enableDrag = instance.enableDrag,
+      fileNames = instance.fileNames,
+      move = instance.move;
   if (!showUploadList) return null;
   var fileList = (0, _react.useMemo)(function () {
     var _a;
@@ -30,6 +36,51 @@ 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;
+      });
+      move(active, over, fileMap);
+    } catch (error) {
+      console.log('移动出现了错误', error);
+    }
+  };
+
+  if (enableDrag) {
+    return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.LmDrag, {
+      options: fileList,
+      rowKey: uid,
+      move: handleMove
+    }, function (_ref2) {
+      var item = _ref2.item,
+          listeners = _ref2.listeners,
+          index = _ref2.index;
+      return (0, _utils.render)(itemRender || _RenderItem.default, {
+        type: listType,
+        key: getFileHasValue(item) || index,
+        index: index,
+        file: item,
+        fileList: fileList,
+        instance: instance,
+        listeners: listeners
+      });
+    });
+  }
+
   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,

package/lib/LmUpload/fns/index.d.ts

@@ -15,6 +15,7 @@ declare const useCoreOptions: ({ state, dispatch, props }: {
         remove: (file: any) => Promise<void>;
         preview: (file: any) => void;
         download: (file: any) => void;
+        move: (active: any, over: any, fileList: any) => void;
     };
     RefMethods: {
         getState: () => any;

package/lib/LmUpload/fns/index.js

@@ -78,10 +78,11 @@ var useCoreOptions = function useCoreOptions(_ref) {
   }, [uid]); // 从对象中读取存在的指定属性
 
   var getFileHasValue = (0, _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]); // 获取当前的文件列表
@@ -483,7 +484,21 @@ var useCoreOptions = function useCoreOptions(_ref) {
     var _a;
 
     (_a = props.onDownload) === null || _a === void 0 ? void 0 : _a.call(props, file);
-  }, [props.onDownload]);
+  }, [props.onDownload]); // 拖拽移动事件
+
+  var move = (0, _react.useCallback)(function (active, over, fileList) {
+    var _a;
+
+    (_a = props.onMove) === null || _a === void 0 ? void 0 : _a.call(props, active, over, fileList);
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      file: active,
+      fileList: fileList
+    });
+    dispatch({
+      type: 'changeFileList',
+      fileList: fileList
+    });
+  }, [props.onMove, onChange, dispatch]);
   var CoreMethods = {
     getIsMaxCount: getIsMaxCount,
     getFileHasValue: getFileHasValue,
@@ -493,7 +508,8 @@ var useCoreOptions = function useCoreOptions(_ref) {
     getUploadStatus: getUploadStatus,
     remove: remove,
     preview: preview,
-    download: download
+    download: download,
+    move: move
   };
   var RefMethods = {
     getState: function getState() {

package/lib/QuickMenu/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface IMenuData {
+export interface IMenuData {
     menuId: string;
     title: string | React.ReactNode;
     hidden?: boolean;
@@ -10,6 +10,7 @@ export interface IQuickMenuProps {
     top?: number;
     menuData: IMenuData[];
     warpElement: any;
+    root?: IntersectionObserver['root'] | undefined;
 }
 declare const LMQuickMenu: React.FC<IQuickMenuProps>;
 export default LMQuickMenu;

package/lib/QuickMenu/index.js

@@ -29,7 +29,8 @@ var LMQuickMenu = function LMQuickMenu(props) {
       top = _props$top === void 0 ? '104px' : _props$top,
       _props$menuData = props.menuData,
       menuData = _props$menuData === void 0 ? [] : _props$menuData,
-      warpElement = props.warpElement;
+      warpElement = props.warpElement,
+      root = props.root;
   var idTopInfo = (0, _react.useRef)({});
 
   var _useState = (0, _react.useState)(false),
@@ -87,11 +88,13 @@ var LMQuickMenu = function LMQuickMenu(props) {
     var scrollama = require('scrollama');
 
     menuTimeEventRef.current = scrollama();
+    console.log((0, _domTarget.getTargetElement)(warpElement || document), '--getTargetElement(warpElement || document)');
     (_c = (_b = menuTimeEventRef.current) === null || _b === void 0 ? void 0 : _b.setup({
       step: filterMenuData.map(function (item) {
         return document.getElementById("".concat(item.menuId));
       }).filter(Boolean),
-      container: (0, _domTarget.getTargetElement)(warpElement || document)
+      container: (0, _domTarget.getTargetElement)(warpElement || document),
+      root: root ? (0, _domTarget.getTargetElement)(root) : undefined
     })) === null || _c === void 0 ? void 0 : _c.onStepEnter(function (_ref) {
       var element = _ref.element;
       updateActiveToc(element.id);
@@ -123,12 +126,6 @@ var LMQuickMenu = function LMQuickMenu(props) {
     wait: 50
   });
 
-  var bindDom = function bindDom() {
-    if (!Object.keys(idTopInfo.current).length) {
-      setKeysDom();
-    }
-  };
-
   var handleScroll = function handleScroll() {
     setScrollOpenStatus(true);
   };
@@ -143,10 +140,6 @@ var LMQuickMenu = function LMQuickMenu(props) {
     var _a; // bindScroller();
 
 
-    setTimeout(function () {
-      bindDom();
-      bindScroller();
-    }, 200);
     (_a = (0, _domTarget.getTargetElement)(warpElement || document)) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll, {
       once: true
     });
@@ -156,6 +149,12 @@ var LMQuickMenu = function LMQuickMenu(props) {
       (_a = (0, _domTarget.getTargetElement)(warpElement || document)) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll);
     };
   }, []);
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      setKeysDom();
+      bindScroller();
+    }, 200);
+  }, [filterMenuData]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(prefixCls),
     onMouseEnter: function onMouseEnter() {

package/lib/Select/index.d.ts

@@ -6,6 +6,9 @@ export interface ISelectProps extends SelectProps {
     Option?: typeof Select.Option;
     OptGroup?: typeof Select.OptGroup;
     defaultLabel?: string;
+    suffix?: React.ReactNode;
+    icon?: React.ReactNode;
+    iconClick?: () => void;
 }
 declare type SelectType = typeof Select & typeof Select.Option & typeof Select.OptGroup;
 declare const LMSelect: SelectType;

package/lib/Select/index.js

@@ -15,6 +15,8 @@ var _select = _interopRequireDefault(require("antd/es/select"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _Button = _interopRequireDefault(require("../Button"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _SizeContext = _interopRequireDefault(require("../ConfigProvider/SizeContext"));
@@ -44,8 +46,11 @@ var CLMSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       options = props.options,
       value = props.value,
       defaultLabel = props.defaultLabel,
+      suffix = props.suffix,
+      icon = props.icon,
+      iconClick = props.iconClick,
       rest = __rest(props // ===================== Size =====================
-  , ["children", "className", "size", "disabled", "dropdownClassName", "options", "value", "defaultLabel"]); // ===================== Size =====================
+  , ["children", "className", "size", "disabled", "dropdownClassName", "options", "value", "defaultLabel", "suffix", "icon", "iconClick"]); // ===================== Size =====================
 
 
   var size = customizeSize || _react.default.useContext(_SizeContext.default) || 'middle'; // ===================== Disabled =====================
@@ -84,6 +89,29 @@ var CLMSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (value && !hasOption) return defaultLabel !== null && defaultLabel !== void 0 ? defaultLabel : value;
     return value;
   }, [value, defaultLabel, hasOption]);
+
+  if (icon) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: 'lm_select_has_icon',
+      style: props.style
+    }, /*#__PURE__*/_react.default.createElement(_select.default, Object.assign({
+      className: (0, _classnames.default)(className, prefixCls),
+      size: size,
+      ref: ref,
+      value: resetValue,
+      options: options,
+      disabled: mergedDisabled || undefined
+    }, rest, {
+      dropdownClassName: (0, _classnames.default)('lm_select_dropdown', dropdownClassName)
+    }), children), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      size: size,
+      onClick: iconClick,
+      className: 'lm_select_icon_button',
+      disabled: mergedDisabled || undefined,
+      icon: icon
+    }));
+  }
+
   return /*#__PURE__*/_react.default.createElement(_select.default, Object.assign({
     className: (0, _classnames.default)(className, prefixCls),
     size: size,

package/lib/Select/style/index.css

@@ -526,3 +526,30 @@ p {
 .lm_select_dropdown .ant-select-item-option-disabled {
   color: var(--disabled-font-color);
 }
+.lm_select_has_icon {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+}
+.lm_select_has_icon .ant-select {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 3;
+}
+.lm_select_has_icon .ant-select .ant-select-selector {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.lm_select_has_icon .lm_select_icon_button {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  z-index: 2;
+}
+.lm_select_has_icon .lm_select_icon_button:hover,
+.lm_select_has_icon .lm_select_icon_button:focus {
+  z-index: 5;
+}

package/lib/Select/style/variables.css

@@ -14,3 +14,30 @@
 .lm_select_dropdown .ant-select-item-option-disabled {
   color: var(--disabled-font-color);
 }
+.lm_select_has_icon {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+}
+.lm_select_has_icon .ant-select {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 3;
+}
+.lm_select_has_icon .ant-select .ant-select-selector {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.lm_select_has_icon .lm_select_icon_button {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  z-index: 2;
+}
+.lm_select_has_icon .lm_select_icon_button:hover,
+.lm_select_has_icon .lm_select_icon_button:focus {
+  z-index: 5;
+}

package/lib/index.d.ts

@@ -51,6 +51,7 @@ export type { TooltipProps } from './Tooltip';
 export { default as Form } from './Form';
 export { default as Spin } from './Spin';
 export { default as LmEditTable } from './LmEditTable';
+export type { TLmEditTable, CountdownHandle } from './LmEditTable/EditTable';
 export { default as List } from './List';
 export { default as LMQuickMenu } from './QuickMenu';
 export { default as DatePicker } from './DatePicker';
@@ -125,3 +126,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/lib/index.js

@@ -776,4 +776,18 @@ Object.keys(_LmImgList).forEach(function (key) {
 
 var _CropImg = _interopRequireDefault(require("./CropImg"));
 
-var _ImageViewer = _interopRequireDefault(require("./ImageViewer"));
+var _ImageViewer = _interopRequireDefault(require("./ImageViewer"));
+
+var _LmDrag = require("./LmDrag");
+
+Object.keys(_LmDrag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _LmDrag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _LmDrag[key];
+    }
+  });
+});

package/lib/styles/variables.css

@@ -746,12 +746,13 @@ p {
   padding: 0 var(--gap);
 }
 .ant-btn.lm-button {
-  border: 0;
   display: inline-flex !important;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  color: var(--font-color);
   vertical-align: middle;
+  border: 1px solid var(--stroke-color);
   box-shadow: none;
 }
 .ant-btn.lm-button .anticon {
@@ -769,12 +770,24 @@ p {
   white-space: nowrap;
 }
 .ant-btn.lm-button::before {
-  display: none !important;
+  position: absolute;
+  z-index: 1;
+  display: none;
+  background: #fff;
+  border-radius: inherit;
+  opacity: 0.35;
+  transition: opacity 0.2s;
+  content: '';
+  pointer-events: none;
+  inset: -1px;
+}
+.ant-btn.lm-button.ant-btn-loading::before {
+  display: block;
 }
 .ant-btn.lm-button:disabled {
+  color: var(--disabled-font-color) !important;
   background: var(--disabled-bg-color) !important;
   border: 1px solid var(--disabled-border-color) !important;
-  color: var(--disabled-font-color) !important;
 }
 .ant-btn.lm-button > span:not(.anticon) {
   font-size: 12px;
@@ -795,57 +808,46 @@ p {
 .ant-btn.lm-button-middle .anticon {
   font-size: 16px;
 }
-.ant-btn.lm-button-default {
-  border: 1px solid var(--stroke-color);
-  color: var(--font-color);
-}
-.ant-btn.lm-button-default-hover,
-.ant-btn.lm-button-default:hover {
-  border: 1px solid var(--primary-hover-color);
-  color: var(--primary-hover-color);
-}
-.ant-btn.lm-button-default.ant-btn-loading {
-  border-color: rgba(0, 0, 0, 0.15);
-  color: rgba(0, 0, 0, 0.15);
-}
 .ant-btn.lm-button-primary {
-  background: var(--primary-color);
   color: #fff;
+  background: var(--primary-color);
+  border-color: var(--primary-color);
 }
-.ant-btn.lm-button-primary-hover,
 .ant-btn.lm-button-primary:hover {
   background: var(--primary-hover-color);
 }
+.ant-btn.lm-button-primary:active {
+  background-color: var(--primary-click-color);
+}
 .ant-btn.lm-button-primary.ant-btn-loading {
   background: var(--primary-loading-color);
 }
 .ant-btn.lm-button-ghost {
   color: var(--font-color);
-  border-color: var(--color-15);
   background: transparent;
+  border: 1px solid var(--color-15);
 }
 .ant-btn.lm-button-danger {
-  border: 1px solid var(--error-color);
   color: var(--error-color);
   text-shadow: none;
+  border: 1px solid var(--error-color);
   box-shadow: none;
 }
-.ant-btn.lm-button-danger-hover,
 .ant-btn.lm-button-danger:hover {
-  border-color: var(--error-hover-color);
   color: var(--error-hover-color);
+  border-color: var(--error-hover-color);
 }
 .ant-btn.lm-button-danger.ant-btn-loading {
-  border-color: var(--error-loading-color);
   color: var(--error-hover-color);
+  border-color: var(--error-loading-color);
 }
 .ant-btn.lm-button-dashed {
   border: 1px dashed var(--color-15);
 }
 .ant-btn.lm-button-link {
   color: var(--primary-color);
+  border-color: transparent;
 }
-.ant-btn.lm-button-link-hover,
 .ant-btn.lm-button-link:hover {
   color: var(--primary-hover-color);
 }
@@ -853,11 +855,12 @@ p {
   color: var(--primary-loading-color);
 }
 .ant-btn.lm-button-link[disabled] {
-  border: 0 !important;
   background: transparent !important;
+  border: 0 !important;
 }
 .ant-btn.ant-btn-text {
   background: transparent;
+  border-color: transparent;
 }
 .ant-btn.lm-button-icon-only .anticon {
   font-size: 16px;
@@ -9963,6 +9966,18 @@ p {
 .lm_filter_basic_item .filter_item_icon.addon_before {
   color: var(--font-color);
 }
+.lm_filter_basic_item .filter_item_icon .icon_clear {
+  display: none;
+  opacity: 0;
+}
+.lm_filter_basic_item .filter_item_icon:hover .icon_down {
+  display: none;
+  opacity: 0;
+}
+.lm_filter_basic_item .filter_item_icon:hover .icon_clear {
+  display: inline-block;
+  opacity: 1;
+}
 .lm_filter_basic_item.expand .filter_item_icon.addon_after {
   transform: rotateX(180deg);
 }
@@ -12433,6 +12448,33 @@ button.ant-table-row-expand-icon::after {
 .lm_select_dropdown .ant-select-item-option-disabled {
   color: var(--disabled-font-color);
 }
+.lm_select_has_icon {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+}
+.lm_select_has_icon .ant-select {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 3;
+}
+.lm_select_has_icon .ant-select .ant-select-selector {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.lm_select_has_icon .lm_select_icon_button {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  z-index: 2;
+}
+.lm_select_has_icon .lm_select_icon_button:hover,
+.lm_select_has_icon .lm_select_icon_button:focus {
+  z-index: 5;
+}
 .ant-switch.lm-switch {
   width: 48px;
   height: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkmore-design",
-  "version": "1.1.13-alpha.4",
+  "version": "1.1.13-alpha.6",
   "author": {
     "name": "nowthen",
     "email": "rnlvwyx@gmail.com"