linkmore-design 1.1.3 → 1.1.4

package/lib/CropImg/style/variables.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/variables.js

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

package/lib/CropImg/utils.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dataURLtoBlob = exports.createImage = exports.blobToFile = void 0;
+exports.getCroppedImg = getCroppedImg;
+exports.getRadianAngle = getRadianAngle;
+exports.rotateSize = rotateSize;
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+// dataURL转Blob
+var dataURLtoBlob = function dataURLtoBlob(base64Url) {
+  var bytes = window.atob(base64Url.split(',')[1]);
+  var array = [];
+
+  for (var i = 0; i < bytes.length; i += 1) {
+    array.push(bytes.charCodeAt(i));
+  }
+
+  return new Blob([new Uint8Array(array)], {
+    type: 'image/png'
+  });
+}; // 将blob转换为file
+
+
+exports.dataURLtoBlob = dataURLtoBlob;
+
+var blobToFile = function blobToFile(theBlob, fileName) {
+  theBlob.lastModifiedDate = new Date();
+  theBlob.name = fileName;
+  return theBlob;
+};
+
+exports.blobToFile = blobToFile;
+
+var createImage = function createImage(url) {
+  return new Promise(function (resolve, reject) {
+    var image = new Image();
+    image.addEventListener('load', function () {
+      return resolve(image);
+    });
+    image.addEventListener('error', function (error) {
+      return reject(error);
+    });
+    image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox
+
+    image.src = url;
+  });
+};
+
+exports.createImage = createImage;
+
+function getRadianAngle(degreeValue) {
+  return degreeValue * Math.PI / 180;
+}
+/**
+ * Returns the new bounding area of a rotated rectangle.
+ */
+
+
+function rotateSize(width, height, rotation) {
+  var rotRad = getRadianAngle(rotation);
+  return {
+    width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+    height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
+  };
+}
+/**
+ * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
+ */
+
+
+function getCroppedImg(_x, _x2) {
+  return _getCroppedImg.apply(this, arguments);
+}
+
+function _getCroppedImg() {
+  _getCroppedImg = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(imageSrc, pixelCrop) {
+    var rotation,
+        flip,
+        image,
+        canvas,
+        ctx,
+        rotRad,
+        _rotateSize,
+        bBoxWidth,
+        bBoxHeight,
+        data,
+        _args = arguments;
+
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            rotation = _args.length > 2 && _args[2] !== undefined ? _args[2] : 0;
+            flip = _args.length > 3 && _args[3] !== undefined ? _args[3] : {
+              horizontal: false,
+              vertical: false
+            };
+            _context.next = 4;
+            return createImage(imageSrc);
+
+          case 4:
+            image = _context.sent;
+            canvas = document.createElement('canvas');
+            ctx = canvas.getContext('2d');
+
+            if (ctx) {
+              _context.next = 9;
+              break;
+            }
+
+            return _context.abrupt("return", null);
+
+          case 9:
+            rotRad = getRadianAngle(rotation); // calculate bounding box of the rotated image
+
+            _rotateSize = rotateSize(image.width, image.height, rotation), bBoxWidth = _rotateSize.width, bBoxHeight = _rotateSize.height; // set canvas size to match the bounding box
+
+            canvas.width = bBoxWidth;
+            canvas.height = bBoxHeight; // translate canvas context to a central location to allow rotating and flipping around the center
+
+            ctx.translate(bBoxWidth / 2, bBoxHeight / 2);
+            ctx.rotate(rotRad);
+            ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1);
+            ctx.translate(-image.width / 2, -image.height / 2); // draw rotated image
+
+            ctx.drawImage(image, 0, 0); // croppedAreaPixels values are bounding box relative
+            // extract the cropped image using these values
+
+            data = ctx.getImageData(pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height); // set canvas width to final desired crop size - this will clear existing context
+
+            canvas.width = pixelCrop.width;
+            canvas.height = pixelCrop.height; // paste generated rotate image at the top left corner
+
+            ctx.putImageData(data, 0, 0); // As Base64 string
+            // return canvas.toDataURL('image/jpeg');
+            // As a blob
+
+            return _context.abrupt("return", new Promise(function (resolve, reject) {
+              canvas.toBlob(function (file) {
+                // resolve(URL.createObjectURL(file))
+                resolve(file);
+              }, 'image/jpeg');
+            }));
+
+          case 23:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _getCroppedImg.apply(this, arguments);
+}

