@talend/react-components/lib/Actions/ActionFile/ActionFile.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("@talend/utils");
var _TooltipTrigger = _interopRequireDefault(require("../../TooltipTrigger"));
var _CircularProgress = _interopRequireDefault(require("../../CircularProgress"));
var _OverlayTrigger = _interopRequireDefault(require("../../OverlayTrigger"));
var _Icon = _interopRequireDefault(require("../../Icon"));
var _ActionFileModule = _interopRequireDefault(require("./ActionFile.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const LEFT = 'left';
const RIGHT = 'right';

/**
 * Purpose of this component is to provide a simple direct upload button.
 * When the user click on this component a file picker is open,
 * letting the user to choose the file he which to upload.
 * When the user select a file, the onChange props is executed and get
 * passed the react syntetic event and the selected file.
 * subsequently the field get emptied.
 * @param {Object} props
 */
class ActionFile extends _react.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    event.preventDefault();
    if (event.target.files.length > 0) {
      this.props.onChange(event, event.target.files[0]);
      // clear inout value
      event.target.value = null; /* eslint no-param-reassign: ["error", { "props": false }] */
    }
  }
  render() {
    const {
      accept,
      available,
      bsStyle,
      className,
      'data-feature': dataFeature,
      disabled,
      inProgress,
      hideLabel,
      icon,
      iconPosition,
      iconTransform,
      id,
      label,
      name,
      tooltip,
      tooltipLabel,
      tooltipPlacement
    } = this.props;
    if (!available) {
      return null;
    }
    const localId = id || (0, _utils.randomUUID)();
    const iconInstance = inProgress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
      size: "small"
    }, "icon") : icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
      name: icon,
      transform: iconTransform
    }, "icon");
    const labelInstance = hideLabel ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      children: label
    }, "label");
    const labelClasses = (0, _classnames.default)(`btn btn-${bsStyle}`, _ActionFileModule.default['btn-file'], (disabled || inProgress) && 'disabled', (hideLabel || !label) && 'btn-icon-only');
    const btn = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
      className: className,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
        onChange: this.handleChange,
        type: "file",
        "data-test": localId,
        accept: accept,
        name: name,
        id: localId,
        disabled: inProgress || disabled,
        className: (0, _classnames.default)(_ActionFileModule.default['action-file-input'], 'sr-only')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
        htmlFor: localId,
        className: labelClasses,
        "data-feature": dataFeature,
        children: iconPosition === RIGHT ? [labelInstance, iconInstance] : [iconInstance, labelInstance]
      })]
    });
    if (hideLabel || tooltip || tooltipLabel) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
        label: tooltipLabel || label,
        tooltipPlacement: tooltipPlacement,
        children: btn
      });
    }
    return btn;
  }
}
_defineProperty(ActionFile, "displayName", 'ActionFile');
_defineProperty(ActionFile, "propTypes", {
  accept: _propTypes.default.string,
  available: _propTypes.default.bool,
  bsStyle: _propTypes.default.string,
  className: _propTypes.default.string,
  disabled: _propTypes.default.bool,
  hideLabel: _propTypes.default.bool,
  icon: _propTypes.default.string,
  iconPosition: _propTypes.default.oneOf([LEFT, RIGHT]),
  iconTransform: _propTypes.default.string,
  id: _propTypes.default.string,
  inProgress: _propTypes.default.bool,
  label: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]),
  name: _propTypes.default.string,
  onChange: _propTypes.default.func.isRequired,
  tooltipPlacement: _OverlayTrigger.default.propTypes.placement,
  tooltip: _propTypes.default.bool,
  tooltipLabel: _propTypes.default.string,
  'data-feature': _propTypes.default.string
});
_defineProperty(ActionFile, "defaultProps", {
  available: true,
  bsStyle: 'default',
  tooltipPlacement: 'top',
  inProgress: false,
  disabled: false
});
var _default = exports.default = ActionFile;
//# sourceMappingURL=ActionFile.component.js.map