@dvrd/dvr-controls 1.0.6 → 1.0.7

package/src/js/pdf/style/pdfTemplateCreator.scss

@@ -1,118 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.pdf-creator {
-  margin: 2rem auto;
-  display: grid;
-  grid-template-columns: repeat(2, auto) minmax(min-content, 30rem);
-  align-items: start;
-  grid-row-gap: 1rem;
-  position: relative;
-  justify-content: center;
-
-  .right-col {
-    position: sticky;
-    top: 4rem;
-  }
-
-  .elements-container {
-    display: grid;
-    grid-template-columns: auto;
-    background-color: white;
-    grid-row-gap: 1rem;
-    padding: 1rem;
-    position: sticky;
-    top: 4rem;
-    border: 1px solid $color-gray-7;
-    border-radius: .5rem;
-
-    .element-button {
-      @include backgroundShadow;
-      border-radius: .5rem;
-      cursor: pointer;
-      transition: background-color .2s ease-in-out;
-      display: grid;
-      grid-template-columns: 2rem 1fr;
-      grid-column-gap: 1rem;
-      align-items: center;
-      color: $color-gray-5;
-      padding: .5rem;
-
-      .element-label {
-        white-space: nowrap;
-      }
-
-      .element-icon {
-        font-size: 2rem;
-      }
-
-      &:hover {
-        background-color: $color-gray-6;
-      }
-    }
-
-    .history {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-column-gap: 1rem;
-
-      .history-button {
-        @include backgroundShadow;
-        border-radius: .5rem;
-        cursor: pointer;
-        transition: background-color .2s ease-in-out;
-        padding: .5rem 1rem;
-        text-align: center;
-
-        &:hover {
-          background-color: $color-gray-7;
-        }
-
-        &.disabled {
-          cursor: not-allowed;
-          background-color: white !important;
-          box-shadow: none;
-          border: 1px solid $color-gray-4;
-
-          .history-icon {
-            color: $color-gray-4;
-          }
-        }
-      }
-    }
-
-    .history-reset {
-      display: flex;
-      justify-content: center;
-    }
-  }
-
-  .pdf-paper {
-    @include backgroundShadow;
-    border-radius: .5rem;
-    width: 595pt;
-    height: 842pt;
-    background-color: white;
-    position: relative;
-    overflow: hidden;
-    z-index: 1;
-  }
-
-  .footer-container {
-    @include backgroundShadow;
-    border-radius: .5rem;
-    grid-column: 2;
-    padding: 1rem;
-    background-color: white;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .proceed-btn {
-      margin-left: 1rem;
-    }
-  }
-}

package/src/js/pdf/text/pdfText.tsx

