@dvrd/dvr-controls 1.0.6 → 1.0.7

package/src/js/util/interfaces.ts

@@ -1,179 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import React, {CSSProperties} 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,
-    inputLabel?: string,
-    selectable?: boolean,
-    labelClass?: string;
-    labelStyle?: CSSProperties;
-
-    [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<T = any> = (key: T) => ChangeFunction<T>;
-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

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

package/src/js/util/miscUtil.ts

@@ -1,170 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import {IndexedObject} from "./interfaces";
-import React from "react";
-import DOMPurify from "dompurify";
-
-declare global {
-    // noinspection JSUnusedGlobalSymbols
-    interface Window {
-        log: Function;
-        settings: IndexedObject<any>;
-        allowCookies: boolean;
-        gtag?: Function;
-        gapi?: any;
-    }
-}
-
-export const getSetting = (name: string): any => {
-    const settings: IndexedObject<any> = window.settings;
-    if (settings.hasOwnProperty(name))
-        return settings[name];
-    console.warn(`Global settings does not contain a value for '${name}'`);
-}
-
-export const getMode = (): 'prod' | 'test' | 'dev' | 'accept' => {
-    return window.settings.mode;
-};
-
-export const log = (message: any, obj?: any, force: boolean = false) => {
-    if (getMode() !== 'prod' || force) {
-        if (obj !== undefined && obj !== null) console.log(message, obj);
-        else console.log(message);
-    }
-};
-
-export const warn = (message: string | number | boolean | object, obj?: any, force: boolean = false) => {
-    if (getMode() !== 'prod' || force) {
-        if (obj !== undefined && obj !== null) console.warn(message, obj);
-        else console.warn(message);
-    }
-};
-
-export const error = (message: string | number | boolean, obj?: any, force: boolean = false) => {
-    if (getMode() !== 'prod' || force) {
-        if (obj !== undefined && obj !== null) console.error(message, obj);
-        else console.error(message);
-    }
-};
-
-export const debug = (message: string | number | boolean | object, obj?: any, force: boolean = false) => {
-    if (getMode() !== 'prod' || force) {
-        if (obj !== undefined && obj !== null) console.debug(message, obj);
-        else console.debug(message);
-    }
-};
-
-const getRootFontSize = (): number => {
-    const root = document.documentElement,
-        fontString = window.getComputedStyle(root, null).getPropertyValue('font-size');
-    return parseInt(fontString.slice(0, fontString.length - 2), 10);
-};
-
-export const roundTo = (number: number, digits: number = 0): string => {
-    const isNegative = number < 0, multiplicator = Math.pow(10, digits);
-    if (isNegative) number = number * -1;
-    number = parseFloat((number * multiplicator).toFixed(11));
-    let numberString = (Math.round(number) / multiplicator).toFixed(digits);
-    if (isNegative)
-        numberString = (parseFloat(numberString) * -1).toFixed(digits);
-    return numberString;
-};
-
-export const roundToNumber = (number: number, decimals: number = 0): number => {
-    return Number(roundTo(number, decimals).replace(',', '.'));
-}
-
-export const parseMoney = (money: number): string => {
-    let moneyString: string;
-    if (money === 0 || money % 1 === 0) moneyString = money + ',-';
-    else moneyString = roundTo(money, 2).replace('.', ',');
-    if (/^0+[1-9]/.test(moneyString)) moneyString = moneyString.replace(/^0+/, '');
-    return moneyString;
-};
-
-export const capitalize = (text: string): string => text.length ?
-    text.substr(0, 1).toUpperCase() + text.substr(1) : text;
-
-export const getSearchParams = (search?: string, removeQuery: boolean = false): URLSearchParams => {
-    search = search === undefined || search === null ? location.search : search;
-    const params = new URLSearchParams(search);
-    if (removeQuery) window.history.pushState({}, document.title, window.location.pathname);
-    return params;
-};
-
-export const downloadFile = (blob: Blob, fileName: string) => {
-    const link = document.createElement('a');
-    link.href = URL.createObjectURL(blob);
-    link.type = 'download';
-    link.download = fileName;
-    link.click();
-};
-
-export const downloadRequiredFile = (path: string | { default: string }, fileName?: string) => {
-    if (typeof path !== 'string') path = path.default;
-    const name = getFileName(path, fileName);
-    const link = document.createElement('a');
-    link.href = path;
-    link.type = 'download';
-    link.download = name;
-    link.click();
-}
-
-const getFileName = (path: string, fileName?: string): string => {
-    if (fileName?.length) return fileName;
-    let pathName = path.substr(path.lastIndexOf('/') + 1, path.length);
-    const cacheReg = /-[a-zA-Z\d]+-cache/;
-    if (pathName.match(cacheReg))
-        pathName = pathName.replace(cacheReg, '');
-    return pathName;
-}
-
-export const preventDefault = (evt: Event | React.SyntheticEvent) => {
-    evt.preventDefault();
-};
-
-export const shuffleArray = (arr: any[]): any[] => {
-    let counter: number = arr.length;
-    if (counter === 0) return arr;
-    while (counter > 0) {
-        const randomIndex = Math.floor(Math.random() * counter--), temp = arr[counter];
-        arr[counter] = arr[randomIndex];
-        arr[randomIndex] = temp;
-    }
-    return arr;
-};
-
-export const nullify = <T extends string | Array<any>>(value?: T | null): T | null => {
-    return value?.length ? value : null;
-};
-
-export const undefine = (value?: string | null): string | undefined => {
-    return value?.length ? value : undefined;
-};
-
-export const sanitizeHtml = (html: string) => {
-    return DOMPurify().sanitize(html);
-};
-
-export const copyToClipboard = (text: string): Promise<void> => {
-    return copyClipboard(text);
-};
-
-export const copyClipboard = (text: string): Promise<void> => {
-    return window.navigator.clipboard.writeText(text);
-}
-
-export function webpSupported(): boolean {
-    try {
-        return document.createElement('canvas').toDataURL('image/webp')
-            .indexOf('data:image/webp') === 0;
-    } catch {
-        return false;
-    }
-}
-
-export function isAbsoluteLink(link: string): boolean {
-    return /^(https?|www).*/.test(link);
-}

package/src/js/util/momentUtil.ts

@@ -1,45 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import moment, {Moment} from "moment";
-
-export const MOMENT_FORMATS: string[] = [
-    'MM/DD/YYYY HH:mm:ss',
-    'MM-DD-YYYY HH:mm:ss',
-    'DD/MM/YYYY HH:mm:ss',
-    'DD-MM-YYYY HH:mm:ss',
-    'YYYY-MM-DD HH:mm:ss',
-    'YYYY/MM/DD HH:mm:ss',
-    'DD/MM/YYYYTHH:mm:ss',
-    'DD-MM-YYYYTHH:mm:ss',
-    'YYYY-MM-DDTHH:mm:ss',
-    'MM/DD/YYYY HH:mm',
-    'MM-DD-YYYY HH:mm',
-    'DD/MM/YYYY HH:mm',
-    'DD-MM-YYYY HH:mm',
-    'YYYY-MM-DD HH:mm',
-    'YYYY/MM/DD HH:mm',
-    'DD/MM/YYYYTHH:mm',
-    'DD-MM-YYYYTHH:mm',
-    'YYYY-MM-DDTHH:mm',
-    'YYYY/MM/DDTHH:mm',
-    'YYYY-MM-DD',
-    'YYYY/MM/DD',
-    'MM-DD-YYYY',
-    'MM/DD/YYYY',
-    'DD-MM-YYYY',
-    'DD/MM/YYYY',
-];
-
-export const toMoment = (dateValue?: string | Moment | null | Date, formats: string[] | string = MOMENT_FORMATS): Moment => {
-    if (moment.isMoment(dateValue)) return dateValue;
-    if(dateValue instanceof Date) return moment(dateValue);
-    if (!dateValue || !dateValue.length) return moment();
-    return moment(dateValue, formats);
-};
-
-export const formatMoment = (date?: Moment, format: string = 'YYYY-MM-DDTHH:mm:ss'): string => {
-    if (!date) date = toMoment();
-    return date.format(format);
-};

package/src/js/util/pdfUtil.ts

@@ -1,124 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import {DefaultPDFElementParams, IndexedObject, PdfFont, PDFTextVariables, SelectItemShape} from "./interfaces";
-
-export const mmToPt = (mm: number) => Math.round(pxToPt(mmToPx(mm)));
-export const mmToPx = (mm: number, toTens: boolean = true) => {
-    const value: number = Math.round(mm / 0.264583333);
-    return toTens ? roundToTens(value) : value;
-}
-export const pxToMm = (pixels: number) => Math.round(pixels * 0.264583333);
-export const pxToPt = (px: number) => Math.round(px * .75);
-export const ptToPx = (pt: number, toTens: boolean = true) => {
-    const value: number = Math.round(pt / .75);
-    return toTens ? roundToTens(value) : value;
-}
-export const ptToMm = (pt: number) => pxToMm(ptToPx(pt));
-export const PAGE_WIDTH = 794, PAGE_HEIGHT = 1122; // In pixels
-
-export const PDF_VARIABLES: PDFTextVariables = {
-    company: {
-        bedrijf_naam: 'Bedrijfsnaam',
-        bedrijf_adres: 'Adres',
-        bedrijf_postcode: 'Postcode',
-        bedrijf_stad: 'Stad',
-        bedrijf_land: 'Land',
-        bedrijf_email: 'E-mailadres',
-        bedrijf_telefoon: 'Telefoonnummer',
-        bedrijf_iban: 'IBAN',
-        bedrijf_btw: 'BTW-nummer',
-        bedrijf_kvk: 'KvK nummer'
-    },
-    client: {
-        klant_naam: 'Klantnaam',
-        klant_adres: 'Adres',
-        klant_postcode: 'Postcode',
-        klant_stad: 'Stad',
-        klant_land: 'Land',
-        klant_extra: 'Adres toevoeging',
-        klant_email: 'E-mailadres',
-        klant_telefoon: 'Telefoonnummer',
-        // klant_iban: 'IBAN',
-        klant_btw: 'BTW-nummer',
-        klant_kvk: 'KvK nummer',
-        klant_bedrijf: 'Bedrijfsnaam',
-    },
-    invoice: {
-        datum: 'Huidige datum',
-        factuurnummer: 'Factuurnummer',
-        subtotaal: 'Subtotaal',
-        btw_totaal: 'Totaal BTW (\u20ac)',
-        factuurtotaal: 'Factuurtotaal',
-        factuurdatum: 'Factuur datum',
-        factuurref: 'Factuur referentie'
-    }
-}
-
-export const getPdfVariables = (customVariables?: PDFTextVariables): PDFTextVariables => {
-    const variables = PDF_VARIABLES;
-    if (customVariables) {
-        const {company, invoice, client} = customVariables;
-        for (const key of Object.keys(company))
-            variables.company[key] = company[key];
-        for (const key of Object.keys(invoice))
-            variables.invoice[key] = invoice[key];
-        for (const key of Object.keys(client))
-            variables.client[key] = client[key];
-    }
-    return variables;
-}
-
-export const setPdfVariables = (text: string, values: IndexedObject<string>) => {
-    for (const key of Object.keys(values)) {
-        const value = values[key];
-        if (text.includes(`{${key}}`) && value.length) text =
-            text.replace(new RegExp('\{' + key + '\}', 'g'), value);
-    }
-    return text;
-};
-
-export const setElementSettings = (element: DefaultPDFElementParams<any, any>, convertUnits: boolean = true) => {
-    const {dimensions, options} = element;
-    if (convertUnits) {
-        if (dimensions?.width) dimensions.width = ptToPx(dimensions.width, false);
-        if (dimensions?.height) dimensions.height = ptToPx(dimensions.height, false);
-        if (options?.fontSize) options.fontSize = ptToPx(element.options.fontSize, false);
-    }
-};
-
-export const fontItems: SelectItemShape[] = [
-    {label: 'Helvetica', value: PdfFont.HELVETICA, labelStyle: {fontFamily: 'helvetica'}},
-    {label: 'Lato', value: PdfFont.LATO, labelStyle: {fontFamily: 'lato'}},
-    {label: 'Merriweather', value: PdfFont.MERRIWEATHER, labelStyle: {fontFamily: 'merriweather'}},
-    {label: 'Noto Sans', value: PdfFont.NOTO_SANS, labelStyle: {fontFamily: 'noto-sans'}},
-    {label: 'Noto Serif', value: PdfFont.NOTO_SERIF, labelStyle: {fontFamily: 'noto-serif'}},
-    {label: 'Open Sans', value: PdfFont.OPEN_SANS, labelStyle: {fontFamily: 'open-sans'}},
-    {label: 'Playfair Display', value: PdfFont.PLAYFAIR, labelStyle: {fontFamily: 'playfair'}},
-    {label: 'PT Serif', value: PdfFont.PT_SERIF, labelStyle: {fontFamily: 'pt-serif'}},
-    {label: 'Roboto', value: PdfFont.ROBOTO, labelStyle: {fontFamily: 'roboto'}},
-    {label: 'Roboto Mono', value: PdfFont.ROBOTO_MONO, labelStyle: {fontFamily: 'roboto-mono'}},
-    {label: 'Source Sans Pro', value: PdfFont.SOURCE_SANS_PRO, labelStyle: {fontFamily: 'source-sans-pro'}}
-];
-
-export const parsePrice = (price: number) => {
-    return price.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-};
-
-const roundToTens = (value: number): number => {
-    const remainder = value % 10;
-    if (remainder === 0) return value;
-    if (remainder > 4) return value + (10 - remainder);
-    return value - remainder;
-};
-
-export const waitForFonts = (callback: Function) => {
-    // @ts-ignore
-    if (document.fonts && document.fonts.ready) {
-        // @ts-ignore
-        document.fonts.ready.then(() => {
-            callback();
-        });
-    }
-};