@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/util/constants.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+/*
+ ================================================
+ KEY CODES
+ ================================================
+ */
+export const ESCAPE_CODE = 'Escape', ESCAPE_IE_CODE = 'Esc', ENTER_CODE = 'Enter', BACKSPACE_CODE = 'Backspace';
+
+

package/src/js/util/controlContext.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React, {Context, PropsWithChildren, useEffect} from 'react';
+import {ControlVariant} from "./interfaces";
+import {defer} from 'lodash';
+
+// noinspection JSUnusedGlobalSymbols
+export interface ThemeContextShape {
+    baseColor: string,
+    contrastColor: string,
+    onChange: Function,
+}
+
+export interface ProviderProps {
+    theme: ThemeShape;
+}
+
+export interface ThemeShape {
+    baseColor: string,
+    contrastColor: string,
+    controlVariant?: ControlVariant;
+    borderColor?: string;
+    onChange?: (theme?: ThemeShape) => void;
+}
+
+export const ControlContext: Context<ThemeShape> = React.createContext<ThemeShape>(
+    {baseColor: 'black', contrastColor: 'white', controlVariant: ControlVariant.STANDARD});
+
+export default function ThemeContextProvider(props: PropsWithChildren<ProviderProps>) {
+    const {theme, children} = props;
+    useEffect(() => {
+        defer(() => {
+            const root = document.documentElement;
+            root.style.setProperty('--base-color', theme.baseColor);
+            root.style.setProperty('--contrast-color', theme.contrastColor);
+        });
+    }, [theme]);
+
+    return (
+        <ControlContext.Provider value={theme}>
+            {children}
+        </ControlContext.Provider>
+    )
+}

package/src/js/util/controlUtil.ts

@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React from 'react';
+import {v4} from 'uuid';
+import {ENTER_CODE, ESCAPE_CODE, ESCAPE_IE_CODE} from "./constants";
+import {Breakpoint} from "./interfaces";
+
+export const generateUUID = (): string => {
+    // Crypto is not supported by some browsers, so we use another method if crypto is not supported.
+    if (window.crypto)
+        // @ts-ignore
+        return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c: any) =>
+            (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+        );
+    return v4();
+};
+
+export const isNotNull = (obj: any): boolean => {
+    if (obj === undefined || obj === null)
+        return false;
+    return !(obj.hasOwnProperty('length') && obj.length === 0);
+};
+
+export const isNull = (obj: any): boolean => !isNotNull(obj);
+
+export const hasHover = (element: HTMLElement | null): boolean => {
+    if(!element) return false;
+    if (isNotNull(element) && element.parentElement !== null) {
+        return element.parentElement.querySelector(':hover') === element;
+    }
+    return false;
+};
+
+export const pxToRem = (pxValue: number) => {
+    let fontSize: number = getFontSize();
+    return pxValue / fontSize;
+};
+
+export const remToPx = (remValue: number) => {
+    let htmlElement = document.getElementsByTagName('html')[0];
+    let fontSize: number | string = window.getComputedStyle(htmlElement, null).getPropertyValue('font-size');
+    fontSize = parseInt(fontSize.slice(0, fontSize.length - 2), 10);
+    return remValue * fontSize;
+};
+
+const getFontSize = (): number => {
+    let fontSize: number | string = getComputedProperty('font-size');
+    fontSize = parseInt(fontSize.slice(0, fontSize.length - 2), 10);
+    return fontSize;
+};
+
+export const getComputedProperty = (propertyName: string, element?: Element): string => {
+    const htmlElement = element || document.getElementsByTagName('html')[0];
+    return window.getComputedStyle(htmlElement, null).getPropertyValue(propertyName);
+};
+
+export const stringStartsWith = (string: string, value: string): boolean => {
+    value = value.trim().toLowerCase();
+    const valueLength = value.length;
+    return string.toLowerCase().slice(0, valueLength) === value;
+};
+
+export const stringContains = (string: string, value: string): boolean =>
+    string.toLowerCase().includes(value.toLowerCase());
+
+export const voidFunction = () => null;
+
+export const escapePressed = (evt: React.KeyboardEvent | KeyboardEvent) => {
+    return ((evt.key && (evt.key === ESCAPE_IE_CODE || evt.key === ESCAPE_CODE))) || evt.keyCode === 27 || evt.which ===
+        27;
+};
+
+export const enterPressed = (evt: React.KeyboardEvent | KeyboardEvent) => {
+    return ((evt.key && evt.key === ENTER_CODE) || evt.keyCode === 13 || evt.which === 13);
+};
+
+let canvas: HTMLCanvasElement | null = null;
+export const calculateTextWidth = (text: string, fontSize?: number, fontFamily?: string): number => {
+    canvas = canvas || document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (fontSize === undefined) fontSize = getFontSize();
+    if (fontFamily === undefined || !fontFamily.length) fontFamily = getComputedProperty('font-family');
+
+    let width = 0;
+    if (context) {
+        context.font = `${fontSize}px ${fontFamily}`;
+        width = context.measureText(text).width;
+    }
+    return Math.ceil(width);
+};
+
+export const pad = (num: string | number): string => ('0' + num).slice(-2);
+
+export const stopPropagation = (evt: Event | React.SyntheticEvent) => {
+    evt.stopPropagation();
+};
+
+export const assert = (condition: boolean, errMsg?: string | null) => {
+    const message = errMsg || 'Undocumented assertion error';
+    if (!condition) {
+        if (typeof Error !== 'undefined')
+            throw new Error(message);
+        else throw message;
+    }
+};

