@dvrd/dvr-controls 1.0.4 → 1.0.7

package/src/js/pdf/settings/invoiceTable/pdfInvoiceTableSettings.tsx

@@ -1,141 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/pdfInvoiceTableSettings.scss';
-
-import React, {PureComponent} from 'react';
-import PdfInvoiceTable from "../../invoiceTable/pdfInvoiceTable";
-import NumberInput from "../../../input/number/numberInput";
-import {debug} from "../../../util/miscUtil";
-import {ElementPosition} from "../../../util/interfaces";
-import {fontItems} from "../../../util/pdfUtil";
-import {ColorPicker, Select} from "../../../../../index";
-import IconButton, {IconButtonType} from "../buttons/iconButton";
-
-interface Props {
-    element: PdfInvoiceTable;
-}
-
-interface State {
-    widths: number[];
-    color: string;
-    colorPickerActive: boolean;
-    alignment?: ElementPosition;
-}
-
-const TITLES = ['Productnaam', 'Aantal', 'Prijs', 'BTW', 'Subtotaal'];
-
-export default class PdfInvoiceTableSettings extends PureComponent<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        const settings = props.element.getSettings();
-        this.state = {
-            widths: settings.widths,
-            color: settings.color,
-            colorPickerActive: false,
-            alignment: settings.alignment,
-        };
-    }
-
-    onCloseColorPicker = () => {
-        this.setState({colorPickerActive: false});
-    };
-
-    onOpenColorPicker = () => {
-        this.setState({colorPickerActive: true});
-    };
-
-    onPickColor = (close: boolean = true) => (color: string) => {
-        const {element} = this.props;
-        if (close)
-            this.setState({colorPickerActive: false, color}, () => {
-                element.setSetting('color', color)
-            });
-        else this.setState({color}, () => {
-            element.setSetting('color', color, undefined, false);
-        });
-    };
-
-    onChangeWidth = (index: number) => (value: number) => {
-        const {element} = this.props, widths = element.getSettings().widths.slice(),
-            remainder = this.getRemainingWidth(index);
-        debug('Remainder', {remainder});
-        if (value > remainder) value = remainder;
-        widths[index] = value;
-        element.setSetting('widths', widths);
-        this.setState({widths});
-    };
-
-    onToggleAlignment = (type: IconButtonType) => () => {
-        const {alignment} = this.state, {element} = this.props;
-        let nextAlignment: ElementPosition | undefined;
-        if (type === IconButtonType.LEFT)
-            nextAlignment = alignment === ElementPosition.LEFT ? undefined : ElementPosition.LEFT;
-        else if (type === IconButtonType.CENTER)
-            nextAlignment = alignment === ElementPosition.CENTER ? undefined : ElementPosition.CENTER;
-        else if (type === IconButtonType.RIGHT)
-            nextAlignment = alignment === ElementPosition.RIGHT ? undefined : ElementPosition.RIGHT;
-        element.setSetting('alignment', nextAlignment, () => {
-            this.setState({alignment: nextAlignment});
-        });
-    }
-
-    getRemainingWidth = (excludeIndex: number): number => {
-        const {widths} = this.state;
-        let remainder: number = 100;
-        for (let i = 0; i < widths.length; i++) {
-            if (i === excludeIndex) continue;
-            remainder -= widths[i];
-        }
-        return remainder;
-    }
-
-    renderWidth = (value: number, index: number) => {
-        const title = TITLES[index];
-        return (
-            <NumberInput key={index} value={value.toString()} onChange={this.onChangeWidth(index)} label={title}
-                         ornaments={{
-                             element: <span style={{cursor: 'text'}}>%</span>,
-                             placement: ElementPosition.RIGHT,
-                             allowPropagation: true
-                         }} asNumber/>
-        );
-    };
-
-    render = () => {
-        const {widths, colorPickerActive, color, alignment} = this.state, {element} = this.props,
-            settings = element.getSettings();
-        return (
-            <div className='pdf-invoice-table-settings'>
-                <label className='settings-label'>Kolom breedtes</label>
-                <div className='center-btn'>
-                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.LEFT}
-                                type={IconButtonType.LEFT} title='Links'/>
-                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.CENTER}
-                                type={IconButtonType.CENTER} title='Centreren'/>
-                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.RIGHT}
-                                type={IconButtonType.RIGHT} title='Rechts'/>
-                </div>
-                {widths.map(this.renderWidth)}
-                <div className='divider'/>
-                <label className='settings-label'>Tekstgrootte</label>
-                <Select items={fontItems} value={settings.font} onSelect={element.changeSetting('font')}
-                        label='Lettertype' selectOnly unControlled itemsHeight='15rem' fullWidth/>
-                <NumberInput value={settings.fontSize.toString()} onChange={element.changeSetting('fontSize')} asNumber
-                             ornaments={{
-                                 element: <span style={{cursor: 'text'}}>px</span>,
-                                 placement: ElementPosition.RIGHT,
-                                 allowPropagation: true
-                             }} wholeNumbers unControlled/>
-                <div className='settings-color-picker'>
-                    <label className='picker-label'>Tekstkleur:</label>
-                    <div className='color-preview' style={{backgroundColor: color}}
-                         onClick={this.onOpenColorPicker}/>
-                    <ColorPicker onClose={this.onCloseColorPicker} onSubmit={this.onPickColor()} closeable={false}
-                                 onPreChange={this.onPickColor(false)} color={settings.color}
-                                 visible={colorPickerActive} className='text-color-picker' transparent/>
-                </div>
-            </div>
-        )
-    }
-}

