@dvrd/dvr-controls 1.0.29 → 1.0.31

package/index.ts

@@ -53,6 +53,8 @@ import Link from './src/js/link/link';
 import DvrdOptionsList from './src/js/optionsList/dvrdOptionsList';
 import DvrdSelectController from './src/js/select/dvrdSelectController';
 import DvrdSwitch from './src/js/switch/dvrdSwitch';
+import DvrdHeaderController from './src/js/header/v2/dvrdHeaderController';
+import FileUpload from './src/js/fileUpload/fileUpload';
 
 export {
     // Components
@@ -98,6 +100,8 @@ export {
     DvrdOptionsList,
     DvrdSelectController as DvrdSelect,
     DvrdSwitch,
+    DvrdHeaderController as DvrdHeader,
+    FileUpload,
 
     // Interfaces / Enums
     DialogActionShape,

package/package.json

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

package/src/js/checkbox/checkboxController.tsx

@@ -28,6 +28,7 @@ interface Props {
     unControlled: boolean;
     title?: string;
     useDarkestColor: boolean;
+    ref?: any;
 }
 
 interface CheckboxState {
@@ -112,6 +113,11 @@ export default class CheckboxController extends React.Component<Props, CheckboxS
         }
     };
 
+    componentDidUpdate = (prevProps: Props, prevState: CheckboxState) => {
+        if (prevState.internalValue !== this.state.internalValue && this.state.internalValue) this.addRipple();
+        else if (prevProps.checked !== this.props.checked && this.props.checked) this.addRipple();
+    };
+
     componentWillUnmount = () => {
         this.removeRipple();
     };

package/src/js/fileUpload/fileUpload.tsx

@@ -0,0 +1,145 @@
+/*
+ * Copyright (c) Dave van Rijn Development 2023.
+ */
+import './style/fileUpload.scss';
+
+import classNames from 'classnames';
+import React, {useMemo, useRef, useState} from 'react';
+import {ChangeFunction} from "../util/interfaces";
+import {preventDefault} from "../util/miscUtil";
+import {stopPropagation, voidFunction} from "../util/controlUtil";
+import DvrdButton from "../button/dvrdButton";
+import AwesomeIcon from "../icon/awesomeIcon";
+import {IconName} from '@fortawesome/fontawesome-svg-core';
+
+interface Props {
+    onChange: ChangeFunction<FileList>;
+    file: File | FileList | null;
+    disabled?: boolean;
+    className?: string;
+    multiple?: boolean;
+    accept?: string | Array<string>;
+    fileIcon?: IconName;
+}
+
+export default function FileUpload(props: Props) {
+    const {file, className, disabled, onChange, multiple, fileIcon} = props;
+    const [draggingFile, setDraggingFile] = useState(false);
+    const dragCounter = useRef(0);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const accept: string | undefined = useMemo(() => {
+        if (!props.accept) return undefined;
+        if (Array.isArray(props.accept)) return props.accept.join(',');
+        return props.accept;
+    }, [props.accept]);
+    const buttonLabel = useMemo(() => {
+        if (!file) {
+            if (multiple) return 'Upload bestanden';
+            return 'Upload bestand';
+        } else {
+            if (multiple) return 'Kies andere bestanden';
+            return 'Kies ander bestand';
+        }
+    }, [file]);
+
+    function _onChange(evt: React.ChangeEvent<HTMLInputElement>) {
+        const {files} = evt.target;
+        if (!files) return;
+        onChange(files, evt);
+    }
+
+    function onClickUpload() {
+        inputRef.current?.click();
+    }
+
+    function onDrop(evt: React.DragEvent) {
+        preventEvent(evt);
+        const {files} = evt.dataTransfer;
+        onChange(files);
+        evt.dataTransfer.clearData();
+        setDraggingFile(false);
+        dragCounter.current = 0;
+    }
+
+    function onDragEnter(evt: React.DragEvent) {
+        preventEvent(evt);
+        dragCounter.current += 1;
+        setDraggingFile(true);
+    }
+
+    function onDragLeave(evt: React.DragEvent) {
+        preventEvent(evt);
+        if (!draggingFile) return;
+        dragCounter.current -= 1;
+        if (dragCounter.current <= 0) setDraggingFile(false);
+    }
+
+    function preventEvent(evt: React.DragEvent) {
+        preventDefault(evt);
+        stopPropagation(evt);
+    }
+
+    function renderFile() {
+        if (file) return renderSelectedFile();
+        return renderSelectFile();
+    }
+
+    function renderSelectFile() {
+        const label = multiple ? 'bestanden' : 'een bestand';
+        const icon = fileIcon ?? 'file';
+        return (
+            <div className='select-file-container'>
+                <div className='select-file-label-container'>
+                    <AwesomeIcon name={icon} className='file-icon'/>
+                    <label className='selected-file-label'>Klik hier om {label} te selecteren, of
+                        sleep {label} hierheen.</label>
+                </div>
+            </div>
+        )
+    }
+
+    function renderSelectedFile() {
+        const text = multiple ? 'Geselecteerde bestanden:' : 'Geselecteerd bestand:';
+        const icon = fileIcon ?? 'file';
+        return (
+            <div className='selected-file-container'>
+                <AwesomeIcon name={icon} className='file-icon'/>
+                <div className='file-labels-container'>
+                    <label className='selected-file-title'>{text}</label>
+                    <div className='file-label-container'>
+                        {renderFileLabels()}
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    function renderFileLabels() {
+        if (!file) return null;
+        if (file instanceof FileList) {
+            const files = Array.from(file);
+            return (
+                <>
+                    {files.map((file: File, index: number) => (
+                        <label key={index} className='file-label'>{file.name}</label>
+                    ))}
+                </>
+            )
+        }
+        return <label className='file-label'>{file.name}</label>;
+    }
+
+    return (
+        <div className={classNames('dvrd-file-upload', className, disabled && 'disabled')} onDrag={preventEvent}
+             onDragOver={preventEvent} onDrop={onDrop} onDragEnter={onDragEnter} onDragLeave={onDragLeave}
+             onClick={onClickUpload}>
+            <input type='file' multiple={multiple} accept={accept} ref={inputRef} style={{display: 'none'}}
+                   onChange={_onChange}/>
+            <div className='file-container'>
+                {renderFile()}
+            </div>
+            <DvrdButton onClick={voidFunction} label={buttonLabel} secondary={!!file}/>
+        </div>
+    )
+}

package/src/js/fileUpload/style/fileUpload.scss

@@ -0,0 +1,64 @@
+/*!
+ * Copyright (c) Dave van Rijn Development 2023.
+ */
+
+@import '../../../style/variables';
+
+.dvrd-file-upload {
+  border-radius: 1rem;
+  border: 1px solid $color-gray-4;
+  padding: 1rem;
+  width: 50rem;
+  max-width: 100dvw;
+  min-height: min(100dvh, 20rem);
+  display: grid;
+  grid-template-columns: auto;
+  grid-row-gap: 1rem;
+  justify-items: center;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+
+  .file-container {
+
+    .file-icon {
+      font-size: 3rem;
+    }
+
+    .select-file-container {
+      .select-file-label-container {
+        display: grid;
+        grid-template-columns: auto;
+        justify-items: center;
+        grid-row-gap: 1rem;
+
+        .selected-file-label {
+          font-weight: 500;
+        }
+      }
+    }
+
+    .selected-file-container {
+      display: grid;
+      grid-template-columns: auto;
+      grid-row-gap: 1rem;
+      justify-items: center;
+
+      .file-labels-container {
+        display: grid;
+        grid-template-columns: auto;
+        grid-row-gap: 1rem;
+
+        .file-label-container {
+          display: grid;
+          grid-template-columns: auto;
+          grid-row-gap: .5rem;
+
+          .file-label {
+            font-weight: 500;
+          }
+        }
+      }
+    }
+  }
+}

package/src/js/header/v2/dvrdHeader.tsx

@@ -0,0 +1,50 @@
+import React, {CSSProperties, MouseEventHandler, useContext, useMemo} from 'react';
+import {HeaderItem} from "../../util/interfaces";
+import {ControlContext} from "../../util/controlContext";
+import classNames from 'classnames';
+
+interface Props {
+    onClickItem: (item: HeaderItem) => MouseEventHandler;
+    leftItems?: Array<HeaderItem>;
+    rightItems?: Array<HeaderItem>;
+    backgroundColor?: string;
+    color?: string;
+    className?: string;
+    itemClassName?: string;
+}
+
+export default function DvrdHeader(props: Props) {
+    const context = useContext(ControlContext);
+    const {backgroundColor, color, className, itemClassName, rightItems, onClickItem, leftItems} = props;
+    const containerStyle: CSSProperties = useMemo(() => {
+        const background = backgroundColor ?? context.baseColor;
+        return {backgroundColor: background};
+    }, [context.baseColor, backgroundColor]);
+    const itemStyle: CSSProperties = useMemo(() => {
+        const _color = color ?? context.contrastColor;
+        return {color: _color};
+    }, [context.contrastColor, color]);
+
+    function renderItem(item: HeaderItem, index: number) {
+        const {label} = item;
+        if (React.isValidElement(label))
+            return React.cloneElement(label, Object.assign(label.props, {onClick: onClickItem(item), key: index}));
+        return (
+            <div key={index} className={classNames('dvrd-header-item', itemClassName)} onClick={onClickItem(item)}
+                 style={itemStyle}>
+                <label className='dvrd-header-label'>{label}</label>
+            </div>
+        )
+    }
+
+    return (
+        <div className={classNames('dvrd-header', className)} style={containerStyle}>
+            <div className='dvrd-header-items-container'>
+                {leftItems?.map(renderItem)}
+            </div>
+            <div className='dvrd-header-items-container'>
+                {rightItems?.map(renderItem)}
+            </div>
+        </div>
+    )
+}

package/src/js/header/v2/dvrdHeaderController.tsx

@@ -0,0 +1,38 @@
+import React, {MouseEventHandler} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {HeaderItem} from "../../util/interfaces";
+import DvrdHeader from "./dvrdHeader";
+
+interface Props {
+    onClickItem?: (item: HeaderItem) => MouseEventHandler;
+    leftItems?: Array<HeaderItem>;
+    rightItems?: Array<HeaderItem>;
+    backgroundColor?: string;
+    color?: string;
+    className?: string;
+    itemClassName?: string;
+}
+
+export default function DvrdHeaderController(props: Props) {
+    const {leftItems, onClickItem, rightItems, itemClassName, className, backgroundColor, color} = props;
+    const navigate = useNavigate();
+
+    function _onClickItem(item: HeaderItem) {
+        return function (evt: React.MouseEvent) {
+            if (item.onClick) item.onClick(item)(evt);
+            else if (onClickItem) onClickItem(item)(evt);
+            else if (item.route) _navigate(item.route, item.target);
+            else console.warn('Item clicked without click handler.', {item});
+        }
+    }
+
+    function _navigate(route: string, target?: '_blank') {
+        if (route.startsWith('http')) window.open(route, target);
+        else navigate(route);
+    }
+
+    return (
+        <DvrdHeader onClickItem={_onClickItem} backgroundColor={backgroundColor} color={color} className={className}
+                    itemClassName={itemClassName} leftItems={leftItems} rightItems={rightItems}/>
+    );
+}

package/src/js/pdf/pdfTemplateCreator.tsx

@@ -3,7 +3,7 @@
  */
 import './style/pdfTemplateCreator.scss';
 
-import React, {Fragment, PureComponent} from 'react';
+import React, {Fragment, PureComponent, ReactElement} from 'react';
 import {
     AwesomeIcon,
     DefaultPDFElementParams,
@@ -48,6 +48,7 @@ interface Props {
     supportMultiPage: boolean;
     options?: PDFOptions;
     singleImage: boolean;
+    headerButtons?: Array<ReactElement>;
 }
 
 interface State {
@@ -69,12 +70,18 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
         this.refObjects = {};
-        const elements: IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> = this.processItems(props.defaultItems);
+        const elements: IndexedObject<{
+            element: React.ReactElement,
+            config: DefaultPDFElementParams<any, any>
+        }> = this.processItems(props.defaultItems);
         this.state = {elements, focusedElement: null, canRedo: false, canUndo: false};
     }
 
     processItems = (items?: DefaultPDFElementParams<any, any>[],
-                    convertUnits: boolean = true): IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> => {
+                    convertUnits: boolean = true): IndexedObject<{
+        element: React.ReactElement,
+        config: DefaultPDFElementParams<any, any>
+    }> => {
         const elements: IndexedObject<{ element: React.ReactElement, config: DefaultPDFElementParams<any, any> }> = {};
         if (items?.length) {
             items = JSON.parse(JSON.stringify(items));
@@ -185,7 +192,10 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
     };
 
     getElement = (id: string, config: DefaultPDFElementParams<any, any>,
-                  convertUnits: boolean = true): { element: React.ReactElement, config: DefaultPDFElementParams<any, any> } => {
+                  convertUnits: boolean = true): {
+        element: React.ReactElement,
+        config: DefaultPDFElementParams<any, any>
+    } => {
         const {dimensions, linkedID, persistent} = config;
         const position: { x: number; y: number } = {
             x: convertUnits ? ptToPx(dimensions?.left || 0) : (dimensions?.left || 0),
@@ -267,7 +277,10 @@ export default class PDFTemplateCreator extends PureComponent<Props, State> {
             <div className='pdf-creator' onClick={this.onResetElement}
                  style={{maxWidth: maxWidth ?? '100%'}}>
                 <div className='footer-container'>
-                    {onPreview !== undefined ? <DvrdButton onClick={this.onPreview} label='Voorbeeld'/> : <div/>}
+                    <div className='left-buttons'>
+                        {onPreview !== undefined ? <DvrdButton onClick={this.onPreview} label='Voorbeeld'/> : <div/>}
+                        {this.props.headerButtons?.map((el: ReactElement, index: number) => React.cloneElement(el, {key: index}))}
+                    </div>
                     <div>
                         <DvrdButton onClick={this.onSubmit} label='Opslaan'/>
                         {onClickProceed !== undefined &&

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

@@ -111,6 +111,14 @@
     justify-content: space-between;
     align-items: center;
 
+    .left-buttons {
+      flex: 1;
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: fit-content(100%);
+      grid-column-gap: 1rem;
+    }
+
     .proceed-btn {
       margin-left: 1rem;
     }

package/src/js/util/interfaces.ts

@@ -2,7 +2,7 @@
  * Copyright (c) 2021. Dave van Rijn Development
  */
 
-import React, {CSSProperties, ReactElement} from 'react';
+import React, {CSSProperties, MouseEventHandler, ReactElement} from 'react';
 
 // =========== INTERFACES
 
@@ -67,6 +67,13 @@ export interface PDFOptions {
     enableTableHeaderColor?: boolean;
 }
 
+export interface HeaderItem {
+    onClick?: (item: HeaderItem) => MouseEventHandler;
+    route?: string;
+    label: React.ReactNode;
+    target?: '_blank';
+}
+
 // =========== ENUMS
 
 export enum ModeEnum {DETAIL = 'detail', EDIT = 'edit', NEW = 'new'}

package/src/js/util/jwtUtil.ts

@@ -20,6 +20,7 @@ export const getJwt = (): string | null => {
 };
 
 export const setJwt = (token: string | null, preserveOnNull: boolean = false, includeStorage: boolean = true) => {
+    console.debug('Settings JWT token', {token, preserveOnNull, includeStorage, allowCookies: window.allowCookies});
     jwtToken = token;
     if (window.allowCookies || !token) {
         if (token) {

package/src/js/util/requestUtil.ts

@@ -82,6 +82,8 @@ export function sendFetch(config: FetchOptions, legacySupport: boolean = false):
         if (reason.code === DOMException.ABORT_ERR) return; // Request aborted
         else if (config.errorCallback)
             config.errorCallback(reason);
+        else if (defaultErrorHandler)
+            defaultErrorHandler(reason, config);
     });
     return abortController;
 }