@eml-payments/ui-kit 1.2.1 → 1.2.2
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.
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export interface DialogContainerProps {
|
|
3
|
+
open?: boolean;
|
|
4
|
+
onOpenChange?: (open: boolean) => void;
|
|
3
5
|
triggerElement: React.ReactNode;
|
|
4
6
|
title: string;
|
|
5
7
|
description?: string;
|
|
@@ -18,4 +20,4 @@ export interface DialogContainerProps {
|
|
|
18
20
|
showSubmitButton?: boolean;
|
|
19
21
|
customFooter?: React.ReactNode;
|
|
20
22
|
}
|
|
21
|
-
export declare function DialogContainer({ triggerElement, title, description, children, submitLoader, submitLabel, cancelLabel, backLabel, onSubmit, onCancel, onBack, isSubmitDisabled, fullScreen, showCloseButton, showCancelButton, showSubmitButton, customFooter, }: Readonly<DialogContainerProps>): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare function DialogContainer({ open, onOpenChange, triggerElement, title, description, children, submitLoader, submitLabel, cancelLabel, backLabel, onSubmit, onCancel, onBack, isSubmitDisabled, fullScreen, showCloseButton, showCancelButton, showSubmitButton, customFooter, }: Readonly<DialogContainerProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,9 +4,12 @@ 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', backLabel = 'Back', onSubmit, onCancel, onBack, isSubmitDisabled = false, fullScreen = false, showCloseButton = true, showCancelButton = true, showSubmitButton = true, customFooter, }) {
|
|
7
|
+
export function DialogContainer({ open, onOpenChange, triggerElement, title, description, children, submitLoader = false, submitLabel = 'Submit', cancelLabel = 'Cancel', backLabel = 'Back', onSubmit, onCancel, onBack, isSubmitDisabled = false, fullScreen = false, showCloseButton = true, showCancelButton = true, showSubmitButton = true, customFooter, }) {
|
|
8
8
|
const shouldShowFooter = customFooter || showCancelButton || showSubmitButton;
|
|
9
|
-
|
|
9
|
+
const [localOpen, setLocalOpen] = React.useState(false);
|
|
10
|
+
const effectiveOpen = open !== null && open !== void 0 ? open : localOpen;
|
|
11
|
+
const setEffectiveOpen = onOpenChange !== null && onOpenChange !== void 0 ? onOpenChange : setLocalOpen;
|
|
12
|
+
return (_jsxs(Dialog, { open: effectiveOpen, onOpenChange: setEffectiveOpen, children: [_jsx(DialogTrigger, { asChild: true, children: triggerElement }), _jsxs(DialogContent, { showCloseButton: showCloseButton, className: cn('min-h-screen overflow-auto p-0 flex flex-col w-full sm:max-w-lg md:max-w-xl lg:max-w-2xl', 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-[24px] font-normal', {
|
|
10
13
|
'text-left': fullScreen,
|
|
11
14
|
}), children: title }), showCloseButton && (_jsx(DialogClose, { asChild: true, children: _jsx("button", { className: "hover:cursor-pointer", 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 }) })), onBack && (_jsx(Button, { variant: "secondary", onClick: onBack, children: backLabel })), showSubmitButton && (_jsx(Button, { onClick: onSubmit, disabled: isSubmitDisabled || submitLoader, loading: submitLoader, className: cn('btn', isSubmitDisabled && 'opacity-50 cursor-not-allowed'), children: submitLabel }))] })) }))] })] }));
|
|
12
15
|
}
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { DialogContainer } from './DialogContainer';
|
|
3
3
|
import { Input } from '../Input';
|
|
4
4
|
import { Button } from '../Button';
|
|
5
|
+
import { useState } from 'react';
|
|
5
6
|
const meta = {
|
|
6
7
|
title: 'UIKit/DialogContainer',
|
|
7
8
|
component: DialogContainer,
|
|
@@ -38,3 +39,9 @@ export const WithLoadingState = {
|
|
|
38
39
|
export const WithHiddenButtons = {
|
|
39
40
|
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" }) })),
|
|
40
41
|
};
|
|
42
|
+
export const ControlledOpen = {
|
|
43
|
+
render: () => {
|
|
44
|
+
const [open, setOpen] = useState(false);
|
|
45
|
+
return (_jsxs(DialogContainer, { triggerElement: _jsx(Button, { children: "Open Dialog" }), open: open, onOpenChange: setOpen, title: "Controlled Dialog", customFooter: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: () => alert('Custom Cancel'), children: "Custom Cancel" }), _jsx(Button, { onClick: () => setOpen(false), children: "Custom Submit" })] }), children: [_jsx(Input, { placeholder: "Full Name" }), _jsx(Input, { placeholder: "Email Address", type: "email" })] }));
|
|
46
|
+
},
|
|
47
|
+
};
|