@dvrd/dvr-controls 1.0.6 → 1.0.7

package/src/js/header/DVRHeader.tsx

@@ -1,413 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import './style/header.scss';
-
-import React, {CSSProperties, MouseEventHandler, PureComponent} from 'react';
-import classNames from "classnames";
-import {hasHover, remToPx} from "../util/controlUtil";
-import {AwesomeIcon, convertColor, directTimeout, generateComponentId, voidFunction} from "../../../";
-import {ControlContext} from "../util/controlContext";
-import TopButton, {TopButtonProps} from "../topButton/topButton";
-import { getScreenWidth } from '../util/responsiveUtil';
-
-export interface HeaderItem {
-    label?: string;
-    component?: React.ReactElement;
-    icon?: string | React.ReactElement;
-    iconOnly?: boolean;
-    forceBar?: boolean;
-    onClick: MouseEventHandler | null;
-    route?: string;
-    customClass?: string;
-    children?: HeaderItem[];
-    id?: string;
-}
-
-interface RenderAble {
-    toRender: React.ReactNode;
-    clickHandler: MouseEventHandler | null;
-    children?: RenderAble[];
-    isComp: boolean;
-    id?: string;
-}
-
-interface Props {
-    items: HeaderItem[];
-    forcedMenu: boolean;
-    containerClass: string;
-    menuContainerClass: string;
-    id?: string;
-    transparent: boolean;
-    fix: boolean;
-    leftMenuComp?: React.ReactNode;
-    headerColor?: string;
-    headerLabelColor?: string;
-    menuColor?: string;
-    menuLabelColor?: string;
-    topControl: boolean;
-    topControlProps?: Partial<TopButtonProps>;
-}
-
-interface State {
-    phase: Phase;
-    menuOpen: boolean;
-    openSubMenus: string[];
-    headerHeight: number;
-}
-
-enum Phase {HEADER = 'header', MENU = 'menu', CALCULATING = 'calculating'}
-
-const RESIZE_TIMEOUT = Math.ceil(1000 / 120); // 30 fps
-
-export default class DVRHeader extends PureComponent<Props, State> {
-    declare context: React.ContextType<typeof ControlContext>;
-    static contextType = ControlContext;
-
-    static defaultProps = {
-        forcedMenu: false,
-        containerClass: '',
-        menuContainerClass: '',
-        transparent: false,
-        fix: false,
-        topControl: false,
-    };
-
-    validateProps = (items: HeaderItem[]) => {
-        for (const item of items) {
-            const canRender = item.label !== undefined || item.component !== undefined || item.icon !== undefined,
-                canClick = item.route !== undefined || item.onClick !== undefined,
-                usesValidIcon = !item.iconOnly || item.icon !== undefined;
-            if (!canRender) throw new TypeError(
-                `Cannot render header item without label, component or icon. Invalid item: ${item}`);
-            if (!canClick) throw new TypeError(
-                `Item can not process click events without route or onClick. invalid item: ${item}`);
-            if (!usesValidIcon) throw new TypeError(`Item is forced to use non-existing icon. Invalid item: ${item}`);
-            if (item.children && item.children.length)
-                this.validateProps(item.children);
-        }
-    };
-
-    prepIds = (items: HeaderItem[]) => {
-        for (const item of items) item.id = generateComponentId(item.id);
-    };
-
-    constructor(props: Props) {
-        super(props);
-        this.validateProps(props.items);
-        this.prepIds(props.items);
-        this.state = {
-            phase: Phase.CALCULATING,
-            menuOpen: false,
-            openSubMenus: [],
-            headerHeight: remToPx(4),
-        }
-    }
-
-    menu: HTMLDivElement | null = null;
-    id: string = generateComponentId(this.props.id);
-    handlingResize: boolean = false;
-    resizeTimeout: number | null = null;
-    lastKnownHeaderWidth: number = 0;
-    lastKnownScreenWidth: number = getScreenWidth(true);
-
-    onClickBars = () => {
-        const {menuOpen} = this.state;
-        if (menuOpen) this.closeMenu();
-        else this.openMenu();
-    };
-
-    onClick = () => {
-        if (!this.menu || !hasHover(this.menu)) this.closeMenu();
-    };
-
-    closeMenu = () => {
-        this.setState({menuOpen: false, openSubMenus: []}, this.removeClickListener)
-    };
-
-    onClickChild = (item: RenderAble) => (evt: React.MouseEvent) => {
-        evt.stopPropagation();
-        if (item.clickHandler)
-            item.clickHandler(evt);
-    };
-
-    onClickMenuItem = (item: RenderAble) => (evt: React.MouseEvent) => {
-        if (item.children && item.id) {
-            const openSubMenus = this.state.openSubMenus.slice();
-            if (openSubMenus.includes(item.id)) openSubMenus.splice(openSubMenus.indexOf(item.id), 1);
-            else openSubMenus.push(item.id);
-            this.setState({openSubMenus});
-        } else {
-            if (item.clickHandler)
-                item.clickHandler(evt);
-            if (this.state.phase === Phase.MENU)
-                this.closeMenu();
-        }
-    };
-
-    getBaseColor = (): string => convertColor(this.context.baseColor);
-    getContrastColor = (): string => convertColor(this.context.contrastColor);
-
-    getHeaderStyle = (): CSSProperties => {
-        const {transparent, headerColor} = this.props, baseColor = this.getBaseColor();
-        let backgroundColor: string;
-        if (headerColor && headerColor.length) backgroundColor = headerColor;
-        else if (transparent) backgroundColor = 'transparent';
-        else backgroundColor = baseColor;
-        return {backgroundColor};
-    };
-
-    getHeaderLabelStyle = (): CSSProperties => {
-        const {transparent, headerLabelColor} = this.props, contrastColor = this.getContrastColor();
-        let color: string;
-        if (headerLabelColor) color = headerLabelColor;
-        else if (transparent) color = '#3a4044';
-        else color = contrastColor;
-        return {color};
-    };
-
-    openMenu = () => {
-        this.setState({menuOpen: true}, this.addClickListener);
-    };
-
-    removeClickListener = () => {
-        document.removeEventListener('click', this.onClick);
-    };
-
-    addClickListener = () => {
-        document.addEventListener('click', this.onClick);
-    };
-
-    resizeListener = () => {
-        if (!this.handlingResize) {
-            this.handlingResize = true;
-            this.determineType();
-            this.resizeTimeout = window.setTimeout(() => {
-                this.handlingResize = false;
-                this.resizeTimeout = null;
-            }, RESIZE_TIMEOUT)
-        }
-    };
-
-    determineType = (initial: boolean = false) => {
-        const container = document.getElementById(this.id), {forcedMenu} = this.props, currentPhase = this.state.phase,
-            screenWidth = getScreenWidth(true);
-        if (screenWidth === this.lastKnownScreenWidth && !initial) return;
-        this.lastKnownScreenWidth = screenWidth;
-        let phase: Phase.HEADER | Phase.MENU = Phase.HEADER;
-        if (forcedMenu) phase = Phase.MENU;
-        else if (container) {
-            const box = container.getBoundingClientRect(), width = box.width;
-            if (currentPhase === Phase.CALCULATING) {
-                if (width > screenWidth) {
-                    phase = Phase.MENU;
-                    this.lastKnownHeaderWidth = width;
-                } else phase = Phase.HEADER;
-            } else if (currentPhase === Phase.MENU) {
-                if (screenWidth >= this.lastKnownHeaderWidth) phase = Phase.HEADER;
-                else phase = Phase.MENU;
-            } else if (currentPhase === Phase.HEADER) {
-                if (screenWidth < width) {
-                    this.lastKnownHeaderWidth = width;
-                    phase = Phase.MENU;
-                } else phase = Phase.HEADER;
-            }
-        }
-        if (currentPhase !== phase) this.setState({phase});
-    };
-
-    getHeaderItems = (): RenderAble[] => {
-        const {phase} = this.state, {items} = this.props;
-        if (phase !== Phase.MENU) return items.map(this.createHeaderRenderAble);
-        return items.filter((item: HeaderItem) => item.forceBar).map(this.createHeaderRenderAble);
-    };
-
-    getMenuItems = (): RenderAble[] => {
-        const {items} = this.props;
-        return items.filter(item => !item.forceBar).map(this.createMenuRenderAble);
-    };
-
-    createHeaderRenderAble = (item: HeaderItem): RenderAble => {
-        const {onClick, component, customClass, icon, iconOnly, label} = item,
-            renderAble: RenderAble = {
-                toRender: null,
-                clickHandler: onClick,
-                isComp: false,
-            }, className = classNames('dvr-header-item', customClass);
-        if (iconOnly) {
-            if (typeof icon === 'string') renderAble.toRender = <AwesomeIcon name={icon} className={className}/>;
-            // Type casted since props are checked by constructor
-            else renderAble.toRender = React.cloneElement((icon as React.ReactElement), {className});
-        } else if (component !== undefined) {
-            renderAble.isComp = true;
-            renderAble.toRender = React.cloneElement(component, {className});
-        } else renderAble.toRender = <label className={className}>{label}</label>;
-
-        if (item.children) renderAble.children = item.children.map(this.createHeaderRenderAble);
-        return renderAble;
-    };
-
-    createMenuRenderAble = (item: HeaderItem): RenderAble => {
-        const {onClick, component, customClass, icon, label} = item;
-        let className = classNames('dvr-menu-item', customClass);
-        const renderAble: RenderAble = {
-            toRender: null,
-            clickHandler: onClick,
-            isComp: false,
-            id: item.id,
-        };
-        if (component) {
-            className = classNames('dvr-menu-item', 'full', customClass);
-            renderAble.toRender = React.cloneElement(component, {className, containerClass: className});
-            renderAble.isComp = true;
-        } else if (icon && label) {
-            const iconComp = typeof icon === 'string' ?
-                <AwesomeIcon key='icon' name={icon} className={className}/> :
-                React.cloneElement(icon, {className, key: 'icon'});
-            const labelComp = <span key='label' className={className}>{label}</span>;
-            renderAble.toRender = [iconComp, labelComp];
-        } else if (icon) {
-            className = classNames('dvr-menu-item', 'full', customClass);
-            renderAble.toRender = typeof icon === 'string' ?
-                <AwesomeIcon name={icon} className={className}/> : React.cloneElement(icon, {className});
-        } else if (label) {
-            className = classNames('dvr-menu-item', 'single', customClass);
-            renderAble.toRender = <label className={className}>{label}</label>;
-        }
-
-        if (item.children) renderAble.children = item.children.map(this.createMenuRenderAble);
-        return renderAble;
-    };
-
-    attachRef = (ref: HTMLDivElement) => {
-        this.menu = ref;
-    };
-
-    getSubMenuHeight = (item: RenderAble): CSSProperties => {
-        const {openSubMenus} = this.state;
-        let height: number | string = 0;
-        if (item.id && openSubMenus.includes(item.id)) {
-            const childContainer = document.getElementById(item.id);
-            let totalHeight: number = 0;
-            if (childContainer) {
-                for (const elem of childContainer.querySelectorAll('div.child-item')) {
-                    totalHeight += elem.getBoundingClientRect().height;
-                }
-                height = totalHeight + 'px';
-            }
-        }
-        return {height};
-    };
-
-    setHeaderHeight = () => {
-        const header = document.getElementById(this.id);
-        let height = remToPx(4);
-        if (header)
-            height = header.getBoundingClientRect().height;
-        this.setState({headerHeight: height});
-    };
-
-    renderHeader = () => {
-        const {phase} = this.state, {transparent, leftMenuComp} = this.props;
-        return (
-            <div className={classNames('dvr-header-container', transparent && 'transparent')} id={this.id}
-                 style={{...this.getHeaderStyle(), ...this.getHeaderLabelStyle()}}>
-                <div className='left-container'>
-                    {phase === Phase.MENU && <AwesomeIcon name='bars' onClick={this.onClickBars}
-                                                          className={classNames('menu-bars')}/>}
-                    {leftMenuComp !== undefined && leftMenuComp}
-                </div>
-                <div className='items-container'>
-                    {this.getHeaderItems().map((item: RenderAble, index: number) => (
-                        <div key={index} className={classNames('header-item-container', item.isComp && 'comp',
-                            item.clickHandler === null && 'no-click')}
-                             onClick={item.clickHandler || voidFunction} style={this.getHeaderLabelStyle()}>
-                            {item.toRender}
-                            {item.children && this.renderHeaderChildren(item)}
-                        </div>
-                    ))}
-                </div>
-            </div>
-        )
-    };
-
-    renderHeaderChildren = (item: RenderAble) => {
-        if (!item.children) return null;
-        return (
-            <div className='children-container'>
-                {item.children.map((item: RenderAble, index: number) => (
-                    <div key={index} className='child-item' onClick={this.onClickChild(item)}>
-                        {item.toRender}
-                    </div>
-                ))}
-            </div>
-        )
-    };
-
-    renderMenu = () => {
-        const {phase, menuOpen} = this.state, {
-            forcedMenu,
-            menuContainerClass
-        } = this.props, {headerHeight} = this.state;
-        if (phase !== Phase.MENU && !forcedMenu) return null;
-        return (
-            <div className={classNames('dvr-menu', menuContainerClass, menuOpen && 'open')} ref={this.attachRef}
-                 style={{top: headerHeight + 'px'}}>
-                {this.getMenuItems().map((item: RenderAble, index: number) => (
-                    <div key={index} className='menu-item-container' onClick={this.onClickMenuItem(item)}>
-                        {item.toRender}
-                        {item.children && this.renderMenuChildren(item)}
-                    </div>
-                ))}
-            </div>
-        );
-    };
-
-    renderMenuChildren = (item: RenderAble) => {
-        if (!item.children) return null;
-        return (
-            <div className='children-container' id={item.id} style={this.getSubMenuHeight(item)}>
-                {item.children.map((item: RenderAble, index: number) => (
-                    <div key={index} className='child-item' onClick={this.onClickMenuItem(item)}>
-                        {item.toRender}
-                    </div>
-                ))}
-            </div>
-        );
-    };
-
-    renderFixedSpace = () => {
-        const {fix} = this.props, {headerHeight} = this.state;
-        if (!fix) return null;
-        return (<div style={{height: headerHeight + 'px'}}/>);
-    };
-
-    componentDidMount = () => {
-        this.determineType(true);
-        window.addEventListener('resize', this.resizeListener);
-        directTimeout(this.setHeaderHeight);
-    };
-
-    componentWillUnmount = () => {
-        this.removeClickListener();
-        window.removeEventListener('resize', this.resizeListener);
-        if (this.resizeTimeout)
-            window.clearTimeout(this.resizeTimeout);
-    };
-
-    render = () => {
-        const {containerClass, items, fix, topControl, topControlProps} = this.props, {phase} = this.state;
-        this.prepIds(items);
-        return (
-            <>
-                {this.renderFixedSpace()}
-                <div className={classNames('dvr-header', containerClass, phase, fix && 'fix')}>
-                    {this.renderHeader()}
-                    {this.renderMenu()}
-                </div>
-                {topControl && <TopButton {...topControlProps}/>}
-            </>
-        )
-    };
-}

