@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/switch/switch.tsx

@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/switch.scss';
+
+import React from 'react';
+import classNames from 'classnames';
+import {isNotNull} from "../util/controlUtil";
+import {convertColor, editColor} from "../util/colorUtil";
+
+interface SwitchProps {
+    onChange: any,
+    onMouseEnter: any,
+    onMouseLeave: any,
+    value: boolean,
+    labels: string[],
+    baseColor: string,
+    trackColor: string,
+    offColor: string,
+    id: string,
+    containerClass: string,
+    labelClass: string,
+    switchClass: string,
+    trackClass: string,
+    mainLabelClass: string;
+    padding: 'small' | 'standard' | 'large',
+    disabled: boolean,
+    isHovered: boolean,
+    label: string;
+}
+
+export class Switch extends React.Component<SwitchProps> {
+    getContainerClass = (): string => {
+        const {containerClass, disabled, padding} = this.props, classes = ['switchContainer'];
+        if (disabled) classes.push('disabled');
+
+        if (padding === 'small') classes.push('sp');
+        else if (padding === 'large') classes.push('lp');
+
+        classes.push(containerClass);
+        return classNames(classes);
+    };
+
+    getLabelClass = (position: 'left' | 'right'): string => {
+        const {labelClass} = this.props;
+        return classNames('label', position, labelClass);
+    };
+
+    getSwitchClass = (): string => {
+        const {switchClass, value} = this.props;
+        return classNames('switch', value && 'on', switchClass);
+    };
+
+    getTrackClass = (): string => {
+        const {trackClass} = this.props;
+        return classNames('track', trackClass);
+    };
+
+    getSwitchStyle = (): object => {
+        const {baseColor, isHovered, value, offColor} = this.props;
+        let color;
+        if (!value && isNotNull(offColor)) color = convertColor(offColor);
+        else {
+            color = convertColor(baseColor);
+            if (isHovered) color = editColor(-.2, color);
+        }
+        return {backgroundColor: color};
+    };
+
+    getTrackStyle = (): object => {
+        const {trackColor} = this.props;
+        return {backgroundColor: convertColor(trackColor)};
+    };
+
+    getLabel = (position: 'left' | 'right'): string | null => {
+        const {labels} = this.props, positions: { [index: string]: number } = {left: 0, right: 1};
+        if (!labels.length || labels.length <= positions[position]) return null;
+        return labels[positions[position]];
+    };
+
+    renderMainLabel = () => {
+        const {label, mainLabelClass} = this.props;
+        if (!label.length) return null;
+        return <label className={classNames('main-label', mainLabelClass)}>{label}:&nbsp;</label>
+    };
+
+    renderLabel = (position: 'left' | 'right'): React.ReactNode => {
+        const label = this.getLabel(position);
+        if (label === null) return null;
+        return <label className={this.getLabelClass(position)}>{label}</label>;
+    };
+
+    renderSwitch = (): React.ReactNode => {
+        const {onChange, onMouseEnter, onMouseLeave} = this.props;
+        return (
+            <div className='switch-track-container' onClick={onChange} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+                <div className={this.getTrackClass()} style={this.getTrackStyle()}/>
+                <div className={this.getSwitchClass()} style={this.getSwitchStyle()}/>
+            </div>
+        )
+    };
+
+    render = () => {
+        const {id} = this.props;
+        return (
+            <div className={this.getContainerClass()} id={id}>
+                {this.renderMainLabel()}
+                {this.renderLabel('left')}
+                {this.renderSwitch()}
+                {this.renderLabel('right')}
+            </div>
+        )
+    }
+}

package/src/js/switch/switchController.tsx

