acud/es/img-crop/EasyCrop.js

acg react 组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { forwardRef, memo, useCallback, useImperativeHandle, useRef, useState } from 'react';
import Cropper from 'react-easy-crop';
import Slider from '../slider';
import { ConfigContext } from '../config-provider';
import { INIT_ROTATE, INIT_ZOOM, MAX_ROTATE, MIN_ROTATE, ROTATE_STEP, ZOOM_STEP } from './constants';
var EasyCrop = /*#__PURE__*/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.useContext(ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('imgcrop', customPrefixCls);
  var _useState = useState({
      x: 0,
      y: 0
    }),
    _useState2 = _slicedToArray(_useState, 2),
    crop = _useState2[0],
    onCropChange = _useState2[1];
  var _useState3 = useState({
      width: 0,
      height: 0
    }),
    _useState4 = _slicedToArray(_useState3, 2),
    cropSize = _useState4[0],
    setCropSize = _useState4[1];
  var _useState5 = useState(INIT_ZOOM),
    _useState6 = _slicedToArray(_useState5, 2),
    zoomVal = _useState6[0],
    setZoomVal = _useState6[1];
  var _useState7 = useState(INIT_ROTATE),
    _useState8 = _slicedToArray(_useState7, 2),
    rotateVal = _useState8[0],
    setRotateVal = _useState8[1];
  var cropPixelsRef = useRef({
    width: 0,
    height: 0,
    x: 0,
    y: 0
  });
  var onMediaLoaded = 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 = useCallback(function (_, croppedAreaPixels) {
    cropPixelsRef.current = croppedAreaPixels;
  }, []);
  useImperativeHandle(ref, function () {
    return {
      rotateVal: rotateVal,
      setZoomVal: setZoomVal,
      setRotateVal: setRotateVal,
      cropPixelsRef: cropPixelsRef
    };
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cropper, _extends({}, 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.createElement("section", {
    className: "".concat(prefixCls, "-control ").concat(prefixCls, "-control-zoom")
  }, /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return setZoomVal(zoomVal - ZOOM_STEP);
    },
    disabled: zoomVal - ZOOM_STEP < minZoom
  }, "\uFF0D"), /*#__PURE__*/React.createElement(Slider, {
    min: minZoom,
    max: maxZoom,
    step: ZOOM_STEP,
    value: zoomVal,
    onChange: setZoomVal
  }), /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return setZoomVal(zoomVal + ZOOM_STEP);
    },
    disabled: zoomVal + ZOOM_STEP > maxZoom
  }, "\uFF0B")), rotate && /*#__PURE__*/React.createElement("section", {
    className: "".concat(prefixCls, "-control ").concat(prefixCls, "-control-rotate")
  }, /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return setRotateVal(rotateVal - ROTATE_STEP);
    },
    disabled: rotateVal === MIN_ROTATE
  }, "\u21BA"), /*#__PURE__*/React.createElement(Slider, {
    min: MIN_ROTATE,
    max: MAX_ROTATE,
    step: ROTATE_STEP,
    value: rotateVal,
    onChange: setRotateVal
  }), /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return setRotateVal(rotateVal + ROTATE_STEP);
    },
    disabled: rotateVal === MAX_ROTATE
  }, "\u21BB")));
});
export default /*#__PURE__*/memo(EasyCrop);