linkmore-design 1.1.2 → 1.1.4

package/es/Badge/SingleNumber.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface UnitNumberProps {
     prefixCls: string;
     value: string | number;

package/es/Button/style/index.css

@@ -76,6 +76,11 @@
 .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;
+}
 .ant-btn.lm-button-danger {
   border: 1px solid var(--error-color);
   color: var(--error-color);

package/es/Button/style/variables.css

@@ -76,6 +76,11 @@
 .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;
+}
 .ant-btn.lm-button-danger {
   border: 1px solid var(--error-color);
   color: var(--error-color);

package/es/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/esm/exten
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _linkmoreDesign = require("linkmore-design");
 

package/es/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/es/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/es/CropImg/LmCropImg.js

@@ -0,0 +1,17 @@
+import React, { useRef, forwardRef } from 'react';
+import Root from './wrapper/Root';
+var CropImg = /*#__PURE__*/forwardRef(function (props, ref) {
+  var defaultRef = 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.createElement(Root, Object.assign({
+    ref: ref || defaultRef
+  }, defaultProps));
+});
+export default CropImg;

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

@@ -0,0 +1,90 @@
+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 from 'react';
+import { IconFont, Slider } from 'linkmore-design';
+
+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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconFont, {
+    type: leftIcon,
+    onClick: decrement
+  }), /*#__PURE__*/React.createElement(Slider, Object.assign({}, props, {
+    value: value,
+    onChange: function onChange(val) {
+      return _onChange(val);
+    }
+  })), /*#__PURE__*/React.createElement(IconFont, {
+    type: rightIcon,
+    onClick: increment
+  }));
+}; // 图片调整
+
+
+var Operate = function Operate(_ref) {
+  var instance = _ref.instance;
+  var state = instance.state,
+      setTransform = instance.setTransform;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "img_crop_control"
+  }, /*#__PURE__*/React.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.createElement("div", {
+    className: "img_crop_control"
+  }, /*#__PURE__*/React.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
+  })));
+};
+
+export default /*#__PURE__*/React.memo(Operate);

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

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import Cropper from '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 = 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.createElement("div", {
+    className: "lm_cutimg_crop"
+  }, /*#__PURE__*/React.createElement(Cropper, 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
+      });
+    }
+  })));
+};
+
+export default /*#__PURE__*/React.memo(Index);

package/es/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/es/CropImg/fns/index.js

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

package/es/CropImg/index.d.ts

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

package/es/CropImg/index.js

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

package/es/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/es/CropImg/style/index.js

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

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

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

package/es/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/esm/regeneratorRuntime"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/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/es/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/es/CropImg/wrapper/Container.js

@@ -0,0 +1,107 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+
+var __awaiter = this && this.__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 React, { useRef } from 'react';
+import { Modal } from 'linkmore-design';
+import Body from '../body';
+import Operate from '../body/Operate'; // 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 = 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__*/_regeneratorRuntime().mark(function _callee() {
+      var croppedImage;
+      return _regeneratorRuntime().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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, Object.assign({}, config), /*#__PURE__*/React.createElement("div", {
+    ref: boxContainerRef,
+    className: "lm_cutimg_container"
+  }, /*#__PURE__*/React.createElement(Body, {
+    instance: instance
+  }), /*#__PURE__*/React.createElement(Operate, {
+    instance: instance
+  }))));
+};
+
+export default /*#__PURE__*/React.memo(LmBoxContainer);

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

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