chakra-ui/dist/esm/InputGroup/index.js

Responsive and accessible React UI components built with React and Emotion

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";

/** @jsx jsx */
import { jsx } from "@emotion/core";
import { Children, cloneElement } from "react";
import Box from "../Box";
import Input from "../Input";
import { inputSizes } from "../Input/styles";
import { InputLeftElement, InputRightElement } from "../InputElement";
import { useTheme } from "../ThemeProvider";

var InputGroup = function InputGroup(_ref) {
  var children = _ref.children,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? "md" : _ref$size,
      props = _objectWithoutProperties(_ref, ["children", "size"]);

  var _useTheme = useTheme(),
      sizes = _useTheme.sizes;

  var height = inputSizes[size].height;
  var pl = null;
  var pr = null;
  return jsx(Box, _extends({
    display: "flex",
    position: "relative"
  }, props), Children.map(children, function (child) {
    if (child.type === InputLeftElement) {
      pl = sizes[height];
    }

    if (child.type === InputRightElement) {
      pr = sizes[height];
    }

    if (child.type === Input) {
      return cloneElement(child, {
        size: size,
        pl: child.props.pl || pl,
        pr: child.props.pr || pr
      });
    }

    return cloneElement(child, {
      size: size
    });
  }));
};

export default InputGroup;