@dvrd/dvr-controls 1.0.4 → 1.0.7

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

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

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

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

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

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

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

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

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