@lyra/form-builder/lib/inputs/ImageToolInput/ImageToolInput.js

Lyra form builder

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _PatchEvent = require('../../PatchEvent');

var _PatchEvent2 = _interopRequireDefault(_PatchEvent);

var _default = require('part:@lyra/components/fieldsets/default');

var _default2 = _interopRequireDefault(_default);

var _imagetool = require('@lyra/imagetool');

var _imagetool2 = _interopRequireDefault(_imagetool);

var _HotspotImage = require('@lyra/imagetool/HotspotImage');

var _HotspotImage2 = _interopRequireDefault(_HotspotImage);

var _imageLoader = require('part:@lyra/components/utilities/image-loader');

var _imageLoader2 = _interopRequireDefault(_imageLoader);

var _constants = require('@lyra/imagetool/constants');

var _ImageToolInput = require('./styles/ImageToolInput.css');

var _ImageToolInput2 = _interopRequireDefault(_ImageToolInput);

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

/*:: type Hotspot = {
  x: number,
  y: number,
  height: number,
  width: number
}*/
/*:: type Crop = {
  left: number,
  right: number,
  top: number,
  bottom: number
}*/
/*:: type Value = {
  hotspot?: Hotspot,
  crop?: Crop
}*/
/*:: type Props = {
  imageUrl: string,
  value?: Value,
  onChange: PatchEvent => void,
  readOnly: ?boolean,
  level: number
}*/
/*:: type State = {
  value?: Value // cache value for moar fps
}*/


const PREVIEW_ASPECT_RATIOS = [['Portrait', 9 / 16], ['Square', 1], ['Landscape', 16 / 9], ['Panorama', 4]];

class ImageToolInput extends _react2.default.Component /*:: <Props, State>*/ {
  constructor(props) {
    super();

    this.handleChangeEnd = () => {
      var _props = this.props;
      const onChange = _props.onChange,
            readOnly = _props.readOnly;
      const value = this.state.value;

      if (!readOnly) {
        onChange(_PatchEvent2.default.from([(0, _PatchEvent.set)(value.crop, ['crop']), (0, _PatchEvent.set)(value.hotspot, ['hotspot'])]));
      }
      this.setState({ value: this.props.value });
    };

    this.handleChange = (nextValue /*: Value*/) => {
      this.setState({ value: nextValue });
    };

    this.state = {
      value: props.value
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ value: nextProps.value });
  }

  render() {
    var _props2 = this.props;
    const imageUrl = _props2.imageUrl,
          level = _props2.level,
          readOnly = _props2.readOnly;
    const value = this.state.value;


    return _react2.default.createElement(
      'div',
      { className: _ImageToolInput2.default.root },
      _react2.default.createElement(
        _default2.default,
        { legend: 'Hotspot and crop', level: level },
        _react2.default.createElement(
          'div',
          { className: _ImageToolInput2.default.wrapper },
          _react2.default.createElement(
            'div',
            { className: _ImageToolInput2.default.imageToolContainer },
            _react2.default.createElement(_imagetool2.default, {
              value: value,
              src: imageUrl,
              readOnly: readOnly,
              onChangeEnd: this.handleChangeEnd,
              onChange: this.handleChange
            })
          ),
          _react2.default.createElement(
            'div',
            { className: _ImageToolInput2.default.previewsContainer },
            _react2.default.createElement(
              'h2',
              null,
              'Preview'
            ),
            _react2.default.createElement(
              'div',
              { className: _ImageToolInput2.default.previews },
              PREVIEW_ASPECT_RATIOS.map(([title, ratio]) => {
                return _react2.default.createElement(
                  'div',
                  { key: ratio, className: _ImageToolInput2.default.preview },
                  _react2.default.createElement(
                    'h4',
                    null,
                    title
                  ),
                  _react2.default.createElement(
                    'div',
                    { className: _ImageToolInput2.default.previewImage },
                    _react2.default.createElement(
                      _imageLoader2.default,
                      { src: imageUrl },
                      ({ image, error }) => error ? _react2.default.createElement(
                        'span',
                        null,
                        'Unable to load image: ',
                        error.message
                      ) : _react2.default.createElement(_HotspotImage2.default, {
                        aspectRatio: ratio,
                        src: image.src,
                        srcAspectRatio: image.width / image.height,
                        hotspot: value.hotspot || _constants.DEFAULT_HOTSPOT,
                        crop: value.crop || _constants.DEFAULT_CROP
                      })
                    )
                  )
                );
              })
            )
          )
        )
      )
    );
  }
}
exports.default = ImageToolInput;