@kwiz/fluentui 1.0.16 → 1.0.20

package/src/controls/error-boundary.tsx

@@ -1,42 +1,42 @@
-import * as React from "react";
-import { GetLogger } from "../_modules/config";
-
-const logger = GetLogger("ErrorBoundary");
-
-interface iProps {
-    errorComponent?: JSX.Element,
-    /** If changeMarker changes, it will check the error again */
-    changeMarker: string | number
-}
-interface iState { hasError: boolean; marker: string | number; }
-export class ErrorBoundary extends React.Component<React.PropsWithChildren<iProps>, iState> {
-    constructor(props: iProps) {
-        super(props);
-        this.state = { hasError: false, marker: props.changeMarker };
-    }
-
-    static getDerivedStateFromError(error) {
-        // Update state so the next render will show the fallback UI.
-        return { hasError: true };
-    }
-    static getDerivedStateFromProps(props: iProps, state: iState) {
-        if (props.changeMarker !== state.marker)
-            return { hasError: false, marker: props.changeMarker };
-        else return null;
-    }
-
-    componentDidCatch(error, errorInfo) {
-        // You can also log the error to an error reporting service
-        logger.error(error);
-        logger.error(errorInfo);
-    }
-
-    render() {
-        if (this.state.hasError) {
-            // You can render any custom fallback UI
-            return this.props.errorComponent || <h1>Something went wrong.</h1>;
-        }
-
-        return this.props.children;
-    }
+import * as React from "react";
+import { GetLogger } from "../_modules/config";
+
+const logger = GetLogger("ErrorBoundary");
+
+interface iProps {
+    errorComponent?: JSX.Element,
+    /** If changeMarker changes, it will check the error again */
+    changeMarker: string | number
+}
+interface iState { hasError: boolean; marker: string | number; }
+export class ErrorBoundary extends React.Component<React.PropsWithChildren<iProps>, iState> {
+    constructor(props: iProps) {
+        super(props);
+        this.state = { hasError: false, marker: props.changeMarker };
+    }
+
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+    static getDerivedStateFromProps(props: iProps, state: iState) {
+        if (props.changeMarker !== state.marker)
+            return { hasError: false, marker: props.changeMarker };
+        else return null;
+    }
+
+    componentDidCatch(error, errorInfo) {
+        // You can also log the error to an error reporting service
+        logger.error(error);
+        logger.error(errorInfo);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return this.props.errorComponent || <h1>Something went wrong.</h1>;
+        }
+
+        return this.props.children;
+    }
 }

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();
+        }} />
+    );
 }