@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/input/date/timePicker/timePicker.tsx

@@ -0,0 +1,143 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/timePicker.scss';
+
+import React from 'react';
+import {PureComponent} from 'react';
+import classNames from "classnames";
+import {DateType} from "../dateFieldController";
+import {pad, remToPx} from "../../../util/controlUtil";
+import {DateNumParts} from "../dateField";
+import {colorIsWhite, convertColor} from "../../../util/colorUtil";
+import {ControlContext} from "../../../util/controlContext";
+
+interface Props {
+    pickerValue: DateNumParts;
+    dateType: DateType;
+    onChange: (hour: number, minute: number) => void;
+}
+
+const SCROLL_TIMEOUT = 120;
+
+export default class TimePicker extends PureComponent<Props> {
+    declare context: React.ContextType<typeof ControlContext>;
+    static contextType = ControlContext;
+
+    private hourTimeout: number | null = null;
+    private minuteTimeout: number | null = null;
+
+    onScroll = (type: 'hour' | 'minute') => () => {
+        const handle: number | null = type === 'hour' ? this.hourTimeout : this.minuteTimeout;
+        this.clearTimeout(handle);
+        if (type === 'hour') this.hourTimeout = window.setTimeout(this.determineTime, SCROLL_TIMEOUT);
+        else this.minuteTimeout = window.setTimeout(this.determineTime, SCROLL_TIMEOUT);
+    };
+
+    getBaseColor = (allowWhite: boolean = true): string => {
+        let color = convertColor(this.context.baseColor);
+        if (!allowWhite && colorIsWhite(color)) color = convertColor(this.context.contrastColor);
+        return color;
+    };
+
+    getContrastColor = (allowWhiteBase: boolean = true): string => {
+        if (!allowWhiteBase) {
+            const base = this.getBaseColor(true);
+            if (colorIsWhite(base)) return base;
+        }
+        return convertColor(this.context.contrastColor);
+    };
+
+    clearTimeout = (handle: number | null) => {
+        if (handle) window.clearTimeout(handle);
+    };
+
+    determineTime = () => {
+        this.clearTimeout(this.minuteTimeout);
+        this.clearTimeout(this.hourTimeout);
+
+        const {pickerValue, onChange} = this.props, hourContainer = document.getElementById('hour-container'),
+            minuteContainer = document.getElementById('minute-container');
+
+        let hour = pickerValue.hour, minute = pickerValue.minute;
+        if (hourContainer)
+            hour = Math.floor(hourContainer.scrollTop / remToPx(2));
+
+        if (minuteContainer)
+            minute = Math.floor(minuteContainer.scrollTop / remToPx(2));
+
+        onChange(hour, minute);
+    };
+
+    renderHourSelect = () => {
+        const hours: number[] = [];
+        for (let i = 0; i < 24; i++)
+            hours.push(i);
+        return (
+            <div className='time-select-background-container'>
+                <div className='selected-background'/>
+                <div id='hour-container' className='time-select-container' onScroll={this.onScroll('hour')}>
+                    <div className='time-unit-container invis'>
+                        <label className='time-unit-label'>0</label>
+                    </div>
+                    {hours.map((hour: number, index: number) => (
+                        <div id={`hour-${pad(hour)}`} key={index} className='time-unit-container'>
+                            <label className='time-unit-label'>{pad(hour)}</label>
+                        </div>
+                    ))}
+                    <div className='time-unit-container invis'>
+                        <label className='time-unit-label'>0</label>
+                    </div>
+                </div>
+            </div>
+        )
+    };
+
+    renderMinuteSelect = () => {
+        const minutes: number[] = [];
+        for (let i = 0; i < 60; i++)
+            minutes.push(i);
+        return (
+            <div className='time-select-background-container'>
+                <div className='selected-background'/>
+                <div id='minute-container' className='time-select-container' onScroll={this.onScroll('minute')}>
+                    <div className='time-unit-container invis'>
+                        <label className='time-unit-label'>0</label>
+                    </div>
+                    {minutes.map((minute: number, index: number) => (
+                        <div id={`minute-${pad(minute)}`} key={index} className='time-unit-container'>
+                            <label className='time-unit-label'>{pad(minute)}</label>
+                        </div>
+                    ))}
+                    <div className='time-unit-container invis'>
+                        <label className='time-unit-label'>0</label>
+                    </div>
+                </div>
+            </div>
+        )
+    };
+
+    render = () => {
+        const {dateType, pickerValue} = this.props;
+        return (
+            <div className='timepicker-container'>
+                <div className='header-container' style={{backgroundColor: this.getBaseColor()}}>
+                    <label className='header-title' style={{color: this.getContrastColor()}}>Kies tijd</label>
+                </div>
+                <label className={classNames('date-label', dateType != DateType.DATETIME && 'invis')}>{`${pad(
+                    pickerValue.day)}-${pad(
+                    pickerValue.month + 1)}-${pickerValue.year}`}</label>
+                <div className='time-body-container'>
+                    <div className='time-column'>
+                        <label className='time-col-title'>Uur</label>
+                        {this.renderHourSelect()}
+                    </div>
+                    <div className='time-column'>
+                        <label className='time-col-title'>Minuut</label>
+                        {this.renderMinuteSelect()}
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

package/src/js/input/editor/DVREditor.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React, { FocusEventHandler, MouseEventHandler, PureComponent, CSSProperties } from 'react';
+import {ChangeFunction} from "../../util/interfaces";
+
+interface Props {
+    onChange: ChangeFunction<string>;
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
+    onClickButton: MouseEventHandler;
+    value: string;
+    id: string;
+    style?: CSSProperties;
+    className?: string;
+}
+
+export default class DVREditor extends PureComponent<Props> {
+
+}

package/src/js/input/number/numberInput.tsx

@@ -0,0 +1,157 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React, {InputHTMLAttributes} from 'react';
+import {KeyboardEventHandler} from 'react';
+import {ControlVariant, OrnamentShape} from "../../util/interfaces";
+import TextField, {DefaultInputProps} from '../v2/inputController_v2'
+import {roundTo} from "../../util/miscUtil";
+import {generateComponentId} from '../../../..';
+
+interface InputProps {
+    onChange: any;
+    onFocus?: any;
+    onBlur?: any;
+    onClick?: any;
+    onKeyDown?: any;
+    onMouseEnter?: any;
+    onMouseLeave?: any;
+    onEnter?: KeyboardEventHandler;
+    value: string;
+    error?: string | null;
+    label?: string;
+    containerClass?: string;
+    inputContainerClass?: string;
+    inputClass?: string;
+    labelClass?: string;
+    errorClass?: string;
+    id?: string;
+    baseColor?: string;
+    variant?: ControlVariant;
+    disabled?: boolean;
+    readOnly?: boolean;
+    fullWidth?: boolean;
+    autoFocus?: boolean;
+    inputProps?: InputHTMLAttributes<any>;
+    autoSelect?: boolean;
+    ornaments?: OrnamentShape | OrnamentShape[];
+    asCurrency: boolean;
+    clearAble?: boolean;
+    wholeNumbers: boolean;
+    asNumber?: boolean;
+    defaultValue?: string | number;
+    unControlled?: boolean;
+}
+
+interface State {
+    value: string | number;
+}
+
+export default class NumberInput extends React.Component<InputProps, State> {
+    static defaultProps = Object.assign(DefaultInputProps, {
+        asCurrency: false,
+        wholeNumbers: false,
+    });
+
+    state: State = {
+        value: this.props.value,
+    };
+
+    private readonly id: string = generateComponentId(this.props.id);
+
+    onKeyDown = (evt: React.KeyboardEvent) => {
+        const {onKeyDown, asCurrency, wholeNumbers, inputProps, asNumber} = this.props, {key, target} = evt,
+            value = this.state.value.toString();
+        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) && asCurrency)
+                // Prevent double points or commas
+                evt.preventDefault();
+
+            if (wholeNumbers && /[.,]/.test(key))
+                evt.preventDefault();
+            else if (asCurrency && /[.,]\d{2}/.test(value) && /\d/.test(key) &&
+                this.positionIsAfterComma(position, value))
+                // 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 convertValue: number | string = value;
+            if (convertValue.startsWith('.') || convertValue.startsWith(',')) convertValue = 0 + convertValue;
+            if (asNumber) convertValue = Number(convertValue.replace(',', '.'));
+            this.change(convertValue, evt);
+        }
+    };
+
+    change = (value: string | number, evt: React.ChangeEvent | React.KeyboardEvent) => {
+        this.setState({value}, () => {
+            this.props.onChange(value, evt);
+        })
+    };
+
+    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 = () => {
+        const {unControlled, value} = this.props;
+        return <TextField {...this.props} value={unControlled ? this.state.value : value} onKeyDown={this.onKeyDown}
+                          onChange={this.onChange} id={this.id} unControlled={false}/>
+    }
+}