package/src/js/util/cookieUtil.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import Cookies, {CookieAttributes} from "js-cookie";
+
+export const setCookie = (key: string, value: string, args?: CookieAttributes) => {
+    Cookies.set(key, value, {...args})
+}
+
+export const removeCookie = (key: string, args?: CookieAttributes) => {
+    Cookies.remove(key, args);
+};
+
+export const getCookie = (key: string): string | undefined => {
+    return Cookies.get(key);
+}

package/src/js/util/eventUtil.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React from 'react';
+import {DialogActions} from "../dialog/dialogController";
+import {DialogConfig, Snack} from "./interfaces";
+
+interface ListenerShape {
+    component: string,
+    eventName: string,
+    eventHandler: Function,
+}
+
+const listeners: ListenerShape[] = [];
+
+export const addCustomEventListener = (componentName: string, eventName: string, eventHandler: Function): boolean => {
+    if (listenerExists(componentName, eventName)) return false;
+    listeners.push({component: componentName, eventName, eventHandler});
+    return true;
+};
+
+export const removeCustomEventListener = (componentName: string, eventName: string): boolean => {
+    let foundListeners = false;
+    for (let i = listeners.length - 1; i >= 0; i--) {
+        const listener = listeners[i];
+        if (listener.component === componentName && listener.eventName === eventName) {
+            listeners.splice(i, 1);
+            foundListeners = true;
+        }
+    }
+    return foundListeners;
+};
+
+export const dispatchCustomEvent = (eventName: string, data?: any | null) => {
+    let listenerFound = false;
+    for (const listener of listeners) {
+        if (listener.eventName === eventName) {
+            listenerFound = true;
+            listener.eventHandler(data);
+        }
+    }
+};
+
+const listenerExists = (componentName: string, eventName: string) => {
+    for (let i = 0; i < listeners.length; i++) {
+        const listener = listeners[i];
+        if (listener.component === componentName && listener.eventName === eventName) return true;
+    }
+    return false;
+};
+
+//==========================
+// Events
+//==========================
+
+export const showDialog = (message: string | React.ReactElement, title: string = 'Bericht van het systeem',
+                           actions?: DialogActions | null,
+                           persistent?: boolean, transparent?: boolean) => {
+    dispatchCustomEvent('onOpenDialog', {message, title, actions, transparent, persistent});
+};
+
+export const showSnackbar = (text: string | React.ReactElement, config?: DialogConfig) => {
+    dispatchCustomEvent('onShowSnackbar', {text, config});
+};

