@dvrd/dvr-controls 1.1.30 → 1.1.31

package/index.ts

@@ -13,7 +13,7 @@ library.add(fab, far, fas);
 
 import ButtonController from './src/js/button/buttonController';
 import CheckboxController from './src/js/checkbox/checkboxController';
-import DialogController, {type DialogActionShape} from './src/js/dialog/dialogController';
+import DialogController from './src/js/dialog/dialogController';
 import InlineDialog from './src/js/dialog/inlineDialog';
 import PasswordInput from './src/js/input/password/passwordInput';
 import PasswordRules from './src/js/input/password/passwordRules';
@@ -59,6 +59,7 @@ import FileUpload from './src/js/fileUpload/fileUpload';
 import DvrdRadioController from './src/js/radio/dvrdRadioController';
 import MobileNavigation from './src/js/navigation/mobileNavigation';
 import NumberString from './src/js/util/numberString';
+import { DialogActionShape } from './src/js/util/interfaces';
 
 export {
     // Components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.1.30",
+  "version": "1.1.31",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/dialog/dialog.tsx

@@ -4,204 +4,109 @@
 
 import './style/dialog.scss';
 
-import React, {MouseEventHandler} from 'react';
+import React, {CSSProperties, useContext, useEffect, useMemo} from 'react';
 import classNames from 'classnames';
 import ButtonController from "../button/buttonController";
 import {ControlContext} from "../util/controlContext";
-import {enterPressed, generateUUID, hasHover} from "../util/controlUtil";
+import {enterPressed} from "../util/controlUtil";
 import {colorIsWhite, convertColor} from "../util/colorUtil";
-import {ControlVariant} from "../util/interfaces";
-import {DialogActions, DialogActionShape} from "./dialogController";
+import {ControlVariant, DialogActionShape, DialogDataShapeWithID} from "../util/interfaces";
+import {DialogActions} from '../util/types';
 
 interface Props {
-    onClose?: (id?: string) => void;
-    className: string;
-    open?: boolean;
-    data?: DataShape;
-    id?: string;
+    onClose: (id: string) => VoidFunction;
+    data: DialogDataShapeWithID;
+    className?: string;
+    backgroundClassName?: string;
+    zIndex?: number | string;
 }
 
-interface State {
-    open: boolean;
-    message: string | React.ReactElement;
-    title: string;
-    actions?: DialogActions;
-    transparent: boolean;
-    content: React.ReactElement | null;
-}
-
-interface DataShape {
-    message: string | React.ReactElement;
-    title?: string;
-    actions?: DialogActions;
-    transparent?: boolean;
-    persistent?: boolean;
-    buttonVariant?: ControlVariant;
-}
-
-export default class Dialog extends React.Component<Props, State> {
-    declare context: React.ContextType<typeof ControlContext>;
-    static contextType = ControlContext;
-    static defaultProps = {
-        className: '',
-    };
-    private buttonVariant: ControlVariant = ControlVariant.OUTLINED;
-
-    onClose = () => {
-        const {onClose, id} = this.props;
-        this.removeKeyListener();
-        this.setState({open: false}, () => {
-            if (onClose) onClose(id);
-        });
-    };
-
-    getDefaultAction = (): DialogActions => ['Oke'];
-
-    state: State = {
-        open: false,
-        message: '',
-        content: null,
-        title: 'Bericht van het systeem',
-        actions: this.getDefaultAction(),
-        transparent: false,
-    };
-
-    dialog: HTMLElement | null = null;
-    id = generateUUID();
-    persistent = false;
-
-    onClickBackground = () => {
-        if (!this.persistent && this.dialog !== null && !hasHover(this.dialog))
-            this.onClose();
-    };
-
-    // =============== NOTE Use function below to open the dialog
-    onOpen = (data: DataShape) => {
-        const message = data.message, title = data.title === undefined ? 'Bericht van het systeem' : data.title,
-            actions = data.actions === undefined ? this.getDefaultAction() : data.actions,
-            transparent = data.transparent === undefined ? false : data.transparent;
-        this.persistent = data.persistent === undefined ? true : data.persistent;
-        if (data.buttonVariant) this.buttonVariant = data.buttonVariant;
-        this.setState({message, title, actions, transparent}, () => {
-            this.setState({open: true});
-        });
-        this.addKeyListener();
-    };
-
-    onEnterPressed = (evt: KeyboardEvent) => {
-        evt.stopPropagation();
-        const {actions} = this.state;
-        if (actions)
-            for (const action of actions) {
-                if (typeof (action) === 'string' || action.primary) {
-                    if (typeof action === 'string') this.onClose();
-                    else if (action.onClick) action.onClick(evt as any as React.MouseEvent);
-                    break;
-                }
-            }
+export default function Dialog(props: Props) {
+    const {baseColor, contrastColor} = useContext(ControlContext);
+    const {onClose, data, className, backgroundClassName} = props;
+    const actions: DialogActions = useMemo(() => {
+        return data.actions ?? ['Oke'];
+    }, [data.actions]);
+    const colorStyle: CSSProperties = useMemo(() => ({
+        color: convertColor(colorIsWhite(baseColor) ? contrastColor : baseColor),
+    }), [baseColor, contrastColor])
+    const zIndex = useMemo(() => {
+        return data.zIndex ?? props.zIndex;
+    }, [props.zIndex, data.zIndex])
+
+    function onClickBackground(evt: React.MouseEvent) {
+        if (data.persistent) return;
+        if (evt.target !== evt.currentTarget) return;
+        onClose(data.id)();
     }
 
-    keyListener = (evt: KeyboardEvent) => {
-        if (enterPressed(evt)) {
-            this.onEnterPressed(evt);
+    function extendOnClick(action: DialogActionShape) {
+        return function(evt: React.MouseEvent) {
+            if (!action.keepOpen) onClose(data.id)();
+            action.onClick?.(evt);
         }
-    };
-
-    addKeyListener = () => {
-        document.addEventListener('keydown', this.keyListener);
-    };
-
-    removeKeyListener = () => {
-        document.removeEventListener('keydown', this.keyListener);
-    };
-
-    getColorStyle = (): object => {
-        const {baseColor, contrastColor} = this.context,
-            color = colorIsWhite(baseColor) ? contrastColor : baseColor;
-        return {color: convertColor(color)};
-    };
-
-    extendOnClick = (action: DialogActionShape): MouseEventHandler => (evt: any) => {
-        if (!action.keepOpen)
-            this.onClose();
-        action.onClick?.(evt);
-    };
-
-    getActions = () => {
-        const {actions} = this.state;
-        if (actions === undefined || actions === null) return this.generateDefaultAction();
-        if (Array.isArray(actions))
-            return actions.map(this.renderAction);
-        return this.renderAction(actions);
-    };
+    }
 
-    generateDefaultAction = (): React.ReactNode => (
-        <ButtonController label={'Oke'} onClick={this.onClose} type='outlined' containerClass='dialogButton'/>
-    );
+    function keyListener(evt: KeyboardEvent) {
+        if (!enterPressed(evt) || !actions) return;
+        const primaryAction = actions.find(action => typeof action === 'string' || action.primary);
+        if (!primaryAction) return;
 
-    renderAction = (action: DialogActionShape | string, index?: number) => {
-        const keyProp = index === undefined ? {} : {key: index};
-        if (typeof action === 'string') return (
-            <ButtonController {...keyProp} label={action} onClick={this.onClose}
-                              type={this.buttonVariant} containerClass='dialogButton'/>
-        );
-        return (
-            <ButtonController {...keyProp} label={action.label} onClick={this.extendOnClick(action)}
-                              type={this.buttonVariant} containerClass='dialogButton' primary={action.primary}/>
-        );
-    };
+        if (typeof primaryAction === 'string') onClose(data.id)();
+        else if (primaryAction.onClick) primaryAction.onClick(evt);
+    }
 
-    renderTitle = (): React.ReactNode => {
-        const {title} = this.state;
+    function renderTitle() {
         return (
-            <div className='dialogTitleContainer'>
-                <label className='dialogTitle' style={this.getColorStyle()}>{title}</label>
+            <div className='dialog-title-container'>
+                <label className='dialog-title' style={colorStyle}>{data.title}</label>
             </div>
         )
-    };
+    }
 
-    renderMessage = (): React.ReactNode => {
-        const {message} = this.state;
+    function renderMessage() {
+        const message = data.message;
         return (
-            <div className='dialogMessageContainer'>
-                {typeof message === 'string' ? <p className='dialogMessage'>{message}</p> : message}
+            <div className='dialog-message-container'>
+                {typeof message === 'string' ? <p className='dialog-message'>{message}</p> : message}
             </div>
         )
-    };
+    }
 
-    renderActions = (): React.ReactNode => {
-        const actions = this.getActions();
+    function renderActions() {
         return (
-            <div className='dialogActionsContainer'>
-                {actions}
+            <div className='dialog-actions-container'>
+                {actions.map(renderAction)}
             </div>
         )
-    };
-
-    componentDidMount = () => {
-        const {open, data} = this.props;
-        if (open && data) this.onOpen(data);
-    };
-
-    componentWillUnmount = () => {
-        this.removeKeyListener();
-    };
+    }
 
-    render = () => {
-        const {open, transparent} = this.state, {className} = this.props;
-        if (!open && !this.props.open) return null;
+    function renderAction(action: DialogActionShape | string, index: number) {
+        if (typeof action === 'string') return (
+            <ButtonController key={index} label={action} onClick={onClose(data.id)} type={ControlVariant.OUTLINED}
+                              containerClass='dialog-button'/>
+        );
         return (
-            <div className={classNames('dialogContainer', transparent && 'transparent')}
-                 onClick={this.onClickBackground}>
-                <div className={classNames('dvr-dialog', className)} ref={ref => {
-                    this.dialog = ref
-                }}>
-                    {this.renderTitle()}
-                    {this.renderMessage()}
-                    {this.renderActions()}
-                </div>
-            </div>
-            // </WithEvents>
-        )
+            <ButtonController key={index} label={action.label} onClick={extendOnClick(action)}
+                              type={ControlVariant.OUTLINED} containerClass='dialog-button' primary={action.primary}/>
+        );
     }
+
+    useEffect(() => {
+        document.addEventListener('keydown', keyListener);
+        return () => {
+            document.removeEventListener('keydown', keyListener);
+        }
+    }, [keyListener]);
+
+    return (
+        <div className={classNames('dialog-container', backgroundClassName)} style={{zIndex}}
+             onClick={onClickBackground}>
+            <div className={classNames('dvr-dialog', className)}>
+                {renderTitle()}
+                {renderMessage()}
+                {renderActions()}
+            </div>
+        </div>
+    )
 }

package/src/js/dialog/dialogController.tsx

@@ -1,71 +1,41 @@
 /*
- * Copyright (c) 2024. Dave van Rijn Development
+ * Copyright (c) 2024 - 2026. Dave van Rijn Development
  */
 
 import * as React from 'react';
-import {Fragment, MouseEventHandler, PureComponent, ReactElement} from 'react';
-import {ControlVariant, CustomAppEvent, IndexedObject} from '../util/interfaces';
+import {useState} from 'react';
+import {DialogDataShape, DialogDataShapeWithID} from '../util/interfaces';
+import {generateComponentId, useEvent} from "../util/componentUtil";
 import Dialog from './dialog';
-import {generateComponentId} from "../util/componentUtil";
-import {WithEvents} from "../../../index";
-
-export interface DialogActionShape {
-    label: string;
-    onClick?: MouseEventHandler;
-    primary?: boolean;
-    keepOpen?: true;
-}
-
-export type DialogActions = (DialogActionShape | string)[];
 
 interface Props {
     className?: string;
+    backgroundClassName?: string;
+    zIndex?: number | string;
 }
 
-interface State {
-    dialogs: IndexedObject<ReactElement>
-}
-
-interface DataShape {
-    message: string | React.ReactElement;
-    title?: string;
-    actions?: DialogActions;
-    transparent?: boolean;
-    persistent?: boolean;
-    buttonVariant?: ControlVariant;
-}
+export default function DialogController(props: Props) {
+    const {className, backgroundClassName, zIndex} = props;
+    const [dialogs, setDialogs] = useState<Array<DialogDataShapeWithID>>([]);
+    useEvent('onOpenDialog', onOpen);
 
-export default class DialogController extends PureComponent<Props, State> {
-    state: State = {
-        dialogs: {},
-    };
-
-    onClose = (id?: string) => {
-        if (id) {
-            const dialogs = Object.assign({}, this.state.dialogs);
-            delete dialogs[id];
-            this.setState({dialogs});
+    function onClose(id: string) {
+        return function() {
+            setDialogs(dialogs.filter(dialog => dialog.id !== id));
         }
     }
 
-    onOpen = (data: DataShape) => {
-        const dialogs = Object.assign({}, this.state.dialogs), id = generateComponentId();
-        dialogs[id] = <Dialog open data={data} id={id} onClose={this.onClose}/>;
-        this.setState({dialogs});
-    };
-
-    getEvents = (): CustomAppEvent[] => [
-        {eventName: 'onOpenDialog', handler: this.onOpen},
-    ];
+    function onOpen(data: DialogDataShape) {
+        const id = generateComponentId();
+        setDialogs([...dialogs, {id, ...data}]);
+    }
 
-    render = () => {
-        const {className} = this.props;
-        return <WithEvents events={this.getEvents()}>
-            {Object.values(this.state.dialogs).map((element: ReactElement<any>, key: number) => (
-                <Fragment key={key}>
-                    {React.cloneElement(element, {className})}
-                </Fragment>
-            ))}
-        </WithEvents>
+    function renderDialog(data: DialogDataShapeWithID) {
+        return (
+            <Dialog onClose={onClose} data={data} zIndex={zIndex} className={className}
+                    backgroundClassName={backgroundClassName} key={data.id}/>
+        )
     }
-}
+
+    return dialogs.map(renderDialog);
+}

package/src/js/dialog/inlineDialog.tsx

@@ -10,7 +10,7 @@ import ButtonController from "../button/buttonController";
 import {ControlContext} from "../util/controlContext";
 import {generateUUID, hasHover} from "../util/controlUtil";
 import {colorIsWhite, convertColor} from "../util/colorUtil";
-import {DialogActionShape} from "./dialogController";
+import {DialogActionShape} from '../util/interfaces';
 
 interface DialogProps {
     onClose: Function,
@@ -29,7 +29,7 @@ export default class InlineDialog extends React.Component<DialogProps> {
     static contextType = ControlContext;
 
     static defaultProps = {
-        title: 'Bericht van Klaverjassen',
+        title: 'Bericht van het systeem',
         actions: null,
         transparent: false,
         persistent: true,
@@ -72,19 +72,19 @@ export default class InlineDialog extends React.Component<DialogProps> {
         if (Array.isArray(actions))
             return actions.map((action: DialogActionShape, key: any) => (
                 <ButtonController key={key} label={action.label} onClick={this.onClickAction(action.onClick)}
-                                  type='outlined' containerClass='dialogButton'/>
+                                  type='outlined' containerClass='dialog-button'/>
             ));
         return <ButtonController label={actions.label} onClick={this.onClickAction(actions.onClick)} type='outlined'/>
     };
 
     generateDefaultAction = (): React.ReactNode => <ButtonController label={'Oke'} onClick={this.onClickDefault}
-                                                                     type='outlined' containerClass='dialogButton'/>;
+                                                                     type='outlined' containerClass='dialog-button'/>;
 
     renderTitle = (): React.ReactNode => {
         const {title} = this.props;
         return (
-            <div className='dialogTitleContainer'>
-                <label className='dialogTitle' style={this.getColorStyle()}>{title}</label>
+            <div className='dialog-title-container'>
+                <label className='dialog-title' style={this.getColorStyle()}>{title}</label>
             </div>
         )
     };
@@ -92,8 +92,8 @@ export default class InlineDialog extends React.Component<DialogProps> {
     renderMessage = (): React.ReactNode => {
         const {message, content} = this.props;
         return (
-            <div className='dialogMessageContainer'>
-                <p className='dialogMessage'>{message}</p>
+            <div className='dialog-message-container'>
+                <p className='dialog-message'>{message}</p>
                 {content !== undefined && content}
             </div>
         )
@@ -102,7 +102,7 @@ export default class InlineDialog extends React.Component<DialogProps> {
     renderActions = (): React.ReactNode => {
         const actions = this.getActions();
         return (
-            <div className='dialogActionsContainer'>
+            <div className='dialog-actions-container'>
                 {actions}
             </div>
         )
@@ -112,7 +112,7 @@ export default class InlineDialog extends React.Component<DialogProps> {
         const {open, transparent, containerClass} = this.props;
         if (!open) return null;
         return (
-            <div className={classNames('dialogContainer', transparent && 'transparent', containerClass)}
+            <div className={classNames('dialog-container', transparent && 'transparent', containerClass)}
                  onClick={this.onClickBackground}>
                 <div className='dialog' ref={ref => {
                     this.dialog = ref

package/src/js/dialog/style/dialog.scss

@@ -6,7 +6,7 @@
 @use '../../../style/colors';
 @use '../../../style/display-breakpoints' as breakpoints;
 
-.dialogContainer {
+.dialog-container {
   @include commons.popupContainer;
   z-index: commons.$z-index-dialog;
 
@@ -24,15 +24,15 @@
       padding: 1.5rem 2rem;
     }
 
-    .dialogTitleContainer {
+    .dialog-title-container {
 
-      .dialogTitle {
+      .dialog-title {
         font-size: 1.2rem;
         user-select: none;
       }
     }
 
-    .dialogMessageContainer {
+    .dialog-message-container {
       padding: 1.5rem 0;
 
       .dialogMessage {
@@ -41,13 +41,13 @@
       }
     }
 
-    .dialogActionsContainer {
+    .dialog-actions-container {
       display: flex;
       justify-content: flex-end;
       align-items: center;
       flex-wrap: wrap;
 
-      .dialogButton {
+      .dialog-button {
         margin-right: .5rem;
 
         &:last-child {

package/src/js/util/eventUtil.ts

@@ -3,8 +3,8 @@
  */
 
 import React from 'react';
-import {DialogActions} from "../dialog/dialogController";
 import {SnackConfig} from "./interfaces";
+import {DialogActions} from './types';
 
 interface ListenerShape {
     component: string,
@@ -59,9 +59,9 @@ const listenerExists = (componentName: string, eventName: string) => {
 //==========================
 
 export const showDialog = (message: string | React.ReactElement, title: string = 'Bericht van het systeem',
-                           actions?: DialogActions | null,
-                           persistent?: boolean, transparent?: boolean) => {
-    dispatchCustomEvent('onOpenDialog', {message, title, actions, transparent, persistent});
+                           actions?: DialogActions | null, persistent?: boolean, transparent?: boolean,
+                           zIndex?: string | number) => {
+    dispatchCustomEvent('onOpenDialog', {message, title, actions, transparent, persistent, zIndex});
 };
 
 export const showSnackbar = (text: string | React.ReactElement, config?: SnackConfig) => {

package/src/js/util/interfaces.ts

@@ -3,6 +3,7 @@
  */
 
 import React, {CSSProperties, MouseEventHandler, ReactElement} from 'react';
+import {DialogActions} from './types';
 
 // =========== INTERFACES
 
@@ -99,6 +100,27 @@ export interface HeaderItem {
     target?: '_blank';
 }
 
+export interface DialogDataShape {
+    message: string | React.ReactElement;
+    title?: string;
+    actions?: DialogActions;
+    transparent?: boolean;
+    persistent?: boolean;
+    buttonVariant?: ControlVariant;
+    zIndex?: string | number;
+}
+
+export interface DialogDataShapeWithID extends DialogDataShape {
+    id: string;
+}
+
+export interface DialogActionShape {
+    label: string;
+    onClick?: ((evt: KeyboardEvent | React.MouseEvent) => void);
+    primary?: boolean;
+    keepOpen?: true;
+}
+
 // =========== ENUMS
 
 export enum ModeEnum {DETAIL = 'detail', EDIT = 'edit', NEW = 'new'}
@@ -172,21 +194,21 @@ export type CustomAppEvent = {
 export type ChangeFunction<T = any> = (value: T, evt?: React.ChangeEvent) => void;
 export type ChangeKeyFunction<K = string, V = any> = (key: K) => ChangeFunction<V>;
 export type ModelResponse<T> = (obj: T, success: boolean | undefined, data: ResponseData) => void;
-export type StrengthGauge = { validator: (password: string) => boolean };
-export type PDFSetting = { key: string; label: string; type: PDFSettingType; value: any };
+export type StrengthGauge = {validator: (password: string) => boolean};
+export type PDFSetting = {key: string; label: string; type: PDFSettingType; value: any};
 
 export type PDFElementParams<T extends PDFElementType, O extends IndexedObject<any>> = {
     key: string;
     type: T;
     sub_type?: PDFElementSubType | null;
-    dimensions: { left: number; top: number; width: number; height: number };
+    dimensions: {left: number; top: number; width: number; height: number};
     options: O;
     persistent?: PDFElementPersist;
     linkedID?: string;
 }
 export type DefaultPDFElementParams<T extends PDFElementType, O extends IndexedObject<any>> = Partial<{
     type: T;
-    dimensions: Partial<{ left: number; top: number; width: number; height: number }>;
+    dimensions: Partial<{left: number; top: number; width: number; height: number}>;
     options: O;
     persistent?: PDFElementPersist;
     key: string;
@@ -222,14 +244,14 @@ export type PDFInvoiceTableParams = {
     alignment?: ElementPosition;
     persistent: PDFElementPersist;
 };
-export type PDFInvoiceWidths = { name: number; price: number; quantity: number; subtotal: number }
+export type PDFInvoiceWidths = {name: number; price: number; quantity: number; subtotal: number}
 export type PDFTextVariables = {
     company: IndexedObject<string>;
     client: IndexedObject<string>;
     invoice: IndexedObject<string>;
 }
 export type PDFSubmitHandler = (items: PDFElementParams<any, any>[], callback?: VoidFunction) => void;
-export type PDFElementDimensions = { left: number; top: number; width: number; height: number };
+export type PDFElementDimensions = {left: number; top: number; width: number; height: number};
 
 export type SidebarItem = {
     label: string; icon?: string | React.ReactElement<any, any>;
@@ -242,7 +264,7 @@ export type SidebarItem = {
     asNavLink?: true;
 }
 export type ResponseCallback = (data: ResponseData) => void;
-export type RNDDimensions = { x: number, y: number, height: number, width: number };
+export type RNDDimensions = {x: number, y: number, height: number, width: number};
 export type HTMLVideoEvent = (evt: React.SyntheticEvent<HTMLVideoElement, Event>) => void;
 export type RenderFile = {
     filename: string;

package/src/js/util/types.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2026. Dave van Rijn Development
+ */
+
+import {DialogActionShape} from './interfaces';
+
+export type DialogActions = (DialogActionShape | string)[];