@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/header/DVRHeader.tsx

@@ -0,0 +1,417 @@
+/*
+ * 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';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
+
+export interface HeaderItem {
+    label?: string;
+    component?: React.ReactElement;
+    icon?: IconName | 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;
+    forceHeader: 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,
+        forceHeader: 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);
+        const phase = props.forceHeader ? Phase.HEADER : props.forcedMenu ? Phase.MENU : Phase.CALCULATING;
+        this.state = {
+            phase,
+            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) => {
+        if (this.props.forceHeader || this.props.forcedMenu) return;
+        const container = document.getElementById(this.id), 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 (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 cast 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

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

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
+import {IconName, IconPrefix} from '@fortawesome/fontawesome-svg-core';
+
+interface Props extends React.ComponentProps<any>{
+    name: IconName;
+    prefix?: IconPrefix;
+}
+
+export default function AwesomeIcon(props: Props) {
+    const {name, prefix} = props;
+    const iconName = !!prefix ? [prefix, name] as [IconPrefix, IconName] : name;
+    return (
+        <FontAwesomeIcon {...props} icon={iconName}/>
+    );
+}