'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Button = require('../Button');

var _Button2 = _interopRequireDefault(_Button);

var _Icon = require('../Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _TextIcon = require('../TextIcon');

var _TextIcon2 = _interopRequireDefault(_TextIcon);

var _tools = require('../_helpers/tools');

var _index = require('../SelectInput/index');

var _index2 = _interopRequireDefault(_index);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var u8arr = new Uint8Array(bstr.length);
  var n = bstr.length;

  while (n--) {
    // eslint-disable-line no-plusplus
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
}

var propTypes = {
  value: _propTypes2.default.shape({
    preview: _propTypes2.default.string.isRequired,
    meta: _propTypes2.default.object,
    type: _propTypes2.default.string.isRequired
  }).isRequired,
  sizes: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    width: _propTypes2.default.number,
    height: _propTypes2.default.number,
    label: _propTypes2.default.string
  })),
  initialSize: _propTypes2.default.string,
  onCancelCrop: _propTypes2.default.func.isRequired,
  onCrop: _propTypes2.default.func.isRequired,
  meta: _propTypes2.default.object
};

var defaultProps = {
  sizes: [{
    width: 400,
    height: 300,
    label: 'ratio 4/3 (400px / 300px)'
  }, {
    width: 400,
    height: 400,
    label: 'ratio 1/1 (400px / 400px)'
  }],
  initialSize: 'contain',
  meta: undefined
};

