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

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

import * as React from "react";
import styled from "styled-components";

import defaultTokens from "../defaultTokens";
import Button from "../Button";
import ButtonLink from "../ButtonLink";
import FormLabel from "../FormLabel";
import FormFeedback from "../FormFeedback";
import Attachment from "../icons/Attachment";
import CloseCircle from "../icons/CloseCircle";

const Field = styled.label.withConfig({
  displayName: "InputFile__Field"
})(["font-family:", ";display:block;"], ({ theme }) => theme.orbit.fontfamily);

Field.defaultProps = {
  theme: defaultTokens
};

const FakeInput = styled(({ children, className }) => React.createElement(
  "div",
  { className: className },
  children
)).withConfig({
  displayName: "InputFile__FakeInput"
})(["box-sizing:border-box;display:flex;align-items:center;padding-left:6px;height:", ";border-radius:", ";box-shadow:inset 0 0 0 ", ";background-color:", ";transition:box-shadow ", " ease-in-out;&:hover{box-shadow:inset 0 0 0 ", ";}"], ({ 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}`);

FakeInput.defaultProps = {
  theme: defaultTokens
};

const Input = styled.input.withConfig({
  displayName: "InputFile__Input"
})(["opacity:0;position:absolute;height:0;&:focus ~ ", "{box-shadow:", ";}"], FakeInput, ({ theme }) => `inset 0 0 0 ${theme.orbit.borderWidthInputFocus} ${theme.orbit.borderColorInputFocus}`);

Input.defaultProps = {
  theme: defaultTokens
};

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"
})(["color:", ";width:100%;white-space:nowrap;padding-left:", ";"], ({ error, fileName, theme }) => getFileInputColor({ error, fileName }, theme), ({ theme }) => theme.orbit.spaceSmall);

StyledFileInput.defaultProps = {
  theme: defaultTokens
};

const InputButton = styled(Button).withConfig({
  displayName: "InputFile__InputButton"
})(["flex-shrink:0;"]);

const CloseButton = styled(ButtonLink).withConfig({
  displayName: "InputFile__CloseButton"
})(["flex-shrink:0;& svg{color:", ";}"], ({ theme }) => theme.orbit.paletteInkLight);

CloseButton.defaultProps = {
  theme: defaultTokens
};

const InputFile = props => {
  const { placeholder = "No file selected", title = "Select file", dataTest } = props;

  return React.createElement(
    Field,
    { "data-test": dataTest },
    React.createElement(Input, {
      type: "file",
      name: props.name,
      error: props.error,
      onChange: props.onChange,
      onFocus: props.onChange,
      onBlur: props.onBlur,
      accept: props.allowedFileTypes
    }),
    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" },
        title
      ),
      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: props.onRemoveFile
      })
    ),
    props.help && !props.error && React.createElement(
      FormFeedback,
      { type: "help" },
      props.help
    ),
    props.error && React.createElement(
      FormFeedback,
      { type: "error" },
      props.error
    )
  );
};

export default InputFile;