@kwiz/fluentui 1.0.77 → 1.0.79

package/src/controls/canvas/bezier.ts

@@ -1,110 +0,0 @@
-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

@@ -1,45 +0,0 @@
-// 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/card-list.tsx

@@ -1,32 +0,0 @@
-import { makeStyles } from '@fluentui/react-components';
-import React from 'react';
-import { CardEX, iCardProps } from './card';
-import { Centered } from './centered';
-import { Horizontal } from './horizontal';
-
-const useStyles = makeStyles({
-    emptyList: {
-        position: "absolute", top: 0, bottom: 0, left: 0, right: 0,
-        display: "flex",
-        zIndex: -1
-    }
-});
-interface iProps {
-    cards: iCardProps[];
-    /** centered back-fill control */
-    backfill?: JSX.Element;
-}
-export const CardList: React.FunctionComponent<React.PropsWithChildren<iProps>> = (props) => {
-    const classes = useStyles();
-    return (
-        <Horizontal main wrap>
-            {props.backfill && <div className={classes.emptyList}>
-                <Centered>
-                    {props.backfill}
-                </Centered>
-            </div>}
-
-            {props.cards.map((card, idx) => <CardEX key={`i${idx}`} {...card} />)}
-        </Horizontal>
-    );
-}

package/src/controls/card.tsx

@@ -1,78 +0,0 @@
-import { Card, CardFooter, cardFooterClassNames, CardHeader, CardPreview, Label, makeStyles, tokens } from '@fluentui/react-components';
-import { FluentIcon, MoreVerticalRegular } from '@fluentui/react-icons';
-import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyArray, isNullOrUndefined } from '@kwiz/common';
-import React from 'react';
-import { iMenuItemEX, MenuEx } from './menu';
-
-const useStyles = makeStyles({
-    card: {
-        height: '225px',
-        width: '190px',
-        [`& .${cardFooterClassNames.root}>button`]: {
-            display: "none"
-        },
-        "&:hover": {
-            backgroundColor: tokens.colorNeutralBackground1Hover,
-            [`& .${cardFooterClassNames.root}>button`]: {
-                display: "block"
-            }
-        }
-    },
-    previewContent: {
-        textAlign: "center",
-        backgroundColor: tokens.colorBrandBackground,
-        color: tokens.colorBrandBackground2
-    },
-    previewContentNoDescription: {
-        textAlign: "center",
-        color: tokens.colorBrandBackground,
-        paddingTop: '20%'
-    },
-    cardIcon: {
-        height: '120px',
-        width: '100px'
-
-    },
-    cardLabels: {
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        maxWidth: '166px'
-    },
-})
-
-export interface iCardProps {
-    title: string;
-    description?: string;
-    icon: FluentIcon;
-    menuItems?: iMenuItemEX[];
-    footer?: JSX.Element;
-    onClick: React.MouseEventHandler<HTMLDivElement>;
-}
-export const CardEX: React.FunctionComponent<React.PropsWithChildren<iCardProps>> = (props) => {
-    const classes = useStyles();
-    const hasDescription = isNotEmptyString(props.description);
-    const hasActions = isNotEmptyArray(props.menuItems) || !isNullOrUndefined(props.footer);
-    return (
-        <Card className={classes.card} onClick={props.onClick}>
-            <CardPreview>
-                <div className={hasDescription ? classes.previewContent : classes.previewContentNoDescription}>
-                    <props.icon className={classes.cardIcon} />
-                    {!hasDescription && <>
-                        <br />
-                        <Label>{props.title}</Label>
-                    </>}
-                </div>
-            </CardPreview>
-            {hasDescription && <CardHeader
-                header={<Label className={classes.cardLabels}>{props.title}</Label>}
-                description={<Label className={classes.cardLabels} size='small'>{props.description}</Label>}
-            />}
-            {hasActions && <CardFooter action={isNullOrEmptyArray(props.menuItems)
-                ? undefined
-                : <MenuEx trigger={{ title: 'more', icon: <MoreVerticalRegular /> }}
-                    items={props.menuItems} />}>
-                {props.footer}
-            </CardFooter>}
-        </Card>);
-}

package/src/controls/centered.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Horizontal } from './horizontal';
-import { Vertical } from './vertical';
-
-interface IProps {
-}
-export const Centered: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    return (
-        <Vertical main vCentered>
-            <Horizontal hCentered>
-                {props.children}
-            </Horizontal>
-        </Vertical>
-    );
-}

package/src/controls/date.tsx

