@kadconsulting/dry
Version:
KAD Reusable Component Library
51 lines • 3.54 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
// // CLI Version 1.0.1
// Component Version 1.0.0
import { useState, useRef, useEffect, useCallback, } from 'react';
import classnames from 'classnames';
// import * as Utils from "./DropdownCheckboxGroup.utils.js";
import './DropdownCheckboxGroup.scss';
import { CheckboxGroup, Button, TextInput } from '../index';
import './DropdownCheckboxGroup.scss';
const DropdownCheckboxGroup = ({ options, handleUpdate, buttonText, isLayedOut, className, buttonClassName, buttonWidth, isButtonFullWidth, selectedDefaultValues, }) => {
const [isOpen, setIsOpen] = useState(false);
const [selectedValues, setSelectedValues] = useState(selectedDefaultValues || []);
const [localTextFilter, setLocalTextFilter] = useState('');
const [localOptions, setLocalOptions] = useState(options);
const dropdownRef = useRef(null);
const toggleDropdown = () => setIsOpen(!isOpen);
const handleSelect = useCallback((selectedValues) => {
setSelectedValues(selectedValues); // Directly set the new selected values
handleUpdate(selectedValues); // Propagate the new selected values to the parent component
}, [handleUpdate]);
// This effect handles clicks outside of the dropdown to close it
useEffect(() => {
const handleClickOutside = (event) => {
if (dropdownRef.current &&
!dropdownRef.current.contains(event.target)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, [dropdownRef]);
useEffect(() => {
setSelectedValues(selectedDefaultValues || []);
}, [selectedDefaultValues]);
useEffect(() => {
const filteredOptions = options.filter((option) => {
const newOption = option;
if (localTextFilter === '')
return true;
return newOption?.LabelContent?.toLowerCase()?.includes(localTextFilter?.toLowerCase());
});
setLocalOptions(filteredOptions);
}, [localTextFilter, options]);
return (_jsxs("div", { className: 'dropdownCheckboxGroup', ref: dropdownRef, children: [!isLayedOut && (_jsxs(_Fragment, { children: [_jsxs(Button, { className: classnames(buttonClassName), dropdownButton: true, onClick: toggleDropdown, width: buttonWidth || 'max-content', fullWidth: isButtonFullWidth, children: [buttonText, " (", selectedValues.length, ")"] }), isOpen && (_jsxs(_Fragment, { children: [_jsx(TextInput, { value: localTextFilter, Label: 'Search', onChange: (e) => {
setLocalTextFilter(e.target.value);
} }), _jsx(CheckboxGroup, { hasAll: true, className: 'dropdownCheckboxGroup__checkboxGroupHorizontal', name: buttonText, options: localOptions, selectedValues: selectedValues, onChange: handleSelect })] }))] })), isLayedOut && (_jsxs(_Fragment, { children: [_jsx(TextInput, { Label: 'Search', value: localTextFilter, onChange: (e) => {
setLocalTextFilter(e.target.value);
} }), _jsx(CheckboxGroup, { className: classnames('dropdownCheckboxGroup__checkboxGroupVertical', className), name: buttonText, options: localOptions, selectedValues: selectedValues, onChange: handleSelect, hasAll: true })] }))] }));
};
export default DropdownCheckboxGroup;
//# sourceMappingURL=DropdownCheckboxGroup.js.map