@kwiz/fluentui 1.0.74 → 1.0.75

package/src/controls/prompt.tsx

@@ -1,122 +1,122 @@
-import { Dialog, DialogActions, DialogBody, DialogContent, DialogModalType, DialogSurface, DialogTitle, DialogTrigger, useId } from '@fluentui/react-components';
-import { DismissRegular } from '@fluentui/react-icons';
-import { isNotEmptyArray, isNullOrEmptyString, noops, PushNoDuplicate, RemoveItemFromArr, stopEvent } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { useKeyDown } from '../helpers/hooks-events';
-import { ButtonEX, ButtonEXProps, ButtonEXSecondary } from './button';
-
-export interface IPrompterProps {
-    hideOk?: boolean;
-    hideCancel?: boolean;
-    showCancelInTitle?: boolean;
-    /** return false to prevent closing the dialog. */
-    onOK?: () => Promise<void> | void;
-    onCancel?: () => void;
-    /** OK */
-    okButtonText?: string;
-    /** Cancel */
-    cancelButtonText?: string;
-    title?: string | JSX.Element;
-    okButtonProps?: Partial<ButtonEXProps>;
-    cancelButtonProps?: Partial<ButtonEXProps>;
-    children?: JSX.Element;
-
-    /** allow to epand the dialog to be wider */
-    maxWidth?: number | string;
-
-    /** additional button actions at the bottom */
-    actions?: JSX.Element[];
-
-    /** dialog title actions */
-    titleActions?: JSX.Element[];
-    /** specify a specific mount node for this dialog */
-    mountNode?: HTMLElement | null | {
-        element?: HTMLElement | null;
-        className?: string;
-    }
-
-    modalType?: DialogModalType;
-    /** do not fire ok/cancel on esc/enter press */
-    disableKeyboardActions?: boolean;
-}
-const dialogsOrder: string[] = [];
-export const Prompter = React.forwardRef<HTMLDivElement, (IPrompterProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    const disableKeyboardActions = React.useRef(props.disableKeyboardActions);
-    disableKeyboardActions.current = props.disableKeyboardActions;
-
-    const myId = useId();
-    React.useEffect(() => {
-        PushNoDuplicate(dialogsOrder, myId);
-        //cleanup
-        return () => RemoveItemFromArr(dialogsOrder, myId);
-    }, [myId]);
-
-    const onOK = props.onOK || noops;
-    const onCancel = props.onCancel || noops;
-
-    let okProps: ButtonEXProps = {
-        ...(props.okButtonProps as any || {}),
-        onClick: () => onOK(),
-        title: props.okButtonText || 'OK'
-    };
-    let cancelProps: ButtonEXProps = {
-        ...(props.cancelButtonProps as any || {}),
-        onClick: () => onCancel(),
-        title: props.cancelButtonText || 'Cancel'
-    };
-
-    useKeyDown({
-        onEnter: (e) => {
-            const topMost = dialogsOrder.indexOf(myId) === dialogsOrder.length - 1;
-            if (topMost && !disableKeyboardActions.current) {
-                stopEvent(e);
-                onOK();
-            }
-        },
-        onEscape: (e) => {
-            const topMost = dialogsOrder.indexOf(myId) === dialogsOrder.length - 1;
-            if (topMost && !disableKeyboardActions.current) {
-                stopEvent(e);
-                onCancel();
-            }
-        }
-    });
-
-    const actions: JSX.Element[] = [];
-    if (!props.hideOk) actions.push(<DialogTrigger key='ok' disableButtonEnhancement>
-        <ButtonEXSecondary {...okProps} />
-    </DialogTrigger>);
-    if (!props.hideCancel) actions.push(<DialogTrigger key='cancel' disableButtonEnhancement>
-        <ButtonEXSecondary {...cancelProps} />
-    </DialogTrigger>);
-    if (isNotEmptyArray(props.actions))
-        actions.push(...props.actions);
-
-    const titleActions: JSX.Element[] = props.titleActions ? [...props.titleActions] : [];
-    if (props.showCancelInTitle)
-        titleActions.push(<DialogTrigger key='cancel' disableButtonEnhancement>
-            <ButtonEX {...cancelProps} icon={<DismissRegular />} />
-        </DialogTrigger>);
-
-
-    return (
-        <Dialog open modalType={props.modalType}>
-            <DialogSurface mountNode={props.mountNode || ctx.mountNode}
-                style={!isNullOrEmptyString(props.maxWidth) ? { maxWidth: props.maxWidth } : undefined}>
-                <DialogBody>
-                    {(!isNullOrEmptyString(props.title) || isNotEmptyArray(titleActions)) && <DialogTitle
-                        action={titleActions}
-                    >{props.title}</DialogTitle>}
-                    <DialogContent ref={ref}>
-                        {props.children}
-                    </DialogContent>
-                    {isNotEmptyArray(actions) && <DialogActions fluid={actions.length > 2}>
-                        {actions}
-                    </DialogActions>}
-                </DialogBody>
-            </DialogSurface>
-        </Dialog>
-    );
+import { Dialog, DialogActions, DialogBody, DialogContent, DialogModalType, DialogSurface, DialogTitle, DialogTrigger, useId } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+import { isNotEmptyArray, isNullOrEmptyString, noops, PushNoDuplicate, RemoveItemFromArr, stopEvent } from '@kwiz/common';
+import React from 'react';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { useKeyDown } from '../helpers/hooks-events';
+import { ButtonEX, ButtonEXProps, ButtonEXSecondary } from './button';
+
+export interface IPrompterProps {
+    hideOk?: boolean;
+    hideCancel?: boolean;
+    showCancelInTitle?: boolean;
+    /** return false to prevent closing the dialog. */
+    onOK?: () => Promise<void> | void;
+    onCancel?: () => void;
+    /** OK */
+    okButtonText?: string;
+    /** Cancel */
+    cancelButtonText?: string;
+    title?: string | JSX.Element;
+    okButtonProps?: Partial<ButtonEXProps>;
+    cancelButtonProps?: Partial<ButtonEXProps>;
+    children?: JSX.Element;
+
+    /** allow to epand the dialog to be wider */
+    maxWidth?: number | string;
+
+    /** additional button actions at the bottom */
+    actions?: JSX.Element[];
+
+    /** dialog title actions */
+    titleActions?: JSX.Element[];
+    /** specify a specific mount node for this dialog */
+    mountNode?: HTMLElement | null | {
+        element?: HTMLElement | null;
+        className?: string;
+    }
+
+    modalType?: DialogModalType;
+    /** do not fire ok/cancel on esc/enter press */
+    disableKeyboardActions?: boolean;
+}
+const dialogsOrder: string[] = [];
+export const Prompter = React.forwardRef<HTMLDivElement, (IPrompterProps)>((props, ref) => {
+    const ctx = useKWIZFluentContext();
+    const disableKeyboardActions = React.useRef(props.disableKeyboardActions);
+    disableKeyboardActions.current = props.disableKeyboardActions;
+
+    const myId = useId();
+    React.useEffect(() => {
+        PushNoDuplicate(dialogsOrder, myId);
+        //cleanup
+        return () => RemoveItemFromArr(dialogsOrder, myId);
+    }, [myId]);
+
+    const onOK = props.onOK || noops;
+    const onCancel = props.onCancel || noops;
+
+    let okProps: ButtonEXProps = {
+        ...(props.okButtonProps as any || {}),
+        onClick: () => onOK(),
+        title: props.okButtonText || 'OK'
+    };
+    let cancelProps: ButtonEXProps = {
+        ...(props.cancelButtonProps as any || {}),
+        onClick: () => onCancel(),
+        title: props.cancelButtonText || 'Cancel'
+    };
+
+    useKeyDown({
+        onEnter: (e) => {
+            const topMost = dialogsOrder.indexOf(myId) === dialogsOrder.length - 1;
+            if (topMost && !disableKeyboardActions.current) {
+                stopEvent(e);
+                onOK();
+            }
+        },
+        onEscape: (e) => {
+            const topMost = dialogsOrder.indexOf(myId) === dialogsOrder.length - 1;
+            if (topMost && !disableKeyboardActions.current) {
+                stopEvent(e);
+                onCancel();
+            }
+        }
+    });
+
+    const actions: JSX.Element[] = [];
+    if (!props.hideOk) actions.push(<DialogTrigger key='ok' disableButtonEnhancement>
+        <ButtonEXSecondary {...okProps} />
+    </DialogTrigger>);
+    if (!props.hideCancel) actions.push(<DialogTrigger key='cancel' disableButtonEnhancement>
+        <ButtonEXSecondary {...cancelProps} />
+    </DialogTrigger>);
+    if (isNotEmptyArray(props.actions))
+        actions.push(...props.actions);
+
+    const titleActions: JSX.Element[] = props.titleActions ? [...props.titleActions] : [];
+    if (props.showCancelInTitle)
+        titleActions.push(<DialogTrigger key='cancel' disableButtonEnhancement>
+            <ButtonEX {...cancelProps} icon={<DismissRegular />} />
+        </DialogTrigger>);
+
+
+    return (
+        <Dialog open modalType={props.modalType}>
+            <DialogSurface mountNode={props.mountNode || ctx.mountNode}
+                style={!isNullOrEmptyString(props.maxWidth) ? { maxWidth: props.maxWidth } : undefined}>
+                <DialogBody>
+                    {(!isNullOrEmptyString(props.title) || isNotEmptyArray(titleActions)) && <DialogTitle
+                        action={titleActions}
+                    >{props.title}</DialogTitle>}
+                    <DialogContent ref={ref}>
+                        {props.children}
+                    </DialogContent>
+                    {isNotEmptyArray(actions) && <DialogActions fluid={actions.length > 2}>
+                        {actions}
+                    </DialogActions>}
+                </DialogBody>
+            </DialogSurface>
+        </Dialog>
+    );
 });

package/src/controls/qrcode.tsx

@@ -1,37 +1,37 @@
-import { makeStyles } from '@fluentui/react-components';
-import { colorToHex } from '@kwiz/common';
-import QRCode from 'qrcode';
-import React, { useEffect, useRef } from 'react';
-
-const useStyles = makeStyles({
-    center: {
-        justifyContent: 'center'
-    },
-})
-
-interface IProps {
-    value: string;
-    color?: string;
-    width?: number;
-    backgroundColor?: string;
-    foregroundColor?: string;
-}
-export const QRCodeEX: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const container = useRef<HTMLCanvasElement>();
-    useEffect(() => {
-        if (container.current) {
-            let dark = props.foregroundColor ? colorToHex(props.foregroundColor) : "#000000ff";
-            let light = props.backgroundColor ? colorToHex(props.backgroundColor) : "#ffffffff";
-            QRCode.toCanvas(container.current, props.value, {
-                color: {
-                    dark,
-                    light
-                },
-                width: props.width
-            });
-        }
-    }, [container]);
-    return (
-        <canvas ref={container} />
-    );
+import { makeStyles } from '@fluentui/react-components';
+import { colorToHex } from '@kwiz/common';
+import QRCode from 'qrcode';
+import React, { useEffect, useRef } from 'react';
+
+const useStyles = makeStyles({
+    center: {
+        justifyContent: 'center'
+    },
+})
+
+interface IProps {
+    value: string;
+    color?: string;
+    width?: number;
+    backgroundColor?: string;
+    foregroundColor?: string;
+}
+export const QRCodeEX: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const container = useRef<HTMLCanvasElement>();
+    useEffect(() => {
+        if (container.current) {
+            let dark = props.foregroundColor ? colorToHex(props.foregroundColor) : "#000000ff";
+            let light = props.backgroundColor ? colorToHex(props.backgroundColor) : "#ffffffff";
+            QRCode.toCanvas(container.current, props.value, {
+                color: {
+                    dark,
+                    light
+                },
+                width: props.width
+            });
+        }
+    }, [container]);
+    return (
+        <canvas ref={container} />
+    );
 }