package/lib/CropImg/wrapper/Container.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/wrapper/Container.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var _body = _interopRequireDefault(require("../body"));
+
+var _Operate = _interopRequireDefault(require("../body/Operate"));
+
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+// import { dataURLtoBlob, blobToFile } from '../utils'
+var LmBoxContainer = function LmBoxContainer(_ref) {
+  var instance = _ref.instance;
+  var visible = instance.visible,
+      onClose = instance.onClose,
+      state = instance.state,
+      dispatch = instance.dispatch,
+      getCropImageAsync = instance.getCropImageAsync,
+      file = instance.file;
+  var boxContainerRef = (0, _react.useRef)(null); // 关闭时初始化
+
+  var handleClose = function handleClose(blobFile) {
+    dispatch({
+      type: 'changeResult',
+      result: {
+        visible: false
+      }
+    });
+    onClose === null || onClose === void 0 ? void 0 : onClose(blobFile, file);
+  };
+
+  var handleOk = function handleOk() {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var croppedImage;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return getCropImageAsync();
+
+            case 2:
+              croppedImage = _context.sent;
+              dispatch({
+                type: 'changeResult',
+                result: {
+                  croppedImage: croppedImage
+                }
+              });
+              handleClose(croppedImage);
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+  };
+
+  var config = {
+    title: '编辑图片',
+    open: visible !== null && visible !== void 0 ? visible : state.visible,
+    onCancel: function onCancel() {
+      return handleClose(false);
+    },
+    onOk: handleOk
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Modal, Object.assign({}, config), /*#__PURE__*/_react.default.createElement("div", {
+    ref: boxContainerRef,
+    className: "lm_cutimg_container"
+  }, /*#__PURE__*/_react.default.createElement(_body.default, {
+    instance: instance
+  }), /*#__PURE__*/_react.default.createElement(_Operate.default, {
+    instance: instance
+  }))));
+};
+
+var _default = /*#__PURE__*/_react.default.memo(LmBoxContainer);
+
+exports.default = _default;

package/lib/CropImg/wrapper/Root.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const LmBox: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export default LmBox;

package/lib/CropImg/wrapper/Root.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reducer = _interopRequireWildcard(require("./reducer"));
+
+var _fns = _interopRequireDefault(require("../fns"));
+
+var _Wrapper = _interopRequireDefault(require("./Wrapper"));
+
+var LmBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var initialState = (0, _react.useMemo)(function () {
+    return (0, _reducer.initialState)();
+  }, []);
+
+  var _useReducer = (0, _react.useReducer)(_reducer.default, initialState),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1]; // 获取核心Methods
+
+
+  var _useCoreOptions = (0, _fns.default)({
+    state: state,
+    dispatch: dispatch,
+    props: props
+  }),
+      CoreMethds = _useCoreOptions.CoreMethds,
+      RefMethods = _useCoreOptions.RefMethods; // 组件实例
+
+
+  var instance = (0, _react.useMemo)(function () {
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, props), CoreMethds), RefMethods), {
+      state: state,
+      dispatch: dispatch
+    });
+  }, [props, RefMethods, state, dispatch]); // 向外暴露出的方法
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return Object.assign({
+      getState: function getState() {
+        return state;
+      }
+    }, RefMethods);
+  });
+  return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
+    instance: instance
+  });
+});
+var _default = LmBox;
+exports.default = _default;

package/lib/CropImg/wrapper/Wrapper.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/wrapper/Wrapper.js

@@ -0,0 +1,23 @@
+"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 _Container = _interopRequireDefault(require("./Container"));
+
+var Wrapper = function Wrapper(_ref) {
+  var instance = _ref.instance;
+  return /*#__PURE__*/_react.default.createElement(_Container.default, {
+    instance: instance
+  });
+};
+
+var _default = /*#__PURE__*/_react.default.memo(Wrapper);
+
+exports.default = _default;

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

@@ -0,0 +1,13 @@
+export declare const reducer: (state: any, action: any) => any;
+export declare const initialState: () => {
+    visible: boolean;
+    zoom: number;
+    rotation: number;
+    crop: {
+        x: number;
+        y: number;
+    };
+    croppedAreaPixels: any;
+    croppedImage: any;
+};
+export default reducer;

