@kwiz/fluentui 1.0.39 → 1.0.41

package/src/controls/canvas/bezier.ts

@@ -0,0 +1,110 @@
+import { BasicPoint, Point } from './point';
+
+export class Bezier {
+    public static fromPoints(
+        points: Point[],
+        widths: { start: number; end: number; },
+    ): Bezier {
+        const c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
+        const c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
+
+        return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
+    }
+
+    private static calculateControlPoints(
+        s1: BasicPoint,
+        s2: BasicPoint,
+        s3: BasicPoint,
+    ): {
+        c1: BasicPoint;
+        c2: BasicPoint;
+    } {
+        const dx1 = s1.x - s2.x;
+        const dy1 = s1.y - s2.y;
+        const dx2 = s2.x - s3.x;
+        const dy2 = s2.y - s3.y;
+
+        const m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
+        const m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
+
+        const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+        const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+
+        const dxm = m1.x - m2.x;
+        const dym = m1.y - m2.y;
+
+        const k = (l1 + l2) === 0 ? l2 : l2 / (l1 + l2);
+
+        const cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
+
+        const tx = s2.x - cm.x;
+        const ty = s2.y - cm.y;
+
+        return {
+            c1: new Point(m1.x + tx, m1.y + ty),
+            c2: new Point(m2.x + tx, m2.y + ty),
+        };
+    }
+
+    public constructor(
+        public startPoint: Point,
+        public control2: BasicPoint,
+        public control1: BasicPoint,
+        public endPoint: Point,
+        public startWidth: number,
+        public endWidth: number,
+    ) { }
+
+    // Returns approximated length. Code taken from https://www.lemoda.net/maths/bezier-length/index.html.
+    public length(): number {
+        const steps = 10;
+        let length = 0;
+        let px;
+        let py;
+
+        for (let i = 0; i <= steps; i += 1) {
+            const t = i / steps;
+            const cx = this.point(
+                t,
+                this.startPoint.x,
+                this.control1.x,
+                this.control2.x,
+                this.endPoint.x,
+            );
+            const cy = this.point(
+                t,
+                this.startPoint.y,
+                this.control1.y,
+                this.control2.y,
+                this.endPoint.y,
+            );
+
+            if (i > 0) {
+                const xdiff = cx - (px as number);
+                const ydiff = cy - (py as number);
+
+                length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+            }
+
+            px = cx;
+            py = cy;
+        }
+
+        return length;
+    }
+
+    // Calculate parametric value of x or y given t and the four point coordinates of a cubic bezier curve.
+    private point(
+        t: number,
+        start: number,
+        c1: number,
+        c2: number,
+        end: number,
+    ): number {
+        // prettier-ignore
+        return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
+            + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
+            + (3.0 * c2 * (1.0 - t) * t * t)
+            + (end * t * t * t);
+    }
+}

package/src/controls/canvas/point.ts

@@ -0,0 +1,45 @@
+// Interface for point data structure used e.g. in SignaturePad#fromData method
+export interface BasicPoint {
+    x: number;
+    y: number;
+    pressure: number;
+    time: number;
+}
+
+export class Point implements BasicPoint {
+    public x: number;
+    public y: number;
+    public pressure: number;
+    public time: number;
+
+    public constructor(x: number, y: number, pressure?: number, time?: number) {
+        if (isNaN(x) || isNaN(y)) {
+            throw new Error(`Point is invalid: (${x}, ${y})`);
+        }
+        this.x = +x;
+        this.y = +y;
+        this.pressure = pressure || 0;
+        this.time = time || Date.now();
+    }
+
+    public distanceTo(start: BasicPoint): number {
+        return Math.sqrt(
+            Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2),
+        );
+    }
+
+    public equals(other: BasicPoint): boolean {
+        return (
+            this.x === other.x &&
+            this.y === other.y &&
+            this.pressure === other.pressure &&
+            this.time === other.time
+        );
+    }
+
+    public velocityFrom(start: BasicPoint): number {
+        return this.time !== start.time
+            ? this.distanceTo(start) / (this.time - start.time)
+            : 0;
+    }
+}

package/src/controls/file-upload.tsx

