@dvrd/dvr-controls 1.0.5 → 1.0.8

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -1,165 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/sidebarMenu.scss';
-
-import React, {MouseEventHandler, ReactNode, useContext, useEffect, useRef, useState} from 'react';
-import {useLocation} from 'react-router';
-import {SidebarItem, SideMenuMode} from "../util/interfaces";
-import classNames from 'classnames';
-import {AwesomeIcon, generateComponentId, isAbsoluteLink} from "../../../index";
-import {ControlContext} from "../util/controlContext";
-import {defer} from 'lodash';
-
-interface Props {
-    onClickItem: (item: SidebarItem) => MouseEventHandler;
-    items: SidebarItem[];
-    activeItem?: string;
-    className?: string;
-    baseColor?: string;
-    contrastColor?: string;
-    controlled?: boolean;
-    mode?: SideMenuMode;
-    id?: string;
-}
-
-function getTopItems(items: SidebarItem[]): SidebarItem[] {
-    return items.filter((item: SidebarItem) => !item.onBottom);
-}
-
-function getBottomItems(items: SidebarItem[]): SidebarItem[] {
-    return items.filter((item: SidebarItem) => item.onBottom)
-}
-
-function getActiveItem(items: SidebarItem[], pathname: string): SidebarItem | null {
-    for (const item of items) {
-        if (itemIsActive(item, pathname)) return item;
-        if (Array.isArray(item.children)) {
-            const activeItem = getActiveItem(item.children, pathname);
-            if (activeItem) return activeItem;
-        }
-    }
-    return null;
-}
-
-function itemIsActive(item: SidebarItem, pathname: string): boolean {
-    if (Array.isArray(item.route) && item.route.includes(pathname)) return true;
-    else if (item.route === pathname) return true;
-    else if (typeof item.route === 'string' && item.exactRoute === false && pathname.includes(item.route)) return true;
-    return false;
-}
-
-function itemHasActiveId(item: SidebarItem, activeId: string): boolean {
-    if (item.id === activeId) return true;
-    else if (Array.isArray(item.children) && item.children.find((child: SidebarItem) => itemHasActiveId(child, activeId))) return true;
-    return false;
-}
-
-export default function SidebarMenu(props: Props) {
-    const context = useContext(ControlContext),
-        location = useLocation(),
-        {className, contrastColor, baseColor, items, onClickItem} = props,
-        mode = props.mode ?? SideMenuMode.COMPACT,
-        [activeItem, setActiveItem] = useState(props.activeItem ?? ''),
-        sideBar = useRef<HTMLDivElement>(null),
-        componentId = useRef(generateComponentId(props.id));
-
-    function _onClickItem(item: SidebarItem) {
-        return function (evt: React.MouseEvent) {
-            evt.stopPropagation();
-            const {route} = item;
-            let _route: string | null = null;
-            if (route) {
-                if (Array.isArray(route) && route.length) _route = route[0];
-                else _route = route as string;
-            }
-            if (_route && !isAbsoluteLink(_route))
-                setActiveItem(item.id);
-            onClickItem(item)(evt);
-        }
-    }
-
-    function renderItem(isChild: boolean = false) {
-        return function (item: SidebarItem) {
-            const {className, icon, id, label, children} = item,
-                isActive = itemHasActiveId(item, activeItem),
-                cls = classNames(className, mode === SideMenuMode.COMPACT ? 'side-bar-item' : 'side-bar-item-full',
-                    isChild && 'child', children !== undefined && 'with-children');
-            return (
-                <div key={id} className={cls} onClick={_onClickItem(item)}>
-                    {renderIcon(isActive, isChild, label, icon)}
-                    {mode === SideMenuMode.COMPACT && <div className='active-indicator'/>}
-                    <span className={classNames('item-label', isActive && 'active')}>{label}</span>
-                    {children !== undefined && (
-                        <>
-                            {isActive && <div className='line'/>}
-                            {renderChildren(isActive)(children)}
-                        </>
-                    )}
-                </div>
-            )
-        }
-    }
-
-    function renderChildren(isActive: boolean) {
-        return function (children: SidebarItem[]) {
-            const display = isActive ? 'block' : 'none';
-            return (
-                <div className='children-container' style={{display}}>
-                    {children.map(renderItem(true))}
-                </div>
-            )
-        }
-    }
-
-    function renderIcon(isActive: boolean, isChild: boolean, label: string, icon?: string | ReactNode): ReactNode {
-        const className = classNames('item-icon', isActive && 'active');
-        if (icon) {
-            if (typeof icon === 'string') return <AwesomeIcon name={icon} className={className}/>;
-            else if (React.isValidElement(icon))
-                return React.cloneElement(icon, {className: classNames(className, icon.props.className)});
-        }
-        if (label.length) {
-            if (isChild) return <span/>;
-            return <span className={classNames(className, 'letter')}>{label[0]}</span>
-        }
-        return null;
-    }
-
-    function setColors() {
-        const bar = sideBar.current;
-        if (bar) {
-            const base: string = baseColor || context.baseColor,
-                contrast: string = contrastColor || context.contrastColor;
-            bar.style.setProperty('--base-color', base);
-            bar.style.setProperty('--contrast-color', contrast);
-        }
-    }
-
-    function _setActiveItem() {
-        const {pathname} = location;
-        const activeItem = getActiveItem(items, pathname);
-        if (activeItem) setActiveItem(activeItem.id);
-    }
-
-    useEffect(() => {
-        setColors();
-        defer(_setActiveItem);
-    }, []);
-
-    useEffect(() => {
-        _setActiveItem()
-    }, [location]);
-
-    return (
-        <div className={classNames(className, 'dvr-side-bar-menu', mode === SideMenuMode.FULL && 'full')}
-             ref={sideBar} id={componentId.current}>
-            <div>
-                {getTopItems(items).map(renderItem())}
-            </div>
-            <div>
-                {getBottomItems(items).map(renderItem())}
-            </div>
-        </div>
-    )
-}