package/src/js/util/googleUtil.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+/**
+ * Loads Google SDK.
+ * @see https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiclientloadname--------version--------callback
+ * @see https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauth2initparams
+ * @see https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauth2getauthinstance
+ */
+export const loadSocial = (appId: string): Promise<void> => new Promise((resolve, reject) => {
+    const firstJS = document.getElementsByTagName('script')[0];
+    const js = document.createElement('script');
+
+    js.src = '//apis.google.com/js/platform.js';
+    js.id = 'gapi-client';
+    js.onload = () => {
+        window.gapi.load('auth2', () => {
+            if (!window.gapi.auth2.getAuthInstance()) {
+                window.gapi.auth2.init({
+                    client_id: appId,
+                    fetchBasicProfile: true,
+                    scope: null
+                }).then(() => resolve(), (err: any) => reject({
+                    provider: 'google',
+                    type: 'load',
+                    description: 'Failed to load SDK',
+                    error: err
+                }));
+            } else resolve();
+        });
+    };
+
+    if (!firstJS?.parentNode) document.appendChild(js);
+    else firstJS.parentNode.appendChild(js);
+});
+
+/**
+ * Checks if user is logged in to app through Google.
+ * Requires SDK to be loaded first.
+ * @see https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauth2getauthinstance
+ * @see https://developers.google.com/api-client-library/javascript/reference/referencedocs#googleauthissignedinget
+ * @see https://developers.google.com/api-client-library/javascript/reference/referencedocs#googleauthcurrentuserget
+ */
+export const checkLogin = () => new Promise((resolve, reject) => {
+    const GoogleAuth = window.gapi.auth2.getAuthInstance();
+
+    if (!GoogleAuth.isSignedIn.get()) {
+        return reject({
+            provider: 'google',
+            type: 'check_login',
+            description: 'Not authenticated',
+            error: null
+        });
+    }
+
+    return resolve(GoogleAuth.currentUser.get());
+});
+
+/**
+ * Trigger Google login process.
+ * Requires SDK to be loaded first.
+ * @see https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauth2getauthinstance
+ * @see https://developers.google.com/api-client-library/javascript/reference/referencedocs#googleauthsignin
+ */
+export const login = () => new Promise((resolve, reject) => {
+    const GoogleAuth = window.gapi.auth2.getAuthInstance();
+
+    GoogleAuth.signIn().then(
+        () => checkLogin().then(resolve, reject),
+        (err: any) => reject({
+            provider: 'google',
+            type: 'auth',
+            description: 'Authentication failed',
+            error: err
+        })
+    );
+});
+
+/**
+ * Trigger Google logout.
+ * Requires SDK to be loaded first.
+ * @see https://developers.google.com/api-client-library/javascript/reference/referencedocs#googleauthsignout
+ */
+export const googleLogout = () => new Promise((resolve, reject) => {
+    const GoogleAuth = window.gapi.auth2.getAuthInstance();
+    GoogleAuth.signOut().then(resolve, reject);
+})

package/src/js/util/interfaces.ts