package/src/js/input/password/passwordInput.tsx

@@ -0,0 +1,140 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/passwordInput.scss';
+
+import React, {KeyboardEventHandler, PureComponent} from 'react';
+
+import {ControlVariant, ElementPosition, OrnamentShape, StrengthGauche} from "../../util/interfaces";
+import TextField from '../v2/inputController_v2';
+import AwesomeIcon from '../../icon/awesomeIcon';
+import {directTimeout, generateComponentId} from "../../util/componentUtil";
+import classNames from 'classnames';
+
+interface Props {
+    onChange: any;
+    onFocus?: any;
+    onBlur?: any;
+    onClick?: any;
+    onKeyDown?: any;
+    onMouseEnter?: any;
+    onMouseLeave?: any;
+    onEnter?: KeyboardEventHandler;
+    value: string;
+    error?: string | null;
+    label?: string;
+    containerClass?: string;
+    inputContainerClass?: string;
+    inputClass?: string;
+    labelClass?: string;
+    errorClass?: string;
+    id?: string;
+    key?: string;
+    baseColor?: string;
+    variant?: ControlVariant;
+    disabled?: boolean;
+    readOnly?: boolean;
+    fullWidth?: boolean;
+    autoFocus?: boolean;
+    inputProps?: object;
+    autoSelect?: boolean;
+    strengthGauche?: StrengthGauche[];
+    strengthColors: string[];
+    strengthLabels: string[];
+    placeholder?: string;
+}
+
+interface State {
+    type: 'password' | 'text';
+    passwordStrength: number;
+}
+
+export default class PasswordInput extends PureComponent<Props, State> {
+    private id = generateComponentId(this.props.id);
+    private meter: HTMLDivElement;
+    static defaultProps = {
+        strengthColors: ['red', 'gold', '#29A71A'],
+        strengthLabels: ['Zwak', 'Matig', 'Sterk'],
+        area: false,
+        clearAble: true,
+        disabled: false,
+        autoFocus: false,
+        autoSelect: false,
+        error: null,
+        errorClassName: '',
+        fullWidth: true,
+        className: '',
+        inputContainerClassName: '',
+        labelClassName: '',
+        readOnly: false,
+        type: 'text',
+        variant: ControlVariant.SIMPLE,
+    };
+
+    state: State = {
+        type: 'password' as 'password',
+        passwordStrength: 0,
+    };
+
+    onClickOrnament = () => {
+        const {type} = this.state;
+        if (type === 'password') this.setState({type: 'text'});
+        else this.setState({type: 'password'});
+    };
+
+    getOrnament = (): OrnamentShape => {
+        const {type} = this.state, element = type === 'password' ? 'eye' : 'eye-slash';
+        return {
+            placement: ElementPosition.RIGHT,
+            element: <AwesomeIcon name={element} onClick={this.onClickOrnament} className='passwordOrnament'/>
+        };
+    };
+
+    getGaucheWidth = (): { width: string, label: string } => {
+        const {strengthGauche, value, strengthLabels} = this.props;
+        if (!strengthGauche?.length) return {width: '0%', label: strengthLabels[0]};
+        const total = strengthGauche.length;
+        let passed: number = 0;
+        for (let i = 0; i < strengthGauche.length; i++)
+            if (strengthGauche[i].validator(value)) passed++;
+        const percentage = Math.min(parseInt((passed / total * 100) + ''), 100),
+            width = Math.max(percentage, Math.round(100 / total)) + '%';
+
+        return {width, label: strengthLabels[Math.max(0, Math.min(strengthLabels.length - 1, passed - 1))]};
+    };
+
+    setGaucheWidth = () => {
+        const input = document.getElementById(this.id);
+        if (input && this.meter) this.meter.style.width = input.getBoundingClientRect().width + 'px';
+    }
+
+    renderStrengthGauche = () => {
+        const {strengthGauche, strengthColors, value} = this.props;
+        const hidden = !strengthGauche?.length || !value.length;
+        const gaucheVars: { width: string, label: string } = this.getGaucheWidth();
+        return (
+            <div className={classNames('strength-gauche', hidden && 'hidden')} style={{width: gaucheVars.width}}>
+                <div className='meter' ref={(ref: HTMLDivElement) => {this.meter = ref}}
+                     style={{backgroundImage: `linear-gradient(to right, ${strengthColors.join(', ')})`}}/>
+                <label className='gauche-label'>{gaucheVars.label}</label>
+            </div>
+        );
+    }
+
+    componentDidMount = () => {
+        directTimeout(this.setGaucheWidth)
+    };
+
+    render = () => {
+        const {type} = this.state, {inputProps} = this.props;
+        return (
+            <div className='dvr-password-field-container'>
+                <TextField {...this.props} inputProps={{...inputProps, type}} id={this.id} unControlled>
+                    {this.getOrnament()}
+                </TextField>
+                {this.renderStrengthGauche()}
+            </div>
+        );
+    };
+}

