@kiwicom/orbit-components/lib/InputFile/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Button = _interopRequireDefault(require("../Button"));
var _ButtonLink = _interopRequireDefault(require("../ButtonLink"));
var _FormLabel = _interopRequireDefault(require("../FormLabel"));
var _ErrorFormTooltip = _interopRequireDefault(require("../ErrorFormTooltip"));
var _Attachment = _interopRequireDefault(require("../icons/Attachment"));
var _CloseCircle = _interopRequireDefault(require("../icons/CloseCircle"));
var _getFieldDataState = _interopRequireDefault(require("../common/getFieldDataState"));
var _useErrorTooltip = _interopRequireDefault(require("../ErrorFormTooltip/hooks/useErrorTooltip"));
var _tailwind = require("../common/tailwind");
const InputFile = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    placeholder = "No file selected",
    buttonLabel = "Select file",
    required,
    onRemoveFile,
    dataTest,
    id,
    helpClosable = true,
    spaceAfter,
    width = "100%",
    help,
    error,
    onFocus,
    onBlur,
    name,
    label,
    multiple,
    onChange,
    disabled = false,
    allowedFileTypes,
    tabIndex,
    fileName,
    insideInputGroup
  } = props;
  const hasTooltip = Boolean(error || help);
  const {
    tooltipShown,
    tooltipShownHover,
    setTooltipShown,
    setTooltipShownHover,
    labelRef,
    iconRef,
    handleFocus
  } = (0, _useErrorTooltip.default)({
    onFocus,
    hasTooltip
  });
  const shown = tooltipShown || tooltipShownHover;
  const onClick = e => {
    if (iconRef && iconRef.current && iconRef.current.contains(e.target)) {
      e.preventDefault();
      e.stopPropagation();
    }
  };
  return (
    /*#__PURE__*/
    // Disabling because the onClick exists just to stop propagation of events
    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
    React.createElement("label", {
      onClick: onClick,
      ref: labelRef,
      className: (0, _clsx.default)("font-base relative block w-full", spaceAfter && _tailwind.spaceAfterClasses[spaceAfter]),
      style: {
        width
      }
    }, /*#__PURE__*/React.createElement("input", {
      "data-test": dataTest,
      id: id,
      disabled: disabled,
      "aria-required": required,
      multiple: multiple,
      "data-state": insideInputGroup && typeof error === "undefined" ? undefined : (0, _getFieldDataState.default)(!!props.error),
      type: "file",
      name: name,
      onChange: onChange,
      onFocus: handleFocus,
      onBlur: onBlur,
      accept: Array.isArray(allowedFileTypes) ? allowedFileTypes.join(",") : allowedFileTypes,
      tabIndex: tabIndex ? Number(tabIndex) : undefined,
      className: "peer pointer-events-none absolute h-0 opacity-0"
    }), label && /*#__PURE__*/React.createElement(_FormLabel.default, {
      filled: !!fileName,
      required: required,
      error: !!error,
      help: !!help,
      labelRef: labelRef,
      iconRef: iconRef,
      onMouseEnter: () => setTooltipShownHover(true),
      onMouseLeave: () => setTooltipShownHover(false)
    }, label), /*#__PURE__*/React.createElement("div", {
      className: (0, _clsx.default)("peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-[2px]", "box-border flex items-center", "h-form-box-normal ps-[6px]", error ? "shadow-form-element-error" : "shadow-form-element", !disabled && (error ? "hover:shadow-form-element-error-hover" : "hover:shadow-form-element-hover"), "duration-fast transition-shadow ease-in-out", "rounded-normal", disabled ? "bg-form-element-disabled-background cursor-not-allowed" : "bg-form-element-background cursor-pointer")
    }, /*#__PURE__*/React.createElement(_Button.default, {
      type: "secondary",
      disabled: disabled,
      size: "small",
      iconLeft: /*#__PURE__*/React.createElement(_Attachment.default, null),
      asComponent: "div",
      role: "button"
    }, buttonLabel), /*#__PURE__*/React.createElement("div", {
      className: (0, _clsx.default)("font-base ps-sm w-full truncate", error ? "text-red-normal" : "text-ink-normal"),
      ref: ref
    }, fileName || placeholder), fileName && /*#__PURE__*/React.createElement(_ButtonLink.default, {
      type: "primary",
      disabled: disabled,
      compact: true,
      iconLeft: /*#__PURE__*/React.createElement(_CloseCircle.default, {
        ariaLabel: "remove",
        color: "secondary"
      }),
      onClick: ev => {
        ev.preventDefault();
        if (onRemoveFile) {
          onRemoveFile();
        }
      }
    })), !insideInputGroup && hasTooltip && /*#__PURE__*/React.createElement(_ErrorFormTooltip.default, {
      help: help,
      error: error,
      helpClosable: helpClosable,
      inputSize: "normal",
      referenceElement: labelRef,
      shown: shown,
      onShown: setTooltipShown
    }))
  );
});
InputFile.displayName = "InputFile";
var _default = InputFile;
exports.default = _default;