@@ -0,0 +1,180 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React, {CSSProperties, ReactElement} from 'react';
+
+// =========== INTERFACES
+
+export interface MenuItem {
+    label?: string;
+    component?: React.ReactNode;
+    subItems?: MenuItem[];
+    onClick?: Function;
+    normalCase?: boolean;
+    id?: string;
+    allowPropagation?: boolean;
+}
+
+export interface PasswordRule {
+    label: string;
+    validator: (password: string) => boolean;
+}
+
+export interface IndexedObject<T> {
+    [key: string]: T;
+}
+
+export interface ColorSet {
+    base: string;
+    contrast: string;
+}
+
+export interface OrnamentShape {
+    placement?: ElementPosition;
+    element: React.ReactElement | string;
+    allowPropagation?: boolean;
+}
+
+export interface ResponseData extends IndexedObject<any> {
+    status: string;
+    message?: string;
+    success?: boolean;
+}
+
+export interface SelectItemShape {
+    value: string | number,
+    label: string | number | ReactElement,
+    inputLabel?: string,
+    selectable?: boolean,
+    labelClass?: string;
+    labelStyle?: CSSProperties;
+    valueLabel?: string;
+
+    [key: string]: any,
+}
+
+export interface DialogConfig {
+    backgroundColor?: string;
+    textColor?: string;
+}
+
+// =========== ENUMS
+
+export enum ModeEnum {DETAIL = 'detail', EDIT = 'edit', NEW = 'new'}
+
+export enum Breakpoint {XS = 0, SM = 600, MD = 960, LG = 1280, XL = 1920}
+
+export enum MenuPlacement {TOP_LEFT, TOP_RIGHT, BOTTOM_RIGHT, BOTTOM_LEFT}
+
+export enum ColorPickerType {
+    SKETCH, PHOTOSHOP, CHROME, CIRCLE, TWITTER, BLOCK, COMPACT
+}
+
+export enum ColorPickerResultType {HEX, RGB, HSL}
+
+export enum ControlVariant {OUTLINED = 'outlined', STANDARD = 'standard', SIMPLE = 'simple'}
+
+export enum ControlPadding {SMALL = 'sp', NORMAL = 'np', LARGE = 'lp'}
+
+export enum ElementPosition {LEFT = 'left', RIGHT = 'right', TOP = 'top', BOTTOM = 'bottom', CENTER = 'center'}
+
+export enum EventType {CREATE, UPDATE, DELETE}
+
+export enum FetchMethod {GET = 'GET', POST = 'POST', PUT = 'PUT', DELETE = 'DELETE', PATCH = 'PATCH'}
+
+export enum PDFSettingType {TEXT, IMAGE}
+
+export enum PDFElementType {TEXT = 'text', IMAGE = 'image', INVOICE_TABLE = 'invoice_table'}
+
+export enum PDFElementSubType {INVOICE_TITLE = 'invoice_title'}
+
+export enum PDFElementPersist {CONFIRM = 'confirm', PERSISTENT = 'persistent', NOT_PERSISTENT = 'not-persistent'}
+
+export enum PdfFont {
+    LATO = 'lato',
+    MERRIWEATHER = 'merriweather',
+    NOTO_SANS = 'noto-sans',
+    NOTO_SERIF = 'noto-serif',
+    OPEN_SANS = 'open-sans',
+    PLAYFAIR = 'playfair',
+    PT_SERIF = 'pt-serif',
+    ROBOTO = 'roboto',
+    ROBOTO_MONO = 'roboto-mono',
+    HELVETICA = 'helvetica',
+    SOURCE_SANS_PRO = 'source-sans-pro'
+}
+
+export enum MediaType {VIDEO, IMAGE}
+
+export enum SideMenuMode {COMPACT, FULL}
+
+export enum PDFDisplay {FIRST_PAGE = 'first_page', LAST_PAGE = 'last_page', ALL_PAGES = 'all_pages'}
+
+// =========== TYPES
+export type OptionsMenuItem = {
+    label: string;
+    icon?: React.ReactNode;
+    iconPlacement?: ElementPosition;
+    onClick?: Function;
+    disabled?: boolean;
+};
+
+export type ErrorType = string | null;
+
+export type CustomAppEvent = {
+    eventName: string,
+    handler: Function,
+}
+
+export type ChangeFunction<T = any> = (value: T, evt?: React.ChangeEvent) => void;
+export type ChangeKeyFunction<K = string, V = any> = (key: K) => ChangeFunction<V>;
+export type ModelResponse<T> = (obj: T, success: boolean | undefined, data: ResponseData) => void;
+export type StrengthGauche = { validator: (password: string) => boolean };
+export type PDFSetting = { key: string; label: string; type: PDFSettingType; value: any };
+
+export type PDFElementParams<T extends PDFElementType, O extends IndexedObject<any>> = {
+    key: string;
+    type: T;
+    sub_type?: PDFElementSubType | null;
+    dimensions: { left: number; top: number; width: number; height: number };
+    options: O;
+    persistent?: PDFElementPersist;
+    linkedID?: string;
+}
+export type DefaultPDFElementParams<T extends PDFElementType, O extends IndexedObject<any>> = Partial<{
+    type: T;
+    dimensions: Partial<{ left: number; top: number; width: number; height: number }>;
+    options: O;
+    persistent?: PDFElementPersist;
+    key: string;
+    linkedID?: string;
+}>
+export type PDFImageParams = { img: File | string | null, persistent: PDFElementPersist; alignment?: ElementPosition; display?: PDFDisplay };
+export type PDFTextParams = { bold: boolean; underline: boolean; italic: boolean; fontSize: number; text: string; alignment?: ElementPosition; disabled?: boolean, font: PdfFont, color: string; persistent: PDFElementPersist; display?: PDFDisplay };
+export type PDFInvoiceTableParams = { fontSize: number; widths: number[], font: PdfFont, color: string, alignment?: ElementPosition; persistent: PDFElementPersist };
+export type PDFInvoiceWidths = { name: number; price: number; quantity: number; subtotal: number }
+export type PDFTextVariables = { company: IndexedObject<string>; client: IndexedObject<string>; invoice: IndexedObject<string>; }
+export type PDFSubmitHandler = (items: PDFElementParams<any, any>[], callback?: VoidFunction) => void;
+export type PDFElementDimensions = { left: number; top: number; width: number; height: number };
+
+export type SidebarItem = {
+    label: string; icon?: string | React.ReactNode;
+    className?: string;
+    id: string;
+    onBottom?: boolean;
+    route?: string | string[];
+    exactRoute?: boolean;
+    children?: SidebarItem[];
+}
+export type ResponseCallback = (data: ResponseData) => void;
+export type RNDDimensions = { x: number, y: number, height: number, width: number };
+export type HTMLVideoEvent = (evt: React.SyntheticEvent<HTMLVideoElement, Event>) => void;
+export type RenderFile = {
+    filename: string;
+    src: string;
+}
+export type Snack = {
+    text: string | React.ReactElement;
+    config?: DialogConfig;
+}