package/src/js/pdf/settings/invoiceTable/style/pdfInvoiceTableSettings.scss

@@ -1,38 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../../../style/variables';
-
-.pdf-invoice-table-settings {
-  display: grid;
-  grid-template-columns: repeat(2, calc(50% - .125rem));
-  grid-gap: .5rem;
-
-  .center-btn {
-    grid-column-start: span 2;
-    justify-items: start;
-  }
-
-  .settings-label {
-    grid-column-start: span 2;
-    font-weight: 500;
-  }
-
-  .divider {
-    grid-column-start: span 2;
-    width: 100%;
-    height: 1px;
-    background-color: $color-gray-4;
-    margin: .5rem 0;
-  }
-
-  @include break-lg-down {
-    grid-template-columns: auto;
-    grid-column-gap: 0;
-
-    .center-btn, .settings-label, .divider {
-      grid-column-start: unset;
-    }
-  }
-}

package/src/js/pdf/settings/pdfElementSettings.tsx

@@ -1,86 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/pdfElementSettings.scss';
-
-import React, {MouseEventHandler, PureComponent} from 'react';
-import {PdfElement} from "../element/pdfElement";
-import PdfText from "../text/pdfText";
-import {PDFElementPersist, PdfFont, PDFTextVariables} from "../../util/interfaces";
-import {Button, fontItems, Select, showDialog, stopPropagation} from "../../../../";
-import PdfTextSettings from "./text/pdfTextSettings";
-import PdfImage from "../image/pdfImage";
-import PdfImageSettings from "./image/pdfImageSettings";
-import PdfInvoiceTable from "../invoiceTable/pdfInvoiceTable";
-import PdfInvoiceTableSettings from "./invoiceTable/pdfInvoiceTableSettings";
-
-interface Props {
-    onReset: MouseEventHandler;
-    onChangeFont: (font: PdfFont) => void;
-    element: PdfElement | null;
-    customVariables?: PDFTextVariables;
-    font: PdfFont;
-    supportMultiPage: boolean;
-}
-
-export default class PdfElementSettings extends PureComponent<Props> {
-    onClickDelete = (evt: React.MouseEvent) => {
-        const {element} = this.props;
-        if (element) {
-            const persistence: PDFElementPersist = element.isPersistent();
-            if (persistence === PDFElementPersist.PERSISTENT) return;
-            else if (persistence === PDFElementPersist.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: element.onClickDelete}]);
-            } else element.onClickDelete(evt);
-        }
-    };
-
-    getTitle = (): string => {
-        const {element} = this.props;
-        if (element instanceof PdfText) return 'Tekst opties';
-        if (element instanceof PdfImage) return 'Afbeelding opties';
-        if (element instanceof PdfInvoiceTable) return 'Factuurregel opties';
-        return 'Opties'
-    };
-
-    renderSettings = () => {
-        const {element, customVariables, supportMultiPage} = this.props;
-        if (element === null) return this.renderMainSettings();
-        if (element instanceof PdfText) return <PdfTextSettings element={element} customVariables={customVariables}
-                                                                supportMultiPage={supportMultiPage}/>;
-        if (element instanceof PdfImage) return <PdfImageSettings element={element}
-                                                                  supportMultiPage={supportMultiPage}/>;
-        if (element instanceof PdfInvoiceTable) return <PdfInvoiceTableSettings element={element}/>
-        return null;
-    };
-
-    renderMainSettings = () => {
-        const {font, onChangeFont} = this.props;
-        return (
-            <div className='main-settings'>
-                <Select items={fontItems} value={font} onSelect={onChangeFont} label='Standaard lettertype'
-                        selectOnly fullWidth/>
-            </div>
-        )
-    };
-
-    render = () => {
-        const {element, onReset} = this.props, deleteAble = element?.isPersistent() !== PDFElementPersist.PERSISTENT;
-        return (
-            <div className='pdf-element-settings' onClick={stopPropagation}>
-                <h2 className='settings-title'>{this.getTitle()}</h2>
-                {!element && <label className='empty-label'>Selecteer een element om opties te weergeven</label>}
-                {this.renderSettings()}
-                {element !== null && (
-                    <div className='buttons-container'>
-                        <Button onClick={onReset} label='Oké' className='reset-btn'/>
-                        {deleteAble &&
-                            <Button onClick={this.onClickDelete} label='Verwijderen' primary={false} textColor='red'/>}
-                    </div>
-                )}
-            </div>
-        );
-    }
-};