var Cropper = function (_React$Component) {
  _inherits(Cropper, _React$Component);

  function Cropper() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Cropper);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Cropper.__proto__ || Object.getPrototypeOf(Cropper)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      selectedSize: 0,
      dragging: false,
      image: {},
      mouse: {
        x: null,
        y: null
      },
      preview: null,
      zoom: 1,
      compression: 0.91,
      fill: '#ffffff'
    }, _this.listeners = [], _this.getRefCanvas = function (canvasNode) {
      _this.canvasNode = canvasNode;
    }, _this.getRefColorSelect = function (colorSelectNode) {
      _this.colorSelectNode = colorSelectNode;
    }, _this.handleCrop = function () {
      var _this$state = _this.state,
          zoom = _this$state.zoom,
          fill = _this$state.fill,
          compression = _this$state.compression,
          _this$state$image = _this$state.image,
          x = _this$state$image.x,
          y = _this$state$image.y;
      var _this$props = _this.props,
          onCrop = _this$props.onCrop,
          name = _this$props.value.name;

      var preview = _this.toDataURL(true);
      var newName = void 0;
      if (name.lastIndexOf('.') > 0) {
        newName = name.replace(/\.[^.$]+$/, '.jpg');
      } else {
        newName = name + '.jpg';
      }
      var data = dataURLtoFile(preview, newName);
      data.preview = preview;
      data.meta = {
        zoom: zoom, x: x, y: y, fill: fill, compression: compression
      };
      onCrop(data);
    }, _this.handleZoomUpdate = function (e) {
      _this.setState({ zoom: parseFloat(e.target.value, 10) });
    }, _this.handleChangeSize = function () {
      var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
      var selectedSize = _this.state.selectedSize;

      if (selectedSize !== size) {
        _this.resetSize(size);
        _this.setState({ selectedSize: size });
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Cropper, [{
    key: 'componentDidMount',
    // eslint-disable-line react/sort-comp

    value: function componentDidMount() {
      var _this2 = this;

      var canvas = this.canvasNode;
      var _props = this.props,
          value = _props.value,
          initialSize = _props.initialSize,
          meta = _props.meta;

      if (!canvas) {
        return;
      }
      var context = canvas.getContext('2d');
      context.scale(2, 2);
      this.prepareImage(value.preview, initialSize, meta || null);

      this.listeners = {
        mousemove: function mousemove(e) {
          return _this2.mouseMoveListener(e);
        },
        mouseup: function mouseup(e) {
          return _this2.mouseUpListener(e);
        },
        mousedown: function mousedown(e) {
          return _this2.mouseDownListener(e);
        }
      };

      window.addEventListener('mousemove', this.listeners.mousemove, false);
      window.addEventListener('mouseup', this.listeners.mouseup, false);
      canvas.addEventListener('mousedown', this.listeners.mousedown, false);
      document.onselectstart = function (e) {
        return _this2.preventSelection(e);
      };
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(_ref2) {
      var value = _ref2.value,
          initialSize = _ref2.initialSize,
          meta = _ref2.meta;

      if (value.preview !== this.props.value.preview) {
        this.prepareImage(value.preview, initialSize, meta || null);
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.resetSize();
    }

    // make sure we clean up listeners when unmounted.

  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.colorSelectNode.blur();
      var canvas = this.canvasNode;
      window.removeEventListener('mousemove', this.listeners.mousemove);
      window.removeEventListener('mouseup', this.listeners.mouseup);
      canvas.removeEventListener('mousedown', this.listeners.mousedown);
    }
  }, {
    key: 'resetSize',
    value: function resetSize(customSelectedSize) {
      var sizes = this.props.sizes;
      var _state = this.state,
          selectedSize = _state.selectedSize,
          zoom = _state.zoom;
      var _sizes = sizes[customSelectedSize || selectedSize],
          width = _sizes.width,
          height = _sizes.height;

      var context = this.canvasNode.getContext('2d');
      context.clearRect(0, 0, width, height);
      if (typeof customSelectedSize === 'number' && customSelectedSize !== selectedSize) {
        setTimeout(function () {
          return context.scale(2, 2);
        }, 0);
      }
      this.addImageToCanvas(context, this.state.image, zoom, customSelectedSize);
    }
  }, {
    key: 'fitImageToCanvas',
    value: function fitImageToCanvas() {
      var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cover';
      var image = this.state.image;

      var zoom = this._calculateZoomToFit(mode, image.width, image.height);

      var _calculateImageAligne = this._calculateImageAlignement('center', image.width * zoom, image.height * zoom),
          x = _calculateImageAligne.x,
          y = _calculateImageAligne.y;

      this.setState({
        image: _extends({}, image, { x: x, y: y }), zoom: zoom
      });
    }
  }, {
    key: 'prepareImage',
    value: function prepareImage(imageUri) {
      var _this3 = this;

      var initialSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'contain';
      var meta = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;

      var img = new Image();
      if (!(0, _tools.isDataURL)(imageUri)) img.crossOrigin = 'anonymous';
      img.onload = function () {
        var scaledImage = {
          height: img.height,
          width: img.width,
          resource: img
        };
        var zoom = void 0;
        var x = void 0;
        var y = void 0;
        if (meta !== null) {
          x = meta.x;
          y = meta.y;
          zoom = meta.zoom;
        } else {
          zoom = _this3._calculateZoomToFit(initialSize, img.width, img.height);
          var imageAlignement = _this3._calculateImageAlignement('center', img.width * zoom, img.height * zoom);
          x = imageAlignement.x;
          y = imageAlignement.y;
        }

        var _ref3 = meta !== null ? meta : _this3.state,
            fill = _ref3.fill,
            compression = _ref3.compression;

        scaledImage.x = x;
        scaledImage.y = y;
        _this3.setState({ dragging: false, image: scaledImage, preview: _this3.toDataURL(), zoom: zoom, fill: fill, compression: compression });
      };
      img.src = imageUri;
    }
  }, {
    key: 'mouseDownListener',
    value: function mouseDownListener() {
      this.setState({
        dragging: true,
        mouse: {
          x: null,
          y: null
        }
      });
    }
  }, {
    key: '_calculateZoomToFit',
    value: function _calculateZoomToFit() {
      var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cover';
      var originalWidth = arguments[1];
      var originalHeight = arguments[2];
      var sizes = this.props.sizes;
      var selectedSize = this.state.selectedSize;
      var _sizes$selectedSize = sizes[selectedSize],
          width = _sizes$selectedSize.width,
          height = _sizes$selectedSize.height;

      var canvasAspectRatio = height / width;
      var imageAspectRatio = originalHeight / originalWidth;
      var zoom = void 0;

      if (mode === 'cover') {
        zoom = canvasAspectRatio > imageAspectRatio ? height / originalHeight : width / originalWidth;
      } else {
        zoom = canvasAspectRatio > imageAspectRatio ? width / originalWidth : height / originalHeight;
      }
      return zoom;
    }
  }, {
    key: '_calculateImageAlignement',
    value: function _calculateImageAlignement() {
      var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'center';
      var scaledWidth = arguments[1];
      var scaledHeight = arguments[2];
      var sizes = this.props.sizes;
      var _state2 = this.state,
          _state2$image = _state2.image,
          imageX = _state2$image.x,
          imageY = _state2$image.y,
          selectedSize = _state2.selectedSize;
      var _sizes$selectedSize2 = sizes[selectedSize],
          width = _sizes$selectedSize2.width,
          height = _sizes$selectedSize2.height;

      var x = void 0;
      var y = void 0;

      switch (mode) {
        case 'top-left':
          x = 0;
          y = 0;
          break;
        case 'top':
          x = (width - scaledWidth) / 2;
          y = 0;
          break;
        case 'top-right':
          x = width - scaledWidth;
          y = 0;
          break;
        case 'left':
          x = 0;
          y = (height - scaledHeight) / 2;
          break;
        case 'center':
          x = (width - scaledWidth) / 2;
          y = (height - scaledHeight) / 2;
          break;
        case 'right':
          x = width - scaledWidth;
          y = (height - scaledHeight) / 2;
          break;
        case 'bottom-left':
          x = 0;
          y = height - scaledHeight;
          break;
        case 'bottom':
          x = (width - scaledWidth) / 2;
          y = height - scaledHeight;
          break;
        case 'bottom-right':
          x = width - scaledWidth;
          y = height - scaledHeight;
          break;
        default:
          x = imageX;
          y = imageY;
      }

      return { x: x, y: y };
    }
  }, {
    key: 'alignImage',
    value: function alignImage() {
      var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cover';
      var _state3 = this.state,
          image = _state3.image,
          _state3$image = _state3.image,
          width = _state3$image.width,
          height = _state3$image.height,
          zoom = _state3.zoom;

      var _calculateImageAligne2 = this._calculateImageAlignement(mode, width * zoom, height * zoom),
          x = _calculateImageAligne2.x,
          y = _calculateImageAligne2.y;

      this.setState({ image: _extends({}, image, { x: x, y: y }) });
    }
  }, {
    key: 'preventSelection',
    value: function preventSelection(e) {
      if (this.state.dragging) {
        e.preventDefault();
      }
    }
  }, {
    key: 'mouseUpListener',
    value: function mouseUpListener() {
      this.setState({ dragging: false });
    }
  }, {
    key: 'mouseMoveListener',
    value: function mouseMoveListener(e) {
      if (!this.state.dragging) return;

      var mouseX = e.clientX;
      var mouseY = e.clientY;
      var imageX = this.state.image.x;
      var imageY = this.state.image.y;

      var newImage = this.state.image;
      if (this.state.mouse.x && this.state.mouse.y) {
        var dx = this.state.mouse.x - mouseX;
        var dy = this.state.mouse.y - mouseY;

        newImage.x = imageX - dx;
        newImage.y = imageY - dy;
      }

      this.setState({
        image: this.state.image,
        mouse: {
          x: mouseX,
          y: mouseY
        }
      });
    }
  }, {
    key: 'addImageToCanvas',
    value: function addImageToCanvas(context, image, zoom, customSelectedSize) {
      if (!image.resource) return;
      var sizes = this.props.sizes;
      var _state4 = this.state,
          defaultZoom = _state4.zoom,
          selectedSize = _state4.selectedSize;
      var _sizes2 = sizes[customSelectedSize || selectedSize],
          width = _sizes2.width,
          height = _sizes2.height;


      var resultZoom = zoom || defaultZoom;
      context.save();
      context.fillStyle = this.state.fill; // eslint-disable-line no-param-reassign
      context.fillRect(0, 0, width * 2, height * 2);
      context.globalCompositeOperation = 'source-over'; // eslint-disable-line no-param-reassign
      context.drawImage(image.resource, image.x, image.y, image.width * resultZoom, image.height * resultZoom);
      context.restore();
    }
  }, {
    key: 'toDataURL',
    value: function toDataURL() {
      var exporting = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var sizes = this.props.sizes;
      var selectedSize = this.state.selectedSize;
      var _sizes$selectedSize3 = sizes[selectedSize],
          width = _sizes$selectedSize3.width,
          height = _sizes$selectedSize3.height;
      var _state$image = this.state.image,
          x = _state$image.x,
          y = _state$image.y;

      var zoom = this.state.zoom;
      var _state$image2 = this.state.image,
          imageHeight = _state$image2.height,
          imageWidth = _state$image2.width,
          resource = _state$image2.resource;


      if (exporting) {
        canvas.width = width;
        canvas.height = height;
        if (this.state.zoom <= 0.8) {
          canvas.width = width * 2;
          canvas.height = height * 2;
          x *= 2;
          y *= 2;
          zoom *= 2;
        }
      } else {
        context.scale(2, 2);
        canvas.width = width * 2;
        canvas.height = height * 2;
      }

      this.addImageToCanvas(context, {
        x: x, y: y, height: imageHeight, width: imageWidth, resource: resource
      }, zoom);

      var dataUrl = void 0;
      if (exporting) {
        dataUrl = canvas.toDataURL('image/jpeg', this.state.compression);
      } else {
        dataUrl = canvas.toDataURL();
      }

      return dataUrl;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var _state5 = this.state,
          zoom = _state5.zoom,
          fill = _state5.fill,
          selectedSize = _state5.selectedSize;
      var _props2 = this.props,
          sizes = _props2.sizes,
          onCancelCrop = _props2.onCancelCrop;
      var _sizes$selectedSize4 = sizes[selectedSize],
          width = _sizes$selectedSize4.width,
          height = _sizes$selectedSize4.height;


      var displayWidth = Math.min(width, 908);
      var displayHeight = width === displayWidth ? height : Math.round(height / width * displayWidth);

      var qualityTitle = _react2.default.createElement(
        'strong',
        null,
        'Image quality :'
      );
      var zoomNode = void 0;
      switch (true) {
        case zoom <= 0.5:
          zoomNode = _react2.default.createElement(
            'span',
            { className: 'flive_cropper_helper flive_cropper_high' },
            qualityTitle,
            ' Great, even on retina screens'
          );
          break;
        case zoom <= 1:
          zoomNode = _react2.default.createElement(
            'span',
            { className: 'flive_cropper_helper flive_cropper_medium' },
            qualityTitle,
            ' Ok, but not sharp on retina'
          );
          break;
        default:
          zoomNode = _react2.default.createElement(
            'span',
            { className: 'flive_cropper_helper flive_cropper_low' },
            qualityTitle,
            ' Ugly on any display'
          );
      }
      var qualityAlert = _react2.default.createElement(
        'div',
        { className: 'flive_cropper_helpers flive_cropper_size' },
        _react2.default.createElement(
          _Button2.default,
          {
            className: 'flive_cropper_helper-button',
            onClick: function onClick() {
              return _this4.setState({ zoom: 0.5 });
            },
            variant: 'icon',
            size: 'sm',
            type: 'button'
          },
          _react2.default.createElement(
            _TextIcon2.default,
            { name: 'resize-small', size: 'xs' },
            ' Set 50%'
          )
        ),
        _react2.default.createElement(
          _Button2.default,
          {
            className: 'flive_cropper_helper-button',
            onClick: function onClick() {
              return _this4.setState({ zoom: 1 });
            },
            variant: 'icon',
            size: 'sm',
            type: 'button'
          },
          _react2.default.createElement(
            _TextIcon2.default,
            { name: 'resize-full', size: 'xs' },
            'Set 100%'
          )
        ),
        _react2.default.createElement(
          _Button2.default,
          {
            className: 'flive_cropper_helper-button',
            onClick: function onClick() {
              return _this4.fitImageToCanvas('cover');
            },
            variant: 'icon',
            size: 'sm',
            type: 'button'
          },
          _react2.default.createElement(
            _TextIcon2.default,
            { name: 'resize-cover', size: 'xs' },
            'Cover'
          )
        ),
        _react2.default.createElement(
          _Button2.default,
          {
            className: 'flive_cropper_helper-button',
            onClick: function onClick() {
              return _this4.fitImageToCanvas('contain');
            },
            variant: 'icon',
            size: 'sm',
            type: 'button'
          },
          _react2.default.createElement(
            _TextIcon2.default,
            { name: 'resize-contain', size: 'xs' },
            'Contain'
          )
        ),
        zoomNode
      );

      return _react2.default.createElement(
        'div',
        { className: 'flive_cropper_base' },
        _react2.default.createElement(
          'div',
          { className: 'flive_cropper_content-canvas', style: { width: displayWidth } },
          _react2.default.createElement('canvas', {
            ref: this.getRefCanvas,
            width: width * 2,
            height: height * 2,
            style: { width: displayWidth, height: displayHeight }
          }),
          _react2.default.createElement(
            'div',
            { className: 'flive_cropper_helpers' },
            _react2.default.createElement(
              'div',
              { className: 'flive_cropper_helper' },
              'Display dimensions: ',
              width,
              'x',
              height
            ),
            _react2.default.createElement(
              'div',
              { className: 'flive_cropper_helper' },
              'Recommended minimum original size for great HDPI/Retina rendering : ',
              width * 2,
              'x',
              height * 2
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'flive_cropper_form' },
          _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
              'div',
              { className: 'flive_cropper_setting' },
              _react2.default.createElement(
                'div',
                { className: 'flive_cropper_select-size' },
                _react2.default.createElement(
                  'strong',
                  { className: 'flive_cropper_name' },
                  'Image Size :'
                ),
                _react2.default.createElement(_index2.default, {
                  value: selectedSize,
                  options: sizes.map(function (_ref4, row) {
                    var label = _ref4.label;
                    return { value: row, label: label };
                  }),
                  onChange: this.handleChangeSize
                })
              ),
              _react2.default.createElement(
                'strong',
                { className: 'flive_cropper_name' },
                'Zoom level :'
              ),
              _react2.default.createElement(
                'div',
                null,
                _react2.default.createElement(
                  'div',
                  { className: 'flive_cropper_slider-zoom' },
                  _react2.default.createElement(
                    'span',
                    { className: 'flive_cropper_value' },
                    Math.round(zoom * 100),
                    ' %'
                  ),
                  _react2.default.createElement('input', {
                    type: 'range',
                    name: 'zoom',
                    onChange: this.handleZoomUpdate,
                    min: '0.01',
                    max: '2',
                    step: '0.0001',
                    defaultValue: zoom,
                    value: zoom
                  })
                ),
                qualityAlert
              )
            ),
            _react2.default.createElement(
              'div',
              { className: 'flive_cropper_setting' },
              _react2.default.createElement(
                'strong',
                { className: 'flive_cropper_name' },
                'Alignment'
              ),
              _react2.default.createElement(
                'div',
                { className: 'flive_cropper_alignment-selector' },
                _react2.default.createElement(
                  'button',
                  { onClick: function onClick() {
                      return _this4.alignImage('top-left');
                    }, type: 'button' },
                  _react2.default.createElement(_Icon2.default, { name: 'up', size: 'xs', className: 'flive_cropper_arrow flive_cropper_up-left' })
                ),
                _react2.default.createElement(
                  'button',
                  { onClick: function onClick() {
                      return _this4.alignImage('top');
                    }, type: 'button' },
                  _react2.default.createElement(_Icon2.default, { name: 'up', size: 'xs', className: 'flive_cropper_arrow' })
                ),
                _react2.default.createElement(
                  'button',
                  { onClick: function onClick() {
                      return _this4.alignImage('top-right');
                    }, type: 'button' },
                  _react2.default.createElement(_Icon2.default, { name: 'up', size: 'xs', className: 'flive_cropper_arrow flive_cropper_up-right' })
                ),
                _react2.default.createElement(
                  'button',
                  { onClick: function onClick() {
                      return _this4.alignImage('left');
                    }, type: 'button' },
                  _react2.default.createElement(_Icon2.default, { name: 'left', size: 'xs', className: 'flive_cropper_arrow' })
                ),
                _react2.default.createElement('button', { onClick: function onClick() {
                    return _this4.alignImage('center');
                  }, type: 'button' }),
                _react2.default.createElement(
                  'button',
                  { onClick: function onClick() {
                      return _this4.alignImage('right');
                    }, type: 'button' },
                  _react2.default.createElement(_Icon2.default, { name: 'right', size: 'xs', className: 'flive_cropper_arrow' })
                ),
                _react2.default.createElement(
                  'button',
                  { onClick: function onClick() {
                      return _this4.alignImage('bottom-left');
                    }, type: 'button' },
                  _react2.default.createElement(_Icon2.default, { name: 'down', size: 'xs', className: 'flive_cropper_arrow flive_cropper_down-left' })
                ),
                _react2.default.createElement(
                  'button',
                  { onClick: function onClick() {
                      return _this4.alignImage('bottom');
                    }, type: 'button' },
                  _react2.default.createElement(_Icon2.default, { name: 'down', size: 'xs', className: 'flive_cropper_arrow' })
                ),
                _react2.default.createElement(
                  'button',
                  { onClick: function onClick() {
                      return _this4.alignImage('bottom-right');
                    }, type: 'button' },
                  _react2.default.createElement(_Icon2.default, { name: 'down', size: 'xs', className: 'flive_cropper_arrow flive_cropper_down-right' })
                )
              )
            ),
            _react2.default.createElement(
              'div',
              { className: 'flive_cropper_setting' },
              _react2.default.createElement(
                'strong',
                { className: 'flive_cropper_name' },
                'Background color'
              ),
              _react2.default.createElement(
                'div',
                null,
                _react2.default.createElement('input', {
                  ref: this.getRefColorSelect,
                  type: 'color',
                  value: fill,
                  className: 'flive_cropper_backgroundPicker',
                  onChange: function onChange(e) {
                    return _this4.setState({ fill: e.target.value });
                  }
                })
              )
            )
          ),
          _react2.default.createElement(
            _Button2.default,
            {
              onClick: onCancelCrop,
              variant: 'cancel',
              type: 'button'
            },
            'Cancel'
          ),
          _react2.default.createElement(
            _Button2.default,
            {
              onClick: this.handleCrop,
              type: 'button'
            },
            'Crop'
          )
        )
      );
    }
  }]);

  return Cropper;
}(_react2.default.Component);

Cropper.propTypes = propTypes;
Cropper.defaultProps = defaultProps;

exports.default = Cropper;
module.exports = exports['default'];