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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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

import defaultTokens from "../defaultTokens";
import FormLabel from "../FormLabel";
import { FakeInput, Input, InputContainer } from "../InputField";
import { SelectContainer } from "../Select";
import FormFeedback from "../FormFeedback";
import { SIZE_OPTIONS, TOKENS } from "./consts";

const getToken = name => ({ theme, size }) => {
  const tokens = {
    [TOKENS.height]: {
      [SIZE_OPTIONS.SMALL]: theme.orbit.heightInputSmall,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.heightInputNormal
    },
    [TOKENS.heightLine]: {
      [SIZE_OPTIONS.SMALL]: "16px",
      [SIZE_OPTIONS.NORMAL]: "24px"
    }
  };

  return tokens[name][size];
};

const FakeGroup = styled(({ children, className }) => React.createElement(
  "div",
  { className: className },
  children
)).withConfig({
  displayName: "InputGroup__FakeGroup"
})(["width:100%;position:absolute;z-index:1;box-sizing:border-box;height:", ";border-radius:", ";box-shadow:", ";box-shadow:", ";box-shadow:", ";background-color:", ";font-size:", ";transition:box-shadow ", " ease-in-out;margin-top:23px;&:hover{box-shadow:inset 0 0 0 ", ";}"], getToken(TOKENS.height), ({ theme }) => theme.orbit.borderRadiusNormal, ({ theme }) => `inset 0 0 0 ${theme.orbit.borderWidthInput} ${theme.orbit.borderColorInput}`, ({ theme, error }) => error && `inset 0 0 0 ${theme.orbit.borderWidthInput} ${theme.orbit.borderColorInputError}`, ({ theme, active }) => active && `inset 0 0 0 ${theme.orbit.borderWidthInputFocus} ${theme.orbit.borderColorInputFocus}`, ({ disabled, theme }) => disabled ? theme.orbit.backgroundInputDisabled : theme.orbit.backgroundInput, ({ theme }) => theme.orbit.fontSizeInputNormal, ({ theme }) => theme.orbit.durationFast, ({ theme, error }) => `${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover}`);

FakeGroup.defaultProps = {
  theme: defaultTokens
};

const StyledChildren = styled.div.withConfig({
  displayName: "InputGroup__StyledChildren"
})(["display:flex;position:relative;"]);

const StyledChild = styled.div.withConfig({
  displayName: "InputGroup__StyledChild"
})(["flex:", ";padding-right:", ";:last-child{padding-right:0;}"], ({ flex }) => flex, ({ theme }) => theme.orbit.spaceXSmall);
StyledChild.defaultProps = {
  theme: defaultTokens
};

const StyledInputGroup = styled(({ children, className, dataTest }) => React.createElement(
  "div",
  { className: className, "data-test": dataTest },
  children
)).withConfig({
  displayName: "InputGroup__StyledInputGroup"
})(["display:flex;flex-direction:column;position:relative;", "{", "{box-shadow:none;background-color:transparent;display:flex;align-items:center;justify-content:flex-end;}", "{background-color:transparent;> select{box-shadow:none;background-color:transparent;&:focus{box-shadow:none;}}}", ":after,", ":after{content:\" \";position:absolute;right:0;height:", ";width:1px;background-color:", ";transition:background-color ", " ease-in-out;display:block;z-index:2;}&:last-child{", ":after,", ":after{content:none;}}}", " ", "{display:", ";}", ":focus ~ ", "{box-shadow:none;}"], StyledChild, FakeInput, SelectContainer, InputContainer, SelectContainer, getToken(TOKENS.heightLine), ({ theme, error, active }) => error && !active ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput, ({ theme }) => theme.orbit.durationFast, InputContainer, SelectContainer, StyledChild, FormLabel, ({ label }) => label && "none", Input, FakeInput);

StyledInputGroup.defaultProps = {
  theme: defaultTokens
};

class InputGroup extends React.PureComponent {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      active: false,
      filled: false
    }, this.isFilled = () => this.setState({
      filled: !React.Children.map(this.props.children, child => child.props.value !== undefined && child.props.value !== "").includes(false)
    }), this.handleFocus = ev => {
      const { onFocus } = this.props;

      this.setState({ active: true });
      if (onFocus) {
        onFocus(ev);
      }
    }, this.handleBlur = ev => {
      const { onBlur } = this.props;
      this.isFilled();

      this.setState({ active: false });
      if (onBlur) {
        onBlur(ev);
      }
    }, this.handleChange = ev => {
      const { onChange } = this.props;
      this.isFilled();

      if (onChange) {
        onChange(ev);
      }
    }, _temp;
  }

  componentDidMount() {
    this.isFilled();
  }

  componentDidUpdate() {
    this.isFilled();
  }

  render() {
    const {
      children,
      label,
      flex = "0 1 auto",
      size = SIZE_OPTIONS.NORMAL,
      help,
      error,
      dataTest
    } = this.props;
    const { active, filled } = this.state;

    return React.createElement(
      StyledInputGroup,
      { label: label, error: error, active: active, size: size, dataTest: dataTest },
      label && React.createElement(
        FormLabel,
        { filled: filled },
        label
      ),
      React.createElement(
        StyledChildren,
        null,
        React.Children.map(children, (item, key) => {
          // either array, array with one length or string
          // if it's not defined, use the first or string
          const childFlex = Array.isArray(flex) && flex.length !== 1 ? flex[key] || flex[0] : flex;
          return React.createElement(
            StyledChild,
            { flex: childFlex },
            React.createElement(item.type, _extends({}, item.props, {
              size: size,
              label: undefined,
              help: undefined,
              error: undefined,
              onChange: this.handleChange,
              onBlur: this.handleBlur,
              onFocus: this.handleFocus
            }))
          );
        })
      ),
      React.createElement(FakeGroup, { label: label, error: error, active: active, size: size }),
      !error && help && React.createElement(
        FormFeedback,
        { type: "help" },
        help
      ),
      error && React.createElement(
        FormFeedback,
        { type: "error" },
        error
      )
    );
  }
}

export default InputGroup;