@dvrd/dvr-controls 1.0.5 → 1.0.8

package/src/js/textField/dvrdInputController.tsx

@@ -1,97 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import React, {
-    FocusEventHandler,
-    InputHTMLAttributes,
-    KeyboardEventHandler,
-    MouseEventHandler,
-    TextareaHTMLAttributes,
-    useEffect,
-    useRef,
-    useState
-} from 'react';
-import {generateComponentId} from '../util/componentUtil';
-import {enterPressed} from '../util/controlUtil';
-import {ErrorType, OrnamentShape} from '../util/interfaces';
-import DvrdInput from "./dvrdInput";
-
-export interface InputControllerProps {
-    onChange: (value: string, evt: React.ChangeEvent) => void;
-    onFocus?: FocusEventHandler;
-    onBlur?: FocusEventHandler;
-    onKeyDown?: KeyboardEventHandler;
-    onEnter?: KeyboardEventHandler;
-    onClearInput?: MouseEventHandler;
-    value: string | number;
-    label?: string;
-    ornaments?: OrnamentShape | OrnamentShape[];
-    inputProps?: InputHTMLAttributes<any> & TextareaHTMLAttributes<any>;
-    disabled?: boolean;
-    autoFocus?: boolean;
-    autoSelect?: boolean;
-    className?: string;
-    inputClassName?: string;
-    labelClassName?: string;
-    ornamentClassName?: string;
-    errorClassName?: string;
-    error?: ErrorType;
-    id?: string;
-    fullWidth?: boolean;
-    placeholder?: string;
-    type?: string;
-    max?: number;
-    min?: number;
-    step?: number;
-    area?: boolean;
-    noResize?: boolean;
-    unControlled?: boolean;
-}
-
-export default function DvrdInputController(props: InputControllerProps) {
-    const {
-            disabled, onChange, onEnter, onKeyDown, inputProps, placeholder, type, max, min, step, onFocus, onBlur,
-            autoFocus, error, label, ornaments, className, inputClassName, labelClassName, ornamentClassName, fullWidth,
-            errorClassName, autoSelect, area, noResize, onClearInput, unControlled
-        } = props,
-        componentId = useRef(generateComponentId(props.id)),
-        [value, setValue] = useState(props.value);
-
-    function _onChange(evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-        if (disabled) return;
-        const {value} = evt.target;
-        setValue(value);
-        onChange(value, evt);
-    }
-
-    function _onKeyDown(evt: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {
-        if (disabled) return;
-        if (onEnter && enterPressed(evt)) onEnter(evt);
-        else if (onKeyDown) onKeyDown(evt);
-    }
-
-    function getInputProps(): InputHTMLAttributes<any> | undefined {
-        if (!inputProps && !placeholder && !type) return undefined;
-        const props: InputHTMLAttributes<any> = inputProps ?? {};
-        if (placeholder !== undefined) props.placeholder = placeholder;
-        if (type !== undefined) props.type = type;
-        if (max !== undefined) props.max = max;
-        if (min !== undefined) props.min = min;
-        if (step !== undefined) props.step = step;
-        return props;
-    }
-
-    useEffect(() => {
-        if(!unControlled) setValue(props.value);
-    }, [props.value])
-
-    return (
-        <DvrdInput onChange={_onChange} onFocus={onFocus} onKeyDown={_onKeyDown} value={value}
-                   disabled={disabled} autoFocus={autoFocus} error={error} label={label} ornaments={ornaments}
-                   inputProps={getInputProps()} className={className} inputClassName={inputClassName}
-                   labelClassName={labelClassName} ornamentClassName={ornamentClassName} fullWidth={fullWidth}
-                   errorClassName={errorClassName} id={componentId.current} onBlur={onBlur} autoSelect={autoSelect}
-                   area={area} noResize={noResize} onClearInput={onClearInput}/>
-    );
-}

package/src/js/textField/dvrdNumberInput.tsx

@@ -1,141 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import React, {FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, PureComponent} from 'react';
-import {ChangeFunction, ErrorType, OrnamentShape} from '../util/interfaces';
-import {roundTo} from '../util/miscUtil';
-import DvrdInputController from "./dvrdInputController";
-
-interface Props {
-    onChange: ChangeFunction<string | number>;
-    onFocus?: FocusEventHandler;
-    onBlur?: FocusEventHandler;
-    onKeyDown?: KeyboardEventHandler;
-    onEnter?: KeyboardEventHandler;
-    value: string | number;
-    label?: string;
-    ornaments?: OrnamentShape | OrnamentShape[];
-    inputProps?: InputHTMLAttributes<any>;
-    disabled?: boolean;
-    autoFocus?: boolean;
-    className?: string;
-    inputClassName?: string;
-    labelClassName?: string;
-    ornamentClassName?: string;
-    errorClassName?: string;
-    error?: ErrorType;
-    id?: string;
-    placeholder?: string;
-    multipleSeparators: boolean;
-    wholeNumbers: boolean;
-    asNumber?: boolean;
-    asCurrency: boolean;
-    autoSelect?: boolean;
-}
-// TODO Add option to disable symbols (+,-)
-
-export default class DvrdNumberInput extends PureComponent<Props> {
-    static defaultProps = {
-        asCurrency: false,
-        wholeNumbers: false,
-        multipleSeparators: false,
-    }
-
-    onKeyDown = (evt: React.KeyboardEvent) => {
-        const {onKeyDown, asCurrency, wholeNumbers, inputProps, asNumber, value, multipleSeparators} = this.props, {
-            key,
-            target
-        } = evt;
-        let numValue = Number(value);
-        // Allow only number and simple edit keys
-        if (!/\d|Backspace|ArrowRight|ArrowLeft|ArrowUp|ArrowDown|Escape|Esc|Enter|[,.\-+]|Tab/.test(key) &&
-            !this.isPasting(evt))
-            evt.preventDefault();
-
-        if (key === 'ArrowUp') {
-            evt.preventDefault();
-            if (!isNaN(numValue)) {
-                const step = Number(inputProps?.step || asCurrency ? .01 : 1);
-                numValue += step;
-                let stringValue = numValue.toString();
-                if (asCurrency) stringValue = roundTo(numValue, 2);
-                if (asNumber) this.change(Number(stringValue), evt);
-                else this.change(stringValue, evt);
-            }
-            return;
-        }
-        if (key === 'ArrowDown') {
-            evt.preventDefault();
-            if (!isNaN(numValue)) {
-                const step = Number(inputProps?.step || asCurrency ? .01 : 1);
-                numValue -= step;
-                let stringValue = numValue.toString();
-                if (asCurrency) stringValue = roundTo(numValue, 2);
-                if (asNumber) this.change(Number(stringValue), evt);
-                else this.change(stringValue, evt);
-            }
-            return;
-        }
-
-        const textIsSelected = this.textIsSelected(evt), position = (target as HTMLInputElement).selectionStart;
-        if (!textIsSelected) {
-            if (/[,.]/.test(key) && /[,.]/.test(value.toString()) && !multipleSeparators)
-                // Prevent double points or commas
-                evt.preventDefault();
-
-            if (wholeNumbers && /[.,]/.test(key))
-                evt.preventDefault();
-            else if (asCurrency && /[.,]\d{2}/.test(value.toString()) && /\d/.test(key) &&
-                this.positionIsAfterComma(position, value.toString()))
-                // Prevent more than 2 decimals when working with currencies
-                evt.preventDefault();
-
-            if ((position && position !== 0) && /[\-+]/.test(key))
-                // Prevent - or + sign after first position
-                evt.preventDefault();
-        }
-
-        if (onKeyDown !== undefined && onKeyDown !== null)
-            onKeyDown(evt);
-    };
-
-    onChange = (value: string, evt: React.ChangeEvent) => {
-        const {asNumber} = this.props;
-        if (!/^-?[\d.,]*$/.test(value)) evt.preventDefault();
-        else {
-            let changeValue: string | number = value;
-            if (value.startsWith('.') || value.startsWith(',')) value = 0 + value;
-            if (asNumber) changeValue = Number(value.replace(',', '.'));
-            this.change(changeValue, evt);
-        }
-    };
-
-    change = (value: string | number, evt: React.ChangeEvent | React.KeyboardEvent) => {
-        this.setState({value}, () => {
-            this.props.onChange(value, evt as React.ChangeEvent);
-        })
-    };
-
-    isPasting = (evt: React.KeyboardEvent) => {
-        return (evt.metaKey || evt.ctrlKey) && evt.key === 'v';
-    };
-
-    positionIsAfterComma = (position: number | null, value: string) => {
-        if (position === null) return true;
-        if (value.includes('.')) return position > value.indexOf('.');
-        if (value.includes(',')) return position > value.indexOf(',');
-        return false;
-    };
-
-    textIsSelected = (evt: React.KeyboardEvent) => {
-        const target = evt.target as HTMLInputElement, start = target.selectionStart, end = target.selectionEnd;
-        return start != end;
-    };
-
-    render = () => {
-        return (
-            <DvrdInputController {...this.props} onChange={this.onChange} onKeyDown={this.onKeyDown}/>
-        );
-    }
-}

package/src/js/textField/dvrdPasswordInput.tsx

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

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

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

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

@@ -1,135 +0,0 @@
-/*
- * 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";
-
-export interface TopButtonProps {
-    onClick?: MouseEventHandler;
-    onMouseEnter?: MouseEventHandler;
-    onMouseLeave?: MouseEventHandler;
-    className: string;
-    iconClassName: string;
-    icon: string | 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

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