@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
131 lines • 6.07 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSelectedOptionsContext = exports.SelectedOptionsProvider = void 0;
const react_1 = __importStar(require("react"));
const create_context_1 = require("../../../util/create-context");
const hooks_1 = require("../../../util/hooks");
const Input_context_1 = require("../Input/Input.context");
const combobox_utils_1 = require("../combobox-utils");
const customOptionsContext_1 = require("../customOptionsContext");
const [SelectedOptionsContextProvider, useSelectedOptionsContext] = (0, create_context_1.createContext)();
exports.useSelectedOptionsContext = useSelectedOptionsContext;
const SelectedOptionsProvider = ({ children, value, }) => {
const { clearInput, focusInput, setHideCaret } = (0, Input_context_1.useInputContext)();
const { customOptions, removeCustomOption, addCustomOption, setCustomOptions, } = (0, customOptionsContext_1.useComboboxCustomOptions)();
const { allowNewValues, isMultiSelect, selectedOptions: externalSelectedOptions, onToggleSelected, options, maxSelected, } = value;
const [internalSelectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
const selectedOptions = (0, react_1.useMemo)(() => externalSelectedOptions !== null && externalSelectedOptions !== void 0 ? externalSelectedOptions : [...customOptions, ...internalSelectedOptions], [customOptions, externalSelectedOptions, internalSelectedOptions]);
const addSelectedOption = (0, react_1.useCallback)((option) => {
const isCustomOption = !(0, combobox_utils_1.isInList)(option, options);
if (isCustomOption) {
allowNewValues && addCustomOption(option);
!isMultiSelect && setSelectedOptions([]);
}
else if (isMultiSelect) {
setSelectedOptions((oldSelectedOptions) => [
...oldSelectedOptions,
option,
]);
}
else {
setSelectedOptions([option]);
setCustomOptions([]);
}
onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option.value, true, isCustomOption);
}, [
addCustomOption,
allowNewValues,
isMultiSelect,
onToggleSelected,
options,
setCustomOptions,
]);
const removeSelectedOption = (0, react_1.useCallback)((option) => {
const isCustomOption = (0, combobox_utils_1.isInList)(option, customOptions);
if (isCustomOption) {
removeCustomOption(option);
}
else {
setSelectedOptions((oldSelectedOptions) => oldSelectedOptions.filter((selectedOption) => selectedOption !== option));
}
onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option.value, false, isCustomOption);
}, [customOptions, onToggleSelected, removeCustomOption]);
const maxSelectedLimit = typeof maxSelected === "object" ? maxSelected.limit : maxSelected;
const isLimitReached = !!maxSelectedLimit && selectedOptions.length >= maxSelectedLimit;
const newHideCaret = isLimitReached || (!isMultiSelect && selectedOptions.length > 0);
// biome-ignore lint/correctness/useExhaustiveDependencies: We explicitly want to run this effect when selectedOptions changes to match the view with the selected options.
(0, react_1.useEffect)(() => {
setHideCaret(newHideCaret);
}, [newHideCaret, selectedOptions, setHideCaret]);
const toggleOption = (0, react_1.useCallback)((option, event) => {
if ((0, combobox_utils_1.isInList)(option.value, selectedOptions)) {
removeSelectedOption(option);
}
else if (isMultiSelect && isLimitReached) {
return;
}
else {
addSelectedOption(option);
}
clearInput(event);
focusInput();
}, [
addSelectedOption,
clearInput,
focusInput,
removeSelectedOption,
selectedOptions,
isLimitReached,
isMultiSelect,
]);
const prevSelectedOptions = (0, hooks_1.usePrevious)(selectedOptions);
const selectedOptionsState = {
addSelectedOption,
isMultiSelect,
removeSelectedOption,
prevSelectedOptions,
selectedOptions,
setSelectedOptions,
toggleOption,
maxSelected: {
limit: maxSelectedLimit,
isLimitReached,
},
};
return (react_1.default.createElement(SelectedOptionsContextProvider, Object.assign({}, selectedOptionsState), children));
};
exports.SelectedOptionsProvider = SelectedOptionsProvider;
//# sourceMappingURL=selectedOptionsContext.js.map