@gechiui/block-editor/build/components/image-editor/cropper.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ImageCropper;

var _element = require("@gechiui/element");

var _reactEasyCrop = _interopRequireDefault(require("react-easy-crop"));

var _classnames = _interopRequireDefault(require("classnames"));

var _components = require("@gechiui/components");

var _constants = require("./constants");

var _context = require("./context");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function ImageCropper(_ref) {
  let {
    url,
    width,
    height,
    clientWidth,
    naturalHeight,
    naturalWidth
  } = _ref;
  const {
    isInProgress,
    editedUrl,
    position,
    zoom,
    aspect,
    setPosition,
    setCrop,
    setZoom,
    rotation
  } = (0, _context.useImageEditingContext)();
  let editedHeight = height || clientWidth * naturalHeight / naturalWidth;

  if (rotation % 180 === 90) {
    editedHeight = clientWidth * naturalWidth / naturalHeight;
  }

  return (0, _element.createElement)("div", {
    className: (0, _classnames.default)('gc-block-image__crop-area', {
      'is-applying': isInProgress
    }),
    style: {
      width: width || clientWidth,
      height: editedHeight
    }
  }, (0, _element.createElement)(_reactEasyCrop.default, {
    image: editedUrl || url,
    disabled: isInProgress,
    minZoom: _constants.MIN_ZOOM / 100,
    maxZoom: _constants.MAX_ZOOM / 100,
    crop: position,
    zoom: zoom / 100,
    aspect: aspect,
    onCropChange: setPosition,
    onCropComplete: newCropPercent => {
      setCrop(newCropPercent);
    },
    onZoomChange: newZoom => {
      setZoom(newZoom * 100);
    }
  }), isInProgress && (0, _element.createElement)(_components.Spinner, null));
}
//# sourceMappingURL=cropper.js.map