wix-style-react/dist/src/FileUpload/FileUpload.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 _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/FileUpload/FileUpload.js";
/** A wrapper component to support native file upload */
class FileUpload extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    this.inputRef = /*#__PURE__*/_react.default.createRef();
  }
  render() {
    var {
      dataHook,
      className,
      children,
      multiple,
      accept,
      capture,
      name,
      onChange: _onChange
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("label", {
      className: className,
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 24,
        columnNumber: 7
      }
    }, children({
      openFileUploadDialog: event => {
        // Open the file upload dialog
        this.inputRef.current.click();

        // In case the click event comes from a non-button element
        if (event) {
          event.preventDefault();
        }
      }
    }), /*#__PURE__*/_react.default.createElement("input", {
      type: "file",
      "data-hook": _constants.dataHooks.input,
      style: {
        display: 'none'
      },
      ref: this.inputRef,
      multiple: multiple,
      accept: accept,
      capture: capture === 'none' ? null : capture,
      name: name,
      onChange: event => _onChange(event.target.files),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 38,
        columnNumber: 9
      }
    }));
  }
}
FileUpload.displayName = 'FileUpload';
FileUpload.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in tests. */
  dataHook: _propTypes.default.string,
  /** Allows the application of a CSS class to the components’ root element. */
  className: _propTypes.default.string,
  /** Accepts any kind of component as a child item that calls out the file picker.
   * ##### Syntax:
   * function({ openFileUpload }): element
   * * `openFileUpload`: A function that will open a file upload dialog when triggered.
   * * return: A react element
   */
  children: _propTypes.default.func.isRequired,
  /** Allows you to select and upload multiple files at once. */
  multiple: _propTypes.default.bool,
  /** Defines which file types to accept (i.e. .jpeg, .gif, .png). Each format should be separated by a comma. */
  accept: _propTypes.default.string,
  /** Specifies that a new file should be captured and which camera to use to capture the image or video data.
   * `Use user` for the user-facing camera and `environment`  for the outward-facing camera.
   * ##### Note: This only works on mobile devices;
   * If your device is a desktop computer, you'll get a standard file picker.
   * */
  capture: _propTypes.default.oneOf(['user', 'environment', 'none']),
  /** Specifies a form data name to be submitted along with the control value. */
  name: _propTypes.default.string,
  /** Defines a standard input onChange callback. */
  onChange: _propTypes.default.func.isRequired
};
FileUpload.defaultProps = {
  multiple: false,
  accept: '',
  capture: 'user',
  onChange: () => {}
};
var _default = exports.default = FileUpload;
//# sourceMappingURL=FileUpload.js.map