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

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from "react";
import styled from "styled-components";
import defaultTheme from "../defaultTheme";
import FormLabel from "../FormLabel";
import { FakeInput, Input, InputContainer } from "../InputField";
import { SelectContainer } from "../Select";
import FormFeedback from "../FormFeedback";
import { SIZE_OPTIONS, TOKENS } from "./consts";
import { right, rtlSpacing } from "../utils/rtl";
import getSpacingToken from "../common/getSpacingToken";
import randomID from "../utils/randomID";

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",
  componentId: "cyuwoi-0"
})(["width:100%;position:absolute;top:0;left:0;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:", ";&: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, ({
  label
}) => label && "23px", ({
  theme,
  error
}) => `${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover}`);
FakeGroup.defaultProps = {
  theme: defaultTheme
};
const StyledChildren = styled.div.withConfig({
  displayName: "InputGroup__StyledChildren",
  componentId: "cyuwoi-1"
})(["display:flex;position:relative;"]);
const StyledChild = styled.div.withConfig({
  displayName: "InputGroup__StyledChild",
  componentId: "cyuwoi-2"
})(["flex:", ";padding:", ";:last-child{padding:0;}"], ({
  flex
}) => flex, ({
  theme
}) => rtlSpacing(`0 ${theme.orbit.spaceXSmall} 0 0`));
StyledChild.defaultProps = {
  theme: defaultTheme
};
const StyledInputGroup = styled(({
  children,
  className,
  dataTest,
  role,
  ariaLabelledby
}) => React.createElement("div", {
  className: className,
  "data-test": dataTest,
  role: role,
  "aria-labelledby": ariaLabelledby
}, children)).withConfig({
  displayName: "InputGroup__StyledInputGroup",
  componentId: "cyuwoi-3"
})(["display:flex;width:100%;flex-direction:column;position:relative;margin-bottom:", ";", "{", "{box-shadow:none;background-color:transparent;display:none;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;top:50%;transform:translateY(-50%);", ":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;}"], getSpacingToken, StyledChild, FakeInput, SelectContainer, InputContainer, SelectContainer, right, 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: defaultTheme
};

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

    _defineProperty(this, "state", {
      active: false,
      filled: false
    });

    _defineProperty(this, "inputID", randomID("inputGroupID"));

    _defineProperty(this, "isFilled", () => this.setState({
      filled: !React.Children.map(this.props.children, child => child.props.value !== undefined && child.props.value !== "").includes(false)
    }));

    _defineProperty(this, "handleFocus", ev => {
      const {
        onFocus
      } = this.props;
      this.setState({
        active: true
      });

      if (onFocus) {
        onFocus(ev);
      }
    });

    _defineProperty(this, "handleBlur", ev => {
      const {
        onBlur
      } = this.props;
      this.isFilled();
      this.setState({
        active: false
      });

      if (onBlur) {
        onBlur(ev);
      }
    });

    _defineProperty(this, "handleChange", ev => {
      const {
        onChange
      } = this.props;
      this.isFilled();

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

  componentDidMount() {
    this.isFilled();
  }

  componentDidUpdate(prevProps) {
    if (this.props.children !== prevProps.children) {
      this.isFilled();
    }
  }

  render() {
    const {
      children,
      label,
      flex = "0 1 auto",
      size = SIZE_OPTIONS.NORMAL,
      help,
      error,
      dataTest,
      spaceAfter
    } = this.props;
    const {
      active,
      filled
    } = this.state;
    return React.createElement(StyledInputGroup, {
      label: label,
      error: error,
      active: active,
      size: size,
      dataTest: dataTest,
      spaceAfter: spaceAfter,
      role: "group",
      ariaLabelledby: label && this.inputID
    }, label && React.createElement(FormLabel, {
      filled: filled,
      id: this.inputID
    }, 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.cloneElement(item, {
        ref: node => {
          // Call the original ref, if any
          const {
            ref
          } = item;

          if (typeof ref === "function") {
            ref(node);
          } else if (ref !== null) {
            ref.current = node;
          }
        },
        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;