@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React from 'react';
+import {Switch} from "./switch";
+import {ControlContext} from "../util/controlContext";
+import {generateComponentId} from '../../..';
+
+interface SwitchProps {
+    onChange: Function,
+    onMouseEnter?: Function,
+    onMouseLeave?: Function,
+    value: boolean,
+    labels: string[],
+    mainLabel: string;
+    baseColor?: string,
+    trackColor: string,
+    offColor: string,
+    containerClass: string,
+    labelClass: string,
+    switchClass: string,
+    trackClass: string,
+    mainLabelClass: string;
+    id?: string,
+    padding: 'small' | 'standard' | 'large',
+    disabled: boolean,
+}
+
+interface SwitchState {
+    isHovered: boolean,
+}
+
+// noinspection JSUnusedGlobalSymbols
+export default class SwitchController extends React.Component<SwitchProps, SwitchState> {
+    declare context: React.ContextType<typeof ControlContext>
+    static contextType = ControlContext;
+
+    static defaultProps = {
+        labels: [],
+        trackColor: 'color-gray-4',
+        offColor: '',
+        containerClass: '',
+        labelClass: '',
+        switchClass: '',
+        trackClass: '',
+        mainLabelClass: '',
+        padding: 'standard',
+        disabled: false,
+        mainLabel: '',
+    };
+
+    state = {
+        isHovered: false,
+    };
+
+    private id: string = generateComponentId(this.props.id);
+
+    onChange = (evt: any) => {
+        const {value, onChange, disabled} = this.props;
+        if (!disabled)
+            onChange(!value, evt);
+    };
+
+    onMouseEnter = (evt: any) => {
+        const {onMouseEnter} = this.props;
+        this.setState({isHovered: true});
+        if (onMouseEnter !== undefined && onMouseEnter !== null)
+            onMouseEnter(evt);
+    };
+
+    onMouseLeave = (evt: any) => {
+        const {onMouseLeave} = this.props;
+        this.setState({isHovered: false});
+        if (onMouseLeave !== undefined && onMouseLeave !== null)
+            onMouseLeave(evt);
+    };
+
+    getBaseColor = (): string => {
+        const {baseColor} = this.props;
+        if (baseColor !== undefined && baseColor !== null) return baseColor;
+        // noinspection JSDeprecatedSymbols
+        return this.context.baseColor;
+    };
+
+    render = () => {
+        const {
+            value, labels, trackColor, offColor, containerClass, labelClass, trackClass, switchClass,
+            padding, disabled, mainLabel, mainLabelClass
+        } = this.props, {isHovered} = this.state;
+        return <Switch onChange={this.onChange} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
+                       value={value} labels={labels} baseColor={this.getBaseColor()} trackColor={trackColor}
+                       offColor={offColor} id={this.id} containerClass={containerClass} labelClass={labelClass}
+                       switchClass={switchClass} trackClass={trackClass} padding={padding} disabled={disabled}
+                       isHovered={isHovered} label={mainLabel} mainLabelClass={mainLabelClass}/>
+    }
+}

package/src/js/textField/dvrdInput.tsx

