@kwiz/fluentui 1.0.15 → 1.0.19

package/src/controls/field-editor.tsx

@@ -1,41 +1,41 @@
-import { Field, mergeClasses, Textarea } from '@fluentui/react-components';
-import { isNullOrUndefined } from '@kwiz/common';
-import React from 'react';
-import { GetLogger } from '../_modules/config';
-import { InputEx } from './input';
-
-const logger = GetLogger('FieldEditor');
-
-interface IProps {
-    required?: boolean;
-    error?: string;
-    value: string;
-    onChange: (newValue: string) => void;
-    css: string[];
-    label: string;
-    description?: string;
-    type?: "text" | "multiline"
-}
-export const FieldEditor: React.FunctionComponent<IProps> = (props) => {
-    if (isNullOrUndefined(props.value)) {
-        logger.error(`${props.label}: value should not be null`);
-    }
-    return (
-        <Field required={props.required}
-            validationMessage={props.error || props.description}
-            validationState={props.error ? "error" : "none"}>
-            {props.type === "multiline"
-                ? <Textarea className={props.css && mergeClasses(...props.css)}
-                    required={props.required}
-                    placeholder={props.label}
-                    value={props.value || ""}
-                    onChange={(e, data) => props.onChange(data.value)}
-                />
-                : <InputEx className={props.css && mergeClasses(...props.css)}
-                    required={props.required}
-                    placeholder={props.label}
-                    value={props.value || ""}
-                    onChange={(e, data) => props.onChange(data.value)} />}
-        </Field>
-    );
+import { Field, mergeClasses, Textarea } from '@fluentui/react-components';
+import { isNullOrUndefined } from '@kwiz/common';
+import React from 'react';
+import { GetLogger } from '../_modules/config';
+import { InputEx } from './input';
+
+const logger = GetLogger('FieldEditor');
+
+interface IProps {
+    required?: boolean;
+    error?: string;
+    value: string;
+    onChange: (newValue: string) => void;
+    css: string[];
+    label: string;
+    description?: string;
+    type?: "text" | "multiline"
+}
+export const FieldEditor: React.FunctionComponent<IProps> = (props) => {
+    if (isNullOrUndefined(props.value)) {
+        logger.error(`${props.label}: value should not be null`);
+    }
+    return (
+        <Field required={props.required}
+            validationMessage={props.error || props.description}
+            validationState={props.error ? "error" : "none"}>
+            {props.type === "multiline"
+                ? <Textarea className={props.css && mergeClasses(...props.css)}
+                    required={props.required}
+                    placeholder={props.label}
+                    value={props.value || ""}
+                    onChange={(e, data) => props.onChange(data.value)}
+                />
+                : <InputEx className={props.css && mergeClasses(...props.css)}
+                    required={props.required}
+                    placeholder={props.label}
+                    value={props.value || ""}
+                    onChange={(e, data) => props.onChange(data.value)} />}
+        </Field>
+    );
 }

package/src/controls/file-upload.tsx

@@ -1,68 +1,68 @@
-import { ButtonProps } from "@fluentui/react-components";
-import { isFunction, isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
-import * as React from "react";
-import { ButtonEX, CompoundButtonEXSecondary } from "./button";
-
-interface iProps {
-    showTitleWithIcon?: boolean;
-    title?: string;
-    /** Passing this will turn the button into a compound button */
-    secondaryContent?: string;
-    limitFileTypes?: string[];
-    allowMultiple?: boolean;
-    icon?: JSX.Element;
-    onChange?: (newFile: File | FileList) => void;
-    /** only works for single file, reads it as base64 */
-    asBase64?: (base64: string) => void;
-    buttonProps?: ButtonProps;
-    disabled?: boolean;
-}
-
-export const FileUpload = React.forwardRef<HTMLButtonElement, (iProps)>((props, ref) => {
-    const hiddenFileInput = React.useRef(null);
-    const isMulti = props.allowMultiple === true;
-    return <>
-        {isNullOrEmptyString(props.secondaryContent)
-            ? <ButtonEX ref={ref} {...(props.buttonProps || {})} icon={props.icon} showTitleWithIcon={props.showTitleWithIcon} onClick={() => {
-                hiddenFileInput.current.value = "";
-                hiddenFileInput.current.click();
-            }} title={props.title}
-                disabled={props.disabled}
-            />
-            : <CompoundButtonEXSecondary ref={ref} {...(props.buttonProps || {})} icon={props.icon}
-                secondaryContent={props.secondaryContent}
-                onClick={() => {
-                    hiddenFileInput.current.value = "";
-                    hiddenFileInput.current.click();
-                }} title={props.title}
-                disabled={props.disabled}
-            />}
-        <input type="file" ref={hiddenFileInput} style={{ display: "none" }} multiple={isMulti}
-            accept={isNotEmptyArray(props.limitFileTypes) ? props.limitFileTypes.map(ft => `.${ft}`).join() : undefined}
-            onChange={(e) => {
-                if (e.target.files && e.target.files.length > 0) {
-                    if (isMulti) {
-                        if (isFunction(props.onChange)) {
-                            props.onChange(e.target.files);
-                        }
-                    }
-                    else {
-                        const fileUploaded = e.target.files && e.target.files[0];
-                        if (isFunction(props.onChange)) {
-                            props.onChange(fileUploaded);
-                        }
-                        if (isFunction(props.asBase64) && fileUploaded) {
-                            const reader = new FileReader();
-                            reader.onloadend = () => {
-                                console.log(reader.result);
-                                if (!isNullOrEmptyString(reader.result))
-                                    props.asBase64(reader.result as string);
-                            };
-                            reader.readAsDataURL(fileUploaded);
-                        }
-                    }
-                }
-            }}
-        />
-    </>;
+import { ButtonProps } from "@fluentui/react-components";
+import { isFunction, isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
+import * as React from "react";
+import { ButtonEX, CompoundButtonEXSecondary } from "./button";
+
+interface iProps {
+    showTitleWithIcon?: boolean;
+    title?: string;
+    /** Passing this will turn the button into a compound button */
+    secondaryContent?: string;
+    limitFileTypes?: string[];
+    allowMultiple?: boolean;
+    icon?: JSX.Element;
+    onChange?: (newFile: File | FileList) => void;
+    /** only works for single file, reads it as base64 */
+    asBase64?: (base64: string) => void;
+    buttonProps?: ButtonProps;
+    disabled?: boolean;
+}
+
+export const FileUpload = React.forwardRef<HTMLButtonElement, (iProps)>((props, ref) => {
+    const hiddenFileInput = React.useRef(null);
+    const isMulti = props.allowMultiple === true;
+    return <>
+        {isNullOrEmptyString(props.secondaryContent)
+            ? <ButtonEX ref={ref} {...(props.buttonProps || {})} icon={props.icon} showTitleWithIcon={props.showTitleWithIcon} onClick={() => {
+                hiddenFileInput.current.value = "";
+                hiddenFileInput.current.click();
+            }} title={props.title}
+                disabled={props.disabled}
+            />
+            : <CompoundButtonEXSecondary ref={ref} {...(props.buttonProps || {})} icon={props.icon}
+                secondaryContent={props.secondaryContent}
+                onClick={() => {
+                    hiddenFileInput.current.value = "";
+                    hiddenFileInput.current.click();
+                }} title={props.title}
+                disabled={props.disabled}
+            />}
+        <input type="file" ref={hiddenFileInput} style={{ display: "none" }} multiple={isMulti}
+            accept={isNotEmptyArray(props.limitFileTypes) ? props.limitFileTypes.map(ft => `.${ft}`).join() : undefined}
+            onChange={(e) => {
+                if (e.target.files && e.target.files.length > 0) {
+                    if (isMulti) {
+                        if (isFunction(props.onChange)) {
+                            props.onChange(e.target.files);
+                        }
+                    }
+                    else {
+                        const fileUploaded = e.target.files && e.target.files[0];
+                        if (isFunction(props.onChange)) {
+                            props.onChange(fileUploaded);
+                        }
+                        if (isFunction(props.asBase64) && fileUploaded) {
+                            const reader = new FileReader();
+                            reader.onloadend = () => {
+                                console.log(reader.result);
+                                if (!isNullOrEmptyString(reader.result))
+                                    props.asBase64(reader.result as string);
+                            };
+                            reader.readAsDataURL(fileUploaded);
+                        }
+                    }
+                }
+            }}
+        />
+    </>;
 });

package/src/controls/horizontal.tsx

@@ -1,35 +1,35 @@
-import { makeStyles } from '@fluentui/react-components';
-import { isNotEmptyArray } from '@kwiz/common';
-import React from 'react';
-import { KnownClassNames, mixins } from '../styles/styles';
-import { ISectionProps, Section } from './section';
-
-const useStyles = makeStyles({
-    horizontal: {
-        ...mixins.flex,
-        flexDirection: 'row'
-    },
-    wrap: mixins.wrap,
-    nogap: mixins.nogap
-})
-
-interface IProps extends ISectionProps {
-    wrap?: boolean;
-    nogap?: boolean;
-}
-export const Horizontal: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const cssNames = useStyles();
-    let css: string[] = [KnownClassNames.horizontal];
-
-    css.push(cssNames.horizontal);
-    if (props.wrap)
-        css.push(cssNames.wrap);
-    if (props.nogap)
-        css.push(cssNames.nogap);
-
-    if (isNotEmptyArray(props.css)) css.push(...props.css);
-
-    return (
-        <Section {...props} css={css} />
-    );
+import { makeStyles } from '@fluentui/react-components';
+import { isNotEmptyArray } from '@kwiz/common';
+import React from 'react';
+import { KnownClassNames, mixins } from '../styles/styles';
+import { ISectionProps, Section } from './section';
+
+const useStyles = makeStyles({
+    horizontal: {
+        ...mixins.flex,
+        flexDirection: 'row'
+    },
+    wrap: mixins.wrap,
+    nogap: mixins.nogap
+})
+
+interface IProps extends ISectionProps {
+    wrap?: boolean;
+    nogap?: boolean;
+}
+export const Horizontal: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const cssNames = useStyles();
+    let css: string[] = [KnownClassNames.horizontal];
+
+    css.push(cssNames.horizontal);
+    if (props.wrap)
+        css.push(cssNames.wrap);
+    if (props.nogap)
+        css.push(cssNames.nogap);
+
+    if (isNotEmptyArray(props.css)) css.push(...props.css);
+
+    return (
+        <Section {...props} css={css} />
+    );
 }

package/src/controls/input.tsx

@@ -1,61 +1,61 @@
-import { GriffelStyle, Input, InputProps, makeStyles, mergeClasses, Textarea, TextareaProps } from '@fluentui/react-components';
-import { isFunction } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
-
-
-interface IProps extends InputProps {
-    onOK?: () => void;
-    onCancel?: () => void;
-}
-export const InputEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const ctx = useKWIZFluentContext();
-    return (
-        <Input appearance={ctx.inputAppearance} {...props}
-            onKeyDown={isFunction(props.onOK) || isFunction(props.onCancel)
-                ? e => {
-                    if (isFunction(props.onOK) && e.key === "Enter") props.onOK();
-                    else if (isFunction(props.onCancel) && e.key === "Escape") props.onCancel();
-                }
-                : undefined
-            }
-        />
-    );
-}
-
-const fullSize: GriffelStyle = {
-    width: '100% !important',
-    maxHeight: '100% !important'
-};
-const useStyles = makeStyles({
-    fullSizeTextArea: {
-        ...fullSize,
-        ['& > textarea']: fullSize
-    },
-})
-
-interface IPropsTextArea extends TextareaProps {
-    fullSize?: boolean;
-    growNoShrink?: boolean;
-}
-export const TextAreaEx: React.FunctionComponent<React.PropsWithChildren<IPropsTextArea>> = (props) => {
-    const cssNames = useStyles();
-    let css: string[] = [];
-
-    if (props.fullSize) css.push(cssNames.fullSizeTextArea);
-    const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
-    const recalcHeight = React.useCallback(() => {
-        if (textAreaRef.current && props.growNoShrink) {
-            if (textAreaRef.current.scrollHeight > textAreaRef.current.clientHeight)
-                textAreaRef.current.style.minHeight = textAreaRef.current.scrollHeight + 'px';
-        }
-    }, [textAreaRef]);
-
-    let style: React.CSSProperties = { height: '100%', ...props.style };
-    return (
-        <Textarea ref={textAreaRef} className={mergeClasses(...css)} {...props} style={style} onChange={(e, d) => {
-            if (props.onChange) props.onChange(e, d);
-            recalcHeight();
-        }} />
-    );
+import { GriffelStyle, Input, InputProps, makeStyles, mergeClasses, Textarea, TextareaProps } from '@fluentui/react-components';
+import { isFunction } from '@kwiz/common';
+import React from 'react';
+import { useKWIZFluentContext } from '../helpers/context';
+
+
+interface IProps extends InputProps {
+    onOK?: () => void;
+    onCancel?: () => void;
+}
+export const InputEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const ctx = useKWIZFluentContext();
+    return (
+        <Input appearance={ctx.inputAppearance} {...props}
+            onKeyDown={isFunction(props.onOK) || isFunction(props.onCancel)
+                ? e => {
+                    if (isFunction(props.onOK) && e.key === "Enter") props.onOK();
+                    else if (isFunction(props.onCancel) && e.key === "Escape") props.onCancel();
+                }
+                : undefined
+            }
+        />
+    );
+}
+
+const fullSize: GriffelStyle = {
+    width: '100% !important',
+    maxHeight: '100% !important'
+};
+const useStyles = makeStyles({
+    fullSizeTextArea: {
+        ...fullSize,
+        ['& > textarea']: fullSize
+    },
+})
+
+interface IPropsTextArea extends TextareaProps {
+    fullSize?: boolean;
+    growNoShrink?: boolean;
+}
+export const TextAreaEx: React.FunctionComponent<React.PropsWithChildren<IPropsTextArea>> = (props) => {
+    const cssNames = useStyles();
+    let css: string[] = [];
+
+    if (props.fullSize) css.push(cssNames.fullSizeTextArea);
+    const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
+    const recalcHeight = React.useCallback(() => {
+        if (textAreaRef.current && props.growNoShrink) {
+            if (textAreaRef.current.scrollHeight > textAreaRef.current.clientHeight)
+                textAreaRef.current.style.minHeight = textAreaRef.current.scrollHeight + 'px';
+        }
+    }, [textAreaRef]);
+
+    let style: React.CSSProperties = { height: '100%', ...props.style };
+    return (
+        <Textarea ref={textAreaRef} className={mergeClasses(...css)} {...props} style={style} onChange={(e, d) => {
+            if (props.onChange) props.onChange(e, d);
+            recalcHeight();
+        }} />
+    );
 }

package/src/controls/kwizoverflow.tsx

@@ -1,103 +1,104 @@
-import {
-    Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Overflow, OverflowItem,
-    useIsOverflowItemVisible, useOverflowMenu
-} from "@fluentui/react-components";
-import { isNumber } from '@kwiz/common';
-import { MoreHorizontalFilled } from "@fluentui/react-icons";
-
-interface IProps<ItemType> {
-    items: ItemType[];
-    getKey: (item: ItemType, index: number) => string;
-    getPriority?: (item: ItemType, index: number) => number;
-    renderItem: (item: ItemType, index: number, overflow?: boolean) => JSX.Element;
-    groupWrapper?: (children: React.ReactNode) => JSX.Element;
-    menuRef?: React.RefObject<HTMLButtonElement>;
-    menuWrapper?: (children: React.ReactNode) => JSX.Element;
-    menuTrigger?: (ref: React.RefObject<HTMLButtonElement>, overflowCount: number) => JSX.Element;
-    className?: string;
-}
-const OverflowMenu = <ItemType,>(props: IProps<ItemType>) => {
-    const { ref, isOverflowing, overflowCount } =
-        useOverflowMenu<HTMLButtonElement>();
-
-    if (!isOverflowing) {
-        return null;
-    }
-
-    let menu = <Menu>
-        <MenuTrigger disableButtonEnhancement>
-            {props.menuTrigger
-                ? props.menuTrigger(props.menuRef || ref, overflowCount)
-                : <MenuButton
-                    icon={<MoreHorizontalFilled/>}
-                    ref={props.menuRef || ref}
-                    aria-label="More items"
-                    appearance="subtle"
-                />}
-        </MenuTrigger>
-        <MenuPopover>
-            <MenuList>
-                {props.items.map((item, index) => (
-                    <OverflowMenuItem key={props.getKey(item, index)} {...props} item={item} index={index} />
-                ))}
-            </MenuList>
-        </MenuPopover>
-    </Menu>;
-
-    return (
-        props.menuWrapper
-            ? props.menuWrapper(menu)
-            : menu
-    );
-}
-
-const OverflowMenuItem = <ItemType,>(props: IProps<ItemType> & { item: ItemType, index: number }) => {
-    const isVisible = useIsOverflowItemVisible(props.getKey(props.item, props.index));
-
-    if (isVisible) {
-        return null;
-    }
-
-    return (
-        <MenuItem key={props.getKey(props.item, props.index)}>
-            {props.renderItem(props.item, props.index, true)}
-        </MenuItem>
-    );
-};
-export const KWIZOverflow = <ItemType,>(props: IProps<ItemType>) => {
-    let content: JSX.Element[] = [];
-    let addMenu = () => {
-        if (menuIndex >= 0)
-            content.splice(menuIndex, 0, <OverflowMenu key="overflow_menu" {...props} />);
-        else
-            content.push(<OverflowMenu key="overflow_menu" {...props} />);
-    };
-
-    let menuIndex = -1;
-
-    props.items.forEach((item, index) => {
-        //add the menu before the first item with priority
-        let priority = props.getPriority ? props.getPriority(item, index) : undefined;
-        if (isNumber(priority) && priority > 0)
-            menuIndex = index;
-
-        content.push(<OverflowItem key={props.getKey(item, index)} id={props.getKey(item, index)}
-            priority={priority}>
-            {props.renderItem(item, index)}
-        </OverflowItem>);
-    });
-
-    addMenu();
-
-    return (
-        <Overflow minimumVisible={2} padding={60} key={`overflow_${props.items.length}`}>
-            <div style={{ overflow: "hidden" }} className={props.className}>
-                {
-                    props.groupWrapper
-                        ? props.groupWrapper(content)
-                        : content
-                }
-            </div>
-        </Overflow>
-    )
+import {
+    Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Overflow, OverflowItem,
+    useIsOverflowItemVisible, useOverflowMenu
+} from "@fluentui/react-components";
+import { MoreHorizontalFilled } from "@fluentui/react-icons";
+import { isNumber } from '@kwiz/common';
+
+interface IProps<ItemType> {
+    /** you cannot have a menu with trigger in overflow items. put those in groupWrapper controls before/after rendering children. */
+    items: ItemType[];
+    getKey: (item: ItemType, index: number) => string;
+    getPriority?: (item: ItemType, index: number) => number;
+    renderItem: (item: ItemType, index: number, overflow?: boolean) => JSX.Element;
+    groupWrapper?: (children: React.ReactNode) => JSX.Element;
+    menuRef?: React.RefObject<HTMLButtonElement>;
+    menuWrapper?: (children: React.ReactNode) => JSX.Element;
+    menuTrigger?: (ref: React.RefObject<HTMLButtonElement>, overflowCount: number) => JSX.Element;
+    className?: string;
+}
+const OverflowMenu = <ItemType,>(props: IProps<ItemType>) => {
+    const { ref, isOverflowing, overflowCount } =
+        useOverflowMenu<HTMLButtonElement>();
+
+    if (!isOverflowing) {
+        return null;
+    }
+
+    let menu = <Menu>
+        <MenuTrigger disableButtonEnhancement>
+            {props.menuTrigger
+                ? props.menuTrigger(props.menuRef || ref, overflowCount)
+                : <MenuButton
+                    icon={<MoreHorizontalFilled/>}
+                    ref={props.menuRef || ref}
+                    aria-label="More items"
+                    appearance="subtle"
+                />}
+        </MenuTrigger>
+        <MenuPopover>
+            <MenuList>
+                {props.items.map((item, index) => (
+                    <OverflowMenuItem key={props.getKey(item, index)} {...props} item={item} index={index} />
+                ))}
+            </MenuList>
+        </MenuPopover>
+    </Menu>;
+
+    return (
+        props.menuWrapper
+            ? props.menuWrapper(menu)
+            : menu
+    );
+}
+
+const OverflowMenuItem = <ItemType,>(props: IProps<ItemType> & { item: ItemType, index: number }) => {
+    const isVisible = useIsOverflowItemVisible(props.getKey(props.item, props.index));
+
+    if (isVisible) {
+        return null;
+    }
+
+    return (
+        <MenuItem key={props.getKey(props.item, props.index)}>
+            {props.renderItem(props.item, props.index, true)}
+        </MenuItem>
+    );
+};
+export const KWIZOverflow = <ItemType,>(props: IProps<ItemType>) => {
+    let content: JSX.Element[] = [];
+    let addMenu = () => {
+        if (menuIndex >= 0)
+            content.splice(menuIndex, 0, <OverflowMenu key="overflow_menu" {...props} />);
+        else
+            content.push(<OverflowMenu key="overflow_menu" {...props} />);
+    };
+
+    let menuIndex = -1;
+
+    props.items.forEach((item, index) => {
+        //add the menu before the first item with priority
+        let priority = props.getPriority ? props.getPriority(item, index) : undefined;
+        if (isNumber(priority) && priority > 0)
+            menuIndex = index;
+
+        content.push(<OverflowItem key={props.getKey(item, index)} id={props.getKey(item, index)}
+            priority={priority}>
+            {props.renderItem(item, index)}
+        </OverflowItem>);
+    });
+
+    addMenu();
+
+    return (
+        <Overflow minimumVisible={2} padding={60} key={`overflow_${props.items.length}`}>
+            <div style={{ overflow: "hidden" }} className={props.className}>
+                {
+                    props.groupWrapper
+                        ? props.groupWrapper(content)
+                        : content
+                }
+            </div>
+        </Overflow>
+    )
 };