@chayns-components/core/lib/esm/components/combobox/ComboBox.utils.js

A set of beautiful React components for developing your own applications with chayns.

import { calculateMaxComboBoxItemWidth } from '../../utils/calculate';
import { COMBO_BOX_ACTION_ICON_WIDTH_PX, COMBO_BOX_CLEAR_ICON_WIDTH_PX, COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX, COMBO_BOX_PREFIX_GAP_PX, COMBO_BOX_PREFIX_MIN_WIDTH_PX, COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX, COMBO_BOX_HEADER_BORDER_WIDTH_PX, COMBO_BOX_ROUNDING_BUFFER_PX } from './ComboBox.constants';
const getPrefixWidth = (prefix, prefixMinWidth, functions, values) => {
  if (!prefix) {
    return 0;
  }
  const prefixTextWidth = calculateMaxComboBoxItemWidth({
    list: [{
      text: prefix,
      value: 'prefix'
    }],
    functions,
    values
  });
  return Math.max(prefixTextWidth + COMBO_BOX_PREFIX_GAP_PX, prefixMinWidth ?? COMBO_BOX_PREFIX_MIN_WIDTH_PX);
};
const clampToParentWidth = (width, parentWidth) => parentWidth > 0 ? Math.min(width, parentWidth) : width;
export const getComboBoxWidthResult = ({
  functions,
  internalSelectedItem,
  lists,
  parentWidth,
  placeholder,
  prefix,
  prefixMinWidth,
  selectedItem,
  shouldDropDownUseMaxItemWidth,
  shouldShowBigImage,
  shouldShowClearIcon,
  shouldUseCurrentItemWidth,
  shouldUseFullWidth,
  values
}) => {
  const allItems = lists.flatMap(list => list.list);
  const effectiveSelectedItem = selectedItem ?? internalSelectedItem;
  const maxItemWidth = calculateMaxComboBoxItemWidth({
    list: [...allItems, {
      text: placeholder,
      value: 'placeholder'
    }, ...(effectiveSelectedItem ? [effectiveSelectedItem] : [])],
    functions,
    shouldShowBigImage,
    values
  });
  const prefixWidth = getPrefixWidth(prefix, prefixMinWidth, functions, values);
  const triggerWidthBase = maxItemWidth + COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX + COMBO_BOX_HEADER_BORDER_WIDTH_PX + COMBO_BOX_ACTION_ICON_WIDTH_PX + (shouldShowClearIcon ? COMBO_BOX_CLEAR_ICON_WIDTH_PX : 0) + COMBO_BOX_ROUNDING_BUFFER_PX + prefixWidth;
  const desiredBodyMinWidth = maxItemWidth + COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX;
  if (shouldDropDownUseMaxItemWidth) {
    const width = clampToParentWidth(desiredBodyMinWidth, parentWidth);
    return {
      minWidth: width,
      bodyMinWidth: width
    };
  }
  if (shouldUseFullWidth) {
    const width = clampToParentWidth(parentWidth, parentWidth);
    return {
      minWidth: width,
      bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth)
    };
  }
  if (shouldUseCurrentItemWidth && effectiveSelectedItem) {
    const selectedItemWidth = calculateMaxComboBoxItemWidth({
      list: [effectiveSelectedItem],
      functions,
      shouldShowBigImage,
      values
    });
    const width = clampToParentWidth(selectedItemWidth + COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX + COMBO_BOX_HEADER_BORDER_WIDTH_PX + COMBO_BOX_ACTION_ICON_WIDTH_PX + (shouldShowClearIcon ? COMBO_BOX_CLEAR_ICON_WIDTH_PX : 0) + COMBO_BOX_ROUNDING_BUFFER_PX + prefixWidth, parentWidth);
    return {
      minWidth: width,
      bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth)
    };
  }
  const width = clampToParentWidth(triggerWidthBase, parentWidth);
  return {
    minWidth: width,
    bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth)
  };
};
//# sourceMappingURL=ComboBox.utils.js.map