@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
88 lines (87 loc) • 3.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getComboBoxWidthResult = void 0;
var _calculate = require("../../utils/calculate");
var _ComboBox = require("./ComboBox.constants");
const getPrefixWidth = (prefix, prefixMinWidth, functions, values) => {
if (!prefix) {
return 0;
}
const prefixTextWidth = (0, _calculate.calculateMaxComboBoxItemWidth)({
list: [{
text: prefix,
value: 'prefix'
}],
functions,
values
});
return Math.max(prefixTextWidth + _ComboBox.COMBO_BOX_PREFIX_GAP_PX, prefixMinWidth ?? _ComboBox.COMBO_BOX_PREFIX_MIN_WIDTH_PX);
};
const clampToParentWidth = (width, parentWidth) => parentWidth > 0 ? Math.min(width, parentWidth) : width;
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 = (0, _calculate.calculateMaxComboBoxItemWidth)({
list: [...allItems, {
text: placeholder,
value: 'placeholder'
}, ...(effectiveSelectedItem ? [effectiveSelectedItem] : [])],
functions,
shouldShowBigImage,
values
});
const prefixWidth = getPrefixWidth(prefix, prefixMinWidth, functions, values);
const triggerWidthBase = maxItemWidth + _ComboBox.COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX + _ComboBox.COMBO_BOX_HEADER_BORDER_WIDTH_PX + _ComboBox.COMBO_BOX_ACTION_ICON_WIDTH_PX + (shouldShowClearIcon ? _ComboBox.COMBO_BOX_CLEAR_ICON_WIDTH_PX : 0) + _ComboBox.COMBO_BOX_ROUNDING_BUFFER_PX + prefixWidth;
const desiredBodyMinWidth = maxItemWidth + _ComboBox.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 = (0, _calculate.calculateMaxComboBoxItemWidth)({
list: [effectiveSelectedItem],
functions,
shouldShowBigImage,
values
});
const width = clampToParentWidth(selectedItemWidth + _ComboBox.COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX + _ComboBox.COMBO_BOX_HEADER_BORDER_WIDTH_PX + _ComboBox.COMBO_BOX_ACTION_ICON_WIDTH_PX + (shouldShowClearIcon ? _ComboBox.COMBO_BOX_CLEAR_ICON_WIDTH_PX : 0) + _ComboBox.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)
};
};
exports.getComboBoxWidthResult = getComboBoxWidthResult;
//# sourceMappingURL=ComboBox.utils.js.map