package/src/js/sidebarMenu/style/sidebarMenu.scss

@@ -1,161 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.dvr-side-bar-menu {
-  //--base-color: white;
-  //--contrast-color: $color-blue-1;
-  @include backgroundShadow;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  position: fixed;
-  top: 4rem;
-  background-color: var(--contrast-color);
-  height: calc(100vh - 4rem);
-  width: 4rem;
-  z-index: $z-index-popup-4;
-
-  .side-bar-item {
-    border-bottom: 1px solid $color-gray-7;
-    height: 4rem;
-    width: 4rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    position: relative;
-    background-color: var(--contrast-color-color);
-    transition: background-color .2s ease-in-out;
-    color: var(--base-color);
-
-    .item-icon {
-      color: $color-gray-4;
-      font-size: 1.5rem;
-      transition: color .2s ease-in-out;
-    }
-
-    .item-label {
-      @include centerY;
-      border-radius: .5rem;
-      position: absolute;
-      padding: 4px 6px;
-      background-color: rgba(black, .6);
-      color: white;
-      left: 115%;
-      visibility: hidden;
-      opacity: 0;
-      transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
-      font-size: 12px;
-    }
-
-    .active-indicator {
-      position: absolute;
-      top: 0;
-      right: 0;
-      height: 100%;
-      width: 3px;
-      background-color: var(--base-color);
-      visibility: hidden;
-      opacity: 0;
-      transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
-    }
-
-    &:hover {
-      .item-label {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-
-    &.active {
-      .active-indicator {
-        visibility: visible;
-        opacity: 1;
-      }
-
-      .item-icon {
-        color: var(--base-color);
-      }
-    }
-  }
-
-  &.full {
-    width: unset;
-    box-shadow: none;
-    background-color: transparent;
-    position: sticky;
-    display: inline-flex;
-    height: calc(100vh - 5rem);
-    top: 5rem;
-
-    .side-bar-item-full {
-      display: grid;
-      grid-template-columns: 2rem auto;
-      grid-column-gap: 1rem;
-      margin: 2rem 1rem;
-      align-items: center;
-      cursor: pointer;
-      position: relative;
-
-      .item-icon {
-        color: #686869;
-        font-size: 1.5rem;
-        transition: color .2s ease-in-out;
-        justify-self: center;
-        opacity: .5;
-
-        &.active {
-          color: var(--base-color);
-          opacity: 1;
-        }
-      }
-
-      .item-label {
-        color: #686869;
-        transition: color .2s ease-in-out;
-        white-space: nowrap;
-
-        &.active {
-          font-weight: 600;
-          color: black;
-        }
-      }
-
-      .line {
-        width: 2px;
-        position: absolute;
-        height: calc(100% - 1.5rem);
-        top: 2rem;
-        left: 1rem;
-        background-color: var(--base-color);
-      }
-
-      &.child {
-        .item-label {
-          padding-left: 1rem;
-        }
-      }
-
-      .children-container {
-        padding-top: 1rem;
-
-        .side-bar-item-full {
-          margin: 0;
-        }
-      }
-
-      &:hover {
-        .item-label {
-          color: black;
-        }
-      }
-
-      &.with-children {
-        margin-bottom: -.5rem;
-      }
-    }
-  }
-}

package/src/js/slider/DVRSlider.tsx

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

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

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

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