@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/textField/dvrdPasswordInput.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/dvrdPassword.scss';
+
+import React, {PureComponent} from 'react';
+import {AwesomeIcon, ElementPosition} from '@dvrd/dvr-controls';
+import DvrdInputController, {InputControllerProps} from "./dvrdInputController";
+
+
+interface State {
+    type: 'password' | 'text';
+}
+
+export default class DvrdPasswordInput extends PureComponent<InputControllerProps, State> {
+    state: State = {
+        type: 'password',
+    };
+
+    onClickOrnament = () => {
+        const {type} = this.state;
+        if (type === 'password') this.setState({type: 'text'});
+        else this.setState({type: 'password'});
+    };
+
+    renderOrnament = () => {
+        const {type} = this.state, element = type === 'password' ? 'eye' : 'eye-slash';
+        return {
+            placement: ElementPosition.RIGHT,
+            element: <AwesomeIcon name={element} onClick={this.onClickOrnament} className='dvrd-password-toggle'/>
+        };
+    };
+
+    render = () => {
+        const {type} = this.state, {inputProps} = this.props;
+        return (
+            <DvrdInputController {...this.props} inputProps={{...inputProps, type}} ornaments={this.renderOrnament()}/>
+        );
+    }
+}

package/src/js/textField/style/dvrdInput.scss

