@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/popup/withBackground.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/withBackground.scss';
+
+import React, {CSSProperties, PropsWithChildren, useEffect, useMemo, useRef} from 'react';
+import classNames from 'classnames';
+import {escapePressed, hasHover} from "../util/controlUtil";
+
+interface Props {
+    onClickBackground?: Function,
+    onClose: Function;
+    active: boolean;
+    backgroundColor?: string;
+    transparent?: boolean;
+    backgroundClass?: string;
+    containerClass?: string;
+    escapeDisabled?: boolean;
+    preventBackgroundClick?: boolean;
+    zIndex?: number;
+    allowBodyScroll?: boolean;
+}
+
+export default function WithBackground(props: PropsWithChildren<Props>) {
+    const {
+        active, escapeDisabled, backgroundClass, containerClass, children, backgroundColor, preventBackgroundClick,
+        onClickBackground, onClose, transparent, zIndex, allowBodyScroll
+    } = props;
+    const escapeListenerActive = useRef(false);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const backgroundStyle = useMemo(() => {
+        const color = transparent ? 'transparent' : backgroundColor ?? 'rgba(0,0,0,.2)';
+        const style: CSSProperties = {backgroundColor: color};
+        if (zIndex !== undefined) style.zIndex = zIndex;
+        return style;
+    }, [transparent, backgroundColor, zIndex]);
+
+    function _onClickBackground(evt: React.MouseEvent) {
+        if (preventBackgroundClick) return;
+        if (onClickBackground) onClickBackground(evt);
+        else if (!hasHover(contentRef.current)) onClose(evt);
+    }
+
+    function onKeyDown(evt: KeyboardEvent) {
+        if (escapeDisabled) return;
+        if (escapePressed(evt)) onClose();
+    }
+
+    function addEscapeListener() {
+        if (escapeListenerActive.current) return;
+        document.addEventListener('keydown', onKeyDown);
+        escapeListenerActive.current = true;
+    }
+
+    function removeEscapeListener() {
+        document.removeEventListener('keydown', onKeyDown);
+        escapeListenerActive.current = false;
+    }
+
+    function setBodyScroll(active: boolean) {
+        if (allowBodyScroll) return;
+        if (active)
+            document.body.style.overflowY = 'hidden';
+        else document.body.style.removeProperty('overflow-y');
+    }
+
+    useEffect(() => {
+        if (escapeDisabled) removeEscapeListener();
+        else if (active) addEscapeListener();
+        return function () {
+            removeEscapeListener();
+        }
+    }, [active, escapeDisabled]);
+
+    useEffect(() => {
+        setBodyScroll(active);
+        return function () {
+            removeEscapeListener();
+        }
+    }, [active]);
+
+    if (!active) return null;
+    return (
+        <div className={classNames('with-background', backgroundClass)} onMouseDown={_onClickBackground}
+             style={backgroundStyle}>
+            <div className={classNames('content-container', containerClass)} ref={contentRef}>
+                {children}
+            </div>
+        </div>
+    )
+}

package/src/js/select/async/asyncSelect.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/asyncSelect.scss';
+
+import React from 'react';
+import {PureComponent} from 'react';
+import {SelectDefaultProps, SelectProps} from "../selectController";
+import {Loader, Select, generateComponentId} from "../../../..";
+import classNames from "classnames";
+
+interface Props extends SelectProps {
+    onSearch: (value: string, callback: VoidFunction) => void;
+    loading: boolean;
+}
+
+export default class AsyncSelect extends PureComponent<Props> {
+    static defaultProps = SelectDefaultProps;
+
+    private searchValue: string = '';
+    private id: string = generateComponentId(this.props.id);
+
+    onChangeSearch = (value: string) => {
+        this.searchValue = value;
+    };
+
+    onEnter = () => {
+        this.props.onSearch(this.searchValue, this.focusInput);
+    };
+
+    focusInput = () => {
+        const input = document.getElementById(`${this.id}-input`);
+        if (input) input.focus();
+    };
+
+    render = () => {
+        const {loading, fullWidth} = this.props;
+        return (
+            <div className={classNames('dvr-async-select', fullWidth && 'fw')}>
+                <Loader active={loading} containerClass='dvr-async-select-loader' size='2rem' disableBackground/>
+                <Select {...this.props} onChangeSearch={this.onChangeSearch} onEnter={this.onEnter} disabled={loading}
+                        id={this.id} forceDisplayItems/>
+            </div>
+        )
+    };
+}

package/src/js/select/async/style/asyncSelect.scss

@@ -0,0 +1,23 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../../style/variables';
+
+.dvr-async-select {
+  display: inline-block;
+  position: relative;
+
+  .dvr-async-select-loader {
+    position: absolute;
+    right: 2.5rem;
+    top: 1.2rem;
+    width: min-content;
+    height: auto;
+    left: unset;
+  }
+
+  &.fw {
+    width: 100%;
+  }
+}

package/src/js/select/dvrdSelect.tsx

