@kwiz/fluentui 1.0.31 → 1.0.33

package/src/helpers/hooks.tsx

@@ -1,4 +1,4 @@
-import { Link, Toast, ToastBody, Toaster, ToastFooter, ToastIntent, ToastTitle, useId, useToastController } from "@fluentui/react-components";
+import { Label, Link, Toast, ToastBody, Toaster, ToastFooter, ToastIntent, ToastTitle, useId, useToastController } from "@fluentui/react-components";
 import { IDictionary, isDebug, isFunction, isNotEmptyArray, isNullOrEmptyString, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
 import { MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
 import { GetLogger } from "../_modules/config";
@@ -190,14 +190,20 @@ export function useIsInPrint() {
     }, useEffectOnlyOnMount);
     return printMode;
 }
+export interface iBlockNav {
+    setMessage: (id: string, message?: string) => void;
+    onNav: (nav: () => void) => void;
+    navPrompt?: JSX.Element;
+
+}
 /** set block message if you want to block nav.
  * - call setMessage to  add a blocker message
  * - call onNav when you have internal navigation (open / close popups)
  * - render the navPrompt control to your page
  * FYI for page unload, most modern browsers won't show your message but a generic one instead. */
-export function useBlockNav() {
+export function useBlockNav(): iBlockNav {
     const [, setBlockNavMessages, blockNavMessagesRef] = useStateEX<IDictionary<string>>({});
-    const [prompt, setPrompt] = useStateEX<IPrompterProps>(null);
+    const [_prompt, setPrompt] = useStateEX<IPrompterProps>(null);
 
     const getMessagesArr = useCallback(() => {
         return Object.keys(blockNavMessagesRef.current).map(id => blockNavMessagesRef.current[id]);
@@ -265,7 +271,7 @@ export function useBlockNav() {
         // getMessages,
         // getMessagesArr,
         onNav,
-        navPrompt: prompt ? <Prompter {...prompt} /> : undefined
+        navPrompt: _prompt ? <Prompter {..._prompt} /> : undefined
     };
 }
 
@@ -287,7 +293,7 @@ export function useKeyDown(options: {
         };
         elm.addEventListener("keydown", handler);
         return () => elm.removeEventListener("keydown", handler);
-    }, [elm]);
+    }, [elm, options.onEnter, options.onEscape, options.onKeyDown]);
 }
 
 
@@ -333,4 +339,58 @@ export function useKWIZFluentContextProvider(options: {
         });
     }, [options.root]);
     return kwizFluentContext;
+}
+
+export interface iAlerts {
+    promptEX: (info: IPrompterProps) => void;
+    confirmEX: (message: string, onOK: () => void, onCancel?: () => void) => void;
+    alertEX: (message: string, onOK: () => void) => void;
+    alertPrompt?: JSX.Element;
+}
+/** set block message if you want to block nav.
+ * - call setMessage to  add a blocker message
+ * - call onNav when you have internal navigation (open / close popups)
+ * - render the navPrompt control to your page
+ * FYI for page unload, most modern browsers won't show your message but a generic one instead. */
+export function useAlerts(): iAlerts {
+    const [_prompt, _setPrompt] = useStateEX<IPrompterProps>(null);
+
+    const promptEX = useCallback((info: IPrompterProps) => {
+        //need to release react to re-render the prompt
+        window.setTimeout(() => {
+            //prompt, if ok - clear messages and nav.
+            _setPrompt({
+                ...info,
+                onCancel: () => {
+                    _setPrompt(null);
+                    if (isFunction(info.onCancel)) info.onCancel();
+                },
+                onOK: () => {
+                    _setPrompt(null);
+                    if (isFunction(info.onOK)) info.onOK();
+                }
+            });
+        }, 1);
+    }, useEffectOnlyOnMount);
+
+    const confirmEX = useCallback((message: string, onOK: () => void, onCancel?: () => void) => {
+        promptEX({
+            children: <Label>{message}</Label>,
+            onCancel,
+            onOK
+        });
+    }, useEffectOnlyOnMount);
+
+    const alertEX = useCallback((message: string, onOK: () => void) => {
+        promptEX({
+            children: <Label>{message}</Label>,
+            hideCancel: true,
+            onOK
+        });
+    }, useEffectOnlyOnMount);
+
+    return {
+        promptEX, confirmEX, alertEX,
+        alertPrompt: _prompt ? <Prompter {..._prompt} /> : undefined
+    };
 }

package/src/index.ts

@@ -12,6 +12,7 @@ export * from './controls/input';
 export * from './controls/kwizoverflow';
 export * from './controls/list';
 export * from './controls/loading';
+export * from './controls/menu';
 export * from './controls/please-wait';
 export * from './controls/prompt';
 export * from './controls/search';
@@ -24,5 +25,5 @@ export { KWIZFluentContext, useKWIZFluentContext } from './helpers/context';
 export type { iKWIZFluentContext } from './helpers/context';
 export * from './helpers/drag-drop/exports';
 export * from './helpers/hooks';
-export { KnownClassNames } from './styles/styles';
+export { KnownClassNames, commonSizes } from './styles/styles';
 

package/src/styles/styles.ts

@@ -89,5 +89,8 @@ export const useCommonStyles = makeStyles({
     },
 })
 
-export const widthMedium = 360;
-//export const widthWide = 520;
+export const commonSizes = {
+    widthMedium: 360,
+    widthWide: 520,
+    extraWidthWide: 820,
+}