@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/slider/DVRSlider.tsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/DVRSlider.scss';
+
+import React, {CSSProperties, MouseEventHandler, PureComponent} from 'react';
+import {ChangeFunction, Colors, convertColor, generateComponentId} from "../../..";
+import {ElementPosition} from '../util/interfaces';
+import {ControlContext} from "../util/controlContext";
+import classNames from "classnames";
+
+interface Props {
+    onChange: ChangeFunction;
+    onMouseEnter?: MouseEventHandler;
+    onMouseLeave?: MouseEventHandler;
+    value?: number;
+    disabled: boolean;
+    id?: string;
+    className: string;
+    labelClassName: string;
+    style?: CSSProperties;
+    asNumber?: boolean;
+    label?: string;
+    labelPosition: ElementPosition;
+    inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+}
+
+export default class DVRSlider extends PureComponent<Props> {
+    id: string;
+    static defaultProps = {
+        min: 0,
+        max: 100,
+        step: 1,
+        disabled: false,
+        className: '',
+        labelClassName: '',
+        labelPosition: ElementPosition.RIGHT,
+    };
+    declare context: React.ContextType<typeof ControlContext>;
+    static contextType = ControlContext;
+
+    constructor(props: Props) {
+        super(props);
+        this.id = generateComponentId(props.id);
+    }
+
+    onChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+        const {onChange, asNumber} = this.props, {value} = evt.target;
+        if (asNumber) onChange(Number(value), evt);
+        else onChange(value, evt);
+    };
+
+    onMouseEnter = (evt: React.MouseEvent) => {
+        const {onMouseEnter} = this.props;
+        this.setState({hovered: true});
+        if (onMouseEnter) onMouseEnter(evt);
+    }
+
+    onMouseLeave = (evt: React.MouseEvent) => {
+        const {onMouseLeave} = this.props;
+        this.setState({hovered: false});
+        if (onMouseLeave) onMouseLeave(evt);
+    };
+
+    getInputProps = (): React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> => {
+        const {inputProps} = this.props, defaultProps = {min: 0, max: 100, step: 1};
+        return Object.assign({}, defaultProps, inputProps);
+    }
+
+    getTrackColor = () => {
+        const {disabled} = this.props;
+        if (disabled) return Colors.GRAY4;
+        return convertColor(this.context.baseColor);
+    };
+
+    getControlColor = () => convertColor(this.context.baseColor);
+
+    componentDidMount = () => {
+        const input = document.getElementById(`${this.id}-input`);
+        if (input) {
+            window.setTimeout(() => {
+                input.style.setProperty('--control-color', this.getControlColor())
+            });
+        }
+    };
+
+    renderLabel = () => {
+        const {label} = this.props;
+        if (!label?.length) return null;
+        return <label className='dvr-slider-label'>{label}</label>;
+    };
+
+    render = () => {
+        const {value, disabled, className, style, labelPosition, label} = this.props;
+        return (
+            <div className={classNames('dvr-slider-container', className, label?.length && labelPosition,
+                disabled && 'disabled')}
+                 id={this.id}>
+                {this.renderLabel()}
+                <input type='range' value={value} id={`${this.id}-input`} onChange={this.onChange}
+                       disabled={disabled} className={classNames('dvr-slider', disabled && 'disabled')}
+                       style={{backgroundColor: this.getTrackColor(), ...style}} onMouseEnter={this.onMouseEnter}
+                       onMouseLeave={this.onMouseLeave} {...this.getInputProps()}/>
+            </div>
+        )
+    }
+}

package/src/js/slider/style/DVRSlider.scss

