wix-style-react/dist/src/FilePicker/FilePicker.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Add = _interopRequireDefault(require("wix-ui-icons-common/Add"));

var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));

var _FilePickerSt = require("./FilePicker.st.css");

var _FormField = _interopRequireDefault(require("../FormField"));

var _TextButton = _interopRequireDefault(require("../TextButton"));

var _Text = _interopRequireDefault(require("../Text"));

var _FileUpload = _interopRequireDefault(require("../FileUpload"));

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

/**
 * # `<FilePicker/>`
 *
 * Component that opens system browser dialog for choosing files to upload
 */
var FilePicker = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inherits2["default"])(FilePicker, _React$PureComponent);

  var _super = _createSuper(FilePicker);

  function FilePicker(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, FilePicker);
    _this = _super.call(this, props);
    _this.state = {
      selectedFileName: props.subLabel
    };
    _this.id = props.id || (0, _uniqueId["default"])('file_picker_input_');
    return _this;
  }
  /** A callback which is invoked every time a file is chosen */


  (0, _createClass2["default"])(FilePicker, [{
    key: "onChooseFile",
    value: function onChooseFile(file) {
      var _this$props = this.props,
          maxSize = _this$props.maxSize,
          onChange = _this$props.onChange;

      if (file) {
        onChange(file);

        if (file.size <= maxSize) {
          this.setState({
            selectedFileName: file.name
          });
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          header = _this$props2.header,
          mainLabel = _this$props2.mainLabel,
          supportedFormats = _this$props2.supportedFormats,
          error = _this$props2.error,
          errorMessage = _this$props2.errorMessage,
          name = _this$props2.name,
          dataHook = _this$props2.dataHook;
      return /*#__PURE__*/_react["default"].createElement(_FileUpload["default"], {
        accept: supportedFormats,
        onChange: function onChange(files) {
          return _this2.onChooseFile(files[0]);
        },
        name: name
      }, function (_ref) {
        var openFileUploadDialog = _ref.openFileUploadDialog;
        return /*#__PURE__*/_react["default"].createElement(_FormField["default"], {
          label: header,
          dataHook: dataHook
        }, /*#__PURE__*/_react["default"].createElement("label", {
          className: _FilePickerSt.classes.label,
          onClick: openFileUploadDialog
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: _FilePickerSt.classes.icon
        }, /*#__PURE__*/_react["default"].createElement(_Add["default"], null)), /*#__PURE__*/_react["default"].createElement("div", {
          className: _FilePickerSt.classes.content
        }, /*#__PURE__*/_react["default"].createElement(_TextButton["default"], {
          dataHook: "main-label"
        }, mainLabel), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
          className: _FilePickerSt.classes.info,
          size: "small",
          secondary: true,
          dataHook: "sub-label"
        }, _this2.state.selectedFileName), error && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
          skin: "error",
          size: "small",
          dataHook: "filePicker-error"
        }, errorMessage))));
      });
    }
  }]);
  return FilePicker;
}(_react["default"].PureComponent);

FilePicker.displayName = 'FilePicker';
FilePicker.defaultProps = {
  mainLabel: 'Choose File',
  subLabel: 'No file chosen (Max size 5 MB)',
  onChange: function onChange() {},
  supportedFormats: '*',
  errorMessage: '',
  maxSize: 5000000 // 5MB

};
FilePicker.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in tests. */
  dataHook: _propTypes["default"].string,

  /** Defines if an error should show or not. */
  error: _propTypes["default"].bool,

  /** Sets an error message to display. */
  errorMessage: _propTypes["default"].string,

  /** Allows to insert overline text at the top left of a component. Can also be overridden with any other component, i.e. <Image/>. */
  header: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),

  /** Specifies a unique id for the element. */
  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),

  /** Sets the main action label. */
  mainLabel: _propTypes["default"].string,

  /** Defines the maximum size of a file that can be uploaded. */
  maxSize: _propTypes["default"].number,

  /** Defines a name for inner input. */
  name: _propTypes["default"].string,

  /** Defines a standard input onChange callback. */
  onChange: _propTypes["default"].func,

  /** Adds a supportive message below the action title. */
  subLabel: _propTypes["default"].string,

  /** Defines which file types to accept (i.e. .jpeg, .gif, .png). Formats should be separated by a comma. */
  supportedFormats: _propTypes["default"].string
};
var _default = FilePicker;
exports["default"] = _default;