@@ -1,8 +1,19 @@
-import { ButtonProps } from "@fluentui/react-components";
-import { isFunction, isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
+import { ButtonProps, 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 { useDragDropContext } from "../helpers/drag-drop/drag-drop-context";
+import { dropFiles } from "../helpers/drag-drop/exports";
+import { useEffectOnlyOnMount } from "../helpers/hooks";
 import { ButtonEX, CompoundButtonEXSecondary } from "./button";
 
+const useStyles = makeStyles({
+    addRowIsOver: {
+        ...shorthands.borderColor(tokens.colorBrandBackground)
+    }
+});
+
+type base64Result = { base64: string, filename: string };
 interface iProps {
     showTitleWithIcon?: boolean;
     title?: string;
@@ -11,58 +22,128 @@ interface iProps {
     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;
+    onChange?: (newFile: File | File[], errors: string[]) => void;
+    asBase64?: (files: base64Result[], errors: string[]) => void;
     buttonProps?: ButtonProps;
     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 isMulti = props.allowMultiple === true;
+    const icon = props.icon || <ArrowUploadRegular />;
+    const title = isNotEmptyString(props.title) ? props.title : `Drop or select ${isMulti ? 'files' : 'file'}`;
+
+    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) {
+            if (isFunction(props.onChange)) {
+                props.onChange(acceptedFiles, errors);
+            }
+        }
+        else {
+            const fileUploaded = acceptedFiles[0];
+            if (isFunction(props.onChange)) {
+                props.onChange(fileUploaded, errors);
+            }
+        }
+
+        if (isFunction(props.asBase64)) {
+            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}`);
+                }
+            }
+            props.asBase64(filesAs64, errors);
+        }
+    }, useEffectOnlyOnMount);
+
+    const dropContext = useDragDropContext<never, dropFiles>({
+        dropInfo: {
+            acceptTypes: ["__NATIVE_FILE__"],
+            onItemDrop: item => {
+                onGotFiles(item.files);
+            }
+        }
+    });
+
     return <>
         {isNullOrEmptyString(props.secondaryContent)
-            ? <ButtonEX ref={ref} {...(props.buttonProps || {})} icon={props.icon} showTitleWithIcon={props.showTitleWithIcon} onClick={() => {
+            ? <ButtonEX ref={ref || dropContext.dragDropRef} {...(props.buttonProps || {})} icon={icon} showTitleWithIcon={props.showTitleWithIcon} onClick={() => {
                 hiddenFileInput.current.value = "";
                 hiddenFileInput.current.click();
-            }} title={props.title}
-                disabled={props.disabled}
+            }}
+                title={title} disabled={props.disabled}
+                className={dropContext.drop.isOver && classes.addRowIsOver}
             />
-            : <CompoundButtonEXSecondary ref={ref} {...(props.buttonProps || {})} icon={props.icon}
+            : <CompoundButtonEXSecondary ref={ref || dropContext.dragDropRef} {...(props.buttonProps || {})} icon={icon}
                 secondaryContent={props.secondaryContent}
                 onClick={() => {
                     hiddenFileInput.current.value = "";
                     hiddenFileInput.current.click();
-                }} title={props.title}
-                disabled={props.disabled}
+                }}
+                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={(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);
-                        }
-                    }
-                }
-            }}
+            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/kwizoverflow.tsx

@@ -4,6 +4,7 @@ import {
 } from "@fluentui/react-components";
 import { MoreHorizontalFilled } from "@fluentui/react-icons";
 import { isNumber } from '@kwiz/common';
+import { useKWIZFluentContext } from "../helpers/context";
 
 interface IProps<ItemType> {
     /** you cannot have a menu with trigger in overflow items. put those in groupWrapper controls before/after rendering children. */
@@ -18,6 +19,8 @@ interface IProps<ItemType> {
     className?: string;
 }
 const OverflowMenu = <ItemType,>(props: IProps<ItemType>) => {
+    const ctx = useKWIZFluentContext();
+
     const { ref, isOverflowing, overflowCount } =
         useOverflowMenu<HTMLButtonElement>();
 
@@ -25,12 +28,12 @@ const OverflowMenu = <ItemType,>(props: IProps<ItemType>) => {
         return null;
     }
 
-    let menu = <Menu>
+    let menu = <Menu mountNode={ctx.mountNode}>
         <MenuTrigger disableButtonEnhancement>
             {props.menuTrigger
                 ? props.menuTrigger(props.menuRef || ref, overflowCount)
                 : <MenuButton
-                    icon={<MoreHorizontalFilled/>}
+                    icon={<MoreHorizontalFilled />}
                     ref={props.menuRef || ref}
                     aria-label="More items"
                     appearance="subtle"

package/src/helpers/drag-drop/exports.ts

@@ -1,4 +1,14 @@
+import { NativeTypes } from 'react-dnd-html5-backend';
+import { iDraggedItemType } from './use-draggable';
+import { iDroppableProps } from './use-droppable';
+
 export { DragDropContainer } from './drag-drop-container';
 export { DragDropContextProvider, useDragDropContext } from "./drag-drop-context";
 export type { iDraggedItemType } from "./use-draggable";
-export type { iDroppableProps } from "./use-droppable";
+export type { iDroppableProps } from "./use-droppable";
+
+type fileNativeType = typeof NativeTypes.FILE;
+interface dragFiles extends iDraggedItemType<fileNativeType> {
+    files: FileList;
+}
+export type dropFiles = iDroppableProps<fileNativeType, dragFiles>;

package/src/index.ts

@@ -1,6 +1,8 @@
 export * from './controls/accordion';
 export * from './controls/button';
+export * from './controls/canvas/DrawPad';
 export * from './controls/centered';
+export * from './controls/ColorPickerDialog';
 export * from './controls/date';
 export * from './controls/divider';
 export * from './controls/dropdown';