@dossierhq/design
Version:
The design system for Dossier.
33 lines • 2.07 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useRef, useState } from 'react';
import { useKeyHandler } from '../../hooks/useKeyHandler.js';
import { useWindowClick } from '../../hooks/useWindowClick.js';
import { Badge } from '../Badge/Badge.js';
import { Button } from '../Button/Button.js';
import { DropdownDisplay } from '../DropdownDisplay/DropdownDisplay.js';
import { MultipleSelectorStateActions, } from './MultipleSelectorReducer.js';
export function DropdownSelector({ iconLeft, left, up, sneaky, renderItem, state, dispatch, children, }) {
const [active, setActive] = useState(false);
const handleClose = useCallback(() => setActive(false), [setActive]);
const triggerRef = useRef(null);
useWindowClick(triggerRef, handleClose, active);
useKeyHandler(['Escape'], handleClose, active);
return (_jsx(DropdownDisplay, { active: active, up: up, left: left, triggerRef: triggerRef, trigger: _jsxs(Button, { ref: triggerRef, iconLeft: iconLeft, iconRight: sneaky ? undefined : up ? 'chevronUp' : 'chevronDown', color: sneaky ? 'light' : undefined, disabled: state.items.length === 0, onMouseDown: (event) => {
event.preventDefault();
setActive((it) => !it);
}, children: [children, state.selectedIds.length > 0 ? _jsx(Badge, { children: state.selectedIds.length }) : null] }), children: state.items.map((item) => {
return (_jsx(Item, { item: item, state: state, dispatch: dispatch, children: renderItem(item) }, item.id));
}) }));
}
function Item({ item, state, dispatch, children, }) {
const active = state.selectedIds.includes(item.id);
if (item.removable === false) {
return _jsx(DropdownDisplay.ContentItem, { children: children });
}
const handleChange = () => {
dispatch(new MultipleSelectorStateActions.ToggleItem(item.id));
};
return (_jsx(DropdownDisplay.Item, { active: active, onClick: handleChange, children: children }));
}
//# sourceMappingURL=DropdownSelector.js.map