@@ -1,267 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/pdfText.scss';
-
-import React, {CSSProperties, MouseEventHandler} from 'react';
-import {
-    CustomAppEvent,
-    IndexedObject,
-    PDFDisplay,
-    PDFElementParams,
-    PDFElementPersist,
-    PDFElementType,
-    PdfFont,
-    PDFTextParams,
-    PDFTextVariables
-} from "../../util/interfaces";
-import {PDFDraggable, PdfElement} from "../element/pdfElement";
-import {debug, sanitizeHtml} from "../../util/miscUtil";
-import {merge} from 'lodash';
-import {PAGE_WIDTH, pxToPt, setPdfVariables, waitForFonts} from "../../util/pdfUtil";
-import {directTimeout} from "../../util/componentUtil";
-import {dispatchCustomEvent, showDialog} from "../../util/eventUtil";
-import {remToPx, WithEvents} from "../../../../";
-
-interface Props {
-    onDelete: MouseEventHandler;
-    onSaveHistory: VoidFunction;
-    values: IndexedObject<string>;
-    defaultSettings?: Partial<PDFTextParams>;
-    id?: string;
-    customVariables?: PDFTextVariables;
-    defaultPosition: { x: number; y: number };
-    draggable: boolean;
-    onFocusElement: (element: PdfElement) => void;
-    persistent?: PDFElementPersist;
-    mainFont: PdfFont;
-    linkedID?: string;
-}
-
-interface State {
-    settings: PDFTextParams;
-    dragging: boolean;
-    focused: boolean;
-}
-
-export default class PdfText extends PdfElement<Props, State> {
-    static defaultProps = {
-        defaultPosition: {x: 0, y: 0},
-    };
-    private lastKnownCursor: number = 0;
-    private field: HTMLTextAreaElement;
-    private initialWidth: number | null = null;
-    private currentText: string = '';
-    private readonly events: CustomAppEvent[];
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            settings: merge({}, {
-                text: 'Klik hier om deze tekst aan te passen.',
-                bold: false,
-                underline: false,
-                italic: false,
-                fontSize: remToPx(1),
-                alignment: undefined,
-                font: props.mainFont,
-                color: '#000',
-                persistent: PDFElementPersist.NOT_PERSISTENT,
-                display: PDFDisplay.ALL_PAGES,
-            }, props.defaultSettings),
-            dragging: false,
-            focused: false,
-        }
-        this.currentText = this.state.settings.text;
-        this.events = [this.event, {eventName: 'onLinkedElementMoved', handler: this.onLinkedElementMoved}]
-    }
-
-    private onBlur = (evt: React.FocusEvent<HTMLTextAreaElement>) => {
-        this.lastKnownCursor = evt.target.selectionEnd || 0;
-        this.setState({focused: false}, this.setWidth);
-        if (this.state.settings.text !== this.currentText) this.props.onSaveHistory();
-    };
-
-    private onFocus = (evt: React.FocusEvent) => {
-        evt.stopPropagation();
-        this.setState({focused: true}, this.setWidth);
-        this.currentText = this.state.settings.text;
-        this.onClick();
-    };
-
-    getTextValue = (): string => {
-        const {settings, focused} = this.state, {values} = this.props;
-        if (focused) return settings.text;
-        return setPdfVariables(settings.text, values);
-    }
-
-    public setSetting = (key: string, value: any, callback?: VoidFunction, save: boolean = true) => {
-        this.setState({settings: Object.assign({}, this.state.settings, {[key]: value})}, () => {
-            this.setWidth();
-            if (key !== 'text' && save)
-                this.props.onSaveHistory();
-            if (callback) callback();
-        });
-    };
-
-    public onClickDelete = (evt: React.MouseEvent) => {
-        const {persistent, onDelete} = this.props;
-        if (persistent === 'confirm')
-            showDialog('We raden aan om dit element wel te tonen op de factuur. Weet je zeker dat je dit ' +
-                'element wilt verwijderen?', 'Element verwijderen',
-                ['Nee', {label: 'Ja', onClick: onDelete}]);
-        else onDelete(evt);
-    };
-
-    onClickEdit = (evt: React.MouseEvent) => {
-        if (this.field) {
-            this.field.focus();
-            const {value} = this.field;
-            this.field.selectionStart = value.length;
-            this.field.selectionEnd = this.field.selectionStart;
-        }
-        this.onClick(evt);
-    };
-
-    onClick = (evt?: React.MouseEvent) => {
-        if (evt)
-            evt.stopPropagation();
-        this.props.onFocusElement(this);
-        if (this.draggable)
-            this.draggable.setFocus();
-    };
-
-    onChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
-        const {target} = evt;
-        this.setSetting('text', target.value, this.setWidth);
-    }
-
-    onClickBar = (evt: React.MouseEvent) => {
-        this.onClick(evt);
-    };
-
-    onDrag = (position: { x: number; y: number }) => {
-        const {linkedID} = this.props;
-        if (linkedID)
-            dispatchCustomEvent('onLinkedElementMoved', {position, id: linkedID, elementId: this.id});
-    }
-
-    onLinkedElementMoved = (data: { position: { x: number; y: number }, id: string; elementId: string }) => {
-        const {linkedID} = this.props;
-        if (this.draggable && linkedID && data.id === linkedID && data.elementId !== this.id)
-            this.draggable.setPosition({x: data.position.x});
-    };
-
-    /**
-     * Externally insert text add last know cursor position
-     * @param newText
-     */
-    public insertText = (newText: string) => {
-        const {settings} = this.state;
-        let {text} = settings;
-        text = text.substr(0, this.lastKnownCursor) + newText + text.substr(this.lastKnownCursor, text.length);
-        this.setState({settings: Object.assign({}, settings, {text})}, () => {
-            this.setWidth();
-            if (this.field) {
-                this.field.selectionStart = this.field.selectionStart + newText.length;
-                this.field.selectionEnd = this.field.selectionStart;
-                this.field.focus();
-            }
-            this.props.onSaveHistory();
-        });
-    };
-
-    private setWidth = () => {
-        const position = this.draggable?.getPosition() || {x: 0},
-            maxWidth = PAGE_WIDTH - position.x, {linkedID} = this.props
-        if (this.field) {
-            this.field.style.width = '0px';
-            this.field.style.width = this.field.scrollWidth + 'px';
-            this.initialWidth = this.initialWidth ?? this.field.scrollWidth;
-            if (this.field.scrollWidth > maxWidth && this.draggable) {
-                this.draggable.setPosition({x: PAGE_WIDTH - this.field.scrollWidth}, () => {
-                    dispatchCustomEvent('onLinkedElementMoved',
-                        {position: this.draggable.getPosition(), id: linkedID, elementId: this.id});
-                });
-            }
-        }
-    };
-
-    getParams = (convertPixels: boolean = true): PDFElementParams<PDFElementType.TEXT, PDFTextParams> => {
-        const {settings} = this.state,
-            {bold, italic, text, underline, alignment, font, color, persistent, display} = settings,
-            fontSize = convertPixels ? pxToPt(settings.fontSize) : settings.fontSize, {linkedID} = this.props;
-        return {
-            dimensions: this.getDimensions(convertPixels),
-            key: this.id,
-            type: PDFElementType.TEXT,
-            options: {fontSize: fontSize, bold, italic, text, underline, alignment, font, color, persistent, display},
-            linkedID: linkedID,
-        };
-    }
-
-    private getTextStyle = (): CSSProperties => {
-        const {italic, underline, bold, fontSize, font, color} = this.state.settings,
-            styles: CSSProperties = {fontSize, fontFamily: font, color};
-        if (italic) styles.fontStyle = 'italic';
-        if (underline) styles.textDecoration = 'underline';
-        if (bold) styles.fontWeight = font === PdfFont.HELVETICA ? 600 : 500;
-        return styles;
-    };
-
-    private getRows = () => {
-        const {text} = this.state.settings;
-        return text.split('\n').length;
-    };
-
-    componentDidMount = () => {
-        directTimeout(this.setWidth);
-        if (this.props.linkedID) {
-            directTimeout(() => {
-                if (this.draggable) {
-                    debug('Dispatch event');
-                    dispatchCustomEvent('onLinkedElementMoved',
-                        {position: this.draggable.getPosition(), id: this.props.linkedID, elementId: this.id});
-                }
-            })
-        }
-        waitForFonts(this.setWidth);
-    };
-
-    componentDidUpdate = (prevProps: Props, prevState: State) => {
-        const {settings} = this.state, prevSettings = prevState.settings;
-        if (settings.font !== prevSettings.font) waitForFonts(this.setWidth);
-    }
-
-    render = () => {
-        const {settings, dragging} = this.state, {
-            draggable,
-            defaultPosition,
-            onSaveHistory,
-            persistent
-        } = this.props;
-        return (
-            <WithEvents events={this.events}>
-                <PDFDraggable onDrag={this.onDrag} onDragEnd={this.onDragEnd} position={defaultPosition}
-                              elementLabel='Tekst' alignment={settings.alignment} onDragStart={this.onDragStart}
-                              draggable={draggable} dragging={dragging} resizeable={false} onDragged={onSaveHistory}
-                              onResized={onSaveHistory} persistent={persistent} onDelete={this.onClickDelete}
-                              onEdit={this.onClickEdit} ref={(ref: PDFDraggable) => {
-                    this.draggable = ref
-                }} forwardRef={(ref: HTMLDivElement) => {
-                    this.element = ref
-                }} onClickBar={this.onClickBar}>
-                    <div className='pdf-text-container'>
-                    <textarea className='pdf-text-input' style={this.getTextStyle()}
-                              readOnly={settings.disabled === true}
-                              value={sanitizeHtml(this.getTextValue())} onChange={this.onChange}
-                              rows={this.getRows()} onFocus={this.onFocus} onBlur={this.onBlur} onClick={this.onClick}
-                              ref={(ref: HTMLTextAreaElement) => {
-                                  this.field = ref
-                              }}/>
-                    </div>
-                </PDFDraggable>
-            </WithEvents>
-        )
-    }
-}

