@dvrd/dvr-controls 1.0.5 → 1.0.8

package/src/js/util/colorUtil.ts

@@ -1,230 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import {ColorSet} from "./interfaces";
-import {isNotNull} from "./controlUtil";
-
-interface ColorShape {
-    [index: string]: string,
-}
-
-const colorConstants: ColorShape = {
-    orange: "color-orange",
-    white: "#ffffff",
-    black: '#000000',
-    gray: 'gray',
-    "color-blue-1": "#009fe3",
-    "color-blue-handels": "#005fa0",
-    "color-blue-knab": "#003b5a",
-    "color-blue-trio": "#00006b",
-    "color-blue-text": "#2A435F",
-    "color-gray-2": "#808080",
-    "color-gray-3": "#9a9a9a",
-    "color-gray-4": "#cccccc",
-    "color-gray-5": "#434b50",
-    "color-gray-6": "#F2F2F2",
-    "color-gray-7": "#e4e4e4",
-    "color-gray-header": "#3a4044",
-    "color-green-1": "#18A155",
-    "color-green-abn": "#00857a",
-    "color-green-whatsapp": "#29A71A",
-    "color-orange": "#f39320",
-    "color-orange-asn": "#f0533d",
-    "color-purple-sns": "#562772",
-    "color-red-moneyou": "#d40d47",
-    "color-red-regio": "#ca031a",
-};
-
-export const constants: ColorShape = {
-    ...colorConstants,
-};
-
-export const OrangeSet: ColorSet = {
-    base: '#ffc47d',
-    contrast: '#ab5d00',
-    // contrast: '#ffc47d'
-};
-
-export const OrangeSet2: ColorSet = {
-    base: '#F9ECD1',
-    contrast: '#ab5d00'
-};
-
-export const GreenSet: ColorSet = {
-    base: '#D9F6D9',
-    contrast: '#669966',
-};
-
-export const YellowSet: ColorSet = {
-    base: '',
-    contrast: '',
-};
-
-export const BlueSet: ColorSet = {
-    base: '#b0e7ff',
-    contrast: '#007bb0',
-};
-
-export const RedSet: ColorSet = {
-    base: '',
-    contrast: '',
-};
-
-export const findDarkestColor = (...colors: string[]): string => {
-    let darkest = 9999, darkestColor: string = '';
-    for (const color of colors) {
-        const hsp: number | undefined = getHsp(color);
-        if (hsp !== undefined && hsp < darkest) {
-            darkest = hsp;
-            darkestColor = color;
-        }
-    }
-    return darkestColor;
-};
-
-const getHsp = (color: string): number | undefined => {
-    let r: number | undefined, g: number | undefined, b: number | undefined, hsp: number | undefined;
-    if (color.match(/^rgb/)) {
-        const colorMatch = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
-        if (colorMatch) {
-            r = parseInt(colorMatch[1]);
-            g = parseInt(colorMatch[2]);
-            b = parseInt(colorMatch[3]);
-        }
-    } else {
-        // @ts-ignore
-        let colorNum: number = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
-        r = colorNum >> 16;
-        g = colorNum >> 8 & 255;
-        b = colorNum & 255;
-    }
-    if (r !== undefined && g !== undefined && b !== undefined)
-        return Math.sqrt(
-            0.299 * (r * r) +
-            0.587 * (g * g) +
-            0.114 * (b * b)
-        );
-}
-
-export const hexToRgb = (hex: string): { r: number | null, g: number | null, b: number | null } => {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-    } : {r: null, g: null, b: null};
-};
-
-export const getRandomColor = (): string => {
-    const letters = '0123456789ABCDEF';
-    let color = '#';
-    for (let i = 0; i < 6; i++)
-        color += letters[Math.floor(Math.random() * letters.length)];
-    return color;
-};
-
-//@ts-ignore-start
-export const editColor = (p, c0, c1?, l?): string => {
-    c0 = convertColor(c0);
-    let r, g, b, P, f, t, h, i = parseInt, m = Math.round, a = typeof (c1) == "string";
-    if (p < -1 || p > 1 || (c0[0] !== 'r' && c0[0] !== '#') || (c1 && !a)) return c0;
-    // @ts-ignore
-    if (!window.pSBCr) window.pSBCr = (d) => {
-        let n = d.length, x = {};
-        if (n > 9) {
-            [r, g, b, a] = d = d.split(","), n = d.length;
-            if (n < 3 || n > 4) return null;
-            // @ts-ignore
-            x.r = i(r[3] === "a" ? r.slice(5) : r.slice(4)), x.g = i(g), x.b = i(b), x.a = a ? parseFloat(a) : -1
-        } else {
-            if (n === 8 || n === 6 || n < 4) return null;
-            if (n < 6) d = "#" + d[1] + d[1] + d[2] + d[2] + d[3] + d[3] + (n > 4 ? d[4] + d[4] : "");
-            d = i(d.slice(1), 16);
-            // @ts-ignore
-            if (n === 9 || n === 5) x.r = d >> 24 & 255, x.g = d >> 16 & 255, x.b = d >> 8 & 255, x.a =
-                m((d & 255) / 0.255) / 1000;
-            // @ts-ignore
-            else x.r = d >> 16, x.g = d >> 8 & 255, x.b = d & 255, x.a = -1
-        }
-        return x
-    };
-    // @ts-ignore
-    h = c0.length > 9, h = a ? c1.length > 9 ? true : c1 === "c" ? !h : false : h, f = pSBCr(c0), P = p < 0, t =
-        // @ts-ignore
-        c1 && c1 !== "c" ? pSBCr(c1) : P ? {
-            r: 0,
-            g: 0,
-            b: 0,
-            a: -1
-        } : {r: 255, g: 255, b: 255, a: -1}, p = P ? p * -1 : p, P = 1 - p;
-    if (!f || !t) return c0;
-    if (l) r = m(P * f.r + p * t.r), g = m(P * f.g + p * t.g), b = m(P * f.b + p * t.b);
-    else r = m((P * f.r ** 2 + p * t.r ** 2) ** 0.5), g = m((P * f.g ** 2 + p * t.g ** 2) ** 0.5), b =
-        m((P * f.b ** 2 + p * t.b ** 2) ** 0.5);
-    // @ts-ignore
-    a = f.a, t = t.a, f = a >= 0 || t >= 0, a = f ? a < 0 ? t : t < 0 ? a : a * P + t * p : 0;
-    // @ts-ignore
-    if (h) return "rgb" + (f ? "a(" : "(") + r + "," + g + "," + b + (f ? "," + m(a * 1000) / 1000 : "") + ")";
-    // @ts-ignore
-    else return "#" + (4294967296 + r * 16777216 + g * 65536 + b * 256 + (f ? m(a * 255) : 0)).toString(16)
-        .slice(1, f ? undefined : -2)
-};
-
-export const darkenColor = (color: string, percentage: number) => editColor(percentage / -100, color);
-export const lightenColor = (color: string, percentage: number) => editColor(percentage / 100, color);
-
-export const colorIsHex = (colorName: string): boolean => /^#[A-Za-z\d]{6,7}$/.test(colorName);
-
-export const colorIsWhite = (color: string): boolean => color === 'white' || /#fff(fff)?/.test(color);
-
-export const convertColor = (colorName: string) => {
-    if (colorIsHex(colorName)) return colorName;
-    else if (colorConstants.hasOwnProperty(colorName)) {
-        if (colorIsHex(colorConstants[colorName])) return colorConstants[colorName];
-
-        const converted = colorConstants[colorName];
-        if (isNotNull(converted)) return colorConstants[converted];
-    }
-    return colorName;
-};
-
-export enum Colors {
-    BLUE = '#0000ff',
-    FACEBOOK = '#4267B2',
-    BLUE1 = '#3687bc',
-    BLUE2 = '#008dca',
-    BLUE3 = '#009fe3',
-    BLUE3_HOVER = '#31c1ff',
-    BLUE4 = '#779bbc',
-    BLUE5 = '#DEEAF6',
-    GRAY1 = '#333',
-    GRAY2 = '#3a4044', // HEADER
-    GRAY3 = '#434b50',
-    GRAY = '#808080',
-    GRAY_DVR_LOGO = '#b4b7b999',
-    GRAY4 = '#9a9a9a',
-    GRAY5_HOVER = '#b2b2b2',
-    GRAY6 = '#ccc',
-    GRAY5 = '#d8d8d8', // HEADER TEXT
-    GRAY7 = '#e4e4e4',
-    GRAY8 = '#f8f8f8',
-    GRAY9 = '#F2F2F2',
-    ORANGE1 = '#b05a20',
-    ORANGE2_HOVER = '#f39320cc',
-    ORANGE2 = '#f39320',
-    YELLOW1 = '#fff000',
-    GREEN1 = '#18A155',
-    WHATSAPP = '#29A71A',
-    GREEN2 = '#94FB82',
-    GREEN3 = '#eafeea',
-    GREEN4 = '#E2EFDA',
-    GREEN5 = '#edf1f2',
-    PINK1_HOVER = '#fbe1d599',
-    PINK1 = '#fbe1d5',
-    RED_HOVER = '#cc0000',
-    RED1 = '#ca031a',
-    RED = '#ff0000',
-    RED2 = '#ff7e78',
-    RED3 = '#FDD4CC',
-}

