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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
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"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/FilePicker/FilePicker.js";
/**
 * # `<FilePicker/>`
 *
 * Component that opens system browser dialog for choosing files to upload
 */
class FilePicker extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedFileName: props.subLabel
    };
    this.id = props.id || (0, _uniqueId.default)('file_picker_input_');
  }

  /** A callback which is invoked every time a file is chosen */
  onChooseFile(file) {
    var {
      maxSize,
      onChange
    } = this.props;
    if (file) {
      onChange(file);
      if (file.size <= maxSize) {
        this.setState({
          selectedFileName: file.name
        });
      }
    }
  }
  render() {
    var {
      header,
      mainLabel,
      supportedFormats,
      error,
      errorMessage,
      name,
      dataHook
    } = this.props;
    return /*#__PURE__*/_react.default.createElement(_FileUpload.default, {
      accept: supportedFormats,
      onChange: files => this.onChooseFile(files[0]),
      name: name,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 50,
        columnNumber: 7
      }
    }, _ref => {
      var {
        openFileUploadDialog
      } = _ref;
      return /*#__PURE__*/_react.default.createElement(_FormField.default, {
        label: header,
        dataHook: dataHook,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 56,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react.default.createElement("label", {
        className: _FilePickerSt.classes.label,
        onClick: openFileUploadDialog,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 57,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: _FilePickerSt.classes.icon,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 58,
          columnNumber: 15
        }
      }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Add, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 59,
          columnNumber: 17
        }
      })), /*#__PURE__*/_react.default.createElement("div", {
        className: _FilePickerSt.classes.content,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 62,
          columnNumber: 15
        }
      }, /*#__PURE__*/_react.default.createElement(_TextButton.default, {
        dataHook: "main-label",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 63,
          columnNumber: 17
        }
      }, mainLabel), /*#__PURE__*/_react.default.createElement(_Text.default, {
        className: _FilePickerSt.classes.info,
        size: "small",
        secondary: true,
        dataHook: "sub-label",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 64,
          columnNumber: 17
        }
      }, this.state.selectedFileName), error && /*#__PURE__*/_react.default.createElement(_Text.default, {
        skin: "error",
        size: "small",
        dataHook: "filePicker-error",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 73,
          columnNumber: 19
        }
      }, errorMessage))));
    });
  }
}
FilePicker.displayName = 'FilePicker';
FilePicker.defaultProps = {
  mainLabel: 'Choose File',
  subLabel: 'No file chosen (Max size 5 MB)',
  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 = exports.default = FilePicker;
//# sourceMappingURL=FilePicker.js.map