@@ -0,0 +1,88 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.dvr-slider-container {
+  .dvr-slider-label {
+    white-space: nowrap;
+  }
+
+  .dvr-slider {
+    --control-color: black;
+    -webkit-appearance: none;
+    appearance: none;
+    height: 2px;
+    border-radius: .25rem;
+    outline: none;
+    transition: opacity .2s ease-in-out;
+    cursor: pointer;
+
+    &::-webkit-slider-thumb {
+      @include backgroundShadow;
+      -webkit-appearance: none;
+      appearance: none;
+      width: .75rem;
+      height: .75rem;
+      border-radius: 50%;
+      background: var(--control-color);
+      cursor: pointer;
+      transition: width .2s ease-in-out, height .2s ease-in-out;
+    }
+
+    &::-moz-range-thumb {
+      width: .75rem;
+      height: .75rem;
+      border-radius: 50%;
+      background: var(--control-color);
+      cursor: pointer;
+      transition: width .2s ease-in-out, height .2s ease-in-out;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &.top, &.bottom {
+    display: grid;
+    grid-template-columns: auto;
+    //justify-items: start;
+    grid-row-gap: .5rem;
+
+    .dvr-slider-label {
+      padding-left: .2rem;
+    }
+  }
+
+  &.right, &.left {
+    display: grid;
+    grid-column-gap: .5rem;
+    align-items: center;
+    //justify-items: start;
+  }
+
+  &.bottom, &.right {
+    .dvr-slider-label {
+      grid-area: label;
+    }
+
+    .dvr-input {
+      grid-area: input;
+    }
+  }
+
+  &.bottom {
+    grid-template-areas: 'input' 'label';
+  }
+
+  &.right {
+    grid-template-areas: 'input label';
+    grid-template-columns: 1fr min-content;
+  }
+
+  &.left {
+    grid-template-columns: min-content 1fr;
+  }
+}

package/src/js/snackbar/snackbar.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/snackbar.scss';
+
+import React from 'react';
+import classNames from 'classnames';
+import {convertColor} from "../util/colorUtil";
+import {ControlContext} from "../util/controlContext";
+import {Snack} from "../util/interfaces";
+
+interface ViewProps {
+    onClick: any;
+    snack: Snack | null;
+    containerClass: string;
+    textClass: string;
+    backgroundColor?: string;
+    textColor?: string;
+    active: boolean;
+}
+
+export class Snackbar extends React.Component<ViewProps> {
+    // noinspection JSUnusedGlobalSymbols
+    declare context: React.ContextType<typeof ControlContext>;
+    static contextType = ControlContext;
+
+    getBackgroundColor = (): string => {
+        const {backgroundColor, snack} = this.props;
+        if (snack?.config?.backgroundColor) return convertColor(snack.config.backgroundColor);
+        if (backgroundColor) return convertColor(backgroundColor);
+        // noinspection JSDeprecatedSymbols
+        return convertColor(this.context.baseColor);
+    };
+
+    getTextColor = (): string => {
+        const {textColor, snack} = this.props;
+        if (snack?.config?.textColor) return convertColor(snack.config.textColor);
+        if (textColor !== undefined && textColor !== null) return convertColor(textColor);
+        // noinspection JSDeprecatedSymbols
+        return convertColor(this.context.contrastColor);
+    };
+
+    getBackgroundStyle = (): { backgroundColor: string } => ({backgroundColor: this.getBackgroundColor()});
+
+    getTextStyle = (): { color: string } => ({color: this.getTextColor()});
+
+    renderText = () => {
+        const {snack, textClass} = this.props;
+        if (!snack) return null;
+        const {text} = snack;
+        let element: React.ReactNode = null;
+        if (typeof text === 'string') element =
+            <label className={classNames('snackBarText', textClass)} style={this.getTextStyle()}>{text}</label>;
+        else if (text) {
+            const className = Object.assign({}, text.props?.className, classNames('snackBarText', textClass)),
+                style = Object.assign({}, text.props?.style, this.getTextStyle());
+            element = React.cloneElement(text, {className, style});
+        }
+        return element;
+    }
+
+    render = () => {
+        const {containerClass, active, onClick} = this.props;
+        return (
+            <div className={classNames('snackbar', active && 'active', containerClass)}
+                 style={this.getBackgroundStyle()} onClick={onClick}>
+                {this.renderText()}
+            </div>
+        );
+    };
+}

package/src/js/snackbar/snackbarController.tsx

@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React from 'react';
+import {Snackbar} from "./snackbar";
+import {CustomAppEvent, DialogConfig, Snack} from "../util/interfaces";
+import WithEvents from '../events/withEvents';
+import {delay} from 'lodash';
+
+interface Props {
+    containerClass: string;
+    textClass: string;
+    activeTime: number;
+    backgroundColor?: string;
+    textColor?: string;
+    maxSnacks?: number;
+    noDuplicates?: boolean;
+}
+
+interface State {
+    active: boolean;
+    snack: Snack | null;
+    config: DialogConfig;
+}
+
+export default class SnackbarController extends React.Component<Props, State> {
+    static defaultProps = {
+        activeTime: 3000,
+        containerClass: '',
+        textClass: '',
+    };
+
+    state: State = {
+        active: false,
+        snack: null,
+        config: {}
+    };
+
+    snackQueue: Snack[] = [];
+    timeout: number | null = null;
+
+    onAddSnack = (snack: Snack) => {
+        const {maxSnacks, noDuplicates} = this.props;
+        if (noDuplicates && this.isDuplicate(snack)) return;
+        this.snackQueue.push(snack);
+        if (maxSnacks !== undefined)
+            while (this.snackQueue.length > maxSnacks - 1)
+                this.snackQueue.shift();
+        if (!this.state.active)
+            this.activate();
+    };
+
+    onClick = () => {
+        if (this.timeout !== null)
+            window.clearTimeout(this.timeout);
+        this.deactivate();
+    };
+
+    isDuplicate = (snack: Snack): boolean => {
+        return this.state.snack?.text === snack.text || this.snackQueue.pop()?.text === snack.text;
+    }
+
+    deactivate = () => {
+        this.setState({active: false}, () => {
+            delay(() => {
+                // Clear snack after 200ms (css transition)
+                this.setState({snack: null}, () => {
+                    if (this.snackQueue.length > 0)
+                        this.timeout = window.setTimeout(this.activate, 500);
+                })
+            }, 200);
+        })
+    };
+
+    activate = () => {
+        const snack: Snack | undefined = this.snackQueue.pop();
+        if (snack) {
+            this.setState({snack}, () => {
+                this.setState({active: true});
+                this.timeout = window.setTimeout(this.deactivate, this.props.activeTime);
+            })
+        }
+    };
+
+    componentWillUnmount = () => {
+        if (this.timeout !== null)
+            window.clearTimeout(this.timeout);
+    };
+
+    getEvents = (): CustomAppEvent[] => [
+        {eventName: 'onShowSnackbar', handler: this.onAddSnack}
+    ];
+
+    render = () => {
+        const {snack, active} = this.state, {containerClass, textClass, textColor, backgroundColor} = this.props;
+        return (
+            <WithEvents events={this.getEvents()}>
+                <Snackbar snack={snack} containerClass={containerClass} textClass={textClass} active={active}
+                          onClick={this.onClick} textColor={textColor} backgroundColor={backgroundColor}/>
+            </WithEvents>
+        )
+    };
+}

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

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

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

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

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