@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/dialog/dialog.tsx

@@ -0,0 +1,207 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/dialog.scss';
+
+import React, {MouseEventHandler} from 'react';
+import classNames from 'classnames';
+import ButtonController from "../button/buttonController";
+import {ControlContext} from "../util/controlContext";
+import {enterPressed, generateUUID, hasHover} from "../util/controlUtil";
+import {colorIsWhite, convertColor} from "../util/colorUtil";
+import {ControlVariant} from "../util/interfaces";
+import {DialogActions, DialogActionShape} from "./dialogController";
+
+interface Props {
+    onClose?: (id?: string) => void;
+    className: string;
+    open?: boolean;
+    data?: DataShape;
+    id?: 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;
+                }
+            }
+    }
+
+    keyListener = (evt: KeyboardEvent) => {
+        if (enterPressed(evt)) {
+            this.onEnterPressed(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 = (onClick?: Function): MouseEventHandler => (evt: any) => {
+        this.onClose();
+        if (onClick !== undefined && onClick !== null)
+            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'/>
+    );
+
+    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.onClick)}
+                              type={this.buttonVariant} containerClass='dialogButton' primary={action.primary}/>
+        );
+    };
+
+    renderTitle = (): React.ReactNode => {
+        const {title} = this.state;
+        return (
+            <div className='dialogTitleContainer'>
+                <label className='dialogTitle' style={this.getColorStyle()}>{title}</label>
+            </div>
+        )
+    };
+
+    renderMessage = (): React.ReactNode => {
+        const {message} = this.state;
+        return (
+            <div className='dialogMessageContainer'>
+                {typeof message === 'string' ? <p className='dialogMessage'>{message}</p> : message}
+            </div>
+        )
+    };
+
+    renderActions = (): React.ReactNode => {
+        const actions = this.getActions();
+        return (
+            <div className='dialogActionsContainer'>
+                {actions}
+            </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;
+        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>
+        )
+    }
+}

package/src/js/dialog/dialogController.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import * as React from 'react';
+import {Fragment, MouseEventHandler, PureComponent, ReactElement} from 'react';
+import {ControlVariant, CustomAppEvent, IndexedObject} from '../util/interfaces';
+import Dialog from './dialog';
+import {generateComponentId} from "../util/componentUtil";
+import {WithEvents} from "../../../index";
+
+export interface DialogActionShape {
+    label: string;
+    onClick?: MouseEventHandler;
+    primary?: boolean;
+}
+
+export type DialogActions = (DialogActionShape | string)[];
+
+interface Props {
+    className?: string;
+}
+
+interface State {
+    dialogs: IndexedObject<ReactElement>
+}
+
+interface DataShape {
+    message: string | React.ReactElement;
+    title?: string;
+    actions?: DialogActions;
+    transparent?: boolean;
+    persistent?: boolean;
+    buttonVariant?: ControlVariant;
+}
+
+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});
+        }
+    }
+
+    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},
+    ];
+
+    render = () => {
+        const {className} = this.props;
+        return <WithEvents events={this.getEvents()}>
+            {Object.values(this.state.dialogs).map((element: ReactElement, key: number) => (
+                <Fragment key={key}>
+                    {React.cloneElement(element, {className})}
+                </Fragment>
+            ))}
+        </WithEvents>
+    }
+}

package/src/js/dialog/inlineDialog.tsx

@@ -0,0 +1,127 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/dialog.scss';
+
+import React from 'react';
+import classNames from 'classnames';
+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";
+
+interface DialogProps {
+    onClose: Function,
+    message: string,
+    open: boolean,
+    title?: string,
+    actions?: DialogActionShape[] | DialogActionShape | null,
+    transparent?: boolean,
+    persistent?: boolean,
+    content?: React.ReactElement | null,
+    containerClass: string,
+}
+
+export default class InlineDialog extends React.Component<DialogProps> {
+    declare context: React.ContextType<typeof ControlContext>;
+    static contextType = ControlContext;
+
+    static defaultProps = {
+        title: 'Bericht van Klaverjassen',
+        actions: null,
+        transparent: false,
+        persistent: true,
+        content: null,
+        containerClass: '',
+    };
+
+    constructor(props: any) {
+        super(props);
+    }
+
+    dialog: HTMLElement | null = null;
+    id = generateUUID();
+
+    onClickBackground = () => {
+        const {persistent, onClose} = this.props;
+        if (!persistent && this.dialog !== null && !hasHover(this.dialog))
+            onClose();
+    };
+
+    onClickAction = (onClick: Function | undefined) => (evt: React.MouseEvent) => {
+        if (onClick !== undefined) onClick(evt);
+        this.props.onClose();
+    };
+
+    onClickDefault = () => {
+        this.props.onClose();
+    }
+
+    getColorStyle = (): object => {
+        // noinspection JSDeprecatedSymbols
+        const {baseColor, contrastColor} = this.context,
+            color = colorIsWhite(contrastColor) ? baseColor : contrastColor;
+        return {color: convertColor(color)};
+    };
+
+    getActions = () => {
+        const {actions} = this.props;
+        if (actions === undefined || actions === null) return this.generateDefaultAction();
+        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'/>
+            ));
+        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'/>;
+
+    renderTitle = (): React.ReactNode => {
+        const {title} = this.props;
+        return (
+            <div className='dialogTitleContainer'>
+                <label className='dialogTitle' style={this.getColorStyle()}>{title}</label>
+            </div>
+        )
+    };
+
+    renderMessage = (): React.ReactNode => {
+        const {message, content} = this.props;
+        return (
+            <div className='dialogMessageContainer'>
+                <p className='dialogMessage'>{message}</p>
+                {content !== undefined && content}
+            </div>
+        )
+    };
+
+    renderActions = (): React.ReactNode => {
+        const actions = this.getActions();
+        return (
+            <div className='dialogActionsContainer'>
+                {actions}
+            </div>
+        )
+    };
+
+    render = () => {
+        const {open, transparent, containerClass} = this.props;
+        if (!open) return null;
+        return (
+            <div className={classNames('dialogContainer', transparent && 'transparent', containerClass)}
+                 onClick={this.onClickBackground}>
+                <div className='dialog' ref={ref => {
+                    this.dialog = ref
+                }}>
+                    {this.renderTitle()}
+                    {this.renderMessage()}
+                    {this.renderActions()}
+                </div>
+            </div>
+        )
+    }
+}

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

