@i-novus/ui-core
Version:
Базовые UI компоненты
29 lines (28 loc) • 2.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState } from 'react';
import classNames from 'classnames';
import { CloseIcon, useConfigProvider } from '../core';
import { Popover } from '../data-display/Popover';
import { Icon } from '../data-display/Icon';
import { Button } from './Button';
const DEFAULT_OFFSET = 7;
const TitleRow = ({ title, description, close, rowClassName }) => {
if (!title && !description) {
return null;
}
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
_jsxs("div", { className: rowClassName, onClick: (e) => { e.stopPropagation(); }, children: [_jsxs("section", { className: "content", children: [title && _jsx("span", { className: "title", children: title }), description && _jsx("span", { className: "description", children: description })] }), _jsx("button", { type: 'button', "aria-label": 'close', onClick: close, children: _jsx(CloseIcon, {}) })] }));
};
export const DropdownButton = ({ visible = true, placement = 'bottom-start', showToggleIcon = true, prefix, children, content, className, style, popoverTitle, popoverDescription, titleRowClassName, variant = 'link', popoverProps, onBlur, ...rest }) => {
const { getPrefix } = useConfigProvider();
const prefixCls = getPrefix(prefix);
const [open, setOpen] = useState(false);
const close = useCallback(() => { setOpen(false); }, []);
if (!visible) {
return null;
}
return (_jsx(Popover, { offset: DEFAULT_OFFSET, closeOnEsc: true, ...popoverProps, open: open, onOpenChange: setOpen, placement: placement, prefix: prefix, components: {
Content: (_jsxs(Popover.Content, { onClick: close, className: `${prefixCls}-dropdown-button__popover`, style: style, children: [_jsx(TitleRow, { title: popoverTitle, description: popoverDescription, close: close, rowClassName: titleRowClassName }), content] })),
}, children: _jsx(Button, { iconPosition: 'right', ...rest, prefix: prefix, variant: variant, className: classNames(`${prefixCls}-dropdown-button`, `${prefixCls}-dropdown-button_${variant}`, className), icon: (_jsx(Icon, { className: classNames(`${prefixCls}-dropdown-button__icon`, open && `${prefixCls}-dropdown-button__icon_open`), icon: "common-expand-more", visible: showToggleIcon })), children: children }) }));
};