rc-cropping/lib/CropViewer.js

'use strict';

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

var _react = require('react');

var React = _interopRequireWildcard(_react);

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

var _Icon2 = _interopRequireDefault(_Icon);

var _Uploader = require('./Uploader');

var _Uploader2 = _interopRequireDefault(_Uploader);

var _Cropper = require('./Cropper');

var _Cropper2 = _interopRequireDefault(_Cropper);

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj["default"] = obj; return newObj; } }

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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) : _defaults(subClass, superClass); }

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

    function CropViewer(props) {
        _classCallCheck(this, CropViewer);

        var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

        _this.loadSelectedImage = function (blobOrString) {
            if (typeof blobOrString === 'string') {
                var image = new Image();
                image.onload = function () {
                    _this.setState({
                        selectedImage: blobOrString
                    });
                };
                image.src = blobOrString;
            } else {
                _this.readBlob(blobOrString);
            }
        };
        _this.readBlob = function (blob) {
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onload = function () {
                _this.setState({
                    selectedImage: reader.result
                });
            };
        };
        _this.reset = function () {
            _this.onChange(null);
        };
        _this.selectImage = function (file) {
            _this.setState({
                previewImage: file
            });
        };
        _this.onChange = function (fileblob) {
            if (_this.props.onChange) {
                var file = fileblob ? new File([fileblob], _this.state.previewImage.name, { type: _this.state.previewImage.type }) : null;
                _this.props.onChange(file);
            }
            if (!_this.props.value) {
                if (fileblob) {
                    _this.loadSelectedImage(fileblob);
                } else {
                    _this.setState({
                        previewImage: null,
                        selectedImage: null
                    });
                }
            }
        };
        _this.state = {
            previewImage: null,
            selectedImage: null
        };
        if (props.value) {
            _this.loadSelectedImage(props.value);
        }
        return _this;
    }

    CropViewer.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
        if (nextProps.value) {
            this.loadSelectedImage(nextProps.value);
        } else {
            this.setState({
                previewImage: null,
                selectedImage: null
            });
        }
    };

    CropViewer.prototype.render = function render() {
        var _state = this.state,
            previewImage = _state.previewImage,
            selectedImage = _state.selectedImage;
        var _props = this.props,
            prefixCls = _props.prefixCls,
            size = _props.size,
            circle = _props.circle,
            getSpinContent = _props.getSpinContent,
            renderModal = _props.renderModal,
            locale = _props.locale,
            accept = _props.accept;

        if (selectedImage) {
            return React.createElement("div", { className: prefixCls + '-preview-wrapper' }, React.createElement("div", { className: prefixCls + '-preview' }, React.createElement("div", { className: prefixCls + '-preview-mask', onClick: this.reset }, React.createElement(_Icon2["default"], { type: "delete" })), React.createElement("img", { src: selectedImage, width: size[0], height: size[1] })));
        }
        if (previewImage) {
            return React.createElement(_Cropper2["default"], { circle: circle, size: size, prefixCls: prefixCls, file: previewImage, onChange: this.onChange, renderModal: renderModal, spin: getSpinContent(), locale: locale });
        }
        return React.createElement(_Uploader2["default"], { prefixCls: prefixCls, onSelectImage: this.selectImage, accept: accept }, this.props.children);
    };

    return CropViewer;
}(React.Component);

exports["default"] = CropViewer;

CropViewer.Cropper = _Cropper2["default"];
CropViewer.defaultProps = {
    prefixCls: 'rc',
    size: [32, 32],
    circle: false,
    locale: 'en-US',
    accept: null
};
;
module.exports = exports['default'];