@dvrd/dvr-controls 1.0.23 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -24,27 +24,26 @@
     "@fortawesome/free-solid-svg-icons": "6.3.0",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@types/dompurify": "2.4.0",
-    "@types/js-cookie": "3.0.2",
-    "@types/lodash": "4.14.189",
-    "@types/node": "18.11.9",
-    "@types/react": "18.0.25",
+    "@types/js-cookie": "3.0.3",
+    "@types/lodash": "4.14.191",
+    "@types/node": "18.14.0",
+    "@types/react": "18.0.28",
     "@types/react-color": "3.0.6",
-    "@types/react-dom": "18.0.9",
+    "@types/react-dom": "18.0.11",
     "@types/react-router-dom": "5.3.3",
-    "@types/uuid": "8.3.4",
+    "@types/uuid": "9.0.0",
     "classnames": "2.3.2",
     "cross-env": "7.0.3",
-    "dompurify": "2.4.1",
+    "dompurify": "3.0.0",
     "js-cookie": "3.0.1",
     "lodash": "4.17.21",
     "moment": "2.29.4",
     "react": "18.2.0",
     "react-color": "2.19.3",
     "react-dom": "18.2.0",
-    "react-rnd": "10.3.7",
-    "react-router": "^6.8.0",
-    "react-router-dom": "6.4.3",
-    "typescript": "4.9.3",
+    "react-rnd": "10.4.1",
+    "react-router-dom": "6.8.1",
+    "typescript": "4.9.5",
     "uuid": "9.0.0"
   }
 }

package/src/js/header/DVRHeader.tsx

