@eml-payments/ui-kit 0.1.51 → 0.1.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,6 +12,8 @@ export interface DialogContainerProps {
|
|
|
12
12
|
isSubmitDisabled?: boolean;
|
|
13
13
|
fullScreen?: boolean;
|
|
14
14
|
showCloseButton?: boolean;
|
|
15
|
+
showCancelButton?: boolean;
|
|
16
|
+
showSubmitButton?: boolean;
|
|
15
17
|
customFooter?: React.ReactNode;
|
|
16
18
|
}
|
|
17
|
-
export declare function DialogContainer({ triggerElement, title, description, children, submitLoader, submitLabel, cancelLabel, onSubmit, onCancel, isSubmitDisabled, fullScreen, showCloseButton, customFooter, }: Readonly<DialogContainerProps>): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare function DialogContainer({ triggerElement, title, description, children, submitLoader, submitLabel, cancelLabel, onSubmit, onCancel, isSubmitDisabled, fullScreen, showCloseButton, showCancelButton, showSubmitButton, customFooter, }: Readonly<DialogContainerProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,8 +4,9 @@ import { Dialog, DialogTrigger, DialogContent, DialogClose, DialogHeader, Dialog
|
|
|
4
4
|
import { cn } from '../../lib/utils';
|
|
5
5
|
import { Button } from '../Button';
|
|
6
6
|
import { FiX } from 'react-icons/fi';
|
|
7
|
-
export function DialogContainer({ triggerElement, title, description, children, submitLoader = false, submitLabel = 'Submit', cancelLabel = 'Cancel', onSubmit, onCancel, isSubmitDisabled = false, fullScreen = false, showCloseButton = true, customFooter, }) {
|
|
7
|
+
export function DialogContainer({ triggerElement, title, description, children, submitLoader = false, submitLabel = 'Submit', cancelLabel = 'Cancel', onSubmit, onCancel, isSubmitDisabled = false, fullScreen = false, showCloseButton = true, showCancelButton = true, showSubmitButton = true, customFooter, }) {
|
|
8
|
+
const shouldShowFooter = customFooter || showCancelButton || showSubmitButton;
|
|
8
9
|
return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: triggerElement }), _jsxs(DialogContent, { showCloseButton: showCloseButton, className: cn('min-h-screen overflow-auto p-0 flex flex-col', fullScreen ? 'min-w-full h-screen' : 'min-h-[300px] max-h-[600px]'), children: [_jsx("div", { className: "sticky top-0 z-10 bg-background border-b", children: _jsxs(DialogHeader, { className: cn('p-6 border-b space-y-2'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(DialogTitle, { className: cn('text-(--uikit-textPrimary) text-[34px] font-normal', {
|
|
9
10
|
'text-left': fullScreen,
|
|
10
|
-
}), children: title }), _jsx(DialogClose, { asChild: true, children: _jsx("button", { children: _jsx(FiX, { className: "w-5 h-5 text-(--uikit-actionActive)" }) }) })] }), description && (_jsx(DialogDescription, { className: "text-muted-foreground", children: description }))] }) }), _jsx("div", { className: cn('overflow-y-auto px-6 py-6 space-y-4 flex-1'), children: children }), _jsx("div", { className: "sticky bottom-0 z-10 bg-background border-t p-4 flex justify-end gap-2", children: customFooter ? (_jsx(React.Fragment, { children: customFooter })) : (_jsxs(React.Fragment, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "secondary", onClick: onCancel, children: cancelLabel }) }), _jsx(Button, { onClick: onSubmit, disabled: isSubmitDisabled || submitLoader, loading: submitLoader, className: cn('btn', isSubmitDisabled && 'opacity-50 cursor-not-allowed'), children: submitLabel })] })) })] })] }));
|
|
11
|
+
}), children: title }), _jsx(DialogClose, { asChild: true, children: _jsx("button", { children: _jsx(FiX, { className: "w-5 h-5 text-(--uikit-actionActive)" }) }) })] }), description && (_jsx(DialogDescription, { className: "text-muted-foreground", children: description }))] }) }), _jsx("div", { className: cn('overflow-y-auto px-6 py-6 space-y-4 flex-1'), children: children }), shouldShowFooter && (_jsx("div", { className: "sticky bottom-0 z-10 bg-background border-t p-4 flex justify-end gap-2", children: customFooter ? (_jsx(React.Fragment, { children: customFooter })) : (_jsxs(React.Fragment, { children: [showCancelButton && (_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "secondary", onClick: onCancel, children: cancelLabel }) })), showSubmitButton && (_jsx(Button, { onClick: onSubmit, disabled: isSubmitDisabled || submitLoader, loading: submitLoader, className: cn('btn', isSubmitDisabled && 'opacity-50 cursor-not-allowed'), children: submitLabel }))] })) }))] })] }));
|
|
11
12
|
}
|
|
@@ -32,3 +32,6 @@ export const WithCustomFooter = {
|
|
|
32
32
|
export const WithLoadingState = {
|
|
33
33
|
render: () => (_jsxs(DialogContainer, { triggerElement: _jsx(Button, { children: "Open Dialog" }), title: "With Loading State", submitLoader: true, onSubmit: () => alert('Submitted'), onCancel: () => alert('Canceled'), children: [_jsx(Input, { placeholder: "Full Name" }), _jsx(Input, { placeholder: "Email Address", type: "email" })] })),
|
|
34
34
|
};
|
|
35
|
+
export const WithHiddenButtons = {
|
|
36
|
+
render: () => (_jsx(DialogContainer, { triggerElement: _jsx(Button, { children: "Open Dialog" }), title: "No Footer", showCancelButton: false, showSubmitButton: false, onSubmit: () => alert('Submitted'), children: _jsx(Input, { placeholder: "Full Name" }) })),
|
|
37
|
+
};
|