@cbinsights/fds/lib/components/InputGroup/index.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getFlexSettings = exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _Flex = _interopRequireDefault(require("../Flex"));

var _FlexItem = _interopRequireDefault(require("../FlexItem"));

/**
 * Returns an array InputGroup can use to set grow/shrink on flex items
 *
 * @param {Number} childCount - number of react children passed to InputGroup
 * @param {Array} userSettings - `flexSettings` prop optionally set by user
 * @returns {Array} e.g. ['shrink', 'grow', 'shrink']
 */
var getFlexSettings = function getFlexSettings(childCount, userSettings) {
  // always obey a valid `flexSettings` prop when passed by a user
  if (userSettings && userSettings.length === childCount) return userSettings; // if user did not pass the `flexSettings` prop, set a sensible default

  var defaultSettings = new Array(childCount).fill('grow');
  defaultSettings[childCount - 1] = 'shrink'; // always shrink last item
  // also shrink the first item when there's 3 or more items

  if (defaultSettings.length >= 3) {
    defaultSettings[0] = 'shrink';
  }

  return defaultSettings;
};

exports.getFlexSettings = getFlexSettings;

var InputGroup = function InputGroup(_ref) {
  var children = _ref.children,
      _ref$flexSettings = _ref.flexSettings,
      flexSettings = _ref$flexSettings === void 0 ? [] : _ref$flexSettings;
  var growShrinkArr = getFlexSettings(_react.default.Children.count(children), flexSettings);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "fdsInputGroup"
  }, /*#__PURE__*/_react.default.createElement(_Flex.default, {
    align: "center",
    noGutters: true
  }, _react.default.Children.map(children, function (child, i) {
    return /*#__PURE__*/_react.default.createElement(_FlexItem.default, {
      shrink: growShrinkArr[i] === 'shrink'
    }, child);
  })));
};

var _default = InputGroup;
exports.default = _default;