shengnian-editor/lib/ui/UploadIconButton.js

Shengnian React Rich Text Editor

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _IconButton = require('./IconButton');

var _IconButton2 = _interopRequireDefault(_IconButton);

var _inputUtils = require('../lib/inputUtils');

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

// import cx from 'classnames';
var UploadIconButton = function (_Component) {
  (0, _inherits3.default)(UploadIconButton, _Component);

  function UploadIconButton(props, context) {
    (0, _classCallCheck3.default)(this, UploadIconButton);

    var _this = (0, _possibleConstructorReturn3.default)(this, (UploadIconButton.__proto__ || (0, _getPrototypeOf2.default)(UploadIconButton)).call(this, props, context));

    _this.composeHandlers = _this.composeHandlers.bind(_this);
    _this.onClick = _this.onClick.bind(_this);
    _this.onChange = _this.onChange.bind(_this);
    _this.onFileDialogCancel = _this.onFileDialogCancel.bind(_this);
    _this.onInputElementClick = _this.onInputElementClick.bind(_this);

    _this.setRef = _this.setRef.bind(_this);
    _this.setRefs = _this.setRefs.bind(_this);

    _this.isFileDialogActive = false;

    _this.state = {
      draggedFiles: [],
      acceptedFiles: [],
      rejectedFiles: []
    };
    return _this;
  }

  (0, _createClass3.default)(UploadIconButton, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.fileInputEl.addEventListener('click', this.onInputElementClick, false);
      document.body.onfocus = this.onFileDialogCancel;
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.fileInputEl.removeEventListener('click', this.onInputElementClick, false);
      document.body.onfocus = null;
    }
  }, {
    key: 'composeHandlers',
    value: function composeHandlers(handler) {
      if (this.props.disabled) {
        return null;
      }

      return handler;
    }
  }, {
    key: 'onChange',
    value: function onChange(evt) {
      var _this2 = this;

      var _props = this.props,
          onChange = _props.onChange,
          onChangeAccepted = _props.onChangeAccepted,
          onChangeRejected = _props.onChangeRejected,
          multiple = _props.multiple,
          accept = _props.accept;

      var fileList = (0, _inputUtils.getDataTransferItems)(evt);
      var acceptedFiles = [];
      var rejectedFiles = [];

      // Stop default browser behavior
      evt.preventDefault();

      this.isFileDialogActive = false;

      fileList.forEach(function (file) {
        if ((0, _inputUtils.fileAccepted)(file, accept) && (0, _inputUtils.fileMatchSize)(file, _this2.props.maxSize, _this2.props.minSize)) {
          acceptedFiles.push(file);
        } else {
          rejectedFiles.push(file);
        }
      });

      if (!multiple) {
        // if not in multi mode add any extra accepted files to rejected.
        // This will allow end users to easily ignore a multi file drop in "single" mode.
        rejectedFiles.push.apply(rejectedFiles, (0, _toConsumableArray3.default)(acceptedFiles.splice(1)));
      }

      if (onChange) {
        onChange.call(this, acceptedFiles, rejectedFiles, evt);
      }

      if (rejectedFiles.length > 0 && onChangeRejected) {
        onChangeRejected.call(this, rejectedFiles, evt);
      }

      if (acceptedFiles.length > 0 && onChangeAccepted) {
        onChangeAccepted.call(this, acceptedFiles, evt);
      }

      // Clear files value
      // this.draggedFiles = null

      // Reset drag state
      this.setState({
        isActive: false,
        // draggedFiles: [],
        acceptedFiles: acceptedFiles,
        rejectedFiles: rejectedFiles
      });
    }
  }, {
    key: 'onClick',
    value: function onClick(evt) {
      var _props2 = this.props,
          onClick = _props2.onClick,
          disableClick = _props2.disableClick;

      if (!disableClick) {
        evt.stopPropagation();

        if (onClick) {
          onClick.call(this, evt);
        }

        // in IE11/Edge the file-browser dialog is blocking, ensure this is behind setTimeout
        // this is so react can handle state changes in the onClick prop above above
        // see: https://github.com/react-dropzone/react-dropzone/issues/450
        setTimeout(this.open.bind(this), 0);
      }
    }
  }, {
    key: 'onInputElementClick',
    value: function onInputElementClick(evt) {
      evt.stopPropagation();
      if (this.props.onClick) {
        this.props.onClick();
      }
    }
  }, {
    key: 'onFileDialogCancel',
    value: function onFileDialogCancel() {
      // timeout will not recognize context of this method
      var onFileDialogCancel = this.props.onFileDialogCancel;
      var fileInputEl = this.fileInputEl;
      var isFileDialogActive = this.isFileDialogActive;
      // execute the timeout only if the onFileDialogCancel is defined and FileDialog
      // is opened in the browser

      if (onFileDialogCancel && isFileDialogActive) {
        setTimeout(function () {
          // Returns an object as FileList
          var FileList = fileInputEl.files;
          if (!FileList.length) {
            isFileDialogActive = false;
            onFileDialogCancel();
          }
        }, 300);
      }
    }
  }, {
    key: 'setRef',
    value: function setRef(ref) {
      this.node = ref;
    }
  }, {
    key: 'setRefs',
    value: function setRefs(ref) {
      this.fileInputEl = ref;
    }
  }, {
    key: 'open',
    value: function open() {
      this.isFileDialogActive = true;
      this.fileInputEl.value = null;
      this.fileInputEl.click();
    }
  }, {
    key: 'render',
    value: function render() {
      var _props3 = this.props,
          accept = _props3.accept,
          disabled = _props3.disabled,
          inputProps = _props3.inputProps,
          multiple = _props3.multiple,
          name = _props3.name,
          icon = _props3.icon,
          label = _props3.label;

      // const { isActive, draggedFiles } = this.state
      // const filesCount = draggedFiles.length
      // const isMultipleAllowed = multiple || filesCount <= 1;
      // const isAccept = filesCount > 0 && allFilesAccepted(draggedFiles, this.props.accept)
      // const isReject = filesCount > 0 && (!isAccept || !isMultipleAllowed)

      var inputAttributes = {
        accept: accept,
        disabled: disabled,
        type: 'file',
        style: { display: 'none' },
        multiple: _inputUtils.supportMultiple && multiple,
        ref: this.setRefs,
        onChange: this.onChange,
        autoComplete: 'off'
      };

      if (name && name.length) {
        inputAttributes.name = name;
      }

      return _react2.default.createElement(
        _IconButton2.default,
        {
          label: label,
          iconName: icon,
          onClick: this.composeHandlers(this.onClick),
          onChange: this.composeHandlers(this.onChange),
          ref: this.setRef,
          'aria-disabled': disabled
        },
        _react2.default.createElement('input', (0, _extends3.default)({}, inputProps, inputAttributes))
      );
    }
  }]);
  return UploadIconButton;
}(_react.Component);

exports.default = UploadIconButton;


UploadIconButton.defaultProps = {
  icon: 'picture',
  disabled: false,
  disableClick: false,
  multiple: true,
  maxSize: Infinity,
  minSize: 0
};