package/src/js/pdf/text/style/pdfText.scss

@@ -1,22 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../../style/variables';
-
-.pdf-text-container {
-  .pdf-text-input {
-    border: none !important;
-    outline: none !important;
-    resize: none;
-    background-color: transparent;
-    padding: 0;
-    overflow: hidden;
-    line-height: 1.5;
-    white-space: pre;
-
-    &:disabled {
-      color: black;
-    }
-  }
-}

package/src/js/popup/style/withBackground.scss

@@ -1,29 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.with-background {
-  @include popupContainer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: $z-index-dialog;
-
-  .content-container {
-    width: fit-content;
-    height: fit-content;
-
-    .header-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .header-title {
-        font-size: 1.2rem;
-        font-weight: 500;
-      }
-    }
-  }
-}

package/src/js/popup/withBackground.tsx

@@ -1,102 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import './style/withBackground.scss';
-
-import React, {CSSProperties, PropsWithChildren} from 'react';
-import classNames from 'classnames';
-import {escapePressed, hasHover} from "../util/controlUtil";
-
-interface Props {
-    onClickBackground?: Function,
-    onClose: Function;
-    active: boolean;
-    backgroundColor: string;
-    transparent: boolean;
-    backgroundClass: string;
-    containerClass: string;
-    escapeDisabled: boolean;
-    preventBackgroundClick: boolean;
-    zIndex?: number;
-}
-
-export default class WithBackground extends React.Component<PropsWithChildren<Props>> {
-    static defaultProps = {
-        backgroundColor: 'rgba(0,0,0,.2)',
-        transparent: false,
-        backgroundClass: '',
-        containerClass: '',
-        escapeDisabled: false,
-        preventBackgroundClick: false,
-    };
-
-    contentContainer: HTMLDivElement | null = null;
-    escapeListenerActive: boolean = false;
-
-    onClickBackground = (evt: React.MouseEvent) => {
-        const {onClickBackground, onClose, preventBackgroundClick} = this.props;
-        if (!preventBackgroundClick) {
-            if (onClickBackground) onClickBackground(evt);
-            else if (this.contentContainer === null || !hasHover(this.contentContainer))
-                onClose(evt);
-        }
-    };
-
-    onKeyDown = (evt: KeyboardEvent) => {
-        const {onClose, escapeDisabled} = this.props;
-        if (escapePressed(evt) && !escapeDisabled) onClose();
-    };
-
-    getBackgroundStyle = (): CSSProperties => {
-        const {backgroundColor, transparent, zIndex} = this.props,
-            color = transparent ? 'transparent' : backgroundColor,
-            style: CSSProperties = {backgroundColor: color};
-        if (zIndex !== undefined) style.zIndex = zIndex;
-        return style;
-    };
-
-    enableEscapeListener = () => {
-        document.addEventListener('keydown', this.onKeyDown);
-        this.escapeListenerActive = true;
-    };
-
-    disableEscapeListener = () => {
-        document.removeEventListener('keydown', this.onKeyDown);
-        this.escapeListenerActive = false;
-    };
-
-    componentDidMount = () => {
-        const {active, escapeDisabled} = this.props;
-        if (active && !escapeDisabled) this.enableEscapeListener();
-    };
-
-    componentDidUpdate = (prevProps: Props) => {
-        const {active, escapeDisabled} = this.props;
-        if (escapeDisabled && this.escapeListenerActive) this.disableEscapeListener();
-        else if (!escapeDisabled) {
-            if (prevProps.escapeDisabled && active) this.enableEscapeListener();
-            else if (active && !prevProps.active) this.enableEscapeListener();
-            else if (!active && prevProps.active) this.disableEscapeListener();
-        }
-    };
-
-    componentWillUnmount = () => {
-        this.disableEscapeListener();
-    };
-
-    render = () => {
-        const {backgroundClass, containerClass, children, active} = this.props;
-        if (!active) return null;
-        return (
-            <div className={classNames('with-background', backgroundClass)} onMouseDown={this.onClickBackground}
-                 style={this.getBackgroundStyle()}>
-                <div className={classNames('content-container', containerClass)} ref={ref => {
-                    this.contentContainer = ref
-                }}>
-                    {children}
-                </div>
-            </div>
-        )
-    };
-}

