@linzjs/windows 1.1.2 → 1.2.0

package/package.json

@@ -12,7 +12,7 @@
     "panel",
     "popout"
   ],
-  "version": "1.1.2",
+  "version": "1.2.0",
   "peerDependencies": {
     "@linzjs/lui": "^17",
     "lodash-es": ">=4",

package/src/modal/PrefabModal.tsx

@@ -1,16 +1,26 @@
 import { Modal } from "./Modal";
 import { ModalCallback } from "./ModalContext";
 import { useShowModal } from "./useShowModal";
+import { isEmpty } from "lodash-es";
 import { ReactElement } from "react";
 
 import { LuiAlertModalButtons, LuiButton, LuiIcon } from "@linzjs/lui";
+import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
 import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
 
 export type WarningLevel = "success" | "info" | "warning" | "error";
 
-export interface PrefabModalProps extends ModalCallback<boolean> {
+export interface PrefabButton<RT> {
+  default?: boolean;
+  level?: LuiButtonProps["level"];
+  title: string;
+  value: RT;
+}
+
+export interface PrefabModalProps extends ModalCallback<string | null> {
   level?: WarningLevel;
   children: ReactElement;
+  buttons?: PrefabButton<any>[];
 }
 export const getIconForLevel = (level: "success" | "info" | "warning" | "error"): IconName => {
   switch (level) {
@@ -25,20 +35,44 @@ export const getIconForLevel = (level: "success" | "info" | "warning" | "error")
   }
 };
 
-export const PrefabModal = ({ level = "warning", children, resolve }: PrefabModalProps) => {
+export const PrefabModal = ({ level = "warning", children, resolve, ...props }: PrefabModalProps) => {
   const icon = getIconForLevel(level);
+  const buttons: PrefabButton<any>[] = props.buttons ?? [];
+  if (isEmpty(buttons)) {
+    if (level === "warning") {
+      buttons.push({
+        title: "Cancel",
+        value: null,
+      });
+    }
+    buttons.push({
+      title: "Continue",
+      value: true,
+    });
+  }
+
+  buttons.forEach((b, i) => {
+    if (!b.level) {
+      b.level = i === buttons.length - 1 ? "primary" : "secondary";
+    }
+  });
+
   return (
     <Modal>
       <div className={`lui-modal lui-box-shadow lui-modal-${level}`} style={{ minWidth: 400 }}>
         <LuiIcon name={icon} alt={"warning"} size={"lg"} className={"lui-msg-status-icon"} />
         {children}
         <LuiAlertModalButtons>
-          {level === "warning" && (
-            <LuiButton level="secondary" onClick={() => resolve(false)} buttonProps={{ "data-autofocus": true }}>
-              Cancel
+          {buttons.map((pf, i) => (
+            <LuiButton
+              key={i}
+              level={pf.level}
+              onClick={() => resolve(pf.value === undefined ? pf.title : pf.value)}
+              buttonProps={pf.default ? { "data-autofocus": true } : undefined}
+            >
+              {pf.title}
             </LuiButton>
-          )}
-          <LuiButton onClick={() => resolve(true)}>Continue</LuiButton>
+          ))}
         </LuiAlertModalButtons>
       </div>
     </Modal>
@@ -49,17 +83,21 @@ export const usePrefabModal = () => {
   const { showModal, modalOwnerRef } = useShowModal();
   return {
     modalOwnerRef,
-    showPrefabModal: (level: WarningLevel, title: ReactElement | string, content: ReactElement | string) => {
-      const children = (
-        <>
-          {typeof title === "string" ? <h2>{title}</h2> : title}
-          {typeof content === "string" ? <p>{content}</p> : content}
-        </>
-      );
-      return showModal(PrefabModal, {
+    showPrefabModal: <RT extends any = boolean>(
+      level: WarningLevel,
+      title: ReactElement | string,
+      content: ReactElement | string,
+      buttons?: PrefabButton<RT>[],
+    ) =>
+      showModal(PrefabModal, {
         level,
-        children,
-      });
-    },
+        children: (
+          <>
+            {typeof title === "string" ? <h2>{title}</h2> : title}
+            {typeof content === "string" ? <p>{content}</p> : content}
+          </>
+        ),
+        buttons,
+      }) as Promise<RT>,
   };
 };

package/src/stories/modal/PrefabModal.tsx

@@ -20,6 +20,7 @@ export const PrefabModalUsage = () => {
   // Remember to add the modalOwnerRef!
   return (
     <div ref={modalOwnerRef} style={{ display: "flex", gap: 10 }}>
+      {/* Warning */}
       <button
         onClick={async () =>
           alert(
@@ -34,15 +35,31 @@ export const PrefabModalUsage = () => {
       >
         Warning Prefab-Modal
       </button>
+      {/* Info */}
       <button onClick={() => showPrefabModal("info", "You are a fantastic person", "Keep it up!")}>
         Info Prefab-Modal
       </button>
+      {/* Error */}
       <button onClick={() => showPrefabModal("error", "Something is not right", "Maybe stop doing that")}>
         Error Prefab-Modal
       </button>
+      {/* Success */}
       <button onClick={() => showPrefabModal("success", "You are a success", "Keep succeeding!")}>
         Success Prefab-Modal
       </button>
+      {/* Custom */}
+      <button
+        onClick={async () => {
+          const result = await showPrefabModal("success", "Custom buttons", <b>Custom buttons are customary!</b>, [
+            { value: null, title: "Nope" },
+            { value: "barple", title: "Barple" },
+            { value: "floople", title: "Floople", default: true },
+          ]);
+          alert(result);
+        }}
+      >
+        Custom buttons
+      </button>
     </div>
   );
 };