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

Set of react components.

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); }
import PropTypes from 'prop-types';
import { Component } from 'react';
import classNames from 'classnames';
import { randomUUID } from '@talend/utils';
import TooltipTrigger from '../../TooltipTrigger';
import CircularProgress from '../../CircularProgress';
import OverlayTrigger from '../../OverlayTrigger';
import Icon from '../../Icon';
import theme from './ActionFile.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 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 || randomUUID();
    const iconInstance = inProgress ? /*#__PURE__*/_jsx(CircularProgress, {
      size: "small"
    }, "icon") : icon && /*#__PURE__*/_jsx(Icon, {
      name: icon,
      transform: iconTransform
    }, "icon");
    const labelInstance = hideLabel ? null : /*#__PURE__*/_jsx("span", {
      children: label
    }, "label");
    const labelClasses = classNames(`btn btn-${bsStyle}`, theme['btn-file'], (disabled || inProgress) && 'disabled', (hideLabel || !label) && 'btn-icon-only');
    const btn = /*#__PURE__*/_jsxs("span", {
      className: className,
      children: [/*#__PURE__*/_jsx("input", {
        onChange: this.handleChange,
        type: "file",
        "data-test": localId,
        accept: accept,
        name: name,
        id: localId,
        disabled: inProgress || disabled,
        className: classNames(theme['action-file-input'], 'sr-only')
      }), /*#__PURE__*/_jsx("label", {
        htmlFor: localId,
        className: labelClasses,
        "data-feature": dataFeature,
        children: iconPosition === RIGHT ? [labelInstance, iconInstance] : [iconInstance, labelInstance]
      })]
    });
    if (hideLabel || tooltip || tooltipLabel) {
      return /*#__PURE__*/_jsx(TooltipTrigger, {
        label: tooltipLabel || label,
        tooltipPlacement: tooltipPlacement,
        children: btn
      });
    }
    return btn;
  }
}
_defineProperty(ActionFile, "displayName", 'ActionFile');
_defineProperty(ActionFile, "propTypes", {
  accept: PropTypes.string,
  available: PropTypes.bool,
  bsStyle: PropTypes.string,
  className: PropTypes.string,
  disabled: PropTypes.bool,
  hideLabel: PropTypes.bool,
  icon: PropTypes.string,
  iconPosition: PropTypes.oneOf([LEFT, RIGHT]),
  iconTransform: PropTypes.string,
  id: PropTypes.string,
  inProgress: PropTypes.bool,
  label: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]),
  name: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  tooltipPlacement: OverlayTrigger.propTypes.placement,
  tooltip: PropTypes.bool,
  tooltipLabel: PropTypes.string,
  'data-feature': PropTypes.string
});
_defineProperty(ActionFile, "defaultProps", {
  available: true,
  bsStyle: 'default',
  tooltipPlacement: 'top',
  inProgress: false,
  disabled: false
});
export default ActionFile;
//# sourceMappingURL=ActionFile.component.js.map