@@ -0,0 +1,114 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.dvrd-input-container {
+  transition: margin-bottom .1s ease-in-out;
+  position: relative;
+
+  .dvrd-input-label {
+    color: $color-blue-text;
+    font-size: .9rem;
+    margin-bottom: .25rem;
+    display: block;
+    transition: color .1s ease-in-out;
+  }
+
+  .content-container {
+    border: 1px solid #D9D9D9;
+    border-radius: 4px;
+    transition: border-color .1s ease-in-out;
+    display: grid;
+    align-items: center;
+    width: 100%;
+
+    .dvrd-input {
+      width: 100%;
+      outline: none;
+      border: none;
+      padding: .75rem;
+      color: $color-blue-text;
+      border-radius: inherit;
+    }
+
+    textarea.no-resize {
+      resize: none;
+    }
+
+    .clear-btn {
+      cursor: pointer;
+      transition: color .2s ease-in-out;
+      color: $color-blue-text;
+
+      &:hover {
+        color: red;
+      }
+    }
+  }
+
+  .dvrd-input-error {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(1rem);
+    left: 0;
+    color: red;
+    font-size: .8rem;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility .1s ease-in-out, opacity .1s ease-in-out;
+  }
+
+  &:hover {
+    .content-container {
+      border-color: var(--base-color);
+    }
+  }
+
+  &.active {
+    .dvrd-input-label {
+      color: var(--base-color);
+    }
+
+    .content-container {
+      border-color: var(--base-color);
+    }
+  }
+
+  &.error {
+    margin-bottom: 1rem;
+
+    .dvrd-input-label {
+      color: red;
+    }
+
+    .content-container {
+      border-color: red;
+
+      .dvrd-input {
+        color: red;
+
+        &::placeholder {
+          color: red;
+          opacity: .7;
+        }
+      }
+    }
+
+    .dvrd-input-error {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &.disabled {
+    .content-container {
+      border-color: #D9D9D9;
+    }
+  }
+
+  &.full {
+    width: 100%;
+  }
+}

package/src/js/textField/style/dvrdPassword.scss

@@ -0,0 +1,15 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.dvrd-password-toggle {
+  cursor: pointer;
+  transition: color .2s ease-in-out;
+  color: $color-gray-3;
+
+  &:hover {
+    color: $color-gray-5;
+  }
+}

package/src/js/topButton/style/topButton.scss

@@ -0,0 +1,54 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.dvr-top-btn {
+  @include backgroundShadow;
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  border-radius: 50%;
+  z-index: $z-index-high;
+  cursor: pointer;
+  transition: background-color .2s ease-in-out, visibility .2s ease-in-out, opacity .2s ease-in-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: .8rem;
+  visibility: visible;
+  opacity: 1;
+
+  .dvr-top-icon {
+    font-size: 1.2rem;
+    cursor: inherit;
+  }
+
+  .hover-label {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -120%);
+    white-space: nowrap;
+    font-size: .8rem;
+    padding: .2rem .4rem;
+    border-radius: 1rem;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
+  }
+
+  &.hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &:hover {
+    .hover-label {
+      transition-delay: .5s;
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}

package/src/js/topButton/topButton.tsx

@@ -0,0 +1,136 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/topButton.scss';
+
+import React, {MouseEventHandler, PureComponent, ReactElement} from 'react';
+import classNames from "classnames";
+import {AwesomeIcon, darkenColor} from "../../../index";
+import {ControlContext} from "../util/controlContext";
+import {convertColor} from "../util/colorUtil";
+import { IconName } from '@fortawesome/fontawesome-svg-core';
+
+export interface TopButtonProps {
+    onClick?: MouseEventHandler;
+    onMouseEnter?: MouseEventHandler;
+    onMouseLeave?: MouseEventHandler;
+    className: string;
+    iconClassName: string;
+    icon: IconName | ReactElement;
+    disabled?: boolean;
+    color?: string;
+    iconColor?: string;
+}
+
+interface State {
+    visible: boolean;
+    isHovered: boolean;
+}
+
+export default class TopButton extends PureComponent<TopButtonProps, State> {
+    declare context: React.ContextType<typeof ControlContext>
+    static contextType = ControlContext;
+    static defaultProps = {
+        disabled: false,
+        className: '',
+        iconClassName: '',
+        icon: 'chevron-up',
+    };
+
+    private isScrolling: boolean = false;
+
+    state: State = {
+        visible: false,
+        isHovered: false,
+    }
+
+    onMouseEnter = (evt: React.MouseEvent) => {
+        const {onMouseEnter} = this.props;
+        if (!this.state.isHovered) this.setState({isHovered: true});
+        if (onMouseEnter) onMouseEnter(evt);
+    };
+
+    onMouseLeave = (evt: React.MouseEvent) => {
+        const {onMouseLeave} = this.props;
+        if (this.state.isHovered) this.setState({isHovered: false});
+        if (onMouseLeave) onMouseLeave(evt);
+    };
+
+    onClick = (evt: React.MouseEvent) => {
+        const {onClick, disabled} = this.props;
+        if (!disabled) {
+            if (onClick) onClick(evt);
+            else
+                window.scrollTo({top: 0, behavior: "smooth"});
+        }
+    };
+
+    getBaseColor = (): string => convertColor(this.context.baseColor);
+    getContrastColor = (): string => convertColor(this.context.contrastColor);
+
+    getBackgroundColor = (): string => {
+        const {color} = this.props, {isHovered} = this.state, baseColor = this.getBaseColor();
+        let bgColor: string = convertColor(color === undefined ? baseColor : color);
+        if (isHovered) bgColor = darkenColor(bgColor, 20);
+        return bgColor;
+    };
+
+    getIconColor = (): string => {
+        const {iconColor} = this.props, contrastColor = this.getContrastColor();
+        return convertColor(iconColor === undefined ? contrastColor : iconColor);
+    }
+
+    scrollListener = () => {
+        const {visible} = this.state, {disabled} = this.props;
+        if (!this.isScrolling) {
+            this.isScrolling = true;
+            window.requestAnimationFrame(() => {
+                const scrollPosition: number = window.scrollY;
+                if (scrollPosition > 0) {
+                    if (!visible)
+                        this.setState({visible: !disabled});
+                } else if (visible)
+                    this.setState({visible: false});
+                this.isScrolling = false;
+            });
+        }
+    };
+
+    testInitialScrollPos = () => {
+        const {disabled} = this.props, scrollPos = window.scrollY;
+        this.setState({visible: !disabled && scrollPos > 0});
+    }
+
+    renderIcon = () => {
+        const {icon, iconClassName} = this.props;
+        let elem: ReactElement;
+        if (typeof icon === 'string')
+            elem = <AwesomeIcon name={icon} className={classNames('dvr-top-icon', iconClassName)}
+                                style={{color: this.getIconColor()}}/>;
+        else elem = icon;
+        return elem;
+    };
+
+    componentDidMount = () => {
+        window.addEventListener('scroll', this.scrollListener, {passive: true});
+        this.testInitialScrollPos();
+    };
+
+    componentWillUnmount = () => {
+        window.removeEventListener('scroll', this.scrollListener);
+    };
+
+    render = () => {
+        const {visible} = this.state, {disabled, className} = this.props;
+        return (
+            <div className={classNames('dvr-top-btn', className, (!visible || disabled) && 'hidden')}
+                 onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
+                 style={{backgroundColor: this.getBackgroundColor()}}>
+                {this.renderIcon()}
+                <label className='hover-label'
+                       style={{backgroundColor: this.getBackgroundColor(), color: this.getIconColor()}}>
+                    Naar boven</label>
+            </div>
+        )
+    };
+}

package/src/js/util/analyticsUtil.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import {getMode} from "./miscUtil";
+
+const prodMode = (): boolean => getMode() === 'prod';
+
+export const setGaUserId = (id: string | null) => {
+    if (prodMode() && window.gtag) {
+        if (id)
+            window.gtag('set', {'user_id': id});
+        else window.gtag('set', {'user_id': ''});
+    }
+};
+
+export const sendGaPageView = (path?: string) => {
+    if (prodMode() && window.gtag) {
+        const trackingId = getTrackingID();
+        if (trackingId) {
+            const pathConfig: { page_path?: string; page_location: string; page_title: string } = {
+                page_location: window.location.href,
+                page_title: document.title,
+            };
+            if (path && path.length) {
+                if (!path.startsWith('/')) path = `/${path}`;
+                pathConfig.page_path = path;
+            }
+            window.gtag('event', 'page_view', pathConfig);
+        }
+    }
+};
+
+export const sendGaEvent = (action: string, category?: string, label?: string, value?: string) => {
+    if (prodMode() && getTrackingID() && window.gtag)
+        window.gtag('event', action, {event_category: category, event_label: label, value});
+};
+
+const getTrackingID = (): string | null => {
+    return window.allowCookies && prodMode() ? window.settings.gaID : null;
+};

package/src/js/util/colorUtil.ts

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

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