package/src/js/header/style/header.scss

@@ -1,206 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.dvr-header {
-  width: fit-content;
-
-  &.calculating {
-    visibility: hidden;
-  }
-
-  &.menu {
-    .dvr-header-container {
-      box-shadow: 0 1px 5px 0 rgba(black, 0.2), 0 2px 2px 0 rgba(black, 0.14), 0 3px 1px -2px rgba(black, 0.12) !important;
-      padding: .5rem 1rem;
-      width: 100vw;
-    }
-  }
-
-  &.header {
-    .dvr-header-container {
-      min-width: 100vw;
-    }
-  }
-
-  $height: 4rem;
-
-  .dvr-header-container {
-    @include backgroundShadow;
-    padding: .5rem 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    min-height: $height;
-    box-sizing: border-box;
-
-    .left-container {
-      display: grid;
-      grid-template-columns: auto auto;
-      align-items: center;
-
-      .menu-bars {
-        cursor: pointer;
-        padding: 1rem;
-      }
-    }
-
-    .items-container {
-      display: flex;
-      align-items: center;
-
-      .header-item-container {
-        margin: 0 .6rem;
-        padding: .2rem;
-        cursor: pointer;
-        border-bottom: 1px solid transparent;
-        transition: border-color .2s ease-in-out;
-        position: relative;
-
-        .children-container {
-          @include centerX;
-          visibility: hidden;
-          opacity: 0;
-          transition: visibility .1s ease-in-out, opacity .1s ease-in-out, box-shadow .1s ease-in-out;
-          position: absolute;
-          top: 100%;
-          background-color: white;
-
-          .child-item {
-            padding: .5rem;
-            color: $color-gray-header;
-            border-bottom: 1px solid $color-gray-4;
-            transition: background-color .2s ease-in-out;
-            display: flex;
-            justify-content: center;
-
-            label {
-              font-size: .9rem;
-              color: $color-gray-header;
-              font-weight: normal;
-            }
-
-            &:last-child {
-              border-bottom: none;
-            }
-
-            &:hover {
-              background-color: $color-gray-6;
-            }
-          }
-        }
-
-        &:hover {
-          border-color: currentColor;
-
-          .children-container {
-            @include backgroundShadow;
-            visibility: visible;
-            opacity: 1;
-          }
-        }
-
-        label.dvr-header-item {
-          font-weight: 500;
-          white-space: nowrap;
-        }
-
-        &.comp {
-          border-color: transparent !important;
-        }
-
-        &.no-click {
-          cursor: default;
-        }
-      }
-    }
-
-    &.transparent {
-      box-shadow: none;
-      background-color: transparent;
-
-      .items-container .header-item-container {
-        color: $color-gray-header;
-      }
-    }
-  }
-
-  .dvr-menu {
-    @include backgroundShadow;
-    position: fixed;
-    height: 100%;
-    top: $height;
-    left: 0;
-    transform: translateX(-100%);
-    box-shadow: 0 1px 5px 0 rgba(black, 0.2), 0 2px 2px 0 rgba(black, 0.14), 0 3px 1px -2px rgba(black, 0.12);
-    transition: transform .2s ease-in-out;
-    padding: 1rem;
-    background-color: $color-gray-header;
-    max-width: 100vw;
-    box-sizing: border-box;
-    z-index: 9999;
-
-    &, * {
-      user-select: none;
-    }
-
-    .menu-item-container {
-      color: $color-gray-header-text;
-      padding: .75rem 1rem;
-      cursor: pointer;
-      transition: background-color .2s ease-in-out;
-      border-radius: .25rem;
-      display: grid;
-      grid-template-columns: 1rem auto;
-      grid-column-gap: 1rem;
-
-      .dvr-menu-item {
-        &.full {
-          grid-column-start: span 2;
-        }
-
-        &.single {
-          grid-column-start: 2;
-        }
-      }
-
-      .combined-label {
-        display: flex;
-        align-items: center;
-
-        span:first-child {
-          margin-right: 1rem;
-        }
-      }
-
-      .children-container {
-        overflow: hidden;
-        height: 0;
-        transition: height .2s ease-in-out;
-        grid-column-start: 2;
-        padding-top: .5rem;
-
-        .child-item {
-          padding: .75rem;
-        }
-      }
-
-      &:hover {
-        background-color: darken($color-gray-header, 10%);
-      }
-    }
-
-    &.open {
-      transform: none;
-    }
-  }
-
-  &.fix {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: $z-index-menu + 1;
-  }
-}

