RND-7464: confirm in content kit button (#3488)

Author: BrettJephson

.changeset/seven-mails-stare.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Add confirmation modal to contentkit button

packages/gitbook/src/components/DocumentView/Integration/contentkit.css

@@ -195,3 +195,18 @@
 .contentkit-hstack > .contentkit-divider-large {
     @apply mx-4;
 }
+
+/** Confirmation modal */
+
+.contentkit-modal-confirm {
+    @apply p-4;
+}
+.contentkit-modal-confirm .contentkit-modal-footer {
+    @apply flex gap-2 justify-end;
+}
+.contentkit-button-confirm {
+    @apply w-auto flex-grow-0 flex-shrink-0;
+}
+.contentkit-button-style-danger {
+    @apply bg-danger text-danger hover:bg-danger-hover hover:text-danger-strong contrast-more:bg-tint-subtle;
+}

packages/react-contentkit/src/ElementButton.tsx

@@ -18,41 +18,107 @@ export function ElementButton(
     const clientContext = useContentKitClientContext();
 
     const [loading, setLoading] = React.useState(false);
+    const [confirm, setConfirm] = React.useState<boolean>(false);
 
-    // TODO:
-    // - confirm dialog
+    const wrapLoading = React.useCallback(async <T,>(fn: Promise<T> | (() => Promise<T>)) => {
+        setLoading(true);
+        try {
+            return fn instanceof Promise ? await fn : await fn();
+        } finally {
+            setLoading(false);
+        }
+    }, []);
 
     return (
-        <button
-            title={element.tooltip}
-            className={classNames(
-                'contentkit-button',
-                `contentkit-button-style-${element.style ?? 'secondary'}`
-            )}
-            onClick={(event) => {
-                if (element.disabled || loading) {
-                    return;
-                }
-
-                event.stopPropagation();
-
-                setLoading(true);
-                clientContext.dispatchAction(element.onPress).finally(() => {
-                    setLoading(false);
-                });
-            }}
-        >
-            {loading ? (
-                <Icon icon="spinner" className="contentkit-button-loading" />
-            ) : (
-                <>
-                    {icon}
-                    {element.label ? (
-                        <span className="contentkit-button-label">{element.label}</span>
-                    ) : null}
-                    {trailingIcon}
-                </>
-            )}
-        </button>
+        <>
+            <button
+                type="button"
+                title={element.tooltip}
+                className={classNames(
+                    'contentkit-button',
+                    `contentkit-button-style-${element.style ?? 'secondary'}`
+                )}
+                onClick={(event) => {
+                    if (element.disabled || loading) {
+                        return;
+                    }
+
+                    event.stopPropagation();
+                    event.preventDefault();
+
+                    if (element.confirm && !confirm) {
+                        setConfirm(true);
+                        return;
+                    }
+
+                    wrapLoading(async () => await clientContext.dispatchAction(element.onPress));
+                }}
+            >
+                {loading ? (
+                    <Icon icon="spinner" className="contentkit-button-loading" />
+                ) : (
+                    <>
+                        {icon}
+                        {element.label ? (
+                            <span className="contentkit-button-label">{element.label}</span>
+                        ) : null}
+                        {trailingIcon}
+                    </>
+                )}
+            </button>
+            {element.confirm && confirm ? (
+                <ConfirmDialog
+                    open={confirm}
+                    {...element.confirm}
+                    onConfirm={() => {
+                        setConfirm(false);
+                        wrapLoading(
+                            async () => await clientContext.dispatchAction(element.onPress)
+                        );
+                    }}
+                    onCancel={() => setConfirm(false)}
+                />
+            ) : null}
+        </>
+    );
+}
+
+function ConfirmDialog({ open, onCancel, onConfirm, style, title, text, confirm }: any) {
+    return (
+        <div className="contentkit-modal-backdrop" onClick={onCancel}>
+            <div
+                className={classNames(
+                    'contentkit-modal contentkit-modal-confirm',
+                    open ? 'contentkit-modal-opened' : null
+                )}
+                onClick={(event) => {
+                    event.stopPropagation();
+                }}
+            >
+                <div className="contentkit-modal-header">
+                    {title ? <h1 className="contentkit-modal-title">{title}</h1> : null}
+                    {text ? <div className="contentkit-modal-subtitle">{text}</div> : null}
+                </div>
+                <div className="contentkit-modal-footer">
+                    <button
+                        type="button"
+                        className="contentkit-button contentkit-button-confirm contentkit-button-style-secondary"
+                        onClick={onCancel}
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        className={classNames(
+                            'contentkit-button contentkit-button-confirm',
+                            `contentkit-button-style-${style ?? 'primary'}`
+                        )}
+                        onClick={onConfirm}
+                    >
+                        {confirm ?? 'OK'}
+                    </button>
+                </div>
+            </div>
+        </div>
     );
 }