instantjob-recruiter-client/dist/components/file_field.es6.js

a set of tools for creating an instantjob recruiter react client

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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 _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

var _md = require('react-icons/lib/md');

var _field = require('./field');

var _field2 = _interopRequireDefault(_field);

var _time_ago = require('components/utils/time_ago');

var _time_ago2 = _interopRequireDefault(_time_ago);

var _progress_indicator = require('./progress_indicator');

var _progress_indicator2 = _interopRequireDefault(_progress_indicator);

var _auto_bind = require('common/auto_bind');

var _auto_bind2 = _interopRequireDefault(_auto_bind);

var _fields = require('common/fields');

var _utilities = require('common/utilities');

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

var cx = _bind2.default.bind(require('../styles/field.scss'));

// copy pasted from react-dropzone/src/getDataTransferItems
function get_file(event) {
  var dataTransferItemsList = [];
  if (event.dataTransfer) {
    var dt = event.dataTransfer;
    if (dt.files && dt.files.length) {
      dataTransferItemsList = dt.files;
    } else if (dt.items && dt.items.length) {
      // During the drag, even the dataTransfer.files is null
      // but Chrome implements some drag store, which is accesible via dataTransfer.items
      dataTransferItemsList = dt.items;
    }
  } else if (event.target && event.target.files) {
    dataTransferItemsList = event.target.files;
  }

  return dataTransferItemsList[0];
}

var FileField = function (_Component) {
  (0, _inherits3.default)(FileField, _Component);

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

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

    _this.state = {
      uploading: false
    };
    (0, _auto_bind2.default)(_this);
    return _this;
  }

  (0, _createClass3.default)(FileField, [{
    key: 'view',
    value: function view() {
      var _props$file = this.props.file,
          url = _props$file.url,
          name = _props$file.name;

      (0, _utilities.download_file)(url, name);
    }
  }, {
    key: 'open',
    value: function open(e) {
      this.input.click();
    }
  }, {
    key: 'upload',
    value: function upload(e) {
      var _this2 = this;

      e.preventDefault();
      this.props.upload_file(get_file(e, false)).on('progress', function (_ref) {
        var uploading = _ref.percent;

        _this2.setState({ uploading: uploading });
      }).then(function () {
        return _this2.setState({ uploading: false });
      }).then(function () {
        return _this2.input.value = "";
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props = this.props,
          _props$file2 = _props.file,
          updated_at = _props$file2.updated_at,
          url = _props$file2.url,
          props = (0, _objectWithoutProperties3.default)(_props, ['file']);
      var uploading = this.state.uploading;

      var display = void 0,
          className = void 0,
          onClick = void 0;
      if (uploading) {
        className = 'field__display_uploading';
        display = [_react2.default.createElement(_progress_indicator2.default, { small: true, key: 'uploading', completed: uploading, total: 100, text: '##%' })];
      } else if (url) {
        display = [_react2.default.createElement(
          'div',
          { key: 'file', className: cx('field__display-file') },
          _react2.default.createElement(
            'div',
            { onClick: this.view, className: cx('field__display-file-preview') },
            _react2.default.createElement(_md.MdInsertDriveFile, null)
          ),
          _react2.default.createElement(
            'div',
            { className: cx('field__display-file-edit'), onClick: this.open },
            _react2.default.createElement(_md.MdEdit, null)
          )
        ), _react2.default.createElement(
          'div',
          { key: 'updated_at', className: cx('field__display-updated-at') },
          'Mis \xE0 jour ',
          _react2.default.createElement(
            _time_ago2.default,
            null,
            updated_at
          )
        )];
      } else {
        className = 'field__display_upload';
        onClick = this.open;
        display = [_react2.default.createElement(_md.MdFileUpload, { key: 'upload' })];
      }
      return _react2.default.createElement(
        _field2.default,
        (0, _extends3.default)({}, props, { category: 'file' }),
        _react2.default.createElement('input', {
          ref: function ref(input) {
            return _this3.input = input;
          },
          type: 'file',
          className: cx('field__input'),
          onChange: this.upload,
          accept: ["jpg", "jpeg", "gif", "png", "tif", "tiff", "txt", "doc", "pps", "pdf", "mp3", "wav", "avi", "mpg", "mpeg", "wmv", "iso", "flv", "mov", "dvr-ms", "vob", "zip", "rar", "r00", "r01"].map(function (extension) {
            return '.' + extension;
          }).join(","),
          multiple: false
        }),
        _react2.default.createElement(
          'div',
          { className: cx('field__display', className), onClick: onClick },
          display
        )
      );
    }
  }]);
  return FileField;
}(_react.Component);

FileField.defaultProps = {
  file: { url: "", updated_at: "" },
  show_label: true,
  editable: true
};

exports.default = FileField;