@kiwicom/orbit-components/lib/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"

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var React = _interopRequireWildcard(_react);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _defaultTokens = require("../defaultTokens");

var _defaultTokens2 = _interopRequireDefault(_defaultTokens);

var _Button = require("../Button");

var _Button2 = _interopRequireDefault(_Button);

var _ButtonLink = require("../ButtonLink");

var _ButtonLink2 = _interopRequireDefault(_ButtonLink);

var _FormLabel = require("../FormLabel");

var _FormLabel2 = _interopRequireDefault(_FormLabel);

var _FormFeedback = require("../FormFeedback");

var _FormFeedback2 = _interopRequireDefault(_FormFeedback);

var _Attachment = require("../icons/Attachment");

var _Attachment2 = _interopRequireDefault(_Attachment);

var _CloseCircle = require("../icons/CloseCircle");

var _CloseCircle2 = _interopRequireDefault(_CloseCircle);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

var Field = _styledComponents2.default.label.withConfig({
  displayName: "InputFile__Field"
})(["font-family:", ";display:block;"], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.fontfamily;
});


Field.defaultProps = {
  theme: _defaultTokens2.default
};

var FakeInput = (0, _styledComponents2.default)(function (_ref2) {
  var children = _ref2.children,
      className = _ref2.className;
  return 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 ", ";}"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.heightInputNormal;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref5) {
  var theme = _ref5.theme,
      error = _ref5.error;
  return theme.orbit.borderWidthInput + " " + (error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput);
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.backgroundInput;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.durationFast;
}, function (_ref8) {
  var theme = _ref8.theme,
      error = _ref8.error;
  return theme.orbit.borderWidthInput + " " + (error ? theme.orbit.paletteRedNormalHover : theme.orbit.borderColorInputHover);
});

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

var Input = _styledComponents2.default.input.withConfig({
  displayName: "InputFile__Input"
})(["opacity:0;position:absolute;height:0;&:focus ~ ", "{box-shadow:", ";}"], FakeInput, function (_ref9) {
  var theme = _ref9.theme;
  return "inset 0 0 0 " + theme.orbit.borderWidthInputFocus + " " + theme.orbit.borderColorInputFocus;
});

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

var getFileInputColor = function getFileInputColor(_ref10, theme) {
  var error = _ref10.error,
      fileName = _ref10.fileName;

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

var StyledFileInput = _styledComponents2.default.div.withConfig({
  displayName: "InputFile__StyledFileInput"
})(["color:", ";width:100%;white-space:nowrap;padding-left:", ";"], function (_ref11) {
  var error = _ref11.error,
      fileName = _ref11.fileName,
      theme = _ref11.theme;
  return getFileInputColor({ error: error, fileName: fileName }, theme);
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.orbit.spaceSmall;
});

StyledFileInput.defaultProps = {
  theme: _defaultTokens2.default
};

var InputButton = (0, _styledComponents2.default)(_Button2.default).withConfig({
  displayName: "InputFile__InputButton"
})(["flex-shrink:0;"]);

var CloseButton = (0, _styledComponents2.default)(_ButtonLink2.default).withConfig({
  displayName: "InputFile__CloseButton"
})(["flex-shrink:0;& svg{color:", ";}"], function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.paletteInkLight;
});

CloseButton.defaultProps = {
  theme: _defaultTokens2.default
};

var InputFile = function InputFile(props) {
  var _props$placeholder = props.placeholder,
      placeholder = _props$placeholder === undefined ? "No file selected" : _props$placeholder,
      _props$title = props.title,
      title = _props$title === undefined ? "Select file" : _props$title,
      dataTest = props.dataTest;


  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(
      _FormLabel2.default,
      { filled: !!props.fileName },
      props.label
    ),
    React.createElement(
      FakeInput,
      { error: props.error },
      React.createElement(
        InputButton,
        { type: "secondary", size: "small", icon: React.createElement(_Attachment2.default, 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(_CloseCircle2.default, null),
        onClick: props.onRemoveFile
      })
    ),
    props.help && !props.error && React.createElement(
      _FormFeedback2.default,
      { type: "help" },
      props.help
    ),
    props.error && React.createElement(
      _FormFeedback2.default,
      { type: "error" },
      props.error
    )
  );
};

exports.default = InputFile;