@@ -0,0 +1,61 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.dialogContainer {
+  @include popupContainer;
+  z-index: $z-index-dialog;
+
+  &.transparent {
+    background-color: transparent;
+  }
+
+  .dvr-dialog {
+    @include popupDialog;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    max-width: 40rem;
+    max-height: 100%;
+    padding: 1.5rem 2rem;
+
+    .dialogTitleContainer {
+
+      .dialogTitle {
+        font-size: 1.2rem;
+        user-select: none;
+      }
+    }
+
+    .dialogMessageContainer {
+      padding: 1.5rem 0;
+
+      .dialogMessage {
+        margin: 0;
+        color: $color-gray-5;
+      }
+    }
+
+    .dialogActionsContainer {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      flex-wrap: wrap;
+
+      .dialogButton {
+        margin-right: .5rem;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    @include break-sm-down {
+      width: 90vw;
+      box-sizing: border-box;
+    }
+  }
+}

package/src/js/events/withEvents.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React, { PropsWithChildren } from 'react';
+import {addCustomEventListener, removeCustomEventListener} from '../util/eventUtil';
+import {CustomAppEvent} from '../util/interfaces';
+import {generateComponentId} from "../util/componentUtil";
+
+interface Props {
+    events: CustomAppEvent | CustomAppEvent[],
+    componentName?: string;
+}
+
+export default class WithEvents extends React.PureComponent<PropsWithChildren<Props>> {
+    private readonly componentName: string;
+
+    constructor(props: Props) {
+        super(props);
+        this.componentName = generateComponentId(props.componentName);
+    }
+
+    componentDidMount = () => {
+        const {events} = this.props;
+        if (Array.isArray(events))
+            for (const event of events)
+                addCustomEventListener(this.componentName, event.eventName, event.handler);
+        else addCustomEventListener(this.componentName, events.eventName, events.handler);
+    };
+
+    componentWillUnmount = () => {
+        const {events} = this.props;
+        if (Array.isArray(events))
+            for (const event of events)
+                removeCustomEventListener(this.componentName, event.eventName);
+        else removeCustomEventListener(this.componentName, events.eventName);
+    };
+
+    render = () => this.props.children;
+}

package/src/js/head/DVRHead.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React, {PureComponent, ReactElement} from 'react';
+
+interface Props {
+    children?: any;
+}
+
+export default class DVRHead extends PureComponent<Props> {
+
+    private includeTags = () => {
+        const {children} = this.props;
+        this.removeAll();
+        if (children) {
+            if (Array.isArray(children)) for (const child of children) this.includeChild(child);
+            else this.includeChild(children);
+        }
+    };
+
+    private includeChild = (child: ReactElement) => {
+        const {type, props} = child,
+            elem = document.createElement(type as keyof HTMLElementTagNameMap);
+        for (const key of Object.keys(props)) {
+            if (key === 'children') elem.innerHTML = props[key];
+            else (elem as any)[key] = props[key];
+        }
+        elem.dataset.gen = 'dvr';
+        document.head.appendChild(elem);
+    };
+
+    private removeAll = () => {
+        const elems = document.querySelectorAll("[data-gen='dvr']");
+        for (const elem of elems) elem.parentElement?.removeChild(elem);
+    };
+
+    componentDidMount = () => {
+        this.includeTags();
+    };
+
+    componentDidUpdate = () => {
+        this.includeTags();
+    };
+
+    render = () => {
+        return null;
+    }
+}