@@ -1,88 +0,0 @@
-import { DatePicker, DatePickerProps } from '@fluentui/react-datepicker-compat';
-import { TimePicker, TimePickerProps } from '@fluentui/react-timepicker-compat';
-
-import { CalendarCancelRegular } from '@fluentui/react-icons';
-import { isDate } from '@kwiz/common';
-import * as React from 'react';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { useStateEX } from '../helpers';
-import { Horizontal } from './horizontal';
-
-interface IProps {
-    onDateChange: (newDateObject: Date) => void;
-    value: Date;
-    showTime?: boolean;
-    datePickerProps?: DatePickerProps;
-    timePickerProps?: TimePickerProps;
-    /** don't allow to clear the value */
-    required?: boolean;
-}
-export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const ctx = useKWIZFluentContext();
-
-    //time value will always have a value even when clearing the date
-    const [timeValue, setTimeValue] = useStateEX<Date>(isDate(props.value) ? props.value : new Date());
-    const { showClear, dateValue } = React.useMemo(() => {
-        const showClear = !props.required && isDate(props.value);
-        const dateValue = props.value;
-        return { showClear, dateValue };
-    }, [props.value]);
-
-    function reset() {
-        props.onDateChange(null);
-    }
-
-    const changeDateHandler = React.useCallback((newDateValue: Date): void => {
-        const newDate = new Date(newDateValue);
-        // Use the old time values.
-        newDate.setHours(
-            timeValue ? timeValue.getHours() : 0,
-            timeValue ? timeValue.getMinutes() : 0, 0, 0
-        );
-        props.onDateChange(newDate);
-    }, [timeValue, props.onDateChange]);
-
-    const changeTimeHandler = React.useCallback((newTimeValue: Date): void => {
-        //update our state
-        setTimeValue(newTimeValue);
-        // Use the old date value.
-        const newDate = isDate(dateValue) ? new Date(dateValue) : new Date();
-        newDate.setHours(
-            newTimeValue.getHours(),
-            newTimeValue.getMinutes(), 0, 0
-        );
-        props.onDateChange(newDate);
-    }, [dateValue]);
-
-    const DatePickerControl = <DatePicker
-        {...(props.datePickerProps || {})}
-        appearance={ctx.inputAppearance}
-        mountNode={ctx.mountNode}
-        value={isDate(dateValue) ? dateValue : null}
-        onSelectDate={(newDate) => {
-            changeDateHandler(newDate);
-        }}
-        contentBefore={showClear && <CalendarCancelRegular title='Clear' onClick={() => reset()} />}
-    />
-
-    const TimePickerControl = <TimePicker
-        appearance={ctx.inputAppearance}
-        mountNode={ctx.mountNode}
-        {...props.timePickerProps}
-        //only show time value when there is a selected date. timeValue will never be null.
-        value={isDate(dateValue) ? timeValue.toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit", hour12: true }) : ""}
-        onTimeChange={(e, date) => {
-            const newDate = date.selectedTime;
-            changeTimeHandler(newDate);
-        }}
-    />
-
-    return (
-        props.showTime
-            ? <Horizontal>
-                {DatePickerControl}
-                {TimePickerControl}
-            </Horizontal>
-            : DatePickerControl
-    );
-}

package/src/controls/diagram-picker.tsx

@@ -1,97 +0,0 @@
-import { Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, makeStyles, shorthands, Switch, tokens } from '@fluentui/react-components';
-import { ImageSparkleRegular } from '@fluentui/react-icons';
-import { DiagramOptions, stockUrl } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { useStateEX } from '../helpers';
-import { ButtonEXPrimarySubtle } from './button';
-import { Horizontal } from './horizontal';
-import { Section } from './section';
-
-const useStyles = makeStyles({
-    dialog: {
-        maxWidth: '70vw',
-        width: '70vw',
-    },
-    dialogBody: {
-        maxHeight: '60vh',
-    },
-    diagramWrapper: {
-        justifyContent: "center",
-        alignContent: "center"
-    },
-    diagram: {
-        border: `1px solid ${tokens.colorNeutralStroke1}`,
-        padding: tokens.spacingHorizontalS,
-        "&:hover": {
-            ...shorthands.borderColor(tokens.colorBrandBackground),
-        },
-        "&>img": {
-            width: "180px"
-        },
-    },
-});
-
-interface iProps {
-    onSelect?: (diagram: { url: string; name: string; }) => void;
-    onSelectBase64?: (diagram: string) => void;
-    trigger?: JSX.Element;
-    hiRes?: boolean;
-    onlyTransparent?: boolean;
-}
-export const DiagramPicker = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<iProps>)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    const classes = useStyles();
-    const [isOpen, setIsOpen] = useStateEX(false);
-    const [hiRes, setHiRes] = useStateEX(props.hiRes);
-    let options = (hiRes ? DiagramOptions.hiRes : DiagramOptions.options);
-    if (props.onlyTransparent) options = options.filter(o => o.name.endsWith(', transparent'));
-    return (
-        <Dialog open={isOpen} onOpenChange={(e, data) => {
-            setIsOpen(data.open);
-        }}>
-            <DialogTrigger disableButtonEnhancement>
-                {props.trigger || <ButtonEXPrimarySubtle icon={<ImageSparkleRegular />} title='Open gallery' showTitleWithIcon dontCenterText />}
-            </DialogTrigger>
-            <DialogSurface mountNode={ctx.mountNode} className={classes.dialog}>
-                <DialogBody className={classes.dialogBody}>
-                    <DialogTitle>Choose a diagram</DialogTitle>
-                    <DialogContent>
-                        <Switch checked={hiRes === true}
-                            onChange={(e, data) => {
-                                setHiRes(data.checked === true);
-                            }}
-                            label="High resolution diagrams"
-                        />
-                        <Horizontal main wrap css={[classes.diagramWrapper]}>
-                            {options
-                                .map(diagram => <Section key={diagram.name} css={[classes.diagram]}
-                                    title={diagram.name}
-                                    onClick={async () => {
-                                        const fullUrl = `${stockUrl}/${diagram.url}`;
-                                        props.onSelect?.({ name: diagram.name, url: fullUrl });
-                                        if (props.onSelectBase64) {
-                                            const result = await fetch(fullUrl);
-                                            const blob = await result.blob();
-                                            const reader = new FileReader();
-                                            reader.onload = function () {
-                                                props.onSelectBase64?.(reader.result as string);
-                                            };
-                                            reader.readAsDataURL(blob);
-                                        }
-                                        setIsOpen(false);
-                                    }}>
-                                    <img src={`${stockUrl}/${diagram.url}`} />
-                                </Section>)}
-                        </Horizontal>
-                    </DialogContent>
-                    {/* <DialogActions>
-                        <DialogTrigger disableButtonEnhancement>
-                            <Button appearance="secondary">Cancel</Button>
-                        </DialogTrigger>
-                        <Button appearance="primary">Save</Button>
-                    </DialogActions> */}
-                </DialogBody>
-            </DialogSurface>
-        </Dialog>);
-}); 