package/lib/CropImg/wrapper/reducer.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.reducer = exports.initialState = exports.default = void 0;
+var defaultState = {
+  visible: false,
+  zoom: 1,
+  rotation: 0,
+  crop: {
+    x: 0,
+    y: 0
+  },
+  croppedAreaPixels: null,
+  croppedImage: null // 裁剪后的图片File
+
+}; // 状态管理操作
+
+var reducer = function reducer(state, action) {
+  var result = action.result,
+      init = action.init;
+
+  switch (action.type) {
+    case 'changeInit':
+      return Object.assign(Object.assign(Object.assign({}, state), defaultState), init);
+
+    case 'changeResult':
+      return Object.assign(Object.assign({}, state), result);
+
+    default:
+      throw new Error();
+  }
+}; // 仅在初始化时触发一次
+
+
+exports.reducer = reducer;
+
+var initialState = function initialState() {
+  return Object.assign({}, defaultState);
+};
+
+exports.initialState = initialState;
+var _default = reducer;
+exports.default = _default;

package/lib/ImageViewer/wrapeer/Container.d.ts

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

package/lib/ImageViewer/wrapeer/Container.js

@@ -41,5 +41,6 @@ var LmImageViewerContainer = function LmImageViewerContainer(_ref) {
   })));
 };
 
-var _default = LmImageViewerContainer;
+var _default = /*#__PURE__*/_react.default.memo(LmImageViewerContainer);
+
 exports.default = _default;

package/lib/ImageViewer/wrapeer/Wrapper.d.ts

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

package/lib/ImageViewer/wrapeer/Wrapper.js

@@ -35,5 +35,6 @@ var LmImageViewerWrapper = function LmImageViewerWrapper(_ref) {
   }));
 };
 
-var _default = LmImageViewerWrapper;
+var _default = /*#__PURE__*/_react.default.memo(LmImageViewerWrapper);
+
 exports.default = _default;

package/lib/LmFilter/components/CheckboxFilter.js

@@ -104,7 +104,10 @@ var CheckboxFilter = function CheckboxFilter(_ref) {
       return !options.some(function (v) {
         return v.value === value;
       });
-    }) : (0, _utils.uniqueFunc)([].concat((0, _toConsumableArray2.default)(checkedValues), (0, _toConsumableArray2.default)(options)), 'value');
+    }) : (0, _utils.uniqueFunc)([].concat((0, _toConsumableArray2.default)(checkedValues), (0, _toConsumableArray2.default)(options.map(function (_ref3) {
+      var value = _ref3.value;
+      return value;
+    }))), 'value');
     setCheckedValues(nValue);
   }; // 取消 不执行查询操作 关闭下拉框
 
@@ -157,9 +160,9 @@ var CheckboxFilter = function CheckboxFilter(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.VirtualList, {
     options: options,
     className: "filter_list"
-  }, function (_ref3) {
-    var item = _ref3.item,
-        resetProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  }, function (_ref4) {
+    var item = _ref4.item,
+        resetProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
     return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
       className: (0, _classnames.default)('filter_item', {
         checked: checkedValues.some(function (value) {

package/lib/LmFilter/filterFns/index.js

@@ -487,14 +487,26 @@ var useCoreOptions = function useCoreOptions(_ref) {
       filterQuery: filterQuery,
       type: 'basic'
     };
-  }, [state, dataSource]); // 设置筛选的值 itemValue => String || Array => ['', '', ...]
+  }, [state, dataSource]);
+  /*
+   * 设置筛选的值 itemValue => String || Array => ['', '', ...]
+   * 后端仅接受数组包字符串形式, 不接受数值及布尔值
+   */
 
   var setFilterValue = (0, _react.useCallback)(function (itemValue, item) {
     var field = item.field;
 
     if (field) {
       // 将结果转换为字符串
-      var stringValue = enableAutoString ? String(itemValue) : itemValue; // 基础查询数据(受控数据)
+      var isArray = Array.isArray(itemValue);
+
+      var transformString = function transformString(val) {
+        return isArray ? val.map(function (v) {
+          return String(v);
+        }) : String(val);
+      };
+
+      var stringValue = enableAutoString ? transformString(itemValue) : itemValue; // 基础查询数据(受控数据)
 
       var basicFilter = Object.assign(Object.assign({}, state.basicFilter), (0, _defineProperty2.default)({}, field, stringValue)); // 外部查询数据结构
 
@@ -502,7 +514,7 @@ var useCoreOptions = function useCoreOptions(_ref) {
         fieldName: field,
         fieldType: item.valueType || 'string',
         type: item.type,
-        value: Array.isArray(stringValue) ? stringValue : [stringValue],
+        value: isArray ? stringValue : [stringValue],
         operator: item.operator || 'equal'
       })); // 数据清除时不返回结构体