package/src/js/input/password/passwordRules.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/passwordRules.scss';
+
+import React from 'react';
+import classNames from 'classnames';
+import {PasswordRule} from "../../util/interfaces";
+
+interface Props {
+    password: string;
+    visible: boolean;
+    rules: PasswordRule[];
+    containerClass?: string;
+    ruleClass?: string;
+}
+
+const DEFAULT_RULES: PasswordRule[] = [
+    {label: 'Minimaal 8 tekens', validator: (password: string) => password.length >= 8},
+    {label: 'Maximaal 24 tekens', validator: (password: string) => password.length <= 24},
+    {label: 'Minimaal 1 getal', validator: (password: string) => /\d/.test(password)},
+    {label: 'Minimaal 1 symbool', validator: (password: string) => /[!?@#$%^&*(),./\[\]{}]/.test(password)},
+    {label: 'Minimaal 1 hoofdletter', validator: (password: string) => /[A-Z]/.test(password)},
+];
+
+export default class PasswordRules extends React.Component<Props> {
+    static defaultProps = {
+        containerClass: '',
+        ruleClass: '',
+        rules: DEFAULT_RULES,
+    };
+
+    renderRule = (rule: PasswordRule, index: number) => {
+        const {password, ruleClass} = this.props, rulePassed = rule.validator(password);
+        return <label key={index} className={classNames('rule-label', rulePassed && 'passed',
+            !rulePassed && 'failed', ruleClass)}>- {rule.label}</label>;
+    };
+
+    render = () => {
+        const {containerClass, visible, password, rules} = this.props, hidden = !visible || !password.length;
+        return (
+            <div className={classNames('password-rules-container', hidden && 'hidden', containerClass)}>
+                {rules.map(this.renderRule)}
+            </div>
+        )
+    };
+}

package/src/js/input/password/style/passwordInput.scss

@@ -0,0 +1,39 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../style/variables';
+
+.dvr-password-field-container {
+  position: relative;
+
+  .strength-gauche {
+    overflow: hidden;
+    margin-top: .5rem;
+    transition: width .2s ease-in-out;
+
+    .meter {
+      height: 3px;
+      width: 100%;
+    }
+
+    .gauche-label {
+      font-size: .8rem;
+      margin-top: .2rem;
+      display: inline-block;
+    }
+
+    &.hidden {
+      display: none;
+    }
+  }
+
+  .passwordOrnament {
+    color: $color-gray-3;
+    transition: color .2s ease;
+
+    &:hover {
+      color: $color-gray-5;
+    }
+  }
+}

package/src/js/input/password/style/passwordRules.scss

@@ -0,0 +1,41 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../style/variables';
+
+.password-rules-container {
+  @include borderRadius(.2rem);
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: white;
+  padding: .3rem;
+  border: 1px solid $color-gray-5;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  visibility: visible;
+  opacity: 1;
+  transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
+  transition-delay: .5s;
+
+  &.hidden {
+    visibility: hidden;
+    opacity: 0;
+    //transition-delay: 0s;
+    transition: none;
+  }
+
+  .rule-label {
+    transition: color .2s ease;
+
+    &.passed {
+      color: $color-green-whatsapp;
+    }
+
+    &.failed {
+      color: red;
+    }
+  }
+}

package/src/js/input/simple/style/simpleInput.scss

@@ -0,0 +1,98 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../style/variables';
+
+.dvr-simple-input-container {
+  display: inline-flex;
+  position: relative;
+  border: 2px solid;
+  border-radius: .25rem;
+  transition: border-color .2s ease-in-out, margin-bottom .2s ease-in-out;
+  padding: .25rem;
+  align-items: center;
+  margin-top: .5rem;
+  background-color: white;
+
+  &, * {
+    box-sizing: border-box;
+  }
+
+  .dvr-simple-input-label {
+    position: absolute;
+    font-size: .8rem;
+    top: 0;
+    left: .25rem;
+    transform: translateY(-60%);
+    transition: color .2s ease-in-out;
+    background-color: white;
+    user-select: none;
+    padding: 0 .2rem;
+  }
+
+  .dvr-simple-input {
+    outline: none !important;
+    border: none !important;
+    padding: .25rem;
+    width: 100%;
+
+    &::placeholder {
+      font-size: .9rem;
+    }
+  }
+
+  .dvr-simple-input-ornament {
+    color: $color-gray-header;
+
+    .dvr-simple-input-clear {
+      cursor: pointer;
+      visibility: visible;
+      opacity: 1;
+      transition: color .2s ease-in-out, visibility .1s ease-in-out, opacity .1s ease-in-out;
+
+      &:hover {
+        color: red;
+      }
+
+      &.invis {
+        visibility: hidden;
+        opacity: 0;
+      }
+    }
+
+    &.clickable {
+      cursor: pointer;
+    }
+  }
+
+  .dvr-simple-input-error {
+    position: absolute;
+    bottom: -1.2rem;
+    left: .25rem;
+    color: red;
+    font-size: .8rem;
+    visibility: hidden;
+    white-space: nowrap;
+  }
+
+  &.full-width {
+    width: 100%;
+  }
+
+  &.error {
+    margin-bottom: 1rem;
+
+    .dvr-simple-input-error {
+      visibility: visible;
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    * {
+      pointer-events: none;
+    }
+  }
+}