package/src/controls/divider.tsx

@@ -1,16 +0,0 @@
-import { Divider, DividerProps, makeStyles, mergeClasses } from '@fluentui/react-components';
-import React from 'react';
-
-const useStyles = makeStyles({
-    separator: {
-        flexGrow: 0
-    }
-});
-interface IProps extends DividerProps {
-}
-export const DividerEX = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<IProps>)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <Divider ref={ref} {...props} className={mergeClasses(cssNames.separator, props.className)} />
-    );
-}); 

package/src/controls/dropdown.tsx

@@ -1,67 +0,0 @@
-import { Dropdown, DropdownProps, makeStyles, mergeClasses, Option } from '@fluentui/react-components';
-import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
-import React from 'react';
-import { GetLogger } from '../_modules/config';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-
-const logger = GetLogger("DropdownEX");
-
-const useStyles = makeStyles({
-    root: {
-        minWidth: "auto"
-    },
-});
-
-type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
-
-interface IProps<keyType, dataType> extends ForwardProps {
-    required?: boolean;
-    selected: keyType | keyType[];
-    items: {
-        key: keyType, value: string, data?: dataType,
-        /** display complex controls in the drop down */
-        option?: JSX.Element;
-    }[];
-    onSelect: (
-        /** the specific option that was selected/unselected */
-        option: { key: keyType, value: string, data?: dataType },
-        /** only sent for multi select - all selected options, in case of multi select */
-        options?: { key: keyType, value: string, data?: dataType }[]) => void;
-}
-
-function $DropdownEX<keyType extends string = string, dataType = never>(props: IProps<keyType, dataType>, ref: React.ForwardedRef<HTMLButtonElement>) {
-    const classes = useStyles();
-    const ctx = useKWIZFluentContext();
-    const selected: keyType[] = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
-
-    //sometimes control will lose value when re-rendered
-    //use case: public forms when editing other fields after the dropdown was set
-    //re-set the text value manually to fix
-    let text = filterEmptyEntries((Array.isArray(props.selected) ? props.selected : [props.selected]).map(s => {
-        let v = firstOrNull(props.items, i => i.key === s);
-        return v ? v.value : ''
-    })).join(', ');
-
-    return (
-        <Dropdown {...{ ...props, onSelect: undefined }} className={mergeClasses(classes.root, props.className)} ref={ref} clearable={!props.required && !props.multiselect}
-            appearance={ctx.inputAppearance} mountNode={ctx.mountNode}
-            selectedOptions={selected} value={text} onOptionSelect={(e, data) => {
-                let o = firstOrNull(props.items, i => i.key === data.optionValue);
-                if (props.multiselect) {
-                    let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
-                    props.onSelect(o, current);
-                }
-                else props.onSelect(o);
-            }}>
-            {props.items.map(i => <Option key={i.key} value={i.key} text={i.value}>{i.option ? i.option : i.value}</Option>)}
-        </Dropdown>
-    );
-}
-
-export const DropdownEX = React.forwardRef($DropdownEX);
-
-/** @deprecated use normal DropdownEX it is now generic */
-export function getDropdownEX<keyType extends string = string, dataType = never>() {
-    logger.warn('getDropdownEX is deprecated. use DropdownEX it now supports generic types');
-    return React.forwardRef($DropdownEX<keyType, dataType>);
-}

package/src/controls/error-boundary.tsx

@@ -1,42 +0,0 @@
-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,43 +0,0 @@
-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>
-    );
-}