acud/lib/img-crop/EasyCrop.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactEasyCrop = _interopRequireDefault(require("react-easy-crop"));
var _slider = _interopRequireDefault(require("../slider"));
var _configProvider = require("../config-provider");
var _constants = require("./constants");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var EasyCrop = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var cropperRef = props.cropperRef,
    image = props.image,
    aspect = props.aspect,
    shape = props.shape,
    grid = props.grid,
    zoom = props.zoom,
    rotate = props.rotate,
    minZoom = props.minZoom,
    maxZoom = props.maxZoom,
    cropperProps = props.cropperProps,
    customPrefixCls = props.prefixCls;
  var _React$useContext = _react["default"].useContext(_configProvider.ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('imgcrop', customPrefixCls);
  var _useState = (0, _react.useState)({
      x: 0,
      y: 0
    }),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    crop = _useState2[0],
    onCropChange = _useState2[1];
  var _useState3 = (0, _react.useState)({
      width: 0,
      height: 0
    }),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    cropSize = _useState4[0],
    setCropSize = _useState4[1];
  var _useState5 = (0, _react.useState)(_constants.INIT_ZOOM),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    zoomVal = _useState6[0],
    setZoomVal = _useState6[1];
  var _useState7 = (0, _react.useState)(_constants.INIT_ROTATE),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    rotateVal = _useState8[0],
    setRotateVal = _useState8[1];
  var cropPixelsRef = (0, _react.useRef)({
    width: 0,
    height: 0,
    x: 0,
    y: 0
  });
  var onMediaLoaded = (0, _react.useCallback)(function (mediaSize) {
    var width = mediaSize.width,
      height = mediaSize.height;
    var ratioWidth = height * aspect;
    if (width > ratioWidth) {
      setCropSize({
        width: ratioWidth,
        height: height
      });
    } else {
      setCropSize({
        width: width,
        height: width / aspect
      });
    }
  }, [aspect]);
  var onCropComplete = (0, _react.useCallback)(function (_, croppedAreaPixels) {
    cropPixelsRef.current = croppedAreaPixels;
  }, []);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      rotateVal: rotateVal,
      setZoomVal: setZoomVal,
      setRotateVal: setRotateVal,
      cropPixelsRef: cropPixelsRef
    };
  });
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactEasyCrop["default"], (0, _extends2["default"])({}, cropperProps, {
    ref: cropperRef,
    image: image,
    crop: crop,
    cropSize: cropSize,
    onCropChange: onCropChange,
    aspect: aspect,
    cropShape: shape,
    showGrid: grid,
    zoomWithScroll: zoom,
    zoom: zoomVal,
    rotation: rotateVal,
    onZoomChange: setZoomVal,
    onRotationChange: setRotateVal,
    minZoom: minZoom,
    maxZoom: maxZoom,
    onMediaLoaded: onMediaLoaded,
    onCropComplete: onCropComplete,
    classes: {
      containerClassName: "".concat(prefixCls, "-container"),
      mediaClassName: "".concat(prefixCls, "-media")
    }
  })), zoom && /*#__PURE__*/_react["default"].createElement("section", {
    className: "".concat(prefixCls, "-control ").concat(prefixCls, "-control-zoom")
  }, /*#__PURE__*/_react["default"].createElement("button", {
    onClick: function onClick() {
      return setZoomVal(zoomVal - _constants.ZOOM_STEP);
    },
    disabled: zoomVal - _constants.ZOOM_STEP < minZoom
  }, "\uFF0D"), /*#__PURE__*/_react["default"].createElement(_slider["default"], {
    min: minZoom,
    max: maxZoom,
    step: _constants.ZOOM_STEP,
    value: zoomVal,
    onChange: setZoomVal
  }), /*#__PURE__*/_react["default"].createElement("button", {
    onClick: function onClick() {
      return setZoomVal(zoomVal + _constants.ZOOM_STEP);
    },
    disabled: zoomVal + _constants.ZOOM_STEP > maxZoom
  }, "\uFF0B")), rotate && /*#__PURE__*/_react["default"].createElement("section", {
    className: "".concat(prefixCls, "-control ").concat(prefixCls, "-control-rotate")
  }, /*#__PURE__*/_react["default"].createElement("button", {
    onClick: function onClick() {
      return setRotateVal(rotateVal - _constants.ROTATE_STEP);
    },
    disabled: rotateVal === _constants.MIN_ROTATE
  }, "\u21BA"), /*#__PURE__*/_react["default"].createElement(_slider["default"], {
    min: _constants.MIN_ROTATE,
    max: _constants.MAX_ROTATE,
    step: _constants.ROTATE_STEP,
    value: rotateVal,
    onChange: setRotateVal
  }), /*#__PURE__*/_react["default"].createElement("button", {
    onClick: function onClick() {
      return setRotateVal(rotateVal + _constants.ROTATE_STEP);
    },
    disabled: rotateVal === _constants.MAX_ROTATE
  }, "\u21BB")));
});
var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(EasyCrop);