package/src/js/icon/awesomeIcon.tsx

@@ -1,46 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import '../../style/fonts/fontAwesome/css/all.min.css';
-import React from 'react';
-import {CSSProperties} from "react";
-import classNames from 'classnames';
-import {IndexedObject} from "../util/interfaces";
-
-interface Props extends IndexedObject<any> {
-    name: string;
-    comp?: 'span' | 'i';
-    className?: string;
-    prefix?: string;
-    style?: CSSProperties;
-    id?: string;
-}
-
-export default class AwesomeIcon extends React.Component<Props> {
-    static defaultProps = {
-        comp: 'span',
-        prefix: 'fas',
-    };
-
-    getRenderProps = () => {
-        const props: IndexedObject<any> = {};
-        for (const key of Object.keys(this.props)) {
-            if (['comp', 'name', 'className', 'prefix'].includes(key)) continue;
-            props[key] = this.props[key];
-        }
-        return props;
-    };
-
-    render = () => {
-        const {comp, name, className, prefix, style, id} = this.props, idProp = id ? {id} : {};
-        switch (comp) {
-            case "span":
-                return <span {...this.getRenderProps()} className={classNames(prefix, `fa-${name}`, className)}
-                             style={style} {...idProp}/>;
-            case "i":
-                return <i {...this.getRenderProps()} className={classNames(prefix, `fa-${name}`, className)}
-                          style={style} {...idProp}/>;
-        }
-    };
-}