linkmore-design/lib/crop-img/body/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _reactEasyCrop = _interopRequireDefault(require("react-easy-crop"));
/* tslint:disable */

const Index = ({
  instance
}) => {
  const {
    state,
    imgURL,
    setTransform,
    minZoom,
    zoomSpeed,
    aspect,
    cropSize
  } = instance;
  const onCropComplete = (0, _react.useCallback)((croppedArea, croppedAreaPixels) => {
    // console.log('croppedArea:', croppedArea, 'croppedAreaPixels:', croppedAreaPixels)
    setTransform({
      croppedAreaPixels
    });
  }, [setTransform]);
  const cropConfig = {
    minZoom,
    zoomSpeed,
    aspect,
    cropSize
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_cutimg_crop"
  }, /*#__PURE__*/_react.default.createElement(_reactEasyCrop.default, (0, _extends2.default)({}, cropConfig, {
    image: imgURL,
    crop: state.crop,
    zoom: state.zoom,
    rotation: state.rotation,
    onCropChange: crop => setTransform({
      crop
    }),
    onCropComplete: onCropComplete,
    onZoomChange: zoom => setTransform({
      zoom
    })
  })));
};
var _default = /*#__PURE__*/_react.default.memo(Index);
exports.default = _default;