@dvrd/dvr-controls 1.0.5 → 1.0.8

package/src/js/optionsList/dvrdOptionsList.tsx

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

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

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

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