@i-novus/ui-core
Version:
Базовые UI компоненты
29 lines (28 loc) • 2.13 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useMemo, useRef, useState } from 'react';
import { v4 as generateId } from 'uuid';
import classNames from 'classnames';
import { Popover } from '../../../Popover';
import { Button } from '../../../../general/Button';
import { ExpandDownIcon } from '../../../../core';
import { FocusTrap } from '../../../../core/components/focus-trap';
import { ID_PREFIX, SELECTED_OPTION_ID } from './constants';
import { CalendarSelectOptions } from './CalendarSelectOptions';
export const CalendarSelect = ({ prefix, initialValue, onSelectOption, options, expandIconVisibility = true, className, }) => {
const buttonRef = useRef(null);
const [isOpened, setOpened] = useState(false);
const selectOptionsContainerRef = useRef(null);
const selectOptionsContainerId = useMemo(() => `${ID_PREFIX}${generateId()}`, []);
const getContainer = useCallback(() => selectOptionsContainerRef.current, []);
const handleClickOption = useCallback((evt) => {
// @ts-ignore
const option = evt.target.name;
onSelectOption(option);
setOpened(false);
}, [onSelectOption]);
return (_jsxs(_Fragment, { children: [_jsx(Popover, { closeOnEsc: true, returnFocusRef: buttonRef, className: classNames(className, 'calendar-select'), placement: "bottom", open: isOpened, onOpenChange: setOpened, components: {
Content: (_jsx(FocusTrap, { initialFocusableSelector: `#${SELECTED_OPTION_ID}`, children: _jsx(CalendarSelectOptions, { prefix: prefix, onClickOption: handleClickOption, options: options, initialValue: initialValue }) })),
}, getContainer: getContainer, children: _jsxs(Button, { ref: buttonRef, variant: "link-cancel", className: classNames('btn-xs', `${prefix}-calendar__select`, {
[`${prefix}-calendar__select_opened`]: isOpened,
}), children: [initialValue, expandIconVisibility && _jsx(ExpandDownIcon, {})] }) }), _jsx("div", { id: selectOptionsContainerId, ref: selectOptionsContainerRef })] }));
};