@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
33 lines • 1.72 kB
JavaScript
import React from "react";
import { Chips } from "../../../chips/index.js";
import { useRenameCSS } from "../../../theme/Theme.js";
import { useInputContext } from "../Input/Input.context.js";
import { useSelectedOptionsContext } from "./selectedOptionsContext.js";
const Option = ({ option }) => {
const { cn } = useRenameCSS();
const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
const { focusInput, readOnly, inputProps } = useInputContext();
if (!isMultiSelect) {
return (React.createElement("div", { className: cn("navds-combobox__selected-options--no-bg") }, option.label));
}
if (readOnly || inputProps.disabled) {
return (React.createElement(Chips.Toggle, { "data-color": "neutral", variant: "neutral", checkmark: false, as: "div" }, option.label));
}
return (React.createElement(Chips.Removable, { onClick: (event) => {
event.stopPropagation();
removeSelectedOption(option);
focusInput();
} }, option.label));
};
const SelectedOptions = ({ selectedOptions = [], size, children, }) => {
const { cn } = useRenameCSS();
const { value } = useInputContext();
const { isMultiSelect } = useSelectedOptionsContext();
return (React.createElement(Chips, { className: cn("navds-combobox__selected-options"), size: size, "data-type": isMultiSelect ? "multiple" : "single" },
value.length === 0 || (isMultiSelect && selectedOptions.length)
? selectedOptions.map((option, i) => (React.createElement(Option, { key: option.label + i, option: option })))
: [],
children));
};
export default SelectedOptions;
//# sourceMappingURL=SelectedOptions.js.map