@@ -50,6 +50,7 @@ interface Props {
     menuLabelColor?: string;
     topControl: boolean;
     topControlProps?: Partial<TopButtonProps>;
+    onClickItem?: (item: HeaderItem) => MouseEventHandler;
 }
 
 interface State {
@@ -236,7 +237,7 @@ export default class DVRHeader extends PureComponent<Props, State> {
         const {onClick, component, customClass, icon, iconOnly, label} = item,
             renderAble: RenderAble = {
                 toRender: null,
-                clickHandler: onClick,
+                clickHandler: this.props.onClickItem?.(item) ?? onClick,
                 isComp: false,
             }, className = classNames('dvr-header-item', customClass);
         if (iconOnly) {

package/src/js/input/v2/inputController_v2.tsx

@@ -2,13 +2,22 @@
  * Copyright (c) 2021. Dave van Rijn Development
  */
 import React, {
-    ChangeEventHandler, CSSProperties, EventHandler, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler,
-    MouseEventHandler, PureComponent, ReactNode, TextareaHTMLAttributes
+    ChangeEventHandler,
+    CSSProperties,
+    DetailedHTMLProps,
+    EventHandler,
+    FocusEventHandler,
+    InputHTMLAttributes,
+    KeyboardEventHandler,
+    MouseEventHandler,
+    PureComponent,
+    ReactNode,
+    TextareaHTMLAttributes
 } from 'react';
 import {assert, enterPressed} from "../../util/controlUtil";
 import SimpleInput from "../simple/v2/simpleInputV2";
 import {ControlVariant, ErrorType, OrnamentShape} from "../../util/interfaces";
-import { generateComponentId } from '../../../..';
+import {generateComponentId} from '../../../..';
 
 type HTMLProps = Omit<InputHTMLAttributes<any>, 'onChange' | 'step' | 'children'>;
 
@@ -76,7 +85,7 @@ export interface DVRInputProps extends Omit<DVRInputControllerProps, 'value' | '
     inputStyle?: CSSProperties;
     // Other
     error: ErrorType;
-    inputProps?: InputHTMLAttributes<any>;
+    inputProps?: Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, HTMLInputElement | HTMLTextAreaElement>, 'crossOrigin'>;
     ornaments?: OrnamentShape | OrnamentShape[];
     clearAble: boolean;
     fullWidth: boolean;
@@ -206,7 +215,7 @@ export default class InputControllerV2 extends PureComponent<DVRInputControllerP
 
     getViewValue = (): string | number => {
         const {value, unControlled} = this.props;
-        if(unControlled || value === undefined) return this.state.value;
+        if (unControlled || value === undefined) return this.state.value;
         return value;
     };
 

package/src/js/navigator/navigator.tsx

@@ -3,20 +3,16 @@
  */
 
 import React from 'react';
-// import {RouteComponentProps, withRouter} from "react-router";
-import { useNavigate } from 'react-router-dom';
-import { useLocation } from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 import {debug} from '../util/miscUtil';
 
-// let navigationData: any = null;
-
 export default function AppNavigator() {
-    const location = useLocation();
     const navigate = useNavigate();
 
     function onNavigate(evt: React.MouseEvent) {
         const navigator: HTMLButtonElement = evt.target as HTMLButtonElement;
-        const url = navigator.dataset.url + (navigator.dataset.strip === '0' ? location.search : '');
+        const search = window.location.search;
+        const url = navigator.dataset.url + (navigator.dataset.strip === '0' ? search : '');
         navigator.dataset.strip = '0';
         debug(`Navigating to ${url}`);
         navigate(url);

package/src/js/pdf/pdfTemplateCreator.tsx

@@ -10,7 +10,6 @@ import {
     directTimeout,
     dispatchCustomEvent,
     DvrdButton,
-    generateComponentId,
     generateUUID,
     IndexedObject,
     PDFElementParams,
@@ -48,10 +47,11 @@ interface Props {
     maxWidth?: string;
     supportMultiPage: boolean;
     options?: PDFOptions;
+    singleImage: boolean;
 }
 
 interface State {
-    elements: IndexedObject<React.ReactElement>;
+    elements: IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }>;
     focusedElement: PdfElement | null;
     canUndo: boolean;
     canRedo: boolean;
@@ -62,25 +62,20 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
         values: {},
         disableElements: [],
         supportMultiPage: false,
+        singleImage: false,
     };
-
-    private readonly id: string = generateComponentId(this.props.id, true);
     private refObjects: IndexedObject<PdfElement>;
 
-    state: State = {
-        elements: {}, focusedElement: null, canRedo: false, canUndo: false,
-    };
-
     constructor(props: Props) {
         super(props);
         this.refObjects = {};
-        const elements: IndexedObject<React.ReactElement> = this.processItems(props.defaultItems);
+        const elements: IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> = this.processItems(props.defaultItems);
         this.state = {elements, focusedElement: null, canRedo: false, canUndo: false};
     }
 
     processItems = (items?: DefaultPDFElementParams<any, any>[],
-                    convertUnits: boolean = true): IndexedObject<React.ReactElement> => {
-        const elements: IndexedObject<React.ReactElement> = {};
+                    convertUnits: boolean = true): IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> => {
+        const elements: IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> = {};
         if (items?.length) {
             items = JSON.parse(JSON.stringify(items));
             if (items) {
@@ -154,12 +149,13 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
 
     onAddElement = (type: PDFElementType) => (evt: React.MouseEvent) => {
         evt.stopPropagation();
-        const id = generateUUID(), scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) + 50,
-            {elements} = this.state;
+        const id = generateUUID();
+        const scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) + 50;
+        const newElements = Object.assign({}, this.state.elements);
 
-        elements[id] = this.getElement(id,
+        newElements[id] = this.getElement(id,
             {dimensions: {width: 150, height: 100, left: 50, top: scrollTop}, type});
-        this.setState({elements: Object.assign({}, elements)});
+        this.setState({elements: newElements});
     };
 
     onSubmit = () => {
@@ -189,7 +185,7 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
     };
 
     getElement = (id: string, config: DefaultPDFElementParams<any, any>,
-                  convertUnits: boolean = true): React.ReactElement => {
+                  convertUnits: boolean = true): { element: React.ReactElement, config: DefaultPDFElementParams<any, any> } => {
         const {dimensions, linkedID, persistent} = config;
         const position: { x: number; y: number } = {
             x: convertUnits ? ptToPx(dimensions?.left || 0) : (dimensions?.left || 0),
@@ -212,20 +208,38 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
             defaultSettings: {...config.dimensions, ...config.options},
             key,
         }
+        let element = <div/>;
         switch (config.type) {
             case PDFElementType.TEXT:
-                return <PdfText {...sharedProps} values={values} persistent={persistent} mainFont={mainFont}
-                                linkedID={linkedID}/>;
+                element = <PdfText {...sharedProps} values={values} persistent={persistent} mainFont={mainFont}
+                                   linkedID={linkedID}/>;
+                break;
             case PDFElementType.IMAGE:
-                return <PdfImage {...sharedProps} values={values} width={width} height={height}
-                                 persistent={persistent}/>;
+                element = <PdfImage {...sharedProps} values={values} width={width} height={height}
+                                    persistent={persistent}/>;
+                break;
             case PDFElementType.INVOICE_TABLE:
-                return <PdfInvoiceTable {...sharedProps} width={width} height={height} mainFont={mainFont}
-                                        persistent={PDFElementPersist.PERSISTENT}/>;
+                element = <PdfInvoiceTable {...sharedProps} width={width} height={height} mainFont={mainFont}
+                                           persistent={PDFElementPersist.PERSISTENT}/>;
+                break;
         }
-        return <div/>;
+        return {element, config};
     };
 
+    canRenderImageButton = (): boolean => {
+        if (this.props.disableElements.includes('image')) return false;
+        if (!this.props.singleImage) return true;
+        const {elements} = this.state;
+        const elementIds = Object.keys(elements);
+        if (elementIds.length) {
+            for (const id of elementIds) {
+                const config = elements[id].config;
+                if (config.type === PDFElementType.IMAGE) return false;
+            }
+        }
+        return true;
+    }
+
     renderElementButton = (icon: IconName, label: string, type: PDFElementType) => (
         <div className='element-button' onClick={this.onAddElement(type)}>
             <AwesomeIcon name={icon} className='element-icon'/>
@@ -257,12 +271,13 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
                     <div>
                         <DvrdButton onClick={this.onSubmit} label='Opslaan'/>
                         {onClickProceed !== undefined &&
-                            <DvrdButton onClick={this.onClickProceed} label='Naar volgende stap' className='proceed-btn'/>}
+                            <DvrdButton onClick={this.onClickProceed} label='Naar volgende stap'
+                                        className='proceed-btn'/>}
                     </div>
                 </div>
                 <div/>
                 <div className='elements-container'>
-                    {!disableElements.includes('image') &&
+                    {this.canRenderImageButton() &&
                         this.renderElementButton('image', 'Afbeelding', PDFElementType.IMAGE)}
                     {!disableElements.includes('text') &&
                         this.renderElementButton('font', 'Tekst', PDFElementType.TEXT)}
@@ -287,7 +302,7 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
                 <div className='pdf-paper' onClick={this.onResetElement}>
                     {Object.keys(elements).map((id: string) => (
                         <Fragment key={id}>
-                            {elements[id]}
+                            {elements[id].element}
                         </Fragment>
                     ))}
                 </div>

package/src/js/slider/DVRSlider.tsx

@@ -3,7 +3,7 @@
  */
 import './style/DVRSlider.scss';
 
-import React, {CSSProperties, MouseEventHandler, PureComponent} from 'react';
+import React, {CSSProperties, DetailedHTMLProps, InputHTMLAttributes, MouseEventHandler, PureComponent} from 'react';
 import {ChangeFunction, Colors, convertColor, generateComponentId} from "../../..";
 import {ElementPosition} from '../util/interfaces';
 import {ControlContext} from "../util/controlContext";
@@ -22,7 +22,7 @@ interface Props {
     asNumber?: boolean;
     label?: string;
     labelPosition: ElementPosition;
-    inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    inputProps?: Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'crossOrigin'>;
 }
 
 export default class DVRSlider extends PureComponent<Props> {
@@ -62,7 +62,7 @@ export default class DVRSlider extends PureComponent<Props> {
         if (onMouseLeave) onMouseLeave(evt);
     };
 
-    getInputProps = (): React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> => {
+    getInputProps = (): Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'crossOrigin'> => {
         const {inputProps} = this.props, defaultProps = {min: 0, max: 100, step: 1};
         return Object.assign({}, defaultProps, inputProps);
     }

package/src/js/textField/dvrdInput.tsx

@@ -4,14 +4,23 @@
 import './style/dvrdInput.scss';
 
 import React, {
-    ChangeEventHandler, CSSProperties, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler,
-    PureComponent
+    ChangeEventHandler,
+    CSSProperties,
+    DetailedHTMLProps,
+    FocusEventHandler,
+    InputHTMLAttributes,
+    KeyboardEventHandler,
+    MouseEventHandler,
+    useEffect,
+    useMemo,
+    useRef,
+    useState
 } from 'react';
 import classNames from "classnames";
 import {ElementPosition, ErrorType, OrnamentShape} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
 import {directTimeout} from '../util/componentUtil';
-import {ControlContext} from "../util/controlContext";
+import {stopPropagation} from "../util/controlUtil";
 
 interface Props {
     onChange: ChangeEventHandler;
@@ -25,7 +34,8 @@ interface Props {
     autoSelect?: boolean;
     label?: string;
     ornaments?: OrnamentShape | OrnamentShape[];
-    inputProps?: InputHTMLAttributes<any>;
+    // inputProps?: InputHTMLAttributes<any> & TextareaHTMLAttributes<any>;
+    inputProps?: Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, HTMLInputElement | HTMLTextAreaElement>, 'crossOrigin'>;
     className?: string;
     inputClassName?: string;
     labelClassName?: string;
@@ -38,48 +48,47 @@ interface Props {
     noResize?: boolean;
 }
 
-interface State {
-    active: boolean;
-}
-
-export default class DvrdInput extends PureComponent<Props, State> {
-    static contextType = ControlContext;
-    private input: HTMLInputElement | HTMLTextAreaElement;
-
-    state: State = {
-        active: this.props.autoFocus === true,
-    };
-
-    onClickElement = (evt: React.MouseEvent) => {
-        evt.stopPropagation();
-        this.focusInput();
-    };
+export default function DvrdInput(props: Props) {
+    const {
+        area, id, label, labelClassName, errorClassName, inputClassName, className, ornamentClassName, inputProps,
+        disabled, onBlur, value, onChange, onFocus, autoSelect, autoFocus, onClearInput, noResize, onKeyDown, fullWidth,
+        ornaments, error
+    } = props;
+    const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
+    const [active, setActive] = useState(props.autoFocus ?? false);
+    const hasOrnaments = useMemo(() => !(!ornaments || (Array.isArray(ornaments) && !ornaments.length)),
+        [ornaments]);
+
+    function onClickElement(evt: React.MouseEvent) {
+        stopPropagation(evt);
+        focusInput();
+    }
 
-    onFocusInput = (evt: React.FocusEvent) => {
-        const {disabled, onFocus, autoSelect, value} = this.props;
+    function onFocusInput(evt: React.FocusEvent) {
         if (!disabled) {
-            this.setState({active: true});
-            if (autoSelect) {
-                this.input.selectionStart = 0;
-                this.input.selectionEnd = value.toString().length;
+            setActive(true);
+            const input = inputRef.current;
+            if (autoSelect && input) {
+                input.selectionStart = 0;
+                input.selectionEnd = value.toString().length;
             }
         }
-        if (onFocus)
-            onFocus(evt);
-    };
+        onFocus?.(evt);
+    }
 
-    onBlurInput = (evt: React.FocusEvent) => {
-        const {disabled, onBlur} = this.props;
-        if (!disabled) this.setState({active: false});
-        if (onBlur)
-            onBlur(evt);
-    };
+    function onBlurInput(evt: React.FocusEvent) {
+        if (!disabled) setActive(false);
+        onBlur?.(evt);
+    }
 
-    hasError = (): boolean => this.props.error !== undefined && this.props.error !== null;
+    function focusInput(retry: boolean = false) {
+        if (inputRef.current) inputRef.current.focus();
+        else if (retry) directTimeout(focusInput);
+    }
 
-    getContentStyle = (): CSSProperties => {
-        const style: CSSProperties = {gridTemplateColumns: '1fr'}, {ornaments, onClearInput} = this.props;
-        if (!ornaments || (Array.isArray(ornaments) && !ornaments.length)) style.gridTemplateColumns = '1fr';
+    function getContentStyle(): CSSProperties {
+        const style: CSSProperties = {gridTemplateColumns: '1fr'};
+        if (!hasOrnaments) style.gridTemplateColumns = '1fr';
         let hasLeft: boolean = false, hasRight: boolean = onClearInput !== undefined;
         if (Array.isArray(ornaments))
             for (const ornament of ornaments) {
@@ -106,114 +115,84 @@ export default class DvrdInput extends PureComponent<Props, State> {
         style.paddingRight = paddingRight;
         style.paddingLeft = paddingLeft;
         return style;
-    };
-
-    focusInput = (retry: boolean = false) => {
-        if (this.input) this.input.focus();
-        else if (retry) directTimeout(this.focusInput);
-    };
+    }
 
-    renderLabel = () => {
-        const {label, labelClassName} = this.props;
+    function renderLabel() {
         if (!label) return null;
-        return <label className={classNames('dvrd-input-label', labelClassName)}
-                      onClick={this.onClickElement}>{label}</label>
-    };
+        return (
+            <label className={classNames('dvrd-input-label', labelClassName)} onClick={onClickElement}>{label}</label>
+        );
+    }
 
-    renderInput = () => {
-        const {value, onChange, onKeyDown, disabled, inputProps, inputClassName, id, area, noResize} = this.props,
-            elementProps = {
-                ...inputProps,
-                value,
-                onChange,
-                onFocus: this.onFocusInput,
-                onBlur: this.onBlurInput,
-                onKeyDown,
-                disabled,
-                className: classNames('dvrd-input', inputClassName, noResize && 'no-resize'),
-                id: `${id}-input`,
-                ref: (ref: HTMLInputElement & HTMLTextAreaElement) => {
-                    this.input = ref
-                },
-            };
+    function renderInput() {
+        const elementProps = {
+            ...inputProps, value, onChange, onFocus: onFocusInput, onBlur: onBlurInput, onKeyDown, disabled,
+            className: classNames('dvrd-input', inputClassName, noResize && 'no-resize'), id: `${id}-input`,
+            ref: inputRef,
+        };
         if (area) return <textarea {...elementProps}/>;
         return <input {...elementProps}/>
-    };
+    }
 
-    renderLeftOrnament = () => {
-        const {ornaments} = this.props;
-        if (!ornaments || (Array.isArray(ornaments) && !ornaments.length)) return null;
+    function renderLeftOrnament() {
+        if (!hasOrnaments) return null;
         if (Array.isArray(ornaments)) {
             for (const ornament of ornaments) {
                 if (!ornament.placement || ornament.placement === ElementPosition.LEFT)
-                    return this.renderOrnament(ornament);
+                    return renderOrnament(ornament);
             }
-        } else if (!ornaments.placement || ornaments.placement === ElementPosition.LEFT)
-            return this.renderOrnament(ornaments);
+        } else if (ornaments && (!ornaments.placement || ornaments.placement === ElementPosition.LEFT))
+            return renderOrnament(ornaments);
         return null;
-    };
+    }
 
-    renderRightOrnament = () => {
-        const {ornaments, onClearInput, value} = this.props;
-        if (onClearInput && value) return this.renderOrnament({
+    function renderRightOrnament() {
+        if (onClearInput && value) return renderOrnament({
             element: <AwesomeIcon onClick={onClearInput} name='backspace' className='clear-btn'/>,
             placement: ElementPosition.RIGHT
         });
-        if (!ornaments || (Array.isArray(ornaments) && !ornaments.length)) return null;
+        if (!hasOrnaments) return null;
         if (Array.isArray(ornaments)) {
             for (const ornament of ornaments) {
                 if (ornament.placement === ElementPosition.RIGHT)
-                    return this.renderOrnament(ornament);
+                    return renderOrnament(ornament);
             }
-        } else if (ornaments.placement === ElementPosition.RIGHT)
-            return this.renderOrnament(ornaments);
+        } else if (ornaments && ornaments.placement === ElementPosition.RIGHT)
+            return renderOrnament(ornaments);
         return null;
-    };
+    }
 
-    renderOrnament = (ornament: OrnamentShape) => {
-        const {ornamentClassName} = this.props;
+    function renderOrnament(ornament: OrnamentShape) {
         if (typeof ornament.element === 'string')
             return <span className={classNames('dvrd-input-ornament', ornamentClassName)}
-                         onClick={this.onClickElement}>{ornament.element}</span>;
+                         onClick={onClickElement}>{ornament.element}</span>;
         else return React.cloneElement(ornament.element, {
             className: classNames(ornament.element.props.className, ornamentClassName),
             onClick: (evt: React.MouseEvent) => {
-                this.onClickElement(evt);
-                if (React.isValidElement(ornament.element)){
+                onClickElement(evt);
+                if (React.isValidElement(ornament.element)) {
                     const element: React.ReactElement = ornament.element;
                     element.props.onClick?.(evt);
                 }
             }
         });
-    };
-
-    renderError = () => {
-        const {error, errorClassName} = this.props;
-        return <span className={classNames('dvrd-input-error', errorClassName)}>{error}</span>
     }
 
-    componentDidUpdate = (prevProps: Props) => {
-        if (this.props.autoFocus && !prevProps.autoFocus) this.focusInput(true);
-    }
-
-    componentDidMount = () => {
-        if (this.props.autoFocus) this.focusInput(true);
-    };
-
-    render = () => {
-        const {disabled, className, id, fullWidth} = this.props, {active} = this.state;
-        return (
-            <div onClick={this.onClickElement} id={id}
-                 className={classNames('dvrd-input-container', disabled && 'disabled', this.hasError() && 'error',
-                     active && 'active', fullWidth && 'full', className)}>
-                {this.renderLabel()}
-                <div className='content-container' style={this.getContentStyle()}>
-                    {this.renderLeftOrnament()}
-                    {this.renderInput()}
-                    {this.renderRightOrnament()}
-                </div>
-                {this.renderError()}
+    useEffect(() => {
+        if (autoFocus) focusInput(true);
+    }, [autoFocus]);
+
+    return (
+        <div onClick={onClickElement} id={id}
+             className={classNames('dvrd-input-container', disabled && 'disabled', !!error && 'error',
+                 active && 'active', fullWidth && 'full', className)}>
+            {renderLabel()}
+            <div className='content-container' style={getContentStyle()}>
+                {renderLeftOrnament()}
+                {renderInput()}
+                {renderRightOrnament()}
             </div>
-        )
-    }
+            <span className={classNames('dvrd-input-error', errorClassName)}>{error}</span>
+        </div>
+    )
 }