@dvrd/dvr-controls 1.0.4 → 1.0.7

package/src/js/snackbar/style/snackbar.scss

@@ -1,46 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.snackbar {
-  @include backgroundShadow;
-  @include borderRadius(.2rem);
-  position: fixed;
-  left: 50%;
-  bottom: 1rem;
-  transition: transform .2s ease-in-out;
-  z-index: $z-index-dialog;
-  max-width: 30vw;
-  min-height: 2.5rem;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  transform: translateY(calc(100% + 1rem)) translateX(-50%);
-  padding: .3rem 1rem;
-
-  &, * {
-    cursor: pointer;
-  }
-
-  &.active {
-    transform: translateY(0) translateX(-50%);
-  }
-
-  .snackBarText {
-    text-align: center;
-    user-select: none;
-  }
-
-  @include break-xs {
-    max-width: 90vw;
-    width: 90vw;
-    white-space: normal;
-  }
-
-  @include break-sm {
-    width: unset;
-  }
-}

package/src/js/switch/dvrdSwitch.tsx

@@ -1,53 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/dvrdSwitch.scss';
-
-import classNames from 'classnames';
-import React, {useContext} from 'react';
-import {ControlContext} from "../util/controlContext";
-import {convertColor} from "../util/colorUtil";
-
-interface Props {
-    onChange: (value: boolean, evt: React.MouseEvent) => void;
-    value: boolean;
-    className?: string;
-    disabled?: boolean;
-    activeColor?: string;
-}
-
-export default function DvrdSwitch(props: Props) {
-    const context = useContext(ControlContext),
-        {className, onChange, disabled, value, activeColor} = props;
-
-    function onToggle(evt: React.MouseEvent) {
-        if (!disabled)
-            onChange(!value, evt);
-    }
-
-    function getTrackColor(): string {
-        let color: string;
-        if (disabled) color = 'color-gray-4';
-        else if (value) {
-            if (activeColor) color = activeColor;
-            else color = context.baseColor;
-        } else color = 'color-gray-7';
-        return convertColor(color);
-    }
-
-    function getHandleColor(): string {
-        let color: string;
-        if (disabled) color = 'color-gray-3';
-        else color = context.contrastColor;
-        return convertColor(color);
-    }
-
-    return (
-        <div className={classNames('dvrd-switch', value && 'active', disabled && 'disabled', className)}
-             onClick={onToggle}>
-            <div className='track' style={{backgroundColor: getTrackColor()}}>
-                <div className='handle' style={{backgroundColor: getHandleColor()}}/>
-            </div>
-        </div>
-    )
-}

package/src/js/switch/style/dvrdSwitch.scss

@@ -1,47 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.dvrd-switch {
-  $track-height: 14px;
-  $handle-size: 18px;
-
-  .track {
-    width: $handle-size * 1.3;
-    border-radius: 1rem;
-    height: $track-height;
-    position: relative;
-
-    .handle {
-      @include backgroundShadow;
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateX(-9px) translateY(-50%);
-      border-radius: 100%;
-      width: $handle-size;
-      height: $handle-size;
-      cursor: pointer;
-      transition: transform .2s ease-in-out, left .2s ease-in-out;
-      will-change: left;
-    }
-  }
-
-  &.active {
-    .track {
-      .handle {
-        left: 100%;
-      }
-    }
-  }
-
-  &.disabled {
-    .track {
-      .handle {
-        cursor: default;
-      }
-    }
-  }
-}

package/src/js/switch/style/switch.scss

@@ -1,84 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.switchContainer {
-  display: flex;
-  padding: 1rem 0;
-  align-items: center;
-
-  .main-label {
-    font-size: .9rem;
-    color: $color-gray-5;
-    //margin-right: .5rem;
-  }
-
-  .label {
-    font-size: .9rem;
-    color: $color-gray-5;
-
-    &.left {
-      margin-right: .7rem;
-    }
-
-    &.right {
-      margin-left: .7rem;
-    }
-  }
-
-  .switch-track-container {
-    @include borderRadius(1rem);
-    display: flex;
-    position: relative;
-    width: 35px;
-    height: 1.2rem;
-    cursor: pointer;
-
-    .track {
-      border-radius: inherit;
-      cursor: inherit;
-      flex: 1;
-      height: inherit;
-    }
-
-    .switch {
-      @include centerY;
-      box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);
-      border-radius: 50%;
-      position: absolute;
-      left: -5%;
-      width: 20px;
-      height: 20px;
-      transition: transform .2s ease-in-out, background-color .2s ease, left .2s ease-in-out;
-
-      &.on {
-        left: 105%;
-        transform: translate(-100%, -50%);
-      }
-    }
-  }
-
-  &.lp {
-    padding: 2rem 0;
-  }
-
-  &.sp {
-    padding: .8rem 0;
-  }
-
-  &.disabled {
-    .switch-track-container {
-      cursor: not-allowed;
-
-      .track {
-        background-color: $color-gray-7 !important;
-      }
-
-      .switch {
-        background-color: $color-gray-4 !important;
-      }
-    }
-  }
-}

package/src/js/switch/switch.tsx

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

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

@@ -1,217 +0,0 @@
-/*
- * 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))
-                    if (ornament.element.props.onClick) ornament.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>
-        )
-    }
-}