package/src/controls/search.tsx

@@ -1,62 +1,72 @@
-import { Input, InputProps, makeStyles, mergeClasses } from '@fluentui/react-components';
-import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
-import { debounce, isNullOrEmptyString } from '@kwiz/common';
-import React, { useRef } from 'react';
-import { GetLogger } from '../_modules/config';
-import { mixins } from '../styles/styles';
-const logger = GetLogger("Search");
-
-const useStyles = makeStyles({
-    main: mixins.main,
-    clickable: mixins.clickable,
-    root: {
-    },
-    searchIcon: {
-    },
-})
-
-interface IProps extends Omit<InputProps, "onChange"> {
-    main?: boolean;
-    /** number of seconds to debounce the deferred event */
-    delay?: number;
-    /** if changing the value in the caller - change this prop to reset */
-    resetValue?: string;
-    onChangeDeferred?: (newValue: string) => void;
-    onChange?: (newValue: string) => void;
-}
-
-/** value is set on first load. to change the value after it was first set - change the compoenet's key. */
-export const Search: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const cssNames = useStyles();
-
-    let delay = props.delay || 1;
-
-    let refonChangeDeferred = useRef(props.onChangeDeferred);
-    //keep updating the ref
-    React.useEffect(() => { refonChangeDeferred.current = props.onChangeDeferred; }, [props.onChangeDeferred]);
-
-    //cannot call debounce every render, since it won't be the same debounced instance...
-    var notifyParent = React.useMemo(() => debounce(v => {
-        logger.log(`Set: ${v}`);
-        //Call the latest ref - we don't want to call an old version of this function
-        refonChangeDeferred.current?.(v);
-    }, delay * 1000), [delay]);
-
-    const currentValue = props.value || "";
-
-    return (
-        <Input {...props} value={currentValue} onChange={(e, data) => {
-            props.onChange?.(data.value);
-            notifyParent(data.value);
-        }}
-            className={mergeClasses(cssNames.root, props.main && cssNames.main)}
-            contentBefore={!isNullOrEmptyString(currentValue) ? undefined : <SearchRegular className={cssNames.searchIcon} />}
-            contentAfter={isNullOrEmptyString(currentValue)
-                ? undefined
-                : <DismissRegular className={cssNames.clickable} onClick={() => {
-                    props.onChange?.("");
-                    notifyParent("");
-                }} />
-            } />
-    );
+import { Input, InputProps, makeStyles, mergeClasses } from '@fluentui/react-components';
+import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
+import { debounce, isNullOrEmptyString, isNullOrUndefined } from '@kwiz/common';
+import React, { useEffect, useRef } from 'react';
+import { GetLogger } from '../_modules/config';
+import { useEffectOnlyOnMount, useStateEX } from '../helpers';
+import { mixins } from '../styles/styles';
+const logger = GetLogger("Search");
+
+const useStyles = makeStyles({
+    main: mixins.main,
+    clickable: mixins.clickable,
+    root: {
+    },
+    searchIcon: {
+    },
+})
+
+interface IProps extends Omit<InputProps, "onChange"> {
+    main?: boolean;
+    /** number of seconds to debounce the deferred event */
+    delay?: number;
+    /** if changing the value in the caller - change this prop to reset */
+    resetValue?: string;
+    onChangeDeferred?: (newValue: string) => void;
+    onChange?: (newValue: string) => void;
+}
+
+/** value is set on first load. to change the value after it was first set - change the compoenet's key. */
+export const Search: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const cssNames = useStyles();
+
+    let delay = props.delay || 1;
+
+    let refonChangeDeferred = useRef(props.onChangeDeferred);
+    //keep updating the ref
+    React.useEffect(() => { refonChangeDeferred.current = props.onChangeDeferred; }, [props.onChangeDeferred]);
+
+    //cannot call debounce every render, since it won't be the same debounced instance...
+    var notifyParent = React.useCallback(debounce(v => {
+        logger.log(`Set: ${v}`);
+        //Call the latest ref - we don't want to call an old version of this function
+        refonChangeDeferred.current?.(v);
+    }, delay * 1000), [delay]);
+
+    const [currentValue, setCurrentValue] = useStateEX(props.value || props.defaultValue || "", { skipUpdateIfSame: true });
+    useEffect(() => {
+        if (!isNullOrUndefined(props.value))
+            setCurrentValue(props.value);
+    }, [props.value]);
+
+    var changeValue = React.useCallback((newValue: string) => {
+        newValue = newValue || "";//no null or undefined here
+        setCurrentValue(newValue);//keep our state updated in sync
+        props.onChange?.(newValue);//if parent is using search as managed control, keep it up to date in sync
+        notifyParent(newValue);//trigger a search async
+    }, useEffectOnlyOnMount);
+
+    return (
+        <Input {...props} autoFocus defaultValue={undefined} value={currentValue} onChange={(e, data) => {
+            changeValue(data.value);
+        }}
+            className={mergeClasses(cssNames.root, props.main && cssNames.main)}
+            contentBefore={!isNullOrEmptyString(currentValue) ? undefined : <SearchRegular className={cssNames.searchIcon} />}
+            contentAfter={isNullOrEmptyString(currentValue)
+                ? undefined
+                : <DismissRegular className={cssNames.clickable} onClick={() => {
+                    changeValue("");
+                }} />
+            } />
+    );
 }