@kwiz/fluentui 1.0.73 → 1.0.75

package/src/controls/field-editor.tsx

@@ -1,43 +1,43 @@
-import { Field, mergeClasses } from '@fluentui/react-components';
-import { isNullOrUndefined } from '@kwiz/common';
-import React from 'react';
-import { GetLogger } from '../_modules/config';
-import { InputEx, TextAreaEx } 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";
-    allowTab?: boolean;
-}
-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"
-                ? <TextAreaEx className={props.css && mergeClasses(...props.css)}
-                    required={props.required}
-                    placeholder={props.label}
-                    value={props.value || ""}
-                    allowTab={props.allowTab}
-                    onValueChange={(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 } from '@fluentui/react-components';
+import { isNullOrUndefined } from '@kwiz/common';
+import React from 'react';
+import { GetLogger } from '../_modules/config';
+import { InputEx, TextAreaEx } 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";
+    allowTab?: boolean;
+}
+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"
+                ? <TextAreaEx className={props.css && mergeClasses(...props.css)}
+                    required={props.required}
+                    placeholder={props.label}
+                    value={props.value || ""}
+                    allowTab={props.allowTab}
+                    onValueChange={(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,156 +1,156 @@
-import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
-import { ArrowUploadRegular } from "@fluentui/react-icons";
-import { isFunction, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, lastOrNull } from '@kwiz/common';
-import * as React from "react";
-import { dropFiles, useDragDropContext, useEffectOnlyOnMount } from "../helpers";
-import { ButtonEX, ButtonEXProps, CompoundButtonEXSecondary } from "./button";
-
-const useStyles = makeStyles({
-    addRowIsOver: {
-        ...shorthands.borderColor(tokens.colorBrandBackground)
-    }
-});
-
-type base64Result = { base64: string, filename: string };
-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 | File[], errors: string[]) => void;
-    asBase64?: (files: base64Result[], errors: string[]) => void;
-    buttonProps?: Partial<ButtonEXProps>;
-    disabled?: boolean;
-    /** limit file size in MB, for the asBase64 */
-    fileSizeLimit?: number;
-}
-
-export const FileUpload = React.forwardRef<HTMLButtonElement, (iProps)>((props, ref) => {
-    const classes = useStyles();
-    const hiddenFileInput = React.useRef(null);
-    const onChangeRef = React.useRef(props.onChange);
-    const asBase64Ref = React.useRef(props.asBase64);
-
-    const isMulti = props.allowMultiple === true;
-    const icon = props.icon || <ArrowUploadRegular />;
-    const title = isNotEmptyString(props.title) ? props.title : `Drop or select ${isMulti ? 'files' : 'file'}`;
-
-    //keep onChange up to date
-    React.useEffect(() => {
-        onChangeRef.current = props.onChange;
-    }, [props.onChange]);
-    //keep onChange up to date
-    React.useEffect(() => {
-        asBase64Ref.current = props.asBase64;
-    }, [props.asBase64]);
-
-
-    const onGotFiles = React.useCallback(async (rawFiles: FileList) => {
-        let errors: string[] = [];
-        let acceptedFiles: File[] = [];
-        if (rawFiles && rawFiles.length > 0) {
-            //filter by types and size
-            for (let i = 0; i < (isMulti ? rawFiles.length : 1); i++) {
-                const currentFile = rawFiles[i];
-                let hadError = false;
-                if (props.fileSizeLimit > 0) {
-                    const megabytes = currentFile.size / (1024 * 1024);
-                    if (megabytes > props.fileSizeLimit) {
-                        errors.push(`File ${currentFile.name} is over the size limit`);
-                        hadError = true;
-                    }
-                }
-                if (!hadError) {
-                    if (isNotEmptyArray(props.limitFileTypes)) {
-                        let fileType = lastOrNull(currentFile.name.split('.')).toLowerCase();
-                        if (props.limitFileTypes.indexOf(fileType) < 0) {
-                            errors.push(`File ${currentFile.name} is not allowed`);
-                            hadError = true;
-                        }
-                    }
-                }
-                if (!hadError) acceptedFiles.push(currentFile);
-            }
-        }
-
-        if (isMulti) {
-            onChangeRef.current?.(acceptedFiles, errors);
-        }
-        else {
-            const fileUploaded = acceptedFiles[0];
-            onChangeRef.current?.(fileUploaded, errors);
-        }
-
-        if (isFunction(asBase64Ref.current)) {
-            const filesAs64: base64Result[] = [];
-            for (let i = 0; i < (isMulti ? acceptedFiles.length : 1); i++) {
-                const currentFile = acceptedFiles[i];
-                let hadError = false;
-                if (props.fileSizeLimit > 0) {
-                    const megabytes = currentFile.size / (1024 * 1024);
-                    if (megabytes > props.fileSizeLimit) {
-                        errors.push(`File ${currentFile.name} is over the size limit`);
-                        hadError = true;
-                    }
-                }
-                if (!hadError) {
-                    let as64 = await getFileAsBase64(acceptedFiles[i]);
-                    if (as64) filesAs64.push(as64);
-                    else errors.push(`Could not read file ${acceptedFiles[i].name}`);
-                }
-            }
-            asBase64Ref.current?.(filesAs64, errors);
-        }
-    }, useEffectOnlyOnMount);
-
-    const dropContext = useDragDropContext<never, dropFiles>({
-        dropInfo: {
-            acceptTypes: ["__NATIVE_FILE__"],
-            onItemDrop: item => {
-                onGotFiles(item.files);
-            }
-        }
-    });
-
-    return <>
-        {isNullOrEmptyString(props.secondaryContent)
-            ? <ButtonEX ref={ref || dropContext.dragDropRef} {...(props.buttonProps || {})} icon={icon} showTitleWithIcon={props.showTitleWithIcon} onClick={() => {
-                hiddenFileInput.current.value = "";
-                hiddenFileInput.current.click();
-            }}
-                title={title} disabled={props.disabled}
-                className={dropContext.drop.isOver && classes.addRowIsOver}
-            />
-            : <CompoundButtonEXSecondary ref={ref || dropContext.dragDropRef} {...(props.buttonProps || {})} icon={icon}
-                secondaryContent={props.secondaryContent}
-                onClick={() => {
-                    hiddenFileInput.current.value = "";
-                    hiddenFileInput.current.click();
-                }}
-                title={title} disabled={props.disabled}
-                className={dropContext.drop.isOver && classes.addRowIsOver}
-            />}
-        <input type="file" ref={hiddenFileInput} style={{ display: "none" }} multiple={isMulti}
-            accept={isNotEmptyArray(props.limitFileTypes) ? props.limitFileTypes.map(ft => `.${ft}`).join() : undefined}
-            onChange={async (e) => onGotFiles(e.target.files)}
-        />
-    </>;
-});
-
-async function getFileAsBase64(file: File): Promise<base64Result> {
-    return new Promise<base64Result>(resolve => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-            if (!isNullOrEmptyString(reader.result))
-                resolve({ filename: file.name, base64: reader.result as string });
-            else {
-                console.warn("Empty file selected");
-                resolve(null);
-            }
-        };
-        reader.readAsDataURL(file);
-    });
+import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
+import { ArrowUploadRegular } from "@fluentui/react-icons";
+import { isFunction, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, lastOrNull } from '@kwiz/common';
+import * as React from "react";
+import { dropFiles, useDragDropContext, useEffectOnlyOnMount } from "../helpers";
+import { ButtonEX, ButtonEXProps, CompoundButtonEXSecondary } from "./button";
+
+const useStyles = makeStyles({
+    addRowIsOver: {
+        ...shorthands.borderColor(tokens.colorBrandBackground)
+    }
+});
+
+type base64Result = { base64: string, filename: string };
+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 | File[], errors: string[]) => void;
+    asBase64?: (files: base64Result[], errors: string[]) => void;
+    buttonProps?: Partial<ButtonEXProps>;
+    disabled?: boolean;
+    /** limit file size in MB, for the asBase64 */
+    fileSizeLimit?: number;
+}
+
+export const FileUpload = React.forwardRef<HTMLButtonElement, (iProps)>((props, ref) => {
+    const classes = useStyles();
+    const hiddenFileInput = React.useRef(null);
+    const onChangeRef = React.useRef(props.onChange);
+    const asBase64Ref = React.useRef(props.asBase64);
+
+    const isMulti = props.allowMultiple === true;
+    const icon = props.icon || <ArrowUploadRegular />;
+    const title = isNotEmptyString(props.title) ? props.title : `Drop or select ${isMulti ? 'files' : 'file'}`;
+
+    //keep onChange up to date
+    React.useEffect(() => {
+        onChangeRef.current = props.onChange;
+    }, [props.onChange]);
+    //keep onChange up to date
+    React.useEffect(() => {
+        asBase64Ref.current = props.asBase64;
+    }, [props.asBase64]);
+
+
+    const onGotFiles = React.useCallback(async (rawFiles: FileList) => {
+        let errors: string[] = [];
+        let acceptedFiles: File[] = [];
+        if (rawFiles && rawFiles.length > 0) {
+            //filter by types and size
+            for (let i = 0; i < (isMulti ? rawFiles.length : 1); i++) {
+                const currentFile = rawFiles[i];
+                let hadError = false;
+                if (props.fileSizeLimit > 0) {
+                    const megabytes = currentFile.size / (1024 * 1024);
+                    if (megabytes > props.fileSizeLimit) {
+                        errors.push(`File ${currentFile.name} is over the size limit`);
+                        hadError = true;
+                    }
+                }
+                if (!hadError) {
+                    if (isNotEmptyArray(props.limitFileTypes)) {
+                        let fileType = lastOrNull(currentFile.name.split('.')).toLowerCase();
+                        if (props.limitFileTypes.indexOf(fileType) < 0) {
+                            errors.push(`File ${currentFile.name} is not allowed`);
+                            hadError = true;
+                        }
+                    }
+                }
+                if (!hadError) acceptedFiles.push(currentFile);
+            }
+        }
+
+        if (isMulti) {
+            onChangeRef.current?.(acceptedFiles, errors);
+        }
+        else {
+            const fileUploaded = acceptedFiles[0];
+            onChangeRef.current?.(fileUploaded, errors);
+        }
+
+        if (isFunction(asBase64Ref.current)) {
+            const filesAs64: base64Result[] = [];
+            for (let i = 0; i < (isMulti ? acceptedFiles.length : 1); i++) {
+                const currentFile = acceptedFiles[i];
+                let hadError = false;
+                if (props.fileSizeLimit > 0) {
+                    const megabytes = currentFile.size / (1024 * 1024);
+                    if (megabytes > props.fileSizeLimit) {
+                        errors.push(`File ${currentFile.name} is over the size limit`);
+                        hadError = true;
+                    }
+                }
+                if (!hadError) {
+                    let as64 = await getFileAsBase64(acceptedFiles[i]);
+                    if (as64) filesAs64.push(as64);
+                    else errors.push(`Could not read file ${acceptedFiles[i].name}`);
+                }
+            }
+            asBase64Ref.current?.(filesAs64, errors);
+        }
+    }, useEffectOnlyOnMount);
+
+    const dropContext = useDragDropContext<never, dropFiles>({
+        dropInfo: {
+            acceptTypes: ["__NATIVE_FILE__"],
+            onItemDrop: item => {
+                onGotFiles(item.files);
+            }
+        }
+    });
+
+    return <>
+        {isNullOrEmptyString(props.secondaryContent)
+            ? <ButtonEX ref={ref || dropContext.dragDropRef} {...(props.buttonProps || {})} icon={icon} showTitleWithIcon={props.showTitleWithIcon} onClick={() => {
+                hiddenFileInput.current.value = "";
+                hiddenFileInput.current.click();
+            }}
+                title={title} disabled={props.disabled}
+                className={dropContext.drop.isOver && classes.addRowIsOver}
+            />
+            : <CompoundButtonEXSecondary ref={ref || dropContext.dragDropRef} {...(props.buttonProps || {})} icon={icon}
+                secondaryContent={props.secondaryContent}
+                onClick={() => {
+                    hiddenFileInput.current.value = "";
+                    hiddenFileInput.current.click();
+                }}
+                title={title} disabled={props.disabled}
+                className={dropContext.drop.isOver && classes.addRowIsOver}
+            />}
+        <input type="file" ref={hiddenFileInput} style={{ display: "none" }} multiple={isMulti}
+            accept={isNotEmptyArray(props.limitFileTypes) ? props.limitFileTypes.map(ft => `.${ft}`).join() : undefined}
+            onChange={async (e) => onGotFiles(e.target.files)}
+        />
+    </>;
+});
+
+async function getFileAsBase64(file: File): Promise<base64Result> {
+    return new Promise<base64Result>(resolve => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            if (!isNullOrEmptyString(reader.result))
+                resolve({ filename: file.name, base64: reader.result as string });
+            else {
+                console.warn("Empty file selected");
+                resolve(null);
+            }
+        };
+        reader.readAsDataURL(file);
+    });
 }

