linkmore-design 1.1.3 → 1.1.5

package/es/LmUpload/wrapper/reducer.js

@@ -1,7 +1,8 @@
 // 状态管理操作
 export var reducer = function reducer(state, action) {
   var fileList = action.fileList,
-      percent = action.percent;
+      percent = action.percent,
+      cropFile = action.cropFile;
 
   switch (action.type) {
     case 'changeFileList':
@@ -14,6 +15,11 @@ export var reducer = function reducer(state, action) {
         percent: percent
       });
 
+    case 'changeCropFile':
+      return Object.assign(Object.assign({}, state), {
+        cropFile: cropFile
+      });
+
     default:
       throw new Error();
   }
@@ -26,7 +32,8 @@ export var initialState = function initialState(props) {
     upload: upload,
     process: 0,
     status: 'done',
-    fileList: defaultFileList // 用于非受控模式时的数据收集
+    fileList: defaultFileList,
+    cropFile: null // 需要裁剪的图片
 
   };
 };

package/es/index.d.ts

@@ -120,3 +120,8 @@ export type { DescriptionsProps } from './Descriptions';
 export { default as FullScreen } from './FullScreen';
 export type { IFullScreenProps } from './FullScreen';
 export * from './LmImgList';
+export { default as LmImgList } from './LmImgList';
+export { default as CropImg } from './CropImg';
+export type { CropImgProps } from './CropImg';
+export { default as ImageViewer } from './ImageViewer';
+export type { ImageViewerProps } from './ImageViewer';

package/es/index.js

@@ -79,4 +79,7 @@ export { default as Divider } from './Divider';
 export { default as Skeleton } from './Skeleton';
 export { default as Descriptions } from './Descriptions';
 export { default as FullScreen } from './FullScreen';
-export * from './LmImgList';
+export * from './LmImgList';
+export { default as LmImgList } from './LmImgList';
+export { default as CropImg } from './CropImg';
+export { default as ImageViewer } from './ImageViewer';

package/es/styles/variables.css

