@kelvininc/ui-components
Version:
Kelvin UI Components
62 lines (61 loc) • 3.7 kB
JavaScript
import { EToggleState } from "../../types";
import { ADD_OPTION } from "./select-multi-options.config";
export const buildNewOption = (highlightedOption, createInputPlaceholder) => (Object.assign(Object.assign({}, ADD_OPTION), { label: createInputPlaceholder !== null && createInputPlaceholder !== void 0 ? createInputPlaceholder : ADD_OPTION.label, togglable: false, selected: false, state: EToggleState.None, highlighted: ADD_OPTION.value === highlightedOption }));
const buildSelectOption = ({ optionKey, options = {}, allOptions = {}, selectedOptions = {}, highlightedOption, level = 0, maxSelectable, selectedCount }) => {
const childrenOptions = buildSelectOptions({
options: options[optionKey].options,
allOptions: allOptions[optionKey].options,
selectedOptions,
highlightedOption,
level: level + 1,
maxSelectable,
selectedCount
});
const isSelected = selectedOptions[optionKey] === true;
const isMaxReached = maxSelectable !== undefined && selectedCount !== undefined && selectedCount >= maxSelectable;
const isDisabledByMax = isMaxReached && !isSelected;
return Object.assign(Object.assign({ togglable: true }, options[optionKey]), { options: childrenOptions, selected: isSelected, state: getOptionToggleState(allOptions[optionKey], selectedOptions), highlighted: optionKey === highlightedOption, level: level, heading: Object.values(childrenOptions).length > 0, disabled: options[optionKey].disabled || isDisabledByMax });
};
const getOptionToggleState = (option, selectedOptions = {}) => {
var _a;
const children = Object.values((_a = option.options) !== null && _a !== void 0 ? _a : {});
if (children.length === 0) {
if (selectedOptions[option.value]) {
return EToggleState.Selected;
}
return EToggleState.None;
}
const childrenStates = children.map(childrenOpt => getOptionToggleState(childrenOpt, selectedOptions));
const [firstChildrenState, ...otherChildrenStates] = childrenStates;
// Check if all children have the same state
if (otherChildrenStates.every(childrenState => childrenState === firstChildrenState)) {
return firstChildrenState;
}
// Otherwise
return EToggleState.Indeterminate;
};
export const buildSelectOptions = ({ options = {}, allOptions = {}, selectedOptions = {}, highlightedOption, hasAddItem = false, createInputPlaceholder, level = 0, maxSelectable, selectedCount }) => {
const selectOptions = Object.keys(options).reduce((accumulator, optionKey) => {
if (allOptions[optionKey]) {
accumulator[optionKey] = buildSelectOption({ optionKey, options, allOptions, selectedOptions, highlightedOption, level, maxSelectable, selectedCount });
}
return accumulator;
}, {});
if (hasAddItem) {
selectOptions[ADD_OPTION.value] = buildNewOption(highlightedOption, createInputPlaceholder);
}
return selectOptions;
};
export const buildSelectOptionsArray = ({ options = {}, allOptions = {}, selectedOptions = {}, highlightedOption, hasAddItem = false, createInputPlaceholder, level = 0, maxSelectable, selectedCount }) => {
const selectOptionsArray = [];
for (const optionKey of Object.keys(options)) {
if (allOptions[optionKey] !== undefined) {
const builtOption = buildSelectOption({ optionKey, options, allOptions, selectedOptions, highlightedOption, level, maxSelectable, selectedCount });
selectOptionsArray.push(builtOption);
}
}
if (hasAddItem) {
selectOptionsArray.push(buildNewOption(highlightedOption, createInputPlaceholder));
}
return selectOptionsArray;
};