package/src/controls/horizontal.tsx

@@ -1,49 +1,49 @@
-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,
-    centered: {
-        alignItems: "center"
-    },
-    hCentered: {
-        justifyContent: "center"
-    },
-})
-
-interface IProps extends ISectionProps {
-    wrap?: boolean;
-    nogap?: boolean;
-    /** vertical align center */
-    centered?: boolean;
-    /** horizontal centered */
-    hCentered?: boolean;
-}
-export const Horizontal = React.forwardRef<HTMLDivElement, React.PropsWithChildren<IProps>>((props, ref) => {
-    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 (props.centered)
-        css.push(cssNames.centered);
-    if (props.hCentered)
-        css.push(cssNames.hCentered);
-
-    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,
+    centered: {
+        alignItems: "center"
+    },
+    hCentered: {
+        justifyContent: "center"
+    },
+})
+
+interface IProps extends ISectionProps {
+    wrap?: boolean;
+    nogap?: boolean;
+    /** vertical align center */
+    centered?: boolean;
+    /** horizontal centered */
+    hCentered?: boolean;
+}
+export const Horizontal = React.forwardRef<HTMLDivElement, React.PropsWithChildren<IProps>>((props, ref) => {
+    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 (props.centered)
+        css.push(cssNames.centered);
+    if (props.hCentered)
+        css.push(cssNames.hCentered);
+
+    if (isNotEmptyArray(props.css)) css.push(...props.css);
+
+    return (
+        <Section {...props} css={css} />
+    );
 });