package/src/js/select/async/asyncSelect.tsx

@@ -1,46 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/asyncSelect.scss';
-
-import React from 'react';
-import {PureComponent} from 'react';
-import {SelectDefaultProps, SelectProps} from "../selectController";
-import {Loader, Select, generateComponentId} from "../../../..";
-import classNames from "classnames";
-
-interface Props extends SelectProps {
-    onSearch: (value: string, callback: VoidFunction) => void;
-    loading: boolean;
-}
-
-export default class AsyncSelect extends PureComponent<Props> {
-    static defaultProps = SelectDefaultProps;
-
-    private searchValue: string = '';
-    private id: string = generateComponentId(this.props.id);
-
-    onChangeSearch = (value: string) => {
-        this.searchValue = value;
-    };
-
-    onEnter = () => {
-        this.props.onSearch(this.searchValue, this.focusInput);
-    };
-
-    focusInput = () => {
-        const input = document.getElementById(`${this.id}-input`);
-        if (input) input.focus();
-    };
-
-    render = () => {
-        const {loading, fullWidth} = this.props;
-        return (
-            <div className={classNames('dvr-async-select', fullWidth && 'fw')}>
-                <Loader active={loading} containerClass='dvr-async-select-loader' size='2rem' disableBackground/>
-                <Select {...this.props} onChangeSearch={this.onChangeSearch} onEnter={this.onEnter} disabled={loading}
-                        id={this.id} forceDisplayItems/>
-            </div>
-        )
-    };
-}

package/src/js/select/async/style/asyncSelect.scss

@@ -1,23 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../../style/variables';
-
-.dvr-async-select {
-  display: inline-block;
-  position: relative;
-
-  .dvr-async-select-loader {
-    position: absolute;
-    right: 2.5rem;
-    top: 1.2rem;
-    width: min-content;
-    height: auto;
-    left: unset;
-  }
-
-  &.fw {
-    width: 100%;
-  }
-}