@lyra/components/lib/fileinput/DefaultFileInput.js

Basic UX components

'use strict';

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

var _uniqueId2 = require('lodash/uniqueId');

var _uniqueId3 = _interopRequireDefault(_uniqueId2);

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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

class DefaultFileInput extends _react2.default.PureComponent {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this._inputId = (0, _uniqueId3.default)('FileSelect'), this.handleSelect = event => {
      this.props.onSelect(event.target.files);
    }, _temp;
  }

  componentDidMount() {
    if ('value' in this.props) {
      // eslint-disable-next-line
      console.error(new Error('Warning: A `value` prop was passed to FileSelect. This is most likely not intended as this' + ' component is only for letting users select file(s) from their hard drive'));
    }
  }

  render() {
    var _props = this.props;
    const children = _props.children;
    var _props$style = _props.style;

    const style = _props$style === undefined ? {} : _props$style,
          className = _props.className,
          onSelect = _props.onSelect,
          rest = _objectWithoutProperties(_props, ['children', 'style', 'className', 'onSelect']);

    return _react2.default.createElement(
      'label',
      { style: style, className: className, htmlFor: this._inputId },
      _react2.default.createElement('input', _extends({}, rest, {
        type: 'file',
        value: '',
        id: this._inputId,
        onChange: this.handleSelect,
        style: {
          overflow: 'hidden',
          width: '0.1px',
          height: '0.1px',
          opacity: 0,
          position: 'absolute',
          zIndex: -1
        }
      })),
      children
    );
  }
}
exports.default = DefaultFileInput;
DefaultFileInput.propTypes = {
  onSelect: _propTypes2.default.func.isRequired,
  children: _propTypes2.default.node,
  className: _propTypes2.default.string,
  style: _propTypes2.default.object
};