@kwiz/fluentui 1.0.16 → 1.0.20

package/src/controls/prompt.tsx

@@ -1,97 +1,97 @@
-import { Dialog, DialogActions, DialogBody, DialogContent, DialogModalType, DialogSurface, DialogTitle, DialogTrigger } from '@fluentui/react-components';
-import { DismissRegular } from '@fluentui/react-icons';
-import { isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
-import { useKeyDown } from '../helpers/hooks';
-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;
-    okButtonText?: string;
-    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;
-}
-export const Prompter = React.forwardRef<HTMLDivElement, (IPrompterProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    const disableKeyboardActions = React.useRef(props.disableKeyboardActions);
-    disableKeyboardActions.current = props.disableKeyboardActions;
-
-    let okProps: ButtonEXProps = {
-        ...(props.okButtonProps as any || {}),
-        onClick: () => props.onOK(),
-        title: props.okButtonText || 'yes'
-    };
-    let cancelProps: ButtonEXProps = {
-        ...(props.cancelButtonProps as any || {}),
-        onClick: () => props.onCancel(),
-        title: props.cancelButtonText || 'no'
-    };
-
-    useKeyDown({
-        onEnter: () => !disableKeyboardActions.current && props.onOK(),
-        onEscape: () => !disableKeyboardActions.current && props.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 } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+import { isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
+import React from 'react';
+import { useKWIZFluentContext } from '../helpers/context';
+import { useKeyDown } from '../helpers/hooks';
+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;
+    okButtonText?: string;
+    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;
+}
+export const Prompter = React.forwardRef<HTMLDivElement, (IPrompterProps)>((props, ref) => {
+    const ctx = useKWIZFluentContext();
+    const disableKeyboardActions = React.useRef(props.disableKeyboardActions);
+    disableKeyboardActions.current = props.disableKeyboardActions;
+
+    let okProps: ButtonEXProps = {
+        ...(props.okButtonProps as any || {}),
+        onClick: () => props.onOK(),
+        title: props.okButtonText || 'yes'
+    };
+    let cancelProps: ButtonEXProps = {
+        ...(props.cancelButtonProps as any || {}),
+        onClick: () => props.onCancel(),
+        title: props.cancelButtonText || 'no'
+    };
+
+    useKeyDown({
+        onEnter: () => !disableKeyboardActions.current && props.onOK(),
+        onEscape: () => !disableKeyboardActions.current && props.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/search.tsx

@@ -1,66 +1,66 @@
-import { Input, InputProps, makeStyles } from '@fluentui/react-components';
-import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
-import { debounce, isFunction, isNullOrEmptyString } from '@kwiz/common';
-import React, { useState } from 'react';
-import { GetLogger } from '../_modules/config';
-import { useStateEX } from '../helpers/hooks';
-import { mixins } from '../styles/styles';
-const logger = GetLogger("Search");
-
-const useStyles = makeStyles({
-    main: mixins.main,
-    clickable: mixins.clickable,
-})
-
-interface IProps extends InputProps {
-    main?: boolean;
-    delay?: number;
-    /** if changing the value in the caller - change this prop to reset */
-    resetValue?: string;
-    onChangeDeferred?: (newValue: string) => void;
-    onChangeSync?: (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();
-
-    const [resetKey, setResetKey] = useState(1);
-
-    let delay = props.delay || 1;
-
-    //cannot call debounce every render, since it won't be the same debounced instance...
-    var notifyParent = React.useMemo(() => debounce(v => {
-        logger.log(`Set: ${v}`);
-        props.onChangeDeferred(v);
-    }, delay * 1000), [delay]);
-
-    let [value, setValue] = useStateEX(props.value, {
-        onChange: newValue => {
-            if (isFunction(props.onChangeSync)) props.onChangeSync(newValue as string);
-            if (isFunction(props.onChangeDeferred)) notifyParent(newValue);
-            return newValue;
-        }
-    });
-
-    //once props change, reset this control value to match
-    React.useEffect(() => {
-        setValue(props.resetValue);
-        //todo: bug: setting value does not sync into the text box
-        setResetKey(resetKey + 1)
-    }, [props.resetValue]);
-
-    return (
-        <Input key={resetKey} {...props} value={value} onChange={(e, data) => setValue(data.value)}
-            className={props.main ? cssNames.main : undefined}
-            contentBefore={!isNullOrEmptyString(value) ? undefined : <SearchRegular />}
-            contentAfter={isNullOrEmptyString(value)
-                ? undefined
-                : <DismissRegular className={cssNames.clickable} onClick={() => {
-                    setValue("");
-                    //todo: bug: setting value does not sync into the text box
-                    setResetKey(resetKey + 1)
-                }} />
-            } />
-    );
+import { Input, InputProps, makeStyles } from '@fluentui/react-components';
+import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
+import { debounce, isFunction, isNullOrEmptyString } from '@kwiz/common';
+import React, { useState } from 'react';
+import { GetLogger } from '../_modules/config';
+import { useStateEX } from '../helpers/hooks';
+import { mixins } from '../styles/styles';
+const logger = GetLogger("Search");
+
+const useStyles = makeStyles({
+    main: mixins.main,
+    clickable: mixins.clickable,
+})
+
+interface IProps extends InputProps {
+    main?: boolean;
+    delay?: number;
+    /** if changing the value in the caller - change this prop to reset */
+    resetValue?: string;
+    onChangeDeferred?: (newValue: string) => void;
+    onChangeSync?: (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();
+
+    const [resetKey, setResetKey] = useState(1);
+
+    let delay = props.delay || 1;
+
+    //cannot call debounce every render, since it won't be the same debounced instance...
+    var notifyParent = React.useMemo(() => debounce(v => {
+        logger.log(`Set: ${v}`);
+        props.onChangeDeferred(v);
+    }, delay * 1000), [delay]);
+
+    let [value, setValue] = useStateEX(props.value, {
+        onChange: newValue => {
+            if (isFunction(props.onChangeSync)) props.onChangeSync(newValue as string);
+            if (isFunction(props.onChangeDeferred)) notifyParent(newValue);
+            return newValue;
+        }
+    });
+
+    //once props change, reset this control value to match
+    React.useEffect(() => {
+        setValue(props.resetValue);
+        //todo: bug: setting value does not sync into the text box
+        setResetKey(resetKey + 1)
+    }, [props.resetValue]);
+
+    return (
+        <Input key={resetKey} {...props} value={value} onChange={(e, data) => setValue(data.value)}
+            className={props.main ? cssNames.main : undefined}
+            contentBefore={!isNullOrEmptyString(value) ? undefined : <SearchRegular />}
+            contentAfter={isNullOrEmptyString(value)
+                ? undefined
+                : <DismissRegular className={cssNames.clickable} onClick={() => {
+                    setValue("");
+                    //todo: bug: setting value does not sync into the text box
+                    setResetKey(resetKey + 1)
+                }} />
+            } />
+    );
 }

package/src/controls/section.tsx

@@ -1,52 +1,52 @@
-import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
-import { isFunction, isNotEmptyArray } from '@kwiz/common';
-import React from 'react';
-import { KnownClassNames, mixins } from '../styles/styles';
-
-const useStyles = makeStyles({
-    main: mixins.main,
-    clickable: mixins.clickable,
-    left: {
-        ...mixins.float,
-        float: "left",
-        marginRight: tokens.spacingHorizontalXXL
-    },
-    right: {
-        ...mixins.float,
-        float: "right",
-        marginRight: tokens.spacingHorizontalXXL
-    }
-});
-
-
-export interface ISectionProps {
-    main?: boolean;
-    css?: string[];
-    style?: React.CSSProperties;
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    rootProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-    title?: string;
-    left?: boolean;
-    right?: boolean;
-}
-
-export const Section = React.forwardRef<HTMLDivElement, React.PropsWithChildren<ISectionProps>>((props, ref) => {
-    const cssNames = useStyles();
-    let css: string[] = [KnownClassNames.section];
-    if (props.main) css.push(cssNames.main);
-    if (isFunction(props.onClick))
-        css.push(cssNames.clickable);
-
-    if (props.left) css.push(cssNames.left);
-    else if (props.right) css.push(cssNames.right);
-
-    if (isNotEmptyArray(props.css)) css.push(...props.css);
-
-    return (
-        <div ref={ref} {...(props.rootProps || {})} title={props.title} style={props.style}
-            className={mergeClasses(...css)}
-            onClick={props.onClick}>
-            {props.children}
-        </div>
-    );
+import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
+import { isFunction, isNotEmptyArray } from '@kwiz/common';
+import React from 'react';
+import { KnownClassNames, mixins } from '../styles/styles';
+
+const useStyles = makeStyles({
+    main: mixins.main,
+    clickable: mixins.clickable,
+    left: {
+        ...mixins.float,
+        float: "left",
+        marginRight: tokens.spacingHorizontalXXL
+    },
+    right: {
+        ...mixins.float,
+        float: "right",
+        marginRight: tokens.spacingHorizontalXXL
+    }
+});
+
+
+export interface ISectionProps {
+    main?: boolean;
+    css?: string[];
+    style?: React.CSSProperties;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    rootProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    title?: string;
+    left?: boolean;
+    right?: boolean;
+}
+
+export const Section = React.forwardRef<HTMLDivElement, React.PropsWithChildren<ISectionProps>>((props, ref) => {
+    const cssNames = useStyles();
+    let css: string[] = [KnownClassNames.section];
+    if (props.main) css.push(cssNames.main);
+    if (isFunction(props.onClick))
+        css.push(cssNames.clickable);
+
+    if (props.left) css.push(cssNames.left);
+    else if (props.right) css.push(cssNames.right);
+
+    if (isNotEmptyArray(props.css)) css.push(...props.css);
+
+    return (
+        <div ref={ref} {...(props.rootProps || {})} title={props.title} style={props.style}
+            className={mergeClasses(...css)}
+            onClick={props.onClick}>
+            {props.children}
+        </div>
+    );
 });