package/src/js/pdf/settings/style/pdfElementSettings.scss

@@ -1,56 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../../style/variables';
-
-.pdf-element-settings {
-  background-color: white;
-  padding: 1rem;
-  border: 1px solid $color-gray-7;
-  border-radius: .5rem;
-  max-width: 30rem;
-
-  .settings-title {
-    margin-bottom: .5rem;
-  }
-
-  .empty-label {
-    font-size: .9rem;
-  }
-
-  .divider {
-    width: 100%;
-    height: 1px;
-    background-color: $color-gray-4;
-    margin: .5rem 0;
-  }
-
-  .buttons-container {
-    display: flex;
-    justify-content: space-between;
-    margin-top: .5rem;
-  }
-
-  .settings-color-picker {
-    display: flex;
-    align-items: center;
-    position: relative;
-
-    .picker-label {
-      margin-right: .5rem;
-    }
-
-    .color-preview {
-      width: 2rem;
-      height: 1rem;
-      cursor: pointer;
-      box-shadow: -2px -2px 5px rgba(0,0,0,.25) inset, 2px 2px 5px white inset;
-      border-radius: 10px;
-    }
-
-    .text-color-picker {
-      position: absolute;
-    }
-  }
-}

package/src/js/pdf/settings/text/pdfTextSettings.tsx

