@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";

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 _styledComponents = _interopRequireWildcard(require("styled-components"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

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 _rtl = require("../utils/rtl");

var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));

var _getFieldDataState = _interopRequireDefault(require("../common/getFieldDataState"));

var _formElementFocus = _interopRequireDefault(require("../InputField/helpers/formElementFocus"));

var _useErrorTooltip = _interopRequireDefault(require("../ErrorFormTooltip/hooks/useErrorTooltip"));

var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));

const Field = _styledComponents.default.label.withConfig({
  displayName: "InputFile__Field",
  componentId: "sc-10wwda7-0"
})(["", ""], ({
  theme,
  $width
}) => (0, _styledComponents.css)(["font-family:", ";display:block;position:relative;width:", ";margin-bottom:", ";"], theme.orbit.fontFamily, $width, _getSpacingToken.default)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


Field.defaultProps = {
  theme: _defaultTheme.default
};
const FakeInput = (0, _styledComponents.default)(({
  children,
  className
}) => /*#__PURE__*/React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "InputFile__FakeInput",
  componentId: "sc-10wwda7-1"
})(["box-sizing:border-box;display:flex;align-items:center;padding:", ";height:", ";box-shadow:inset 0 0 0 ", ";background-color:", ";transition:box-shadow ", " ease-in-out;border-radius:6px;", ";&:hover{box-shadow:inset 0 0 0 ", ";}"], ({
  theme
}) => (0, _rtl.rtlSpacing)(theme.orbit.paddingInputFile), ({
  theme
}) => theme.orbit.heightInputNormal, ({
  theme,
  error
}) => `${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput}`, ({
  theme
}) => theme.backgroundInput, ({
  theme
}) => theme.orbit.durationFast, _mediaQuery.default.tablet((0, _styledComponents.css)(["border-radius:", ";"], ({
  theme
}) => theme.orbit.borderRadiusNormal)), ({
  theme,
  error
}) => `${theme.orbit.borderWidthInput} ${error ? theme.orbit.paletteRedNormalHover : theme.orbit.borderColorInputHover}`); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

FakeInput.defaultProps = {
  theme: _defaultTheme.default
};

const Input = _styledComponents.default.input.withConfig({
  displayName: "InputFile__Input",
  componentId: "sc-10wwda7-2"
})(["opacity:0;position:absolute;height:0;&:focus ~ ", "{", "}"], FakeInput, _formElementFocus.default); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


Input.defaultProps = {
  theme: _defaultTheme.default
};

const getFileInputColor = ({
  error,
  fileName
}, theme) => {
  if (error) {
    return theme.orbit.paletteRedNormal;
  }

  if (fileName) {
    return theme.orbit.colorTextInput;
  }

  return theme.orbit.paletteInkLight;
};

const StyledFileInput = _styledComponents.default.div.withConfig({
  displayName: "InputFile__StyledFileInput",
  componentId: "sc-10wwda7-3"
})(["font-family:", ";color:", ";width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:", ";"], ({
  theme
}) => theme.orbit.fontFamily, ({
  error,
  fileName,
  theme
}) => getFileInputColor({
  error,
  fileName
}, theme), ({
  theme
}) => (0, _rtl.rtlSpacing)(`0 0 0 ${theme.orbit.spaceSmall}`)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledFileInput.defaultProps = {
  theme: _defaultTheme.default
};
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,
    onChange,
    allowedFileTypes,
    tabIndex,
    fileName,
    insideInputGroup
  } = props;
  const {
    tooltipShown,
    tooltipShownHover,
    setTooltipShown,
    setTooltipShownHover,
    labelRef,
    iconRef,
    handleFocus
  } = (0, _useErrorTooltip.default)({
    onFocus
  });
  const shown = tooltipShown || tooltipShownHover;
  return /*#__PURE__*/React.createElement(Field, {
    spaceAfter: spaceAfter,
    ref: label ? null : labelRef,
    $width: width
  }, /*#__PURE__*/React.createElement(Input, {
    "data-test": dataTest,
    id: id,
    "aria-required": required,
    "data-state": insideInputGroup && typeof error === "undefined" ? undefined : (0, _getFieldDataState.default)(!!props.error),
    type: "file",
    name: name,
    error: error,
    onChange: onChange,
    onFocus: handleFocus,
    onBlur: onBlur,
    accept: allowedFileTypes,
    tabIndex: tabIndex
  }), label && /*#__PURE__*/React.createElement(_FormLabel.default, {
    filled: !!fileName,
    error: !!error,
    help: !!help,
    labelRef: labelRef,
    iconRef: iconRef,
    onMouseEnter: () => setTooltipShownHover(true),
    onMouseLeave: () => setTooltipShownHover(false)
  }, label), /*#__PURE__*/React.createElement(FakeInput, {
    error: error
  }, /*#__PURE__*/React.createElement(_Button.default, {
    type: "secondary",
    size: "small",
    iconLeft: /*#__PURE__*/React.createElement(_Attachment.default, null),
    asComponent: "div",
    role: "button"
  }, buttonLabel), /*#__PURE__*/React.createElement(StyledFileInput, {
    fileName: fileName,
    error: error,
    ref: ref
  }, fileName || placeholder), fileName && /*#__PURE__*/React.createElement(_ButtonLink.default, {
    type: "primary",
    compact: true,
    iconLeft: /*#__PURE__*/React.createElement(_CloseCircle.default, {
      ariaLabel: "remove",
      color: "secondary"
    }),
    onClick: ev => {
      ev.preventDefault();

      if (onRemoveFile) {
        onRemoveFile();
      }
    }
  })), !insideInputGroup && /*#__PURE__*/React.createElement(_ErrorFormTooltip.default, {
    help: help,
    error: error,
    helpClosable: helpClosable,
    inputSize: "normal",
    referenceElement: label ? iconRef : labelRef,
    shown: shown,
    onShown: setTooltipShown
  }));
});
InputFile.displayName = "InputFile";
var _default = InputFile;
exports.default = _default;