@dvrd/dvr-controls 1.0.6 → 1.0.7

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

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

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

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

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