@@ -0,0 +1,214 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+import './style/dvrdSelect.scss';
+
+import React, {CSSProperties, MouseEventHandler, PureComponent, ReactElement} from 'react';
+import classNames from 'classnames';
+import {ChangeFunction, ErrorType, SelectItemShape} from '../util/interfaces';
+import {hasHover, stopPropagation} from '../util/controlUtil';
+import AwesomeIcon from '../icon/awesomeIcon';
+
+interface Props {
+    onChange: (value: string | number) => MouseEventHandler;
+    onChangeSearch: ChangeFunction;
+    value: string | number;
+    items: SelectItemShape[];
+    disabled?: boolean;
+    error?: ErrorType;
+    label?: string;
+    className?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    arrowClassName?: string;
+    errorClassName?: string;
+    itemContainerClassName?: string;
+    itemClassName?: string;
+    itemsPosition: 'top' | 'bottom';
+    selectOnly: boolean;
+    searchValue: string;
+    optionsContainerHeight: number | string;
+}
+
+interface State {
+    open: boolean;
+    searchFocused: boolean;
+}
+
+export default class DvrdSelect extends PureComponent<Props, State> {
+    private container: HTMLDivElement;
+    state: State = {
+        open: false,
+        searchFocused: false,
+    };
+
+    hasError = (): boolean => this.props.error !== undefined && this.props.error !== null;
+
+    onClickElement = (evt: React.MouseEvent) => {
+        evt.stopPropagation();
+        if (!this.props.disabled)
+            this.setState({open: !this.state.open});
+    };
+
+    onClickItem = (value: string | number) => (evt: React.MouseEvent) => {
+        evt.stopPropagation();
+        this.props.onChange(value)(evt);
+        this.setState({open: false});
+    };
+
+    onFocusInput = () => {
+        this.setState({searchFocused: true, open: true});
+    };
+
+    onBlurInput = () => {
+        window.setTimeout(() => {
+            this.setState({searchFocused: false});
+            this.props.onChangeSearch({target: {value: ''}});
+        }, 200);
+    };
+
+    getLongestValue = (): string => {
+        const {items} = this.props;
+        let longest: string = '';
+        for (const item of items) {
+            if (item.label.toString().length > longest.length) {
+                longest = item.label.toString();
+            }
+        }
+        return longest;
+    };
+
+    getValueLabel = (): string | number => {
+        const {value, items} = this.props;
+        for (const item of items) {
+            if (item.value === value) return this.getItemLabel(item);
+        }
+        return '';
+    }
+
+    getItemLabel = (item: SelectItemShape): string | number => {
+        const {label} = item;
+        if (['string', 'number'].includes(typeof label)) return label as string | number;
+        else if (!!item.valueLabel) return item.valueLabel;
+        return item.value;
+    }
+
+    getItemsContainerStyle = (): CSSProperties => {
+        let {optionsContainerHeight} = this.props;
+        if (typeof optionsContainerHeight === 'number') optionsContainerHeight = `${optionsContainerHeight}px`;
+        return {maxHeight: optionsContainerHeight};
+    }
+
+    renderLabel = () => {
+        const {labelClassName, label} = this.props;
+        if (!label) return null;
+        return <label className={classNames('dvrd-select-label', labelClassName)}
+                      onClick={this.onClickElement}>{label}</label>
+    };
+
+    renderValue = () => {
+        const {valueClassName, selectOnly, searchValue, onChangeSearch, disabled} = this.props,
+            {searchFocused} = this.state, valueLabel = this.getValueLabel();
+        if (selectOnly)
+            return (
+                <div style={{display: 'flex', flexDirection: 'column'}}>
+                    <label className={classNames('dvrd-select-value', valueClassName)}
+                           onClick={this.onClickElement}>{valueLabel}</label>
+                    <label style={{height: 0, visibility: 'hidden'}}>{this.getLongestValue()}</label>
+                </div>
+            );
+        const value = searchFocused ? searchValue : valueLabel;
+        return <input className='dvrd-select-search' value={value} onChange={onChangeSearch} disabled={disabled}
+                      onFocus={this.onFocusInput} onBlur={this.onBlurInput} onClick={stopPropagation}/>
+    };
+
+    renderArrow = () => {
+        const {arrowClassName} = this.props, {open} = this.state;
+        return <AwesomeIcon name='chevron-down' onClick={this.onClickElement}
+                            className={classNames('dvrd-select-arrow', open && 'open', arrowClassName)}/>;
+    };
+
+    renderItems = () => {
+        const {disabled, itemContainerClassName, itemsPosition} = this.props, {open} = this.state;
+        const items = this.props.items.filter((item: SelectItemShape) => {
+            if (item.selectable === false) return false;
+            if (typeof item.label === 'string') return item.label.length > 0;
+            return true;
+        })
+        return (
+            <div
+                className={classNames('dvrd-select-items', (open && !disabled) && 'open', itemsPosition,
+                    itemContainerClassName)} style={this.getItemsContainerStyle()}>
+                {items.map(this.renderItem)}
+            </div>
+        )
+    };
+
+    renderItem = (item: SelectItemShape, index: number) => {
+        const {label, value} = item;
+        const {itemClassName} = this.props;
+        if (['number', 'string'].includes(typeof label)) return (
+            <label key={index} className={classNames('dvrd-select-item', itemClassName)}
+                   onClick={this.onClickItem(value)}>{label}</label>
+        );
+        const labelElement: ReactElement = label as ReactElement;
+        const onClick = (evt: React.MouseEvent) => {
+            this.onClickItem(value)(evt);
+            labelElement.props.onClick?.(evt);
+        };
+        const className = classNames(labelElement.props.className, 'dvrd-select-item', itemClassName);
+        return React.cloneElement(labelElement, Object.assign({}, labelElement.props, {
+            onClick,
+            className,
+            key: index
+        }));
+    }
+
+    renderError = () => {
+        if (!this.hasError()) return null;
+        const {error, errorClassName} = this.props;
+        return <label className={classNames('dvrd-select-error', errorClassName)}>{error}</label>
+    };
+
+    addClickListener = () => {
+        document.addEventListener('click', this.clickListener);
+    };
+
+    removeClickListener = () => {
+        document.removeEventListener('click', this.clickListener);
+    }
+
+    clickListener = () => {
+        if (!hasHover(this.container)) this.setState({open: false});
+    };
+
+    componentDidUpdate = (props: Props, prevState: State) => {
+        const {open} = this.state, prevOpen = prevState.open;
+        if (open && !prevOpen) this.addClickListener();
+        else if (!open && prevOpen) this.removeClickListener();
+    };
+
+    componentWillUnmount = () => {
+        this.removeClickListener();
+    };
+
+    render = () => {
+        const {className, disabled, selectOnly} = this.props, {open} = this.state;
+        return (
+            <div
+                className={classNames('dvrd-select-container', disabled && 'disabled', open && 'open',
+                    this.hasError() && 'error', className)}
+                ref={(ref: HTMLDivElement) => {
+                    this.container = ref
+                }} onClick={this.onClickElement}>
+                {this.renderLabel()}
+                <div className={classNames('content-container', !selectOnly && 'search')}>
+                    {this.renderValue()}
+                    {this.renderArrow()}
+                </div>
+                {this.renderItems()}
+                {this.renderError()}
+            </div>
+        )
+    };
+};

