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

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

import * as React from "react";
import styled from "styled-components";
import defaultTheme from "../defaultTheme";
import Button from "../Button";
import ButtonLink, { StyledButtonLink } from "../ButtonLink";
import FormLabel from "../FormLabel";
import FormFeedback from "../FormFeedback";
import Attachment from "../icons/Attachment";
import CloseCircle from "../icons/CloseCircle";
import { rtlSpacing } from "../utils/rtl";
import getSpacingToken from "../common/getSpacingToken";
import getFieldDataState from "../common/getFieldDataState";
const Field = styled.label.withConfig({
  displayName: "InputFile__Field",
  componentId: "sc-12oq9bq-0"
})(["font-family:", ";display:block;position:relative;width:100%;margin-bottom:", ";"], ({
  theme
}) => theme.orbit.fontfamily, getSpacingToken);
Field.defaultProps = {
  theme: defaultTheme
};
const FakeInput = styled(({
  children,
  className
}) => React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "InputFile__FakeInput",
  componentId: "sc-12oq9bq-1"
})(["box-sizing:border-box;display:flex;align-items:center;padding:", ";height:", ";border-radius:", ";box-shadow:inset 0 0 0 ", ";background-color:", ";transition:box-shadow ", " ease-in-out;&:hover{box-shadow:inset 0 0 0 ", ";}", ":active{box-shadow:none;}"], ({
  theme
}) => rtlSpacing(theme.orbit.paddingInputFile), ({
  theme
}) => theme.orbit.heightInputNormal, ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  theme,
  error
}) => `${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput}`, ({
  theme
}) => theme.backgroundInput, ({
  theme
}) => theme.orbit.durationFast, ({
  theme,
  error
}) => `${theme.orbit.borderWidthInput} ${error ? theme.orbit.paletteRedNormalHover : theme.orbit.borderColorInputHover}`, StyledButtonLink);
FakeInput.defaultProps = {
  theme: defaultTheme
};
const Input = styled.input.withConfig({
  displayName: "InputFile__Input",
  componentId: "sc-12oq9bq-2"
})(["opacity:0;position:absolute;height:0;&:focus ~ ", "{box-shadow:", ";}"], FakeInput, ({
  theme
}) => `inset 0 0 0 ${theme.orbit.borderWidthInputFocus} ${theme.orbit.borderColorInputFocus}`);
Input.defaultProps = {
  theme: defaultTheme
};

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

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

  return theme.orbit.paletteInkLight;
};

const StyledFileInput = styled.div.withConfig({
  displayName: "InputFile__StyledFileInput",
  componentId: "sc-12oq9bq-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
}) => rtlSpacing(`0 0 0 ${theme.orbit.spaceSmall}`));
StyledFileInput.defaultProps = {
  theme: defaultTheme
};
const InputButton = styled(Button).withConfig({
  displayName: "InputFile__InputButton",
  componentId: "sc-12oq9bq-4"
})(["flex-shrink:0;"]);
const CloseButton = styled(ButtonLink).withConfig({
  displayName: "InputFile__CloseButton",
  componentId: "sc-12oq9bq-5"
})(["flex-shrink:0;& svg{color:", ";}"], ({
  theme
}) => theme.orbit.paletteInkLight);
CloseButton.defaultProps = {
  theme: defaultTheme
};
const InputFile = React.forwardRef((props, ref) => {
  const {
    placeholder = "No file selected",
    buttonLabel = "Select file",
    onRemoveFile,
    dataTest,
    spaceAfter
  } = props;
  return React.createElement(Field, {
    spaceAfter: spaceAfter
  }, React.createElement(Input, {
    "data-test": dataTest,
    "data-state": getFieldDataState(!!props.error),
    type: "file",
    name: props.name,
    error: props.error,
    onChange: props.onChange,
    onFocus: props.onChange,
    onBlur: props.onBlur,
    accept: props.allowedFileTypes,
    ref: ref,
    tabIndex: props.tabIndex
  }), props.label && React.createElement(FormLabel, {
    filled: !!props.fileName
  }, props.label), React.createElement(FakeInput, {
    error: props.error
  }, React.createElement(InputButton, {
    type: "secondary",
    size: "small",
    icon: React.createElement(Attachment, null),
    component: "div"
  }, buttonLabel), React.createElement(StyledFileInput, {
    fileName: props.fileName,
    error: props.error
  }, props.fileName || placeholder), props.fileName && React.createElement(CloseButton, {
    type: "secondary",
    transparent: true,
    icon: React.createElement(CloseCircle, null),
    onClick: ev => {
      ev.preventDefault();

      if (onRemoveFile) {
        onRemoveFile();
      }
    }
  })), props.help && !props.error && React.createElement(FormFeedback, {
    type: "help"
  }, props.help), props.error && React.createElement(FormFeedback, {
    type: "error"
  }, props.error));
});
InputFile.displayName = "InputFile";
export default InputFile;