added progress bar, fixed drawpad signature

shaipetel · shaipetel · commit 1e99c27cba96 · 2024-12-13T14:43:23.000-05:00
diff --git a/src/controls/canvas/DrawPad.tsx b/src/controls/canvas/DrawPad.tsx
@@ -38,11 +38,14 @@ export const DrawPadUserName = {
     get: () => { return _userName },
     set: (userName: string) => { _userName = userName }
 };
+
+const fontName = "Dancing Script";
+let fontLoading: Promise<boolean> = null;
+let fontReady = false;
 export const DrawPad: React.FunctionComponent<iProps> = (props) => {
     const [LineColor, setLineColor] = useStateEX<string>(props.LineColor || tokens.colorBrandForeground1);
     const [manager, setmanager] = useStateEX<DrawPadManager>(null);
     const [canUndo, setcanUndo] = useStateEX<boolean>(false, { skipUpdateIfSame: true });
-    const [loadedFontNames, setloadedFontNames] = useStateEX<string[]>([]);
     const [signed, setSigned] = useStateEX<boolean>(false);
     const [fullscreen, setFullscreen] = useStateEX<boolean>(false);
     const onChangeRef = React.useRef(props.OnChange);
@@ -63,9 +66,9 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
 
     //load font for sign as text, if needed
     React.useEffect(() => {
-        if (props.allowSigning && isNullOrEmptyArray(loadedFontNames)) {
+        if (props.allowSigning && !fontLoading) {
             let DancingScriptFont = new FontFace(
-                "Dancing Script",
+                fontName,
                 "url(https://fonts.gstatic.com/s/dancingscript/v25/If2RXTr6YS-zF4S-kcSWSVi_szLgiuE.woff2) format('woff2')",
                 {
                     style: "normal",
@@ -75,13 +78,14 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
                 }
             );
 
-            DancingScriptFont.load().then(async loadedFont => {
+            fontLoading = DancingScriptFont.load().then(async loadedFont => {
                 document.fonts.add(loadedFont);
                 await document.fonts.ready;
-                setloadedFontNames(["Dancing Script"]);
+                fontReady = true;
+                return true;
             });
         }
-    }, [props.allowSigning, loadedFontNames]);
+    }, [props.allowSigning]);
 
     //setup manager
     React.useEffect(() => {
@@ -145,7 +149,6 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
 
         let height = canvas.clientHeight;
         let width = canvas.clientWidth;
-        let fontName = loadedFontNames[0];
 
         let ctx = canvas.getContext("2d");
         ctx.fillStyle = getCSSVariableValue(LineColor, canvasArea.current);
@@ -174,7 +177,7 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
         if (isNullOrUndefined(DrawPadUserName.get())) {
             //prompt user to type his name - then continue
             alerts.promptEX({
-                mountNode: canvasContainerDiv.current,
+                //mountNode: canvasContainerDiv.current, this lets other content on the form cover the dialog
                 title: "Sign as name",
                 children: <Field label="Signing as" hint="Please type in your name" required>
                     <InputEx onChange={(e, data) => DrawPadUserName.set(data.value)} />
@@ -237,7 +240,7 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
                         }} />
                     {!signed
                         && !isNullOrEmptyString(props.allowSigning)
-                        && !isNullOrEmptyArray(loadedFontNames)
+                        && !isNullOrEmptyArray(fontReady)
                         && <ButtonEX
                             style={{
                                 position: "absolute",
@@ -258,9 +261,10 @@ export const DrawPad: React.FunctionComponent<iProps> = (props) => {
             }
         </div>
         {!props.ReadOnly && !HideButtons && <Vertical nogap>
-            {props.HideColorPicker || <ColorPickerEx mountNode={canvasContainerDiv.current} disabled={props.disabled} buttonOnly value={props.LineColor} onChange={newColor => {
-                setLineColor(newColor);
-            }} />}
+            {props.HideColorPicker || <ColorPickerEx //mountNode={canvasContainerDiv.current} this lets other content on the form cover the dialog
+                disabled={props.disabled} buttonOnly value={props.LineColor} onChange={newColor => {
+                    setLineColor(newColor);
+                }} />}
             {props.HideClear || <ButtonEX disabled={props.disabled || isNullOrEmptyString(props.Value)} title="Clear" icon={<DismissRegular />} onClick={() => {
                 //can call clear on the canvas, or can call the onchange which will cause a re-draw
                 setSigned(false);
diff --git a/src/controls/date.tsx b/src/controls/date.tsx
@@ -14,14 +14,16 @@ interface IProps {
     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 = isDate(props.value);
+        const showClear = !props.required && isDate(props.value);
         const dateValue = props.value;
         return { showClear, dateValue };
     }, [props.value]);
diff --git a/src/controls/horizontal.tsx b/src/controls/horizontal.tsx
@@ -13,13 +13,19 @@ const useStyles = makeStyles({
     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();
@@ -32,6 +38,8 @@ export const Horizontal = React.forwardRef<HTMLDivElement, React.PropsWithChildr
         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);
 
diff --git a/src/controls/html-editor/editor.tsx b/src/controls/html-editor/editor.tsx
@@ -52,6 +52,11 @@ type JoditExpanded = Jodit & {//& IViewBased<IViewOptions>
         setShowFullScreen: (value: boolean) => void;
     }
 };
+
+const saveIcon = IconToSVG(<Save16Regular title='Save' />);
+const cancelIcon = IconToSVG(<Dismiss16Regular title='Cancel' />);
+const maxIcon = IconToSVG(<ArrowMaximize16Regular title='Maximize' />);
+const minIcon = IconToSVG(<ArrowMinimize16Regular title='Minimize' />);
 export const HtmlEditor: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
     const classes = useStyles();
     const [active, setActive] = React.useState(false);
@@ -82,29 +87,29 @@ export const HtmlEditor: React.FunctionComponent<React.PropsWithChildren<IProps>
 
 
     Jodit.defaultOptions.controls.save = {
-        template: () => IconToSVG(<Save16Regular title='Save' />),
+        template: () => saveIcon,
         exec: (view: JoditExpanded) => {
             view.kwizInstance.props.onChange?.(view.value);
             view.kwizInstance.props.onSave?.(view.value);
             view.kwizInstance.setShowFullScreen(false);
         }
     };
     Jodit.defaultOptions.controls.cancel = {
-        template: () => IconToSVG(<Dismiss16Regular title='Cancel' />),
+        template: () => cancelIcon,
         exec: (view: JoditExpanded) => {
             view.kwizInstance.props.onCancel?.();
             view.kwizInstance.setShowFullScreen(false);
         }
     };
     Jodit.defaultOptions.controls.maximize = {
-        template: () => IconToSVG(<ArrowMaximize16Regular title='Maximize' />),
+        template: () => maxIcon,
         exec: (view: JoditExpanded) => {
             view.kwizInstance.props.onChange?.(view.value);//pass value from smaller editor to bigger one
             view.kwizInstance.setShowFullScreen(true);
         }
     };
     Jodit.defaultOptions.controls.minimize = {
-        template: () => IconToSVG(<ArrowMinimize16Regular title='Minimize' />),
+        template: () => minIcon,
         exec: (view: JoditExpanded) => {
             view.kwizInstance.props.onChange?.(view.value);
             view.kwizInstance.setShowFullScreen(false);
diff --git a/src/controls/progress-bar.tsx b/src/controls/progress-bar.tsx
@@ -0,0 +1,110 @@
+import { DividerProps, makeStyles, mergeClasses, ProgressBar, tokens } from '@fluentui/react-components';
+import { CheckmarkRegular, FluentIcon } from '@fluentui/react-icons';
+import { isFunction, isNotEmptyString } from '@kwiz/common';
+import React from 'react';
+import { KnownClassNames } from '../styles/styles';
+import { Horizontal } from './horizontal';
+import { Section } from './section';
+import { Vertical } from './vertical';
+
+const useStyles = makeStyles({
+    root: {
+        position: "relative"
+    },
+    stepNumber: {
+        border: `2px solid ${tokens.colorNeutralStroke1}`,
+        borderRadius: tokens.borderRadiusCircular,
+        width: '24px',
+        height: '24px',
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: tokens.colorNeutralBackground1,
+    },
+    stepLabel: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        position: "absolute",
+        top: '-10px',
+        left: 0,
+        right: 0,
+        "& > span": {
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            display: "inline-block"
+        }
+    },
+    stepNumberCurrent: {
+        border: `2px solid ${tokens.colorBrandBackground}`,
+    },
+    stepNumberCompleted: {
+        border: `2px solid ${tokens.colorBrandBackground}`,
+        backgroundColor: tokens.colorBrandBackground,
+        color: tokens.colorNeutralBackground1,
+    },
+    stepNumberClickable: {
+        cursor: "pointer"
+    },
+    stepTitle: {
+        fontSize: tokens.fontSizeBase400,
+        lineHeight: tokens.lineHeightBase400,
+    },
+    progressBar: {
+        position: "absolute",
+        top: "14px"
+    },
+    stepSpacer: {
+        position: "relative"
+    }
+});
+interface IProps extends DividerProps {
+    steps: number;
+    step: number;
+    stepLabel?: string;
+    css?: string[];
+    /** optional, send an icon instead of the step number */
+    stepIcons?: FluentIcon[];
+    onStepClick?: (step: number) => void;
+}
+export const ProgressBarEX = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<IProps>)>((props, ref) => {
+    const classes = useStyles();
+
+    let stepLabels: JSX.Element[] = [];
+    for (let i = 0; i < props.steps; i++) {
+        const stepClasses = [classes.stepNumber];
+        let addLabel = false;
+        let canClick = false;
+        if (props.step === i) {
+            stepClasses.push(classes.stepNumberCurrent);
+            if (isNotEmptyString(props.stepLabel))
+                addLabel = true;
+        }
+        else if (props.step > i) {
+            stepClasses.push(classes.stepNumberCompleted);
+            canClick = isFunction(props.onStepClick);
+            if (canClick)
+                stepClasses.push(classes.stepNumberClickable);
+        }
+        let StepIcon = props.stepIcons?.[i];
+        stepLabels.push(<Section key={`step${i}`} css={stepClasses} onClick={canClick ? () => props.onStepClick(i) : undefined}>{StepIcon ? <StepIcon /> : `${i + 1}`}</Section>);
+        stepLabels.push(<Section main key={`step${i}Spacer`} css={[classes.stepSpacer]}>
+            {addLabel && <Horizontal key="label" hCentered css={[classes.stepLabel, KnownClassNames.progressBarStepLabel]}>
+                <span>{props.stepLabel}</span>
+            </Horizontal>}
+        </Section>);
+
+    }
+
+    let StepIcon = props.stepIcons?.[props.steps];
+    //add last submit step
+    stepLabels.push(<span key='stepSubmit' className={mergeClasses(classes.stepNumber, props.step === props.steps && classes.stepNumberCompleted)}>{StepIcon ? <StepIcon /> : <CheckmarkRegular />}</span>);
+
+    return (
+        <Vertical css={[classes.root, ...(props.css || [])]}>
+            {/* progress bar first so labels will cover it without the need for zindex */}
+            <ProgressBar className={classes.progressBar} value={(props.step * 2) + 1} max={props.steps * 2} />
+            <Horizontal css={[classes.stepTitle]}>{...stepLabels}</Horizontal>
+        </Vertical >
+    );
+}); 
diff --git a/src/index.ts b/src/index.ts
@@ -20,6 +20,7 @@ export * from './controls/list';
 export * from './controls/loading';
 export * from './controls/menu';
 export * from './controls/please-wait';
+export * from './controls/progress-bar';
 export * from './controls/prompt';
 export * from './controls/qrcode';
 export * from './controls/search';
@@ -32,5 +33,5 @@ export { KWIZFluentContext, useKWIZFluentContext } from './helpers/context';
 export type { iKWIZFluentContext } from './helpers/context';
 export * from './helpers/drag-drop/exports';
 export * from './helpers/hooks';
-export { KnownClassNames, commonSizes } from './styles/styles';
+export { commonSizes, KnownClassNames } from './styles/styles';
 
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
@@ -67,6 +67,7 @@ export const KnownClassNames = {
     accordionBody: 'kfui-accordion-body',
     accordionBodyWrapper: 'kfui-accordion-body-wrapper',
     isOpen: 'is-opened',
+    progressBarStepLabel: 'step-label'
 }
 export const useCommonStyles = makeStyles({
     printShow: {

Original file line number	Diff line number	Diff line change
`@@ -67,6 +67,7 @@ export const KnownClassNames = {`
`67`	`67`	`accordionBody: 'kfui-accordion-body',`
`68`	`68`	`accordionBodyWrapper: 'kfui-accordion-body-wrapper',`
`69`	`69`	`isOpen: 'is-opened',`
	`70`	`+ progressBarStepLabel: 'step-label'`
`70`	`71`	`}`
`71`	`72`	`export const useCommonStyles = makeStyles({`
`72`	`73`	`printShow: {`