package/src/js/util/jwtUtil.ts

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import Cookies, {CookieAttributes} from "js-cookie";
+import {debug, getSetting} from "./miscUtil";
+
+let jwtToken: string | null = null;
+
+export const getJwt = (): string | null => {
+    if (jwtToken && jwtToken.length) return jwtToken;
+
+    const jwt = getJwtFromStorage();
+    if (jwt && jwt.length) return jwt;
+
+    const cookieJwt = Cookies.get('JWT');
+    if (cookieJwt && cookieJwt.length)
+        return cookieJwt;
+    return null;
+};
+
+export const setJwt = (token: string | null, preserveOnNull: boolean = false, includeStorage: boolean = true) => {
+    jwtToken = token;
+    if (window.allowCookies || !token) {
+        if (token) {
+            let options: CookieAttributes = {expires: 1, sameSite: 'strict'};
+            if (getSetting('mode') !== 'dev') {
+                options.secure = true;
+                options.sameSite = 'strict';
+            }
+            Cookies.set('JWT', token, options);
+        } else if (!preserveOnNull) removeJwtCookie();
+        if (includeStorage)
+            setJwtToStorage(token, preserveOnNull);
+    }
+};
+
+const setJwtToStorage = (token: string | null, preserveOnNull: boolean = false) => {
+    if ((token === null || token === undefined) && !preserveOnNull) removeJwtFromStorage();
+    else if (token !== null && token !== undefined) {
+        try {
+            if (window.localStorage)
+                window.localStorage.setItem('JWT', JSON.stringify(token));
+        } catch {
+            // Localstorage not supported
+        }
+    }
+};
+
+const removeJwtFromStorage = () => {
+    try {
+        if (window.localStorage)
+            window.localStorage.removeItem('JWT');
+    } catch {
+        // Localstorage not supported
+    }
+};
+
+const removeJwtCookie = () => {
+    Cookies.remove('JWT');
+};
+
+const getJwtFromStorage = (): string | null => {
+    try {
+        if (window.localStorage) {
+            const item: string | null = window.localStorage.getItem('JWT');
+            if (item === null) return null;
+            return JSON.parse(item);
+        }
+    } catch {}
+    return null;
+};