@dvrd/dvr-controls 1.0.4 → 1.0.7

package/src/js/select/dvrdSelect.tsx

@@ -1,185 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-import './style/dvrdSelect.scss';
-
-import React, {CSSProperties, MouseEventHandler, PureComponent} 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 item.inputLabel ?? item.label;
-        return '';
-    }
-
-    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 {items, disabled, itemContainerClassName, itemClassName, itemsPosition} = this.props, {open} = this.state;
-        return (
-            <div
-                className={classNames('dvrd-select-items', (open && !disabled) && 'open', itemsPosition,
-                    itemContainerClassName)} style={this.getItemsContainerStyle()}>
-                {items.filter((item) => item.label.toString().length > 0 && item.selectable !== false)
-                    .map((item: SelectItemShape, index: number) => (
-                        <label key={index} className={classNames('dvrd-select-item', itemClassName)}
-                               onClick={this.onClickItem(item.value)}>{item.label}</label>
-                    ))}
-            </div>
-        )
-    };
-
-    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

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

package/src/js/select/select.tsx

@@ -1,310 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import './style/select.scss';
-
-import React, {CSSProperties, FocusEventHandler, KeyboardEventHandler, MouseEventHandler} from 'react';
-import classNames from 'classnames';
-import {Breakpoint, ChangeFunction, ElementPosition, OrnamentShape, SelectItemShape} from "../util/interfaces";
-import AwesomeIcon from '../icon/awesomeIcon';
-import TextField from '../input/v2/inputController_v2';
-import {isNotNull, isNull, pxToRem, voidFunction} from "../util/controlUtil";
-import {colorIsWhite, convertColor, hexToRgb} from "../util/colorUtil";
-import {ControlContext} from "../util/controlContext";
-import {getBreakPoint, getScreenHeight } from '../util/responsiveUtil';
-
-interface Props {
-    onSelect: any;
-    onSelectNative: React.ChangeEventHandler;
-    onClickLabel: any;
-    onMouseEnter: MouseEventHandler;
-    onMouseLeave: MouseEventHandler;
-    onMouseEnterItem: any;
-    onMouseLeaveItem: MouseEventHandler;
-    onSearch: ChangeFunction;
-    onClear: any;
-    onEnter?: KeyboardEventHandler;
-    renderItems?: Function;
-    onFocus: FocusEventHandler;
-    onClick: any;
-    error: string | null;
-    placeholder: string | null;
-    value: string | string[] | number | number[] | null;
-    hoverItem: string | number | null;
-    containerClass: string;
-    inputContainerClass: string;
-    labelClass: string;
-    itemContainerClass: string;
-    itemClass: string;
-    baseColor: string;
-    searchValue: string;
-    id: string;
-    itemsHeight?: string;
-    itemsPosition: 'absolute' | 'fixed' | 'relative' | 'sticky';
-    label: string;
-    disabled: boolean;
-    selectOnly: boolean;
-    readOnly: boolean;
-    isHovered: boolean;
-    isFocused: boolean;
-    itemsOpen: boolean;
-    fullWidth: boolean;
-    items: SelectItemShape[];
-    multiple: boolean;
-    unControlled: boolean;
-    mobileNative: boolean;
-    itemsCoords: {
-        top: number;
-        scrollTop: number;
-        left: number;
-    };
-}
-
-export class Select extends React.Component<Props> {
-    declare context: React.ContextType<typeof ControlContext>;
-    static contextType = ControlContext;
-
-    getBaseColor = (allowWhite: boolean = true): string => {
-        const {baseColor} = this.props, {contrastColor} = this.context;
-        let color = convertColor(baseColor);
-        if (colorIsWhite(color)) {
-            if (allowWhite) return color;
-            return convertColor(contrastColor);
-        }
-        return color;
-    }
-
-    getItemLabel = (value: string | string[] | number | number[] | null): string => {
-        if (value === null) return '';
-        if (this.props.multiple) return this.getMultipleItemLabel((value as (string | number)[]));
-
-        const {items} = this.props;
-        for (const item of items)
-            if (item.value === value) {
-                if (item.inputLabel !== null && item.inputLabel !== undefined) return item.inputLabel;
-                return item.label.toString();
-            }
-        return '';
-    };
-
-    getMultipleItemLabel = (value: (string | number)[]): string => {
-        if (value.length === 1) {
-            const selected: string | number = value[0];
-            const {items} = this.props;
-            for (const item of items)
-                if (item.value === selected) {
-                    if (item.inputLabel !== null && item.inputLabel !== undefined) return item.inputLabel;
-                    return item.label.toString();
-                }
-        } else if (value.length > 1) return `${value.length} geselecteerd`;
-        return '';
-    };
-
-    getContainerClass = (): string => {
-        const {containerClass, error, disabled, fullWidth, readOnly} = this.props,
-            classes = ['selectContainer'];
-        if (isNotNull(error)) classes.push('error');
-
-        if (disabled) classes.push('disabled');
-        else if (readOnly) classes.push('readOnly');
-
-        if (fullWidth) classes.push('fullWidth');
-        classes.push(containerClass);
-        return classNames(classes);
-    };
-
-    getContainerStyle = (): object => {
-        const {baseColor, disabled, readOnly, error, isFocused, isHovered} = this.props;
-        let color = 'color-gray-4';
-        if (isNotNull(error)) color = 'red';
-        else if (!(disabled || readOnly) && isFocused && isHovered) color = baseColor;
-
-        return {borderColor: convertColor(color)};
-    };
-
-    getInputClass = (): string => {
-        const {inputContainerClass} = this.props, classes = ['selectInput'];
-        classes.push(inputContainerClass);
-        return classNames(classes);
-    };
-
-    getItemStyle = (itemValue: string | number) => {
-        const {hoverItem, multiple, value} = this.props, baseColor = this.getBaseColor(false);
-        let color = 'white';
-        if (hoverItem === itemValue) {
-            const rgb = hexToRgb(convertColor(baseColor));
-            if (rgb !== null) {
-                const {r, g, b} = rgb;
-                color = `rgba(${r},${g},${b},.4`;
-            }
-        } else if ((multiple && (value as (string | number)[]).includes(itemValue)) || value === itemValue) {
-            const rgb = hexToRgb(convertColor(multiple ? 'color-green-whatsapp' : baseColor));
-            if (rgb !== null) {
-                const {r, g, b} = rgb;
-                color = `rgba(${r},${g},${b},.3`;
-            }
-        }
-        return {backgroundColor: color};
-    };
-
-    getNativeLabelStyle = (): { color: string, fontWeight: number } => {
-        const {contrastColor} = this.context, color = convertColor(contrastColor), fontWeight = 500;
-        return {color, fontWeight};
-    };
-
-    getItemContainerStyle = (): CSSProperties => {
-        const styles: CSSProperties = {}, {items, itemsHeight, itemsPosition, itemsCoords} = this.props,
-            renderAbleItems = items.filter((item) => item.label.toString().length > 0);
-        styles.maxHeight = isNull(itemsHeight) ? pxToRem(Math.min(renderAbleItems.length, 4) * 35) + 'rem' : itemsHeight;
-        styles.position = itemsPosition;
-        if (itemsPosition === 'absolute') {
-            styles.top = '100%';
-            styles.left = 0;
-            styles.width = '100%';
-        } else if (itemsPosition === 'fixed') {
-            const top = itemsCoords.top - itemsCoords.scrollTop;
-            styles.top = top + 'px';
-            styles.maxHeight = getScreenHeight() - top + 'px';
-            styles.left = itemsCoords.left + 'px';
-            styles.width = this.getContainerWidth() + 'px';
-        }
-        return styles;
-    };
-
-    itemIsSelected = (itemValue: string | number) => {
-        const {value, multiple} = this.props;
-        if (value === null) return false;
-        if (multiple && Array.isArray(value)) return (value as (string | number)[]).includes(itemValue);
-        return value === itemValue;
-    };
-
-    setMinItemsWidth = () => {
-        if (this.props.itemsPosition === 'fixed') {
-            const container = document.getElementById(this.props.id);
-            if (container) {
-                const itemsContainer = container.querySelector('div.itemsContainer') as HTMLDivElement | null;
-                if (itemsContainer) itemsContainer.style.width = this.getContainerWidth() + 'px;';
-            }
-        }
-    };
-
-    getContainerWidth = (): number => {
-        const container = document.getElementById(this.props.id + '-input');
-        if (container)
-            return container.getBoundingClientRect().width;
-        return 0;
-    };
-
-    renderInput = (): React.ReactNode => {
-        const {
-            searchValue, onSearch, onFocus, disabled, readOnly, selectOnly, value, id, label, itemsOpen, error,
-            onClickLabel, multiple, onClear, onEnter,
-        } = this.props;
-        if (selectOnly)
-            return (
-                <div className={classNames('valueLabelContainer', isNotNull(error) && 'hasError')}
-                     onClick={onClickLabel} style={this.getContainerStyle()} id={id}>
-                    <label className={classNames('selectLabel', isNotNull(value) && 'up')}>{label}</label>
-                    <div className='labelContainer'>
-                        <label className={classNames('valueLabel', disabled && 'disabled', readOnly && 'readOnly')}>
-                            {this.getItemLabel(value)}</label>
-                        {(multiple && isNotNull(value)) &&
-                        <span className='common-icon-cross clearSelectButton' onClick={onClear}/>}
-                    </div>
-                    <label className='error'>{error}</label>
-                </div>
-            );
-
-        const inputValue = itemsOpen ? searchValue : this.getItemLabel(value);
-        return <TextField value={inputValue} onChange={onSearch} onFocus={onFocus} id={id}
-                          ornaments={this.renderInputOrnament()} label={label} error={error}
-                          className={this.getInputClass()} disabled={disabled} readOnly={readOnly}
-                          inputProps={{autoComplete: 'off'}} onEnter={onEnter}/>;
-        // return <InputController value={inputValue} onChange={onSearch} onFocus={onFocus} id={id + '-input'}
-        //                         ornaments={this.renderInputOrnament()} label={label} error={error}
-        //                         containerClass={this.getInputClass()} disabled={disabled} readOnly={readOnly}
-        //                         inputProps={{autoComplete: 'off'}} onEnter={onEnter}/>;
-    };
-
-    renderInputOrnament = (): OrnamentShape | OrnamentShape[] => {
-        const {searchValue, multiple, value, onClear} = this.props;
-        if (multiple && isNotNull(value))
-            return {
-                placement: ElementPosition.RIGHT,
-                element: <span className='common-icon-cross clearSelectButton' onClick={onClear}/>
-            };
-        if (isNull(searchValue))
-            return {placement: ElementPosition.RIGHT, element: <AwesomeIcon name='search' className='searchIcon'/>};
-        return [];
-    };
-
-    renderOrnament = (): React.ReactNode => {
-        const {itemsOpen, selectOnly, onClickLabel} = this.props;
-        return <AwesomeIcon name='chevron-up' className={classNames('caretIcon', !itemsOpen && 'down')}
-                            onClick={selectOnly ? onClickLabel : voidFunction}/>;
-    };
-
-    renderItemContainer = (): React.ReactNode => {
-        const {
-            itemContainerClass, items, itemsOpen, itemClass, onMouseEnterItem, onMouseLeaveItem, onSelect, renderItems,
-            multiple
-        } = this.props;
-        return (
-            <div className={classNames('itemsContainer', itemsOpen && 'open', itemContainerClass)}
-                 style={this.getItemContainerStyle()}>
-                {items.map((item, key) => {
-                    if(!item.label) return null;
-                    if (renderItems !== null && renderItems !== undefined) return renderItems(item, key);
-                    return (
-                        <div key={key}
-                             className={classNames('itemContainer', multiple && 'multiple',
-                                 item.selectable === false && 'readOnly', itemClass)}
-                             onClick={onSelect(item)} onMouseEnter={onMouseEnterItem(item)}
-                             onMouseLeave={onMouseLeaveItem} style={this.getItemStyle(item.value)}>
-                            <label className={classNames('itemLabel', item.labelClass)}
-                                   style={item.labelStyle}>{item.label}</label>
-                            {(multiple && this.itemIsSelected(item.value)) &&
-                            <AwesomeIcon name='check' className='selectedCheck'/>}
-                        </div>
-                    )
-                })}
-            </div>
-        );
-    };
-
-    renderNative = (): React.ReactNode => {
-        const {items, onSelectNative, value, id, label} = this.props;
-        let selectValue: string = '';
-        if (Array.isArray(value) && value.length) selectValue = value[0].toString();
-        else if (value instanceof Number) selectValue = value.toString();
-        else if (typeof value === 'string') selectValue = value;
-        return (
-            <div className={classNames('native-select-container', this.props.containerClass)}>
-                <label htmlFor={id} style={this.getNativeLabelStyle()} className='native-select-label'>{label}</label>
-                <select id={id} onChange={onSelectNative} value={selectValue}>
-                    {items.map((item, index) => <option key={index} value={item.value}>{item.label}</option>)}
-                </select>
-            </div>
-        )
-    };
-
-    componentDidMount = () => {
-        this.setMinItemsWidth();
-    };
-
-    render = () => {
-        const {onClick, id, mobileNative} = this.props;
-        const breakPoint = getBreakPoint();
-        if ([Breakpoint.XS, Breakpoint.SM].includes(breakPoint) && mobileNative) return this.renderNative();
-        return (
-            <div className={this.getContainerClass()} style={this.getContainerStyle()} onClick={onClick} id={id}>
-                <div className='selectInputContainer'>
-                    {this.renderInput()}
-                    {this.renderOrnament()}
-                </div>
-                {this.renderItemContainer()}
-            </div>
-        )
-    }
-}