@gravity-ui/uikit
Version:
Gravity UI base styling and components
52 lines (51 loc) • 3.21 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useForkRef } from "../../../hooks/index.js";
import { Button } from "../../Button/index.js";
import { Popup } from "../../Popup/index.js";
import { block } from "../../utils/cn.js";
import { DialogPrivateContext } from "../DialogPrivateContext.js";
import "./DialogFooter.css";
const b = block('dialog-footer');
// TODO: Оно точно нужно?
function getButtonView(preset) {
switch (preset) {
case 'default':
return 'action';
case 'success':
return 'action';
case 'danger':
return 'action';
default:
return 'action';
}
}
export function DialogFooter(props) {
const { onClickButtonCancel, onClickButtonApply, loading, textButtonCancel, textButtonApply, propsButtonCancel, propsButtonApply, preset = 'default', children, errorText, showError = false, renderButtons, className, } = props;
const { mobile, initialFocusRef, initialFocusAction, onTooltipEscapeKeyDown } = React.useContext(DialogPrivateContext);
const errorTooltipRef = React.useRef(null);
const apllyBtnRef = useForkRef(errorTooltipRef, initialFocusAction === 'apply' ? initialFocusRef : null);
const cancelBtnRef = useForkRef(initialFocusAction === 'cancel' ? initialFocusRef : null);
const buttonCancel = (_jsx("div", { className: b('button', { action: 'cancel' }), children: _jsx(Button, { ref: cancelBtnRef, view: textButtonApply ? 'flat' : 'normal', size: mobile ? 'xl' : 'l', width: "max", onClick: onClickButtonCancel, disabled: loading, ...propsButtonCancel, children: textButtonCancel }) }));
const handleOpenChange = React.useCallback((isOpen, event, reason) => {
if (!isOpen && event && reason === 'escape-key') {
onTooltipEscapeKeyDown?.(event);
}
}, [onTooltipEscapeKeyDown]);
const buttonApply = (_jsxs("div", { className: b('button', { action: 'apply' }), children: [_jsx(Button, { ref: apllyBtnRef, type: "submit", view: getButtonView(preset), size: mobile ? 'xl' : 'l', width: "max", onClick: onClickButtonApply, loading: loading, className: b('button-apply', { preset }), ...propsButtonApply, children: textButtonApply }), errorText && (_jsx(Popup, { open: showError, onOpenChange: handleOpenChange, anchorRef: errorTooltipRef, placement: "top", disablePortal: true, hasArrow: true, children: _jsx("div", { className: b('error'), children: errorText }) }))] }));
const buttons = (() => {
if (renderButtons) {
return renderButtons(buttonApply, buttonCancel);
}
if (!textButtonCancel && !textButtonApply) {
return null;
}
return (_jsxs(React.Fragment, { children: [textButtonCancel && buttonCancel, textButtonApply && buttonApply] }));
})();
if (!buttons && !children) {
return null;
}
return (_jsxs("div", { className: b({ mobile }, className), children: [children && _jsx("div", { className: b('children'), children: children }), buttons && _jsx("div", { className: b('bts-wrapper'), children: buttons })] }));
}
//# sourceMappingURL=DialogFooter.js.map