@dvrd/dvr-controls 1.0.5 → 1.0.8

package/src/js/dialog/dialog.tsx

@@ -1,207 +0,0 @@
-/*
- * 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

@@ -1,70 +0,0 @@
-/*
- * 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

@@ -1,127 +0,0 @@
-/*
- * 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

@@ -1,61 +0,0 @@
-/*!
- * 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

@@ -1,40 +0,0 @@
-/*
- * 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

@@ -1,49 +0,0 @@
-/*
- * 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;
-    }
-}