@i-novus/ui-core
Version:
Базовые UI компоненты
31 lines (30 loc) • 1.8 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useRef } from 'react';
import classNames from 'classnames';
import { defaultOptions } from '../constants';
import { useScroll } from '../hooks/useScroll';
export const OptionList = ({ options = defaultOptions, selected = defaultOptions, onOptionClick, onScroll, close, multiple, prefix, onMouseLeave, onMouseEnter, value, }) => {
const listContainerRef = useRef(null);
useScroll(listContainerRef, onScroll, value);
const handleOptionClick = (option, event) => {
if (multiple) {
const isOptionSelected = selected.some(item => item.id === option.id);
const newSelectedOptions = isOptionSelected
? selected.filter(item => item.id !== option.id)
: [...selected, option];
onOptionClick(newSelectedOptions, event);
}
else {
onOptionClick([option], event);
close?.();
}
};
return (_jsx("ul", { className: `${prefix}-options`, onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, ref: listContainerRef, children: options.map((option) => {
const { id, label, disabled = false } = option;
const isSelected = selected.some(selectedOption => selectedOption.id === id);
return (_jsx("li", { className: classNames(`${prefix}-options__item`), children: _jsx("button", { type: "button", disabled: disabled, onClick: event => handleOptionClick(option, event), className: classNames(`${prefix}-option`, {
[`${prefix}-option_disabled`]: disabled,
[`${prefix}-option_selected`]: isSelected,
}), children: _jsx("span", { className: `${prefix}-option__label`, children: label }) }) }, id));
}) }));
};