@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/optionsList/dvrdOptionsList.tsx

@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/dvrdOptionsList.scss';
+
+import {AwesomeIcon, convertColor, directTimeout, editColor, hasHover} from '@dvrd/dvr-controls';
+import classNames from 'classnames';
+import React, {CSSProperties, MouseEventHandler, useContext, useEffect, useRef, useState} from 'react';
+import {ControlContext} from "../util/controlContext";
+
+type Option = {
+    label: React.ReactNode;
+    onClick: MouseEventHandler;
+    hoverColor?: 'default' | 'red';
+}
+
+interface Props {
+    options: Option[];
+    label: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    hoverOpen?: boolean;
+}
+
+export default function DvrdOptionsList(props: Props) {
+    const context = useContext(ControlContext),
+        {className, label, options, disabled, hoverOpen} = props,
+        [open, setOpen] = useState(false),
+        button = useRef<HTMLDivElement>(null),
+        [hover, setHover] = useState(false);
+
+    function onClickButton() {
+        if (!hoverOpen) setOpen(true);
+    }
+
+    function onMouseEnter() {
+        setHover(true);
+    }
+
+    function onMouseLeave() {
+        setHover(false);
+    }
+
+    function getButtonStyle(): CSSProperties {
+        return {
+            backgroundColor: getBackgroundColor(),
+            color: getColor(),
+        }
+    }
+
+    function getBackgroundColor(): string {
+        let color: string;
+        if (disabled) color = 'color-gray-4';
+        else color = context.baseColor;
+        color = convertColor(color);
+        if (hover) color = editColor(-.2, color);
+        return color;
+    }
+
+    function getColor(): string {
+        let color: string;
+        if (disabled) color = 'color-gray-3';
+        else color = context.contrastColor;
+        return convertColor(color);
+    }
+
+    function clickListener() {
+        directTimeout(() => {
+            if (!hasHover(button.current)) setOpen(false);
+        });
+    }
+
+    useEffect(() => {
+        if (open)
+            document.addEventListener('click', clickListener);
+        else
+            document.removeEventListener('click', clickListener);
+        return function () {
+            document.removeEventListener('click', clickListener);
+        }
+    }, [open]);
+
+    function renderLabel(label: React.ReactNode, className: string) {
+        if (typeof label === 'string') return <label className={className}>{label}</label>;
+        return label;
+    }
+
+    function renderOptions() {
+        return (
+            <div className='options-container'>
+                {options.map((option: Option, index: number) => (
+                    <div key={index} className={classNames('option', option.hoverColor ?? 'default')}
+                         onClick={disabled ? undefined : option.onClick}>
+                        {renderLabel(option.label, 'option-label')}
+                    </div>
+                ))}
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className={classNames('dvrd-options-list', open && 'open', disabled && 'disabled', className, hoverOpen && 'hover')}>
+            <div className={classNames('btn-container')} ref={button} onClick={onClickButton} style={getButtonStyle()}
+                 onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+                <AwesomeIcon name='bars' className='caret'/>
+                {renderLabel(label, 'button-label')}
+            </div>
+            {renderOptions()}
+        </div>
+    )
+}

package/src/js/optionsList/style/dvrdOptionsList.scss

@@ -0,0 +1,84 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.dvrd-options-list {
+  position: relative;
+
+  .btn-container {
+    @include backgroundShadow2;
+    border-radius: .5rem;
+    padding: .7rem 1rem;
+    display: grid;
+    grid-template-columns: repeat(2, fit-content(100%));
+    grid-column-gap: .5rem;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color .2s ease-in-out;
+
+    .button-label {
+      cursor: inherit;
+    }
+
+    .caret {
+      cursor: inherit;
+      font-size: .8rem;
+    }
+  }
+
+  .options-container {
+    position: absolute;
+    left: 0;
+    top: 100%;
+    min-width: 100%;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility .2s ease-in-out, opacity .2s ease-in-out, box-shadow .2s ease-in-out;
+    background-color: white;
+    border-radius: .5rem;
+    overflow: hidden;
+
+    .option {
+      padding: .5rem;
+      cursor: pointer;
+      border-bottom: 1px solid $color-gray-4;
+      transition: background-color .2s ease-in-out;
+
+      .option-label {
+        white-space: nowrap;
+        user-select: none;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &:hover {
+        &.default {
+          background-color: rgba($color-blue-1, .2);
+        }
+
+        &.red {
+          background-color: rgba(red, .2);
+        }
+      }
+    }
+  }
+
+  &.open, &.hover:hover {
+    .options-container {
+      @include backgroundShadow();
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &.disabled {
+    .btn-container {
+      cursor: default;
+      box-shadow: none;
+    }
+  }
+}

package/src/js/optionsMenu/optionsMenu.tsx

@@ -0,0 +1,187 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/optionsMenu.scss';
+
+import React, {ReactElement, ReactNode} from 'react';
+import classNames from "classnames";
+import {hasHover} from "../util/controlUtil";
+import {ElementPosition, MenuPlacement, OptionsMenuItem} from '../util/interfaces';
+import AwesomeIcon from '../icon/awesomeIcon';
+import {directTimeout} from "../util/componentUtil";
+import {getScreenHeight, getScreenWidth} from '../util/responsiveUtil';
+
+interface Props {
+    onClickOption?: (option: React.ReactNode | OptionsMenuItem, evt: React.MouseEvent) => void;
+    onClickOptionIcon?: Function;
+    optionsComponent?: React.ReactElement;
+    options: OptionsMenuItem[];
+    placement: MenuPlacement;
+    containerClass?: string;
+    labelClassName?: string;
+    label?: string;
+    labelPosition: ElementPosition;
+}
+
+interface State {
+    open: boolean;
+}
+
+export default class OptionsMenu extends React.Component<Props, State> {
+    static defaultProps = {
+        placement: MenuPlacement.BOTTOM_RIGHT,
+        labelPosition: ElementPosition.RIGHT,
+    };
+
+    menuList: HTMLDivElement;
+    container: HTMLDivElement;
+
+    state: State = {
+        open: false,
+    };
+
+    onClickOption = (option: OptionsMenuItem) => (evt: React.MouseEvent) => {
+        if (option.disabled !== true) {
+            evt.stopPropagation();
+            const {onClickOption} = this.props;
+            this.onHideMenu();
+            if (option.onClick) option.onClick(evt);
+            else if (onClickOption) onClickOption(option, evt);
+        }
+    };
+
+    // noinspection JSUnusedGlobalSymbols
+    onOpenExternal = () => {
+        if (this.menuList && this.container) {
+            const {right, bottom} = this.container.getBoundingClientRect(),
+                coords = this.calculateMenuCoords(right, bottom);
+            this.menuList.style.left = coords.x + 'px';
+            this.menuList.style.top = coords.y + 'px';
+            this.onOpenMenu();
+        }
+    };
+
+    onClickOptionsIcon = (evt: React.MouseEvent) => {
+        if (this.menuList) {
+            const {onClickOptionIcon} = this.props,
+                {clientX, clientY} = evt, {x, y} = this.calculateMenuCoords(clientX, clientY);
+            this.menuList.style.left = x + 'px';
+            this.menuList.style.top = y + 'px';
+            this.onOpenMenu(true);
+            if (onClickOptionIcon) onClickOptionIcon(evt);
+        }
+    };
+
+    onHideMenu = () => {
+        this.setState({open: false});
+    };
+
+    onOpenMenu = (toggle: boolean = false) => {
+        if (toggle) this.setState({open: !this.state.open});
+        else this.setState({open: true});
+    };
+
+    calculateMenuCoords = (clickX: number, clickY: number) => {
+        let x = -999, y = -999;
+        if (this.menuList) {
+            const {placement} = this.props, screenWidth = getScreenWidth(), screenHeight = getScreenHeight(),
+                menuRect = this.menuList.getBoundingClientRect();
+            if (menuRect) {
+                const {width, height} = menuRect;
+                switch (placement) {
+                    case MenuPlacement.BOTTOM_LEFT:
+                        x = Math.max(clickX - width, 0);
+                        y = clickY + height > screenHeight ? screenHeight - height : clickY;
+                        break;
+                    case MenuPlacement.BOTTOM_RIGHT:
+                        x = clickX + width > screenWidth ? screenWidth - width : clickX;
+                        y = clickY + height > screenHeight ? screenHeight - height : clickY;
+                        break;
+                    case MenuPlacement.TOP_LEFT:
+                        x = Math.max(clickX - width, 0);
+                        y = Math.max(clickY - height, 0);
+                        break;
+                    case MenuPlacement.TOP_RIGHT:
+                        x = clickX + width > screenWidth ? screenWidth - width : clickX;
+                        y = Math.max(clickY - height, 0);
+                        break;
+                }
+            }
+        }
+        return {x, y};
+    };
+
+    attachListRef = (ref: HTMLDivElement) => {
+        this.menuList = ref;
+    };
+
+    attachContainerRef = (ref: HTMLDivElement) => {
+        this.container = ref;
+    };
+
+    clickListener = () => {
+        if (!hasHover(this.container))
+            this.onHideMenu();
+    };
+
+    addClickListener = () => {
+        document.addEventListener('click', this.clickListener);
+    };
+
+    removeClickListener = () => {
+        document.removeEventListener('click', this.clickListener);
+    };
+
+    renderOptionsElement = (): ReactElement => {
+        const {optionsComponent} = this.props;
+        if (optionsComponent) return React.cloneElement(optionsComponent, {onClick: this.onClickOptionsIcon});
+        return <AwesomeIcon name='ellipsis-v' className='options-icon' onClick={this.onClickOptionsIcon}/>
+    };
+
+    renderLabel = (position: ElementPosition): ReactNode => {
+        const {label, labelPosition, labelClassName} = this.props;
+        if (position !== labelPosition || !label?.length) return null;
+        return <label className={classNames('options-menu-label', labelPosition, labelClassName)}
+                      onClick={this.onClickOptionsIcon}>{label}</label>
+    }
+
+    renderOptionsList = (): React.ReactElement => {
+        const {options} = this.props, {open} = this.state;
+        return (
+            <div ref={this.attachListRef} className={classNames('menu-options-list', open && 'visible')}>
+                {options.map((option, key) => (
+                    <div className={classNames('menu-option', option.disabled === true && 'disabled')} key={key}
+                         onClick={this.onClickOption(option)}>
+                        {(option.icon && (!option.iconPlacement || option.iconPlacement === ElementPosition.LEFT)) &&
+                        option.icon}
+                        <label className='menu-option-label'>{option.label}</label>
+                        {(option.icon && option.iconPlacement === ElementPosition.RIGHT) && option.icon}
+                    </div>
+                ))}
+            </div>
+        )
+    };
+
+    componentDidUpdate = (props: Props, prevState: State) => {
+        const {open} = this.state;
+        if (open && !prevState.open) directTimeout(this.addClickListener);
+        else if (!open && prevState.open) directTimeout(this.removeClickListener);
+    };
+
+    componentWillUnmount = () => {
+        this.removeClickListener();
+    };
+
+    render = () => {
+        const {containerClass} = this.props;
+        return (
+            <div className={classNames('option-menu-container', containerClass)} ref={this.attachContainerRef}>
+                {this.renderLabel(ElementPosition.LEFT)}
+                {this.renderOptionsElement()}
+                {this.renderLabel(ElementPosition.RIGHT)}
+                {this.renderOptionsList()}
+            </div>
+        )
+    };
+};

package/src/js/optionsMenu/style/optionsMenu.scss

@@ -0,0 +1,70 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.option-menu-container {
+  display: flex;
+  align-items: center;
+
+  .options-icon {
+    cursor: pointer;
+    font-size: 1.5rem;
+  }
+
+  .options-menu-label {
+    &.left {
+      margin-right: .5rem;
+    }
+
+    &.right {
+      margin-left: .5rem;
+    }
+  }
+
+  .menu-options-list {
+    @include backgroundShadow;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
+    z-index: $z-index-dialog;
+
+    .menu-option {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: .5rem 1rem;
+      background-color: white;
+      cursor: pointer;
+      transition: background-color .2s ease-in-out;
+
+      .menu-option-label {
+        margin: 0 .3rem;
+        flex: 1;
+        text-align: center;
+        white-space: nowrap;
+      }
+
+      &:hover {
+        background-color: $color-gray-7;
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+
+        .menu-option-label {
+          color: $color-gray-3;
+        }
+      }
+    }
+
+    &.visible {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}