@@ -0,0 +1,219 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/dvrdInput.scss';
+
+import React, {
+    ChangeEventHandler, CSSProperties, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler,
+    PureComponent
+} from 'react';
+import classNames from "classnames";
+import {ElementPosition, ErrorType, OrnamentShape} from '../util/interfaces';
+import AwesomeIcon from '../icon/awesomeIcon';
+import {directTimeout} from '../util/componentUtil';
+import {ControlContext} from "../util/controlContext";
+
+interface Props {
+    onChange: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
+    onKeyDown: KeyboardEventHandler;
+    onClearInput?: MouseEventHandler;
+    value: string | number;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    autoSelect?: boolean;
+    label?: string;
+    ornaments?: OrnamentShape | OrnamentShape[];
+    inputProps?: InputHTMLAttributes<any>;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    ornamentClassName?: string;
+    errorClassName?: string;
+    error?: ErrorType;
+    id: string;
+    fullWidth?: boolean;
+    area?: boolean;
+    noResize?: boolean;
+}
+
+interface State {
+    active: boolean;
+}
+
+export default class DvrdInput extends PureComponent<Props, State> {
+    static contextType = ControlContext;
+    private input: HTMLInputElement | HTMLTextAreaElement;
+
+    state: State = {
+        active: this.props.autoFocus === true,
+    };
+
+    onClickElement = (evt: React.MouseEvent) => {
+        evt.stopPropagation();
+        this.focusInput();
+    };
+
+    onFocusInput = (evt: React.FocusEvent) => {
+        const {disabled, onFocus, autoSelect, value} = this.props;
+        if (!disabled) {
+            this.setState({active: true});
+            if (autoSelect) {
+                this.input.selectionStart = 0;
+                this.input.selectionEnd = value.toString().length;
+            }
+        }
+        if (onFocus)
+            onFocus(evt);
+    };
+
+    onBlurInput = (evt: React.FocusEvent) => {
+        const {disabled, onBlur} = this.props;
+        if (!disabled) this.setState({active: false});
+        if (onBlur)
+            onBlur(evt);
+    };
+
+    hasError = (): boolean => this.props.error !== undefined && this.props.error !== null;
+
+    getContentStyle = (): CSSProperties => {
+        const style: CSSProperties = {gridTemplateColumns: '1fr'}, {ornaments, onClearInput} = this.props;
+        if (!ornaments || (Array.isArray(ornaments) && !ornaments.length)) style.gridTemplateColumns = '1fr';
+        let hasLeft: boolean = false, hasRight: boolean = onClearInput !== undefined;
+        if (Array.isArray(ornaments))
+            for (const ornament of ornaments) {
+                if (!ornament.placement || ornament.placement === ElementPosition.LEFT) hasLeft = true;
+                else if (ornament.placement === ElementPosition.RIGHT) hasRight = true;
+                if (hasLeft && hasRight) break;
+            }
+        else if (ornaments) {
+            hasLeft = !ornaments.placement || ornaments.placement === ElementPosition.LEFT;
+            hasRight = ornaments.placement === ElementPosition.RIGHT;
+        }
+        let columns: string = '1fr';
+        let paddingLeft: string = '';
+        let paddingRight: string = '';
+        if (hasRight) {
+            columns = `${columns} fit-content(100%)`
+            paddingRight = '.75rem';
+        }
+        if (hasLeft) {
+            columns = `fit-content(100%) ${columns}`;
+            paddingLeft = '.75rem';
+        }
+        style.gridTemplateColumns = columns;
+        style.paddingRight = paddingRight;
+        style.paddingLeft = paddingLeft;
+        return style;
+    };
+
+    focusInput = (retry: boolean = false) => {
+        if (this.input) this.input.focus();
+        else if (retry) directTimeout(this.focusInput);
+    };
+
+    renderLabel = () => {
+        const {label, labelClassName} = this.props;
+        if (!label) return null;
+        return <label className={classNames('dvrd-input-label', labelClassName)}
+                      onClick={this.onClickElement}>{label}</label>
+    };
+
+    renderInput = () => {
+        const {value, onChange, onKeyDown, disabled, inputProps, inputClassName, id, area, noResize} = this.props,
+            elementProps = {
+                ...inputProps,
+                value,
+                onChange,
+                onFocus: this.onFocusInput,
+                onBlur: this.onBlurInput,
+                onKeyDown,
+                disabled,
+                className: classNames('dvrd-input', inputClassName, noResize && 'no-resize'),
+                id: `${id}-input`,
+                ref: (ref: HTMLInputElement & HTMLTextAreaElement) => {
+                    this.input = ref
+                },
+            };
+        if (area) return <textarea {...elementProps}/>;
+        return <input {...elementProps}/>
+    };
+
+    renderLeftOrnament = () => {
+        const {ornaments} = this.props;
+        if (!ornaments || (Array.isArray(ornaments) && !ornaments.length)) return null;
+        if (Array.isArray(ornaments)) {
+            for (const ornament of ornaments) {
+                if (!ornament.placement || ornament.placement === ElementPosition.LEFT)
+                    return this.renderOrnament(ornament);
+            }
+        } else if (!ornaments.placement || ornaments.placement === ElementPosition.LEFT)
+            return this.renderOrnament(ornaments);
+        return null;
+    };
+
+    renderRightOrnament = () => {
+        const {ornaments, onClearInput, value} = this.props;
+        if (onClearInput && value) return this.renderOrnament({
+            element: <AwesomeIcon onClick={onClearInput} name='backspace' className='clear-btn'/>,
+            placement: ElementPosition.RIGHT
+        });
+        if (!ornaments || (Array.isArray(ornaments) && !ornaments.length)) return null;
+        if (Array.isArray(ornaments)) {
+            for (const ornament of ornaments) {
+                if (ornament.placement === ElementPosition.RIGHT)
+                    return this.renderOrnament(ornament);
+            }
+        } else if (ornaments.placement === ElementPosition.RIGHT)
+            return this.renderOrnament(ornaments);
+        return null;
+    };
+
+    renderOrnament = (ornament: OrnamentShape) => {
+        const {ornamentClassName} = this.props;
+        if (typeof ornament.element === 'string')
+            return <span className={classNames('dvrd-input-ornament', ornamentClassName)}
+                         onClick={this.onClickElement}>{ornament.element}</span>;
+        else return React.cloneElement(ornament.element, {
+            className: classNames(ornament.element.props.className, ornamentClassName),
+            onClick: (evt: React.MouseEvent) => {
+                this.onClickElement(evt);
+                if (React.isValidElement(ornament.element)){
+                    const element: React.ReactElement = ornament.element;
+                    element.props.onClick?.(evt);
+                }
+            }
+        });
+    };
+
+    renderError = () => {
+        const {error, errorClassName} = this.props;
+        return <span className={classNames('dvrd-input-error', errorClassName)}>{error}</span>
+    }
+
+    componentDidUpdate = (prevProps: Props) => {
+        if (this.props.autoFocus && !prevProps.autoFocus) this.focusInput(true);
+    }
+
+    componentDidMount = () => {
+        if (this.props.autoFocus) this.focusInput(true);
+    };
+
+    render = () => {
+        const {disabled, className, id, fullWidth} = this.props, {active} = this.state;
+        return (
+            <div onClick={this.onClickElement} id={id}
+                 className={classNames('dvrd-input-container', disabled && 'disabled', this.hasError() && 'error',
+                     active && 'active', fullWidth && 'full', className)}>
+                {this.renderLabel()}
+                <div className='content-container' style={this.getContentStyle()}>
+                    {this.renderLeftOrnament()}
+                    {this.renderInput()}
+                    {this.renderRightOrnament()}
+                </div>
+                {this.renderError()}
+            </div>
+        )
+    }
+}

package/src/js/textField/dvrdInputController.tsx

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

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