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

wix-style-react

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }

import React from 'react';
import PropTypes from 'prop-types';
import Add from 'wix-ui-icons-common/Add';
import uniqueId from 'lodash/uniqueId';
import { classes } from './FilePicker.st.css';
import FormField from '../FormField';
import TextButton from '../TextButton';
import Text from '../Text';
import FileUpload from '../FileUpload';
/**
 * # `<FilePicker/>`
 *
 * Component that opens system browser dialog for choosing files to upload
 */

var FilePicker = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(FilePicker, _React$PureComponent);

  var _super = _createSuper(FilePicker);

  function FilePicker(props) {
    var _this;

    _classCallCheck(this, FilePicker);

    _this = _super.call(this, props);
    _this.state = {
      selectedFileName: props.subLabel
    };
    _this.id = props.id || uniqueId('file_picker_input_');
    return _this;
  }
  /** A callback which is invoked every time a file is chosen */


  _createClass(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.createElement(FileUpload, {
        accept: supportedFormats,
        onChange: function onChange(files) {
          return _this2.onChooseFile(files[0]);
        },
        name: name
      }, function (_ref) {
        var openFileUploadDialog = _ref.openFileUploadDialog;
        return /*#__PURE__*/React.createElement(FormField, {
          label: header,
          dataHook: dataHook
        }, /*#__PURE__*/React.createElement("label", {
          className: classes.label,
          onClick: openFileUploadDialog
        }, /*#__PURE__*/React.createElement("div", {
          className: classes.icon
        }, /*#__PURE__*/React.createElement(Add, null)), /*#__PURE__*/React.createElement("div", {
          className: classes.content
        }, /*#__PURE__*/React.createElement(TextButton, {
          dataHook: "main-label"
        }, mainLabel), /*#__PURE__*/React.createElement(Text, {
          className: classes.info,
          size: "small",
          secondary: true,
          dataHook: "sub-label"
        }, _this2.state.selectedFileName), error && /*#__PURE__*/React.createElement(Text, {
          skin: "error",
          size: "small",
          dataHook: "filePicker-error"
        }, errorMessage))));
      });
    }
  }]);

  return FilePicker;
}(React.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.string,

  /** Defines if an error should show or not. */
  error: PropTypes.bool,

  /** Sets an error message to display. */
  errorMessage: PropTypes.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.oneOfType([PropTypes.string, PropTypes.node]),

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

  /** Sets the main action label. */
  mainLabel: PropTypes.string,

  /** Defines the maximum size of a file that can be uploaded. */
  maxSize: PropTypes.number,

  /** Defines a name for inner input. */
  name: PropTypes.string,

  /** Defines a standard input onChange callback. */
  onChange: PropTypes.func,

  /** Adds a supportive message below the action title. */
  subLabel: PropTypes.string,

  /** Defines which file types to accept (i.e. .jpeg, .gif, .png). Formats should be separated by a comma. */
  supportedFormats: PropTypes.string
};
export default FilePicker;