UNPKG

@i-novus/ui-core

Version:

Базовые UI компоненты

29 lines (28 loc) 2.4 kB
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 }) })); };