@@ -1699,6 +1699,23 @@ p {
 .lm-radio-group.lm-radio-group-column .lm-radio:last-child {
   margin-bottom: 0;
 }
+.lm_cutimg_container .lm_cutimg_crop {
+  position: relative;
+  height: 40vh;
+}
+.lm_cutimg_container .img_crop_control {
+  display: flex;
+  gap: var(--gap);
+  align-items: center;
+  width: 60%;
+  margin: auto;
+}
+.lm_cutimg_container .img_crop_control .ant-slider {
+  flex: 1;
+}
+.lm_cutimg_container .img_crop_control .anticon {
+  font-size: 16px;
+}
 .lm_custom-table-option.lm_drawer .ant-drawer-body {
   padding: 0 0 24px 0;
 }
@@ -9873,53 +9890,53 @@ p {
   visibility: hidden;
   transform: translateY(-36px);
 }
-.ant-dropdown .filter_dropdown {
+.filter_dropdown {
   display: flex;
   flex-flow: column;
   box-shadow: 0 2px 6px var(--box-shadow-color);
   background-color: #fff;
 }
-.ant-dropdown .filter_dropdown .filter_header {
+.filter_dropdown .filter_header {
   min-height: 40px;
   border-bottom: 1px solid #eee;
   padding: 8px;
 }
-.ant-dropdown .filter_dropdown .filter_header .filter_header_operate {
+.filter_dropdown .filter_header .filter_header_operate {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.ant-dropdown .filter_dropdown .filter_header .filter_header_operate .filter_header_operate_checked {
+.filter_dropdown .filter_header .filter_header_operate .filter_header_operate_checked {
   display: inline-flex;
   align-items: center;
 }
-.ant-dropdown .filter_dropdown .filter_header .filter_header_operate .filter_reset {
+.filter_dropdown .filter_header .filter_header_operate .filter_reset {
   font-size: 12px;
   color: var(--primary-color);
   cursor: pointer;
 }
-.ant-dropdown .filter_dropdown .filter_header .filter_header_operate .filter_tip {
+.filter_dropdown .filter_header .filter_header_operate .filter_tip {
   font-size: 12px;
   color: var(--text-color);
 }
-.ant-dropdown .filter_dropdown .filter_header .ant-input-group {
+.filter_dropdown .filter_header .ant-input-group {
   line-height: 1;
 }
-.ant-dropdown .filter_dropdown .filter_header input {
+.filter_dropdown .filter_header input {
   font-size: 12px;
 }
-.ant-dropdown .filter_dropdown .filter_header .ant-input-search + .filter_header_operate {
+.filter_dropdown .filter_header .ant-input-search + .filter_header_operate {
   margin-top: 8px;
 }
-.ant-dropdown .filter_dropdown .filter_body {
+.filter_dropdown .filter_body {
   width: 100%;
 }
-.ant-dropdown .filter_dropdown .filter_body .virtual_list {
+.filter_dropdown .filter_body .virtual_list {
   min-width: 168px;
   max-height: 224px;
   overflow: auto;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item {
+.filter_dropdown .filter_body .filter_item {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -9932,39 +9949,39 @@ p {
   cursor: pointer;
   gap: 8px;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item.last_item {
+.filter_dropdown .filter_body .filter_item.last_item {
   border-top: 1px solid var(--line-color);
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_content {
+.filter_dropdown .filter_body .filter_item .filter_item_content {
   flex: auto;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_operate {
+.filter_dropdown .filter_body .filter_item .filter_item_operate {
   display: inline-flex;
   align-items: center;
   gap: 4px;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_operate .icon_hover {
+.filter_dropdown .filter_body .filter_item .filter_item_operate .icon_hover {
   font-size: 16px;
   transition: 0.3s;
   opacity: 0;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item .filter_item_operate .icon_hover:hover {
+.filter_dropdown .filter_body .filter_item .filter_item_operate .icon_hover:hover {
   color: var(--primary-color);
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item[disabled] {
+.filter_dropdown .filter_body .filter_item[disabled] {
   display: none;
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item.checked {
+.filter_dropdown .filter_body .filter_item.checked {
   color: var(--font-color);
   background-color: var(--primary-select-color);
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item:hover {
+.filter_dropdown .filter_body .filter_item:hover {
   background-color: var(--background-color);
 }
-.ant-dropdown .filter_dropdown .filter_body .filter_item:hover .filter_item_operate .icon_hover {
+.filter_dropdown .filter_body .filter_item:hover .filter_item_operate .icon_hover {
   opacity: 1;
 }
-.ant-dropdown .filter_dropdown .filter_footer {
+.filter_dropdown .filter_footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -9974,24 +9991,24 @@ p {
   border-top: 1px solid #eee;
   letter-spacing: 1px;
 }
-.ant-dropdown .filter_dropdown .filter_footer button {
+.filter_dropdown .filter_footer button {
   font-size: 12px;
   padding: 0 8px;
 }
-.ant-dropdown .filter_dropdown .filter_footer .footer_save {
+.filter_dropdown .filter_footer .footer_save {
   color: var(--primary-color);
   cursor: pointer;
   transition: 0.3s;
 }
-.ant-dropdown .filter_dropdown .filter_footer .footer_clear {
+.filter_dropdown .filter_footer .footer_clear {
   color: var(--text-color);
   cursor: pointer;
   transition: 0.3s;
 }
-.ant-dropdown .filter_dropdown .filter_footer .footer_clear:hover {
+.filter_dropdown .filter_footer .footer_clear:hover {
   color: var(--font-color);
 }
-.ant-dropdown .filter_dropdown .filter_empty {
+.filter_dropdown .filter_empty {
   display: flex;
   flex-flow: column;
   align-items: center;
@@ -10003,19 +10020,19 @@ p {
   margin: auto;
   gap: 4px;
 }
-.ant-dropdown .filter_dropdown .filter_empty .filter_empty_text {
+.filter_dropdown .filter_empty .filter_empty_text {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 20px;
   color: var(--font-color);
 }
-.ant-dropdown .filter_dropdown .ant-checkbox-wrapper {
+.filter_dropdown .ant-checkbox-wrapper {
   flex: 1;
   font-size: 12px;
   align-items: center;
 }
-.ant-dropdown .filter_dropdown .ant-checkbox-wrapper .ant-checkbox {
+.filter_dropdown .ant-checkbox-wrapper .ant-checkbox {
   top: initial;
 }
 .ant-drawer .ant-drawer-header .ant-drawer-title {
@@ -10180,9 +10197,52 @@ p {
 .lm_filter_dropdown_picker {
   padding: 0 !important;
 }
+.lm_filter_dropdown_picker .filter_picker_box {
+  display: flex;
+}
+.lm_filter_dropdown_picker .filter_picker_box .filter_picker_aside {
+  font-size: 12px;
+  border-right: 1px solid var(--background-color-hover);
+  padding: 6px 0;
+}
+.lm_filter_dropdown_picker .filter_picker_box .filter_picker_aside .filter_picker_aside_item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 8px;
+  transition: 0.3s;
+  cursor: pointer;
+}
+.lm_filter_dropdown_picker .filter_picker_box .filter_picker_aside .filter_picker_aside_item:hover,
+.lm_filter_dropdown_picker .filter_picker_box .filter_picker_aside .filter_picker_aside_item.active {
+  background-color: var(--primary-select-color);
+}
+.lm_filter_dropdown_picker .filter_picker_box .filter_picker_main .filter_picker_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+  line-height: 1;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--background-color-hover);
+}
+.lm_filter_dropdown_picker .filter_picker_box .filter_picker_main .filter_picker_header .ant-radio-button-wrapper {
+  font-size: 12px;
+  color: var(--font2-color);
+}
+.lm_filter_dropdown_picker .filter_picker_box .filter_picker_main .filter_picker_header .ant-radio-button-wrapper:hover,
+.lm_filter_dropdown_picker .filter_picker_box .filter_picker_main .filter_picker_header .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
+  color: var(--primary-color);
+}
 .lm_filter_dropdown_picker .ant-picker-range-arrow {
   display: none;
 }
+.ant-select-dropdown.ant-cascader-dropdown {
+  padding: 0;
+}
+.ant-select-dropdown.ant-cascader-dropdown .ant-cascader-menu-item {
+  padding: 5px 8px;
+}
 .lm_imglist_container {
   position: relative;
   display: grid;

package/lib/CardTable/pager/TablePagination.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _linkmoreDesign = require("linkmore-design");
 

package/lib/CardTable/pager/index.js

@@ -24,7 +24,6 @@ var CardTablePager = /*#__PURE__*/_react.default.memo(function (_ref) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
 
-    ;
     return typeof left === 'function' ? left(table) : left;
   }; // 底部工具栏右侧插槽
 

package/lib/CropImg/LmCropImg.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface CropImgProps {
+    visible?: boolean;
+    file?: any;
+    minZoom?: number;
+    zoomSpeed?: number;
+    aspect?: number;
+    cropSize: any;
+}
+declare const CropImg: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export default CropImg;

package/lib/CropImg/LmCropImg.js

@@ -0,0 +1,31 @@
+"use strict";
+
+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 = _interopRequireWildcard(require("react"));
+
+var _Root = _interopRequireDefault(require("./wrapper/Root"));
+
+var CropImg = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var defaultRef = (0, _react.useRef)(null);
+  var defaultProps = Object.assign({
+    visible: null,
+    file: null,
+    minZoom: 0.1,
+    zoomSpeed: 0.2,
+    aspect: 4 / 3,
+    cropSize: null
+  }, props);
+  return /*#__PURE__*/_react.default.createElement(_Root.default, Object.assign({
+    ref: ref || defaultRef
+  }, defaultProps));
+});
+var _default = CropImg;
+exports.default = _default;

package/lib/CropImg/body/Operate.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/CropImg/body/Operate.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var __rest = void 0 && (void 0).__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;
+};
+
+var ResetSlider = function ResetSlider(_a) {
+  var value = _a.value,
+      _onChange = _a.onChange,
+      leftIcon = _a.leftIcon,
+      rightIcon = _a.rightIcon,
+      props = __rest(_a, ["value", "onChange", "leftIcon", "rightIcon"]); // 减
+
+
+  var decrement = function decrement() {
+    if (!(value > props.min)) return;
+    var nValue = Math.round(value * 100 - props.step * 100) / 100;
+    _onChange === null || _onChange === void 0 ? void 0 : _onChange(nValue);
+  }; // 增
+
+
+  var increment = function increment() {
+    if (!(value < props.max)) return;
+    var nValue = Math.round(value * 100 + props.step * 100) / 100;
+    _onChange === null || _onChange === void 0 ? void 0 : _onChange(nValue);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+    type: leftIcon,
+    onClick: decrement
+  }), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Slider, Object.assign({}, props, {
+    value: value,
+    onChange: function onChange(val) {
+      return _onChange(val);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+    type: rightIcon,
+    onClick: increment
+  }));
+}; // 图片调整
+
+
+var Operate = function Operate(_ref) {
+  var instance = _ref.instance;
+  var state = instance.state,
+      setTransform = instance.setTransform;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "img_crop_control"
+  }, /*#__PURE__*/_react.default.createElement(ResetSlider, {
+    value: state.zoom,
+    onChange: function onChange(zoom) {
+      return setTransform({
+        zoom: zoom
+      });
+    },
+    defaultValue: 1,
+    leftIcon: "lmweb-minus",
+    rightIcon: "lmweb-plus",
+    step: 0.1,
+    min: 0.1,
+    max: 3
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "img_crop_control"
+  }, /*#__PURE__*/_react.default.createElement(ResetSlider, {
+    value: state.rotation,
+    onChange: function onChange(rotation) {
+      return setTransform({
+        rotation: rotation
+      });
+    },
+    defaultValue: 0,
+    leftIcon: "lmweb-rotate-left",
+    rightIcon: "lmweb-rotate-right",
+    step: 1,
+    min: -180,
+    max: 180
+  })));
+};
+
+var _default = /*#__PURE__*/_react.default.memo(Operate);
+
+exports.default = _default;

package/lib/CropImg/body/index.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/CropImg/body/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+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 = _interopRequireWildcard(require("react"));
+
+var _reactEasyCrop = _interopRequireDefault(require("react-easy-crop"));
+
+var Index = function Index(_ref) {
+  var instance = _ref.instance;
+  var state = instance.state,
+      imgURL = instance.imgURL,
+      setTransform = instance.setTransform,
+      minZoom = instance.minZoom,
+      zoomSpeed = instance.zoomSpeed,
+      aspect = instance.aspect,
+      cropSize = instance.cropSize;
+  var onCropComplete = (0, _react.useCallback)(function (croppedArea, croppedAreaPixels) {
+    // console.log('croppedArea:', croppedArea, 'croppedAreaPixels:', croppedAreaPixels)
+    setTransform({
+      croppedAreaPixels: croppedAreaPixels
+    });
+  }, [setTransform]);
+  var cropConfig = {
+    minZoom: minZoom,
+    zoomSpeed: zoomSpeed,
+    aspect: aspect,
+    cropSize: cropSize
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_cutimg_crop"
+  }, /*#__PURE__*/_react.default.createElement(_reactEasyCrop.default, Object.assign({}, cropConfig, {
+    image: imgURL,
+    crop: state.crop,
+    zoom: state.zoom,
+    rotation: state.rotation,
+    onCropChange: function onCropChange(crop) {
+      return setTransform({
+        crop: crop
+      });
+    },
+    onCropComplete: onCropComplete,
+    onZoomChange: function onZoomChange(zoom) {
+      return setTransform({
+        zoom: zoom
+      });
+    }
+  })));
+};
+
+var _default = /*#__PURE__*/_react.default.memo(Index);
+
+exports.default = _default;

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

@@ -0,0 +1,14 @@
+declare const useCoreOptions: ({ state, dispatch, props }: {
+    state: any;
+    dispatch: any;
+    props: any;
+}) => {
+    CoreMethds: {
+        setTransform: (obj: any) => void;
+        getCropImageAsync: () => Promise<any>;
+    };
+    RefMethods: {
+        imgURL: string;
+    };
+};
+export default useCoreOptions;

package/lib/CropImg/fns/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _utils = require("../utils");
+
+// 仅支持单个文件（多文件待扩展）
+var useCoreOptions = function useCoreOptions(_ref) {
+  var state = _ref.state,
+      dispatch = _ref.dispatch,
+      props = _ref.props;
+  var file = props.file; // 本地文件URL
+
+  var imgURL = (0, _react.useMemo)(function () {
+    return file && window.URL.createObjectURL(file);
+  }, [file]); // 设置transform参数
+
+  var setTransform = (0, _react.useCallback)(function (obj) {
+    dispatch({
+      type: 'changeResult',
+      result: obj
+    });
+  }, [dispatch]); // 获取裁剪后的图片
+
+  var getCropImageAsync = (0, _react.useCallback)(function () {
+    try {
+      return (0, _utils.getCroppedImg)(imgURL, state.croppedAreaPixels, state.rotation);
+    } catch (e) {
+      console.error('getCropImageAsync图片获取失败！', e);
+      return null;
+    }
+  }, [imgURL, state.croppedAreaPixels, state.rotation]);
+  (0, _react.useEffect)(function () {
+    dispatch({
+      type: 'changeInit',
+      init: {
+        visible: !!file
+      }
+    });
+  }, [file]);
+  var CoreMethds = {
+    setTransform: setTransform,
+    getCropImageAsync: getCropImageAsync
+  };
+  var RefMethods = {
+    imgURL: imgURL
+  };
+  return {
+    CoreMethds: CoreMethds,
+    RefMethods: RefMethods
+  };
+};
+
+var _default = useCoreOptions;
+exports.default = _default;

package/lib/CropImg/index.d.ts

@@ -0,0 +1,4 @@
+import LmCropImg from './LmCropImg';
+export * from './LmCropImg';
+export { LmCropImg };
+export default LmCropImg;

package/lib/CropImg/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  LmCropImg: true
+};
+Object.defineProperty(exports, "LmCropImg", {
+  enumerable: true,
+  get: function get() {
+    return _LmCropImg.default;
+  }
+});
+exports.default = void 0;
+
+var _LmCropImg = _interopRequireWildcard(require("./LmCropImg"));
+
+Object.keys(_LmCropImg).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _LmCropImg[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _LmCropImg[key];
+    }
+  });
+});
+var _default = _LmCropImg.default;
+exports.default = _default;

package/lib/CropImg/style/index.css

@@ -0,0 +1,17 @@
+.lm_cutimg_container .lm_cutimg_crop {
+  position: relative;
+  height: 40vh;
+}
+.lm_cutimg_container .img_crop_control {
+  display: flex;
+  gap: var(--gap);
+  align-items: center;
+  width: 60%;
+  margin: auto;
+}
+.lm_cutimg_container .img_crop_control .ant-slider {
+  flex: 1;
+}
+.lm_cutimg_container .img_crop_control .anticon {
+  font-size: 16px;
+}

package/lib/CropImg/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.css");