@@ -1,202 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/pdfTextSettings.scss';
-
-import React, {PureComponent} from 'react';
-import PdfText from "../../text/pdfText";
-import {
-    ElementPosition,
-    IndexedObject,
-    PDFDisplay,
-    PdfFont,
-    PDFTextParams,
-    PDFTextVariables,
-    SelectItemShape
-} from "../../../util/interfaces";
-import {ColorPicker, DvrdSelect, fontItems, getPdfVariables, NumberField, Select} from "../../../../../index";
-import classNames from 'classnames';
-import IconButton, {IconButtonType} from "../buttons/iconButton";
-
-interface Props {
-    element: PdfText;
-    customVariables?: PDFTextVariables;
-    supportMultiPage: boolean;
-}
-
-interface State extends IndexedObject<any> {
-    openVariables: keyof PDFTextVariables;
-    bold: boolean;
-    underline: boolean;
-    italic: boolean;
-    alignment?: ElementPosition;
-    font: PdfFont;
-    color: string;
-    colorPickerActive: boolean;
-    display: PDFDisplay;
-}
-
-const displayItems: SelectItemShape[] = [
-    {value: PDFDisplay.ALL_PAGES, label: 'Alle pagina\'s'},
-    {value: PDFDisplay.FIRST_PAGE, label: 'Alleen eerste pagina'},
-    {value: PDFDisplay.LAST_PAGE, label: 'Alleen laatste pagina'},
-]
-
-export default class PdfTextSettings extends PureComponent<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        const settings = props.element.getSettings();
-        this.state = {
-            openVariables: 'company',
-            bold: settings.bold,
-            underline: settings.underline,
-            italic: settings.italic,
-            alignment: settings.alignment,
-            font: settings.font,
-            color: settings.color,
-            colorPickerActive: false,
-            display: settings.display ?? PDFDisplay.ALL_PAGES,
-        };
-    }
-
-    onChangeDisplay = (value: PDFDisplay) => {
-        const {element} = this.props;
-        element.setSetting('display', value, () => {
-            this.setState({display: value});
-        })
-    }
-
-    onCloseColorPicker = () => {
-        this.setState({colorPickerActive: false});
-    };
-
-    onOpenColorPicker = () => {
-        this.setState({colorPickerActive: true});
-    };
-
-    onPickColor = (close: boolean = true) => (color: string) => {
-        const {element} = this.props;
-        if (close)
-            this.setState({colorPickerActive: false, color}, () => {
-                element.setSetting('color', color)
-            });
-        else this.setState({color}, () => {
-            element.setSetting('color', color, undefined, false);
-        });
-    };
-
-    onClickVariablesTitle = (type: keyof PDFTextVariables) => () => {
-        this.setState({openVariables: type});
-    };
-
-    onClickTextVariable = (variable: string) => () => {
-        const {element} = this.props;
-        if (element instanceof PdfText) element.insertText(`{${variable}}`);
-    };
-
-    onToggleSetting = (type: IconButtonType) => () => {
-        const {element} = this.props, {bold, underline, italic} = this.state;
-        let value: boolean;
-        if (type === IconButtonType.BOLD) value = !bold;
-        else if (type === IconButtonType.UNDERLINE) value = !underline;
-        else value = !italic;
-        element.setSetting(type, value, () => {
-            this.setState({[type]: value});
-        });
-    };
-
-    onToggleAlignment = (type: IconButtonType) => () => {
-        const {alignment} = this.state, {element} = this.props;
-        let nextAlignment: ElementPosition | undefined;
-        if (type === IconButtonType.LEFT)
-            nextAlignment = alignment === ElementPosition.LEFT ? undefined : ElementPosition.LEFT;
-        else if (type === IconButtonType.CENTER)
-            nextAlignment = alignment === ElementPosition.CENTER ? undefined : ElementPosition.CENTER;
-        else if (type === IconButtonType.RIGHT)
-            nextAlignment = alignment === ElementPosition.RIGHT ? undefined : ElementPosition.RIGHT;
-        element.setSetting('alignment', nextAlignment, () => {
-            this.setState({alignment: nextAlignment});
-        });
-    }
-
-    renderTextVariables = () => {
-        const {customVariables} = this.props, variables: PDFTextVariables = getPdfVariables(customVariables),
-            {client, company, invoice} = variables;
-        return (
-            <div className='text-variables-container'>
-                <h3 className='variables-container-title'>Tekstvariabelen</h3>
-                <div className='variable-containers'>
-                    {this.renderVariables('company', 'Bedrijf', company)}
-                    {this.renderVariables('client', 'Klant', client)}
-                    {this.renderVariables('invoice', 'Factuur', invoice)}
-                </div>
-            </div>
-        )
-    };
-
-    renderVariables = (type: keyof PDFTextVariables, title: string, variables: IndexedObject<string>) => (
-        <div className={classNames('variables-container', this.state.openVariables === type && 'open')}>
-            <label className='variables-title' onClick={this.onClickVariablesTitle(type)}>{title}</label>
-            <div className='variables-main-container'>
-                <div className='variables'>
-                    {Object.keys(variables).map((key: string, index: number) => (
-                        <label key={index} className='text-variable'
-                               onClick={this.onClickTextVariable(key)}>{variables[key]}</label>
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
-
-    render = () => {
-        const {element, supportMultiPage} = this.props,
-            {bold, underline, italic, alignment, colorPickerActive, color, display} = this.state,
-            settings: PDFTextParams = element.getSettings();
-        return (
-            <div className='pdf-text-settings'>
-                {supportMultiPage && <>
-                    <label className='settings-title'>Weergave</label>
-                    <DvrdSelect onChange={this.onChangeDisplay} value={display} items={displayItems}/>
-                </>}
-                <div className='divider'/>
-                <div className='text-settings'>
-                    <IconButton onClick={this.onToggleSetting} active={bold} type={IconButtonType.BOLD}
-                                title='Vet'/>
-                    <IconButton onClick={this.onToggleSetting} active={underline} type={IconButtonType.UNDERLINE}
-                                title='Onderstrepen'/>
-                    <IconButton onClick={this.onToggleSetting} active={italic} type={IconButtonType.ITALIC}
-                                title='Cursief'/>
-                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.LEFT}
-                                type={IconButtonType.LEFT} title='Links'/>
-                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.CENTER}
-                                type={IconButtonType.CENTER} title='Centreren'/>
-                    <IconButton onClick={this.onToggleAlignment} active={alignment === ElementPosition.RIGHT}
-                                type={IconButtonType.RIGHT} title='Rechts'/>
-                </div>
-                <div className='divider'/>
-                <div className='font-settings'>
-                    <Select items={fontItems} value={settings.font} onSelect={element.changeSetting('font')}
-                            label='Lettertype' selectOnly unControlled itemsHeight='15rem' fullWidth/>
-                    <NumberField value={settings.fontSize.toString()} onChange={element.changeSetting('fontSize')}
-                                 label='Tekstgrootte' className='font-size'
-                                 ornaments={{
-                                     element: <span style={{cursor: 'text'}}>px</span>,
-                                     placement: ElementPosition.RIGHT,
-                                     allowPropagation: true
-                                 }} wholeNumbers
-                                 asNumber unControlled/>
-                    <div className='settings-color-picker'>
-                        <label className='picker-label'>Tekstkleur:</label>
-                        <div className='color-preview' style={{backgroundColor: color}}
-                             onClick={this.onOpenColorPicker}/>
-                        <ColorPicker onClose={this.onCloseColorPicker} onSubmit={this.onPickColor()} closeable={false}
-                                     onPreChange={this.onPickColor(false)} color={settings.color}
-                                     visible={colorPickerActive} className='text-color-picker' transparent/>
-                    </div>
-                </div>
-                <div className='divider'/>
-                {!settings.disabled && this.renderTextVariables()}
-            </div>
-        )
-    };
-}

package/src/js/pdf/settings/text/style/pdfTextSettings.scss

@@ -1,94 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../../../style/variables';
-
-.pdf-text-settings {
-  display: grid;
-  grid-template-columns: auto;
-  grid-row-gap: .5rem;
-  justify-items: start;
-  align-items: start;
-
-  .text-settings {
-    display: flex;
-    align-items: flex-end;
-  }
-
-  .font-settings {
-    display: grid;
-    grid-template-columns: auto;
-    grid-row-gap: .5rem;
-    width: 100%;
-
-    .font-size {
-      width: 6rem;
-    }
-  }
-
-  .text-variables-container {
-    .variables-container-title {
-      margin-bottom: .5rem;
-    }
-
-    .variable-containers {
-      display: grid;
-      grid-template-columns: auto;
-      grid-row-gap: .5rem;
-      align-items: start;
-
-      .variables-container {
-        display: flex;
-        flex-direction: column;
-
-        .variables-title {
-          border-bottom: 2px solid $color-gray-4;
-          cursor: pointer;
-          padding: .5rem .25rem;
-          font-weight: 500;
-          font-size: .9rem;
-        }
-
-        .variables-main-container {
-          height: 0;
-          overflow: hidden;
-
-          .variables {
-            padding: .5rem;
-            display: flex;
-            flex-wrap: wrap;
-            align-items: flex-start;
-
-            .text-variable {
-              @include backgroundShadow;
-              padding: .2rem .4rem;
-              border-radius: .5rem;
-              cursor: pointer;
-              margin-right: .5rem;
-              margin-bottom: .5rem;
-              white-space: nowrap;
-              user-select: none;
-              transition: background-color .2s ease-in-out;
-
-              &:last-child {
-                margin-right: 0;
-              }
-
-              &:hover {
-                background-color: $color-gray-7;
-              }
-            }
-          }
-        }
-
-        &.open {
-          .variables-main-container {
-            height: fit-content;
-            overflow: auto;
-          }
-        }
-      }
-    }
-  }
-}