@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/input/simple/v2/simpleInputV2.tsx

@@ -0,0 +1,178 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import '../style/simpleInput.scss';
+
+import React, {CSSProperties, PureComponent} from 'react';
+import classNames from "classnames";
+import {ControlContext} from "../../../util/controlContext";
+import {colorIsWhite, convertColor, editColor} from "../../../util/colorUtil";
+import {ElementPosition, OrnamentShape} from "../../../util/interfaces";
+import AwesomeIcon from '../../../icon/awesomeIcon';
+import {stopPropagation} from "../../../util/controlUtil";
+import {DVRInputProps} from "../../v2/inputController_v2";
+
+export default class SimpleInput extends PureComponent<DVRInputProps> {
+    declare context: React.ContextType<typeof ControlContext>;
+    static contextType = ControlContext;
+
+    private input: HTMLInputElement | HTMLTextAreaElement | null = null;
+
+    private onFocus = (evt: React.FocusEvent) => {
+        const {onKeyDown, autoSelect, value, onFocus} = this.props;
+        if (this.input) {
+            if (onKeyDown)
+                this.input.addEventListener('keydown', onKeyDown as any);
+            if (autoSelect && value.toString().length) {
+                this.input.setSelectionRange(0, value.toString().length);
+            }
+        }
+        onFocus(evt);
+    };
+
+    private onBlur = (evt: React.FocusEvent) => {
+        const {onKeyDown, onBlur} = this.props;
+        if (this.input) this.input.removeEventListener('keydown', onKeyDown as any);
+        onBlur(evt);
+    };
+
+    private getBaseColor = (trueBase: boolean = false): string => {
+        const themeColor = this.context.baseColor, {baseColor} = this.props;
+        let color: string;
+        if (baseColor) color = baseColor;
+        else color = themeColor;
+        if (colorIsWhite(color) && !trueBase) return this.getContrastColor(false);
+        return convertColor(color);
+    };
+
+    private getContrastColor = (allowWhite: boolean = true): string => {
+        const base = this.getBaseColor(true);
+        if (colorIsWhite(base) && allowWhite) return base;
+
+        const themeColor = this.context.contrastColor, {contrastColor} = this.props;
+        let color: string;
+        if (contrastColor && contrastColor.length) color = contrastColor;
+        else color = themeColor;
+        return convertColor(color);
+    };
+
+    private getBorderColor = (): string => {
+        const {isHovered, isFocused, disabled, error, borderColor} = this.props;
+        let color: string;
+        if (error) color = 'red';
+        else if (disabled) color = 'color-gray-4';
+        else if (isFocused) color = this.getBaseColor();
+        else if (isHovered) color = editColor(.3, this.getBaseColor());
+        else color = borderColor || this.context.borderColor || 'color-gray-3';
+        return convertColor(color);
+    };
+
+    private getCurrentColor = (): string => {
+        const {isHovered, isFocused, disabled, error} = this.props;
+        let color: string;
+        if (error) color = 'red';
+        else if (disabled) color = 'color-gray-4';
+        else if (isFocused) color = this.getBaseColor();
+        else if (isHovered) color = editColor(.3, this.getBaseColor());
+        else color = 'color-gray-3';
+        return convertColor(color);
+    };
+
+    private getContainerStyle = (): CSSProperties => ({
+        borderColor: this.getBorderColor(),
+        ...this.props.containerStyle,
+    });
+
+    private getLabelStyle = (): CSSProperties => ({
+        color: this.getCurrentColor(),
+        ...this.props.labelStyle,
+    });
+
+    private getInputStyle = (): CSSProperties => ({
+        ...this.props.inputStyle,
+    });
+
+    private getInputProps = () => {
+        const {placeholder, inputProps, onChange, value, id, disabled, readOnly} = this.props;
+        return {
+            ...inputProps,
+            className: classNames('dvr-simple-input', inputProps?.className),
+            ref: this.attachRef,
+            onBlur: this.onBlur,
+            onFocus: this.onFocus,
+            style: this.getInputStyle(),
+            placeholder,
+            onChange,
+            value,
+            id: `${id}-input`,
+            // type,
+            disabled,
+            readOnly,
+        };
+    };
+
+    private attachRef = (ref: HTMLInputElement | HTMLTextAreaElement | null) => {
+        this.input = ref;
+    };
+
+    private getOrnament = (placement: ElementPosition): OrnamentShape | null => {
+        const {ornaments, children} = this.props;
+        if (ornaments !== undefined) {
+            if (Array.isArray(ornaments)) {
+                for (const orn of ornaments)
+                    if (orn.placement === placement) return orn;
+            } else if (ornaments.placement === placement) return ornaments;
+
+            if (Array.isArray(children)) {
+                for (const child of children)
+                    if (child && child.hasOwnProperty('placement') && (child as OrnamentShape).placement ===
+                        placement) return child as OrnamentShape;
+            } else if (children && children.hasOwnProperty('placement') && (children as OrnamentShape).placement ===
+                placement) return children as OrnamentShape;
+        }
+        return null;
+    };
+
+    private renderOrnament = (placement: ElementPosition) => {
+        const {onClick, clearAble, value, onClear, disabled} = this.props;
+        let toRender: OrnamentShape | null = this.getOrnament(placement);
+        if (!toRender && placement === ElementPosition.RIGHT && clearAble && !disabled)
+            toRender = {
+                allowPropagation: false,
+                element: <AwesomeIcon name='eraser' onClick={onClear} className={classNames('dvr-simple-input-clear',
+                    !value.toString().length && 'invis')}/>,
+                placement
+            };
+        if (!toRender) return null;
+        else
+            return (
+                <div className={classNames('dvr-simple-input-ornament', onClick !== undefined && 'clickable')}
+                     onClick={toRender.allowPropagation ? onClick : stopPropagation}>
+                    {toRender.element}
+                </div>
+            )
+    };
+
+    render = () => {
+        const {
+            className, label, labelClassName, onMouseEnter, onMouseLeave, area, onClick, fullWidth, error, errorClassName,
+            errorStyle, disabled, id
+        } = this.props;
+        return (
+            <div className={classNames('dvr-simple-input-container', fullWidth && 'full-width',
+                error !== null && 'error', disabled && 'disabled', className)}
+                 style={this.getContainerStyle()} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
+                 onClick={onClick} id={id}>
+                <label className={classNames('dvr-simple-input-label', labelClassName)}
+                       style={this.getLabelStyle()}>{label}</label>
+                {this.renderOrnament(ElementPosition.LEFT)}
+                {area ? <textarea {...this.getInputProps()}/> : <input {...this.getInputProps()}/>}
+                {this.renderOrnament(ElementPosition.RIGHT)}
+                {error !== null &&
+                <label className={classNames('dvr-simple-input-error', errorClassName)}
+                       style={errorStyle}>{error}</label>}
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,138 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/common-variables';
+
+.inputContainer {
+  position: relative;
+  width: 20rem;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  box-sizing: border-box;
+
+  &.fullWidth {
+    width: 100%;
+    .inputFieldContainer{
+      width: 100%;
+    }
+  }
+
+  .inputFieldContainer {
+    display: flex;
+    align-items: center;
+
+    .inputOrnament {
+      max-height: 100%;
+      padding: 0 .5rem;
+      display: flex;
+      align-items: center;
+
+      &.clickable {
+        cursor: pointer;
+      }
+    }
+
+    .input {
+      width: 100%;
+      flex: 1;
+      box-sizing: border-box;
+      border: none !important;
+      outline: none !important;
+      padding: .5rem;
+      font-size: 1rem;
+
+      &:disabled {
+        color: $color-gray-4 !important;
+      }
+    }
+
+    .clearButton {
+      font-size: .8rem;
+      color: $color-gray-5;
+      transition: color .2s ease-in-out;
+      cursor: pointer;
+      margin-right: .3rem;
+      padding: 0 .5rem;
+
+      &:hover {
+        color: red;
+      }
+    }
+  }
+
+  &.outlined {
+    @include borderRadius(.2rem);
+    border-width: 2px;
+    border-style: solid;
+    padding: .2rem;
+    position: relative;
+    transition: border-color .2s ease-in-out, margin-bottom .2s ease-in-out;
+    margin-top: .8rem;
+    margin-bottom: 0;
+
+    .label {
+      position: absolute;
+      background-color: white;
+      padding: .3rem .2rem;
+      left: .2rem;
+      top: -.9rem;
+      font-size: .7rem;
+      transition: top .2s ease-in-out, left .2s ease-in-out, font-size .2s ease-in-out, transform .2s ease-in-out, color .2s ease-in-out;
+      cursor: text;
+      user-select: none;
+    }
+
+    .input {
+      padding-left: .3rem;
+    }
+
+    .error {
+      position: absolute;
+      left: .4rem;
+      bottom: -1.4rem;
+      font-size: .9rem;
+      color: red;
+      pointer-events: none;
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
+    }
+
+    &:not(.focused) {
+      .label {
+        transition-delay: .2s;
+      }
+
+      &:not(.filled) {
+        .label {
+          @include centerY;
+
+          &.multiLine {
+            top: calc(.2rem + 2px);
+            transform: none;
+          }
+
+          font-size: .9rem;
+        }
+      }
+    }
+
+    &.error {
+      margin-bottom: 2.4rem;
+
+      .error {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+  }
+
+  &.disabled {
+    &, & .label, & .inputFieldContainer .input {
+      cursor: not-allowed;
+    }
+  }
+}

package/src/js/input/v2/inputController_v2.tsx

@@ -0,0 +1,250 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import React, {
+    ChangeEventHandler, CSSProperties, EventHandler, FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler,
+    MouseEventHandler, PureComponent, ReactNode, TextareaHTMLAttributes
+} from 'react';
+import {assert, enterPressed} from "../../util/controlUtil";
+import SimpleInput from "../simple/v2/simpleInputV2";
+import {ControlVariant, ErrorType, OrnamentShape} from "../../util/interfaces";
+import { generateComponentId } from '../../../..';
+
+type HTMLProps = Omit<InputHTMLAttributes<any>, 'onChange' | 'step' | 'children'>;
+
+export interface DVRInputControllerProps extends HTMLProps {
+    // Events
+    onChange: (value: string | number, evt: React.ChangeEvent) => void;
+    onEnter?: KeyboardEventHandler;
+    onFocus?: FocusEventHandler;
+    // Theme
+    variant: ControlVariant;
+    baseColor?: string;
+    contrastColor?: string;
+    // Classes
+    errorClassName: string;
+    inputContainerClassName: string;
+    labelClassName: string;
+    // Styles
+    containerStyle?: CSSProperties;
+    labelStyle?: CSSProperties;
+    errorStyle?: CSSProperties;
+    inputStyle?: CSSProperties;
+    // Other
+    error: ErrorType;
+    inputProps?: InputHTMLAttributes<any> & TextareaHTMLAttributes<any>;
+    ornaments?: OrnamentShape | OrnamentShape[];
+    area: boolean;
+    autoSelect: boolean;
+    autoFocus: boolean;
+    clearAble: boolean;
+    fullWidth: boolean;
+    defaultValue?: string | number;
+    label?: string | number;
+    value?: string | number;
+    step?: number;
+    unControlled?: boolean;
+    children?: ReactNode | ReactNode[] | OrnamentShape | OrnamentShape[];
+}
+
+export interface DVRInputProps extends Omit<DVRInputControllerProps, 'value' | 'onChange'> {
+    // Events
+    onChange: ChangeEventHandler;
+    onFocus: FocusEventHandler;
+    onBlur: FocusEventHandler;
+    onClear: EventHandler<any>;
+    onMouseEnter: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+    onKeyDown: KeyboardEventHandler;
+    onClick: MouseEventHandler;
+    // State
+    isFocused: boolean;
+    isHovered: boolean;
+    // Theme
+    variant: ControlVariant;
+    baseColor?: string;
+    contrastColor?: string;
+    borderColor?: string;
+    // Classes
+    errorClassName: string;
+    inputContainerClassName: string;
+    labelClassName: string;
+    // Styles
+    containerStyle?: CSSProperties;
+    labelStyle?: CSSProperties;
+    errorStyle?: CSSProperties;
+    inputStyle?: CSSProperties;
+    // Other
+    error: ErrorType;
+    inputProps?: InputHTMLAttributes<any>;
+    ornaments?: OrnamentShape | OrnamentShape[];
+    clearAble: boolean;
+    fullWidth: boolean;
+    label?: string | number;
+    value: string | number;
+    step?: number;
+    unControlled?: boolean;
+}
+
+export const DefaultInputProps: Partial<DVRInputProps> = {
+    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,
+}
+
+interface State {
+    isFocused: boolean;
+    isHovered: boolean;
+    value: string | number;
+}
+
+export default class InputControllerV2 extends PureComponent<DVRInputControllerProps, State> {
+    static defaultProps: Partial<DVRInputProps> = DefaultInputProps;
+    private readonly id: string;
+
+    private getValue = (props: DVRInputControllerProps = this.props): string | number => {
+        if (props.value !== undefined) return props.value;
+        if (props.defaultValue !== undefined) return props.defaultValue;
+        return '';
+    }
+
+    private validateProps = (props: DVRInputControllerProps) => {
+        if (props.value === undefined && props.defaultValue === undefined)
+            return 'value and defaultValue cannot both be undefined.';
+        return null;
+    };
+
+    constructor(props: DVRInputControllerProps) {
+        super(props);
+        const error = this.validateProps(props);
+        assert(error === null, error);
+        this.id = generateComponentId(props.id);
+        this.state = {
+            isFocused: false,
+            isHovered: false,
+            value: this.getValue(props),
+        }
+    }
+
+    onChange = (evt: React.ChangeEvent<any>) => {
+        const {onChange, type, step} = this.props, {value} = evt.target;
+        let finalValue: string | number = value;
+        if (type === 'number') {
+            if (step !== undefined) {
+                if (Number.isInteger(step)) finalValue = parseInt(finalValue as string);
+                else finalValue = parseFloat(finalValue as string);
+            }
+        }
+        evt.persist();
+        this.setState({value: finalValue.toString()}, () => {
+            onChange(finalValue, evt);
+        });
+    };
+
+    onClear = (evt: any) => {
+        const {clearAble, onChange} = this.props;
+        if (clearAble) {
+            this.setState({value: ''}, () => {
+                onChange('', evt);
+                this.setInputFocus();
+            });
+        }
+    }
+
+    onFocus = (evt: React.FocusEvent<any>) => {
+        const {onFocus} = this.props;
+        this.setState({isFocused: true});
+        if (onFocus) onFocus(evt);
+    }
+
+    onBlur = (evt: React.FocusEvent<any>) => {
+        const {onBlur} = this.props;
+        this.setState({isFocused: false});
+        if (onBlur) onBlur(evt);
+    }
+
+    onClick = (evt: React.MouseEvent<any>) => {
+        const {onClick} = this.props, {isFocused} = this.state;
+        if (!isFocused) this.setInputFocus();
+        if (onClick) onClick(evt);
+    }
+
+    onKeyDown = (evt: React.KeyboardEvent<any>) => {
+        const {onKeyDown, onEnter} = this.props;
+        if (onEnter && enterPressed(evt)) onEnter(evt);
+        else if (onKeyDown) onKeyDown(evt);
+    }
+
+    onMouseEnter = (evt: React.MouseEvent<any>) => {
+        const {onMouseEnter} = this.props;
+        this.setState({isHovered: true});
+        if (onMouseEnter) onMouseEnter(evt);
+    };
+
+    onMouseLeave = (evt: React.MouseEvent<any>) => {
+        const {onMouseLeave} = this.props;
+        this.setState({isHovered: false});
+        if (onMouseLeave) onMouseLeave(evt);
+    };
+
+    getInput = (): HTMLInputElement | HTMLTextAreaElement | null => {
+        const input = document.getElementById(`${this.id}-input`);
+        if (input !== null) return (input as HTMLInputElement | HTMLTextAreaElement);
+        return null;
+    };
+
+    getViewValue = (): string | number => {
+        const {value, unControlled} = this.props;
+        if(unControlled || value === undefined) return this.state.value;
+        return value;
+    };
+
+    setInputFocus = (retryOnNull: boolean = true) => {
+        const input = this.getInput();
+        if (input === null && retryOnNull)
+            window.setTimeout(() => {
+                this.setInputFocus(false);
+            });
+        if (input !== null) {
+            input.focus();
+            this.setState({isFocused: true});
+        }
+    };
+
+    componentDidMount = () => {
+        if (this.props.autoFocus) this.setInputFocus();
+    };
+
+    render = () => {
+        const {variant, unControlled} = this.props, {isFocused, isHovered} = this.state;
+        const props = {
+            ...this.props,
+            onChange: this.onChange,
+            onClear: this.onClear,
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            onClick: this.onClick,
+            onMouseEnter: this.onMouseEnter,
+            onMouseLeave: this.onMouseLeave,
+            onKeyDown: this.onKeyDown,
+            isFocused,
+            isHovered,
+            value: this.getViewValue(),
+            id: this.id,
+            unControlled,
+        }
+        if (variant === ControlVariant.SIMPLE)
+            return <SimpleInput {...props}>{this.props.children}</SimpleInput>
+    };
+}

package/src/js/input/v2/input_v2.tsx

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+interface Props {
+
+}