package/src/js/util/componentUtil.tsx

@@ -1,59 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import React from "react";
-import {debug} from "./miscUtil";
-import {getScreenHeight, getScreenWidth} from "./responsiveUtil";
-import {generateUUID} from "./controlUtil";
-
-export const generateComponentId = (id?: string | null, lettersOnly: boolean = true): string => {
-    if (id !== null && id !== undefined) return id;
-    const generated = generateUUID();
-    let compId = generated.substring(0, generated.indexOf('-', generated.indexOf('-') + 1));
-    if (lettersOnly)
-        compId = compId.split('').map((char: string) => Number.isNaN(char) ? char : String.fromCharCode(97 + Number(char))).join('');
-    return compId;
-};
-
-export const navigate = (url: string, stripQuery: boolean = true, move: boolean | string = true,
-                         customScroller?: (id?: boolean | string) => void) => {
-    let navigator = document.getElementById('appNavigator');
-    if (navigator) {
-        navigator.dataset.url = url;
-        if (stripQuery) navigator.dataset.strip = '1';
-        navigator.click();
-
-        if (customScroller) {
-            directTimeout(() => {
-                customScroller(move);
-            });
-        } else if (typeof move === 'string') {
-            directTimeout(() => {
-                const element = document.getElementById(move);
-                if (element) element.scrollIntoView({block: "start", behavior: "smooth"});
-            });
-        } else if (move) directTimeout(() => {
-            window.scrollTo(0, 0)
-        });
-    } else debug('Navigator not found');
-};
-
-export const elementIsInView = (element: HTMLElement): boolean => {
-    const box = element.getBoundingClientRect();
-    return box.top >= 0 && box.left >= 0 && box.bottom <= getScreenHeight() && box.right <= getScreenWidth();
-};
-
-export const directTimeout = (handler: Function) => {
-    window.setTimeout(handler, 0);
-};
-
-export const getElementTop = (element: string | HTMLElement | null): number => {
-    if (typeof element === 'string') element = document.getElementById(element);
-    if (element) {
-        const box = element.getBoundingClientRect(),
-            scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        return box.top + scrollTop;
-    }
-    return 0;
-};

package/src/js/util/constants.ts

@@ -1,12 +0,0 @@
-/*
- * 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

@@ -1,46 +0,0 @@
-/*
- * 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

@@ -1,107 +0,0 @@
-/*
- * 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

@@ -1,17 +0,0 @@
-/*
- * 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

@@ -1,65 +0,0 @@
-/*
- * 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

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