package/src/js/select/dvrdSelectController.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React, {PureComponent} from 'react';
+import DvrdSelect from "./dvrdSelect";
+import {ChangeFunction, ErrorType, SelectItemShape} from "../util/interfaces";
+import {stringContains} from '../util/controlUtil';
+
+interface Props {
+    onChange: ChangeFunction;
+    value: string | number;
+    items: SelectItemShape[];
+    disabled?: boolean;
+    label?: string;
+    error?: ErrorType;
+    className?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    arrowClassName?: string;
+    errorClassName?: string;
+    itemContainerClassName?: string;
+    itemClassName?: string;
+    itemsPosition: 'top' | 'bottom';
+    selectOnly: boolean;
+    optionsContainerHeight: number | string;
+}
+
+interface State {
+    searchValue: string;
+}
+
+export default class DvrdSelectController extends PureComponent<Props, State> {
+    private select: DvrdSelect;
+
+    static defaultProps = {
+        itemsPosition: 'bottom',
+        selectOnly: true,
+        optionsContainerHeight: '15rem',
+    };
+
+    state: State = {
+        searchValue: '',
+    };
+
+    onChange = (value: string) => () => {
+        this.props.onChange(value);
+    };
+
+    onChangeSearch = (evt: React.ChangeEvent<HTMLInputElement>) => {
+        const {value} = evt.target;
+        this.setState({searchValue: value});
+    };
+
+    onOpen = (evt: React.MouseEvent) => {
+        if (this.select) this.select.onClickElement(evt);
+    };
+
+    getItems = () => {
+        const items = this.props.items.slice(), {searchValue} = this.state;
+        if (!searchValue) return items;
+        return items.filter((item) => stringContains(item.label.toString(), searchValue))
+    }
+
+    render = () => {
+        const {
+            arrowClassName, label, error, className, labelClassName, valueClassName, itemContainerClassName,
+            itemClassName, errorClassName, disabled, value, itemsPosition, selectOnly, optionsContainerHeight
+        } = this.props, {searchValue} = this.state;
+        return (
+            <DvrdSelect onChange={this.onChange} value={value} items={this.getItems()} disabled={disabled}
+                        errorClassName={errorClassName} itemClassName={itemClassName}
+                        itemContainerClassName={itemContainerClassName} valueClassName={valueClassName}
+                        labelClassName={labelClassName} className={className} error={error} label={label}
+                        arrowClassName={arrowClassName} itemsPosition={itemsPosition} ref={(ref: DvrdSelect) => {
+                this.select = ref
+            }} searchValue={searchValue} onChangeSearch={this.onChangeSearch} selectOnly={selectOnly}
+                        optionsContainerHeight={optionsContainerHeight}/>
+        );
+    }
+};