@dvrd/dvr-controls 1.0.4 → 1.0.7

package/src/js/select/selectController.tsx

@@ -1,341 +0,0 @@
-/*
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-import React, {FocusEventHandler, KeyboardEventHandler, MouseEventHandler} from 'react';
-import {Select} from "./select";
-import {ControlContext} from "../util/controlContext";
-import {
-    hasHover, isNull, stringContains, stringStartsWith, voidFunction
-} from "../util/controlUtil";
-import {ChangeFunction, SelectItemShape} from "../util/interfaces";
-import { generateComponentId } from '../util/componentUtil';
-
-export const SelectDefaultProps = {
-    error: '',
-    placeholder: '',
-    containerClass: '',
-    inputContainerClass: '',
-    labelClass: '',
-    itemContainerClass: '',
-    itemClass: '',
-    disabled: false,
-    selectOnly: false,
-    readOnly: false,
-    fullWidth: false,
-    multiple: false,
-    label: '',
-    unControlled: false,
-    itemsHeight: 'fit-content',
-    mobileNative: false,
-    itemsPosition: 'absolute',
-    ignoreScroll: false,
-};
-
-export interface SelectProps {
-    onSelect?: any;
-    onMouseEnter?: MouseEventHandler;
-    onMouseLeave?: MouseEventHandler;
-    onBlur?: FocusEventHandler;
-    onFocus?: FocusEventHandler;
-    onClick?: MouseEventHandler;
-    onChangeSearch?: ChangeFunction;
-    onEnter?: KeyboardEventHandler;
-    renderItems?: Function;
-    error: string | null;
-    id?: string;
-    placeholder: string | null;
-    value: string | string[] | number | number[] | null;
-    containerClass: string;
-    inputContainerClass: string;
-    labelClass: string;
-    itemContainerClass: string;
-    itemClass: string;
-    baseColor?: string;
-    itemsHeight: string;
-    itemsPosition: 'relative' | 'absolute' | 'fixed' | 'sticky';
-    ignoreScroll: boolean;
-    label: string;
-    disabled: boolean;
-    selectOnly: boolean;
-    readOnly: boolean;
-    fullWidth: boolean;
-    items: SelectItemShape[];
-    multiple: boolean;
-    unControlled: boolean;
-    mobileNative: boolean;
-    forceDisplayItems?: boolean;
-}
-
-interface State {
-    searchValue: string;
-    isHovered: boolean;
-    isFocused: boolean;
-    itemsOpen: boolean;
-    hoverItem: string | number | null;
-    value: string | string[] | number | number[] | null;
-    itemsCoords: {
-        top: number;
-        scrollTop: number;
-        left: number;
-    };
-}
-
-// noinspection JSUnusedGlobalSymbols
-export default class SelectController extends React.Component<SelectProps, State> {
-    declare context: React.ContextType<typeof ControlContext>;
-    static contextType = ControlContext;
-
-    static defaultProps = SelectDefaultProps;
-
-    state: State = {
-        searchValue: '',
-        isHovered: false,
-        isFocused: false,
-        itemsOpen: false,
-        hoverItem: null,
-        value: this.props.value,
-        itemsCoords: {
-            top: 0,
-            scrollTop: 0,
-            left: 0,
-        }
-    };
-
-    private id = generateComponentId(this.props.id);
-    private isScrolling: boolean = false;
-
-    hoverTimeout: number | null = null;
-
-    onSelect = (item: SelectItemShape) => (evt: MouseEvent) => {
-        evt.stopPropagation();
-        const {onSelect, multiple, value, selectOnly} = this.props, itemValue = item.value;
-        if (item.selectable === null || item.selectable === undefined || item.selectable) {
-            if (onSelect !== undefined && onSelect !== null)
-                if (multiple) {
-                    const selected: (string | number)[] = (value as (string | number)[]);
-                    if (selected.includes(itemValue)) selected.splice(selected.indexOf(itemValue), 1);
-                    else selected.push(itemValue);
-                    if (!selectOnly) this.getInput()?.focus();
-                    this.setState({value: selected as (string | number[])});
-                    onSelect(selected, evt);
-                } else {
-                    this.setState({value: itemValue});
-                    onSelect(itemValue, evt);
-                }
-            this.setState({itemsOpen: multiple, isFocused: false});
-        }
-    };
-
-    onSelectNative = (evt: React.ChangeEvent<HTMLSelectElement>) => {
-        const value = evt.target.options[evt.target.selectedIndex].value, {onSelect} = this.props;
-        if (onSelect) onSelect(value, evt);
-    };
-
-    onClear = (evt: any) => {
-        evt.stopPropagation();
-        const {multiple, onSelect} = this.props;
-        if (onSelect !== null && onSelect !== undefined) {
-            if (multiple) onSelect([]);
-            else onSelect(null);
-        }
-    };
-
-    onMouseEnter = (evt: any) => {
-        const {onMouseEnter} = this.props;
-        this.setState({isHovered: true});
-        if (onMouseEnter !== undefined && onMouseEnter !== null)
-            onMouseEnter(evt);
-    };
-
-    onMouseLeave = (evt: any) => {
-        const {onMouseLeave} = this.props;
-        this.setState({isHovered: false});
-        if (onMouseLeave !== undefined && onMouseLeave !== null)
-            onMouseLeave(evt);
-    };
-
-    onMouseEnterItem = (item: SelectItemShape) => () => {
-        const value = item.value;
-        if (item.selectable === null || item.selectable === undefined || item.selectable) {
-            if (this.hoverTimeout !== null)
-                window.clearTimeout(this.hoverTimeout);
-            this.setState({hoverItem: value});
-        }
-    };
-
-    onMouseLeaveItem = () => {
-        this.hoverTimeout = window.setTimeout(() => {
-            this.setState({hoverItem: null});
-        }, 200)
-    };
-
-    onSearch = (value: string) => {
-        const {onChangeSearch} = this.props;
-        this.setState({searchValue: value});
-        if (onChangeSearch) onChangeSearch(value);
-    };
-
-    onFocus = (evt: any) => {
-        const {onFocus, disabled, readOnly} = this.props;
-        if (disabled || readOnly) return;
-        this.setItemsContainerCoords(() => {
-            this.setState({isFocused: true, itemsOpen: true});
-        });
-        if (onFocus !== undefined && onFocus !== null)
-            onFocus(evt);
-    };
-
-    onClickLabel = (evt: any) => {
-        const {onClick, disabled, readOnly, selectOnly} = this.props;
-        if (disabled || readOnly) return;
-        if (selectOnly)
-            this.setItemsContainerCoords(() => {
-                this.setState({itemsOpen: !this.state.itemsOpen});
-            });
-        else {
-            evt.preventDefault();
-            this.getInput()?.focus();
-        }
-        if (onClick !== undefined && onClick !== null)
-            onClick(evt);
-    };
-
-    onClick = (evt: React.MouseEvent) => {
-        const {onClick, selectOnly, disabled, readOnly} = this.props;
-        if (disabled || readOnly) return;
-        if (!selectOnly)
-            this.getInput()?.focus();
-        if (onClick !== undefined && onClick !== null)
-            onClick(evt);
-    };
-
-    onWindowClick = () => {
-        const container = this.getContainer();
-        if (container === null || !hasHover(container))
-            this.setState({itemsOpen: false, isFocused: false, searchValue: ''});
-    };
-
-    // noinspection JSUnusedGlobalSymbols
-    /**
-     * Function for external components to close the item container.
-     */
-    closeItems = () => {
-        this.setState({itemsOpen: false, isFocused: false});
-    };
-
-    setItemsContainerCoords = (callback: () => void = voidFunction) => {
-        const container = document.getElementById(this.id);
-        if (container) {
-            const {ignoreScroll} = this.props, box = container.getBoundingClientRect();
-            let top = box.top + box.height, scrollTop = ignoreScroll ? 0 : window.scrollY;
-            if (!ignoreScroll) top += window.scrollY;
-            this.setState({
-                itemsCoords: {
-                    top,
-                    scrollTop,
-                    left: box.left,
-                }
-            }, callback);
-        } else callback();
-    };
-
-    getInput = (): HTMLElement | null => document.getElementById(this.id + '-input');
-
-    getItems = (): SelectItemShape[] => {
-        const {searchValue} = this.state, {items, forceDisplayItems} = this.props;
-        if (isNull(searchValue) || forceDisplayItems) return items;
-        return this.getStartItems().concat(this.getContainItems());
-    };
-
-    getStartItems = (): SelectItemShape[] => {
-        const {items} = this.props, {searchValue} = this.state;
-        return items.filter(item => stringStartsWith(item.label.toString(), searchValue));
-    };
-
-    getContainItems = (): SelectItemShape[] => {
-        const {items} = this.props, {searchValue} = this.state;
-        return items.filter(item => {
-            const itemLabel = item.label.toString();
-            return !stringStartsWith(itemLabel, searchValue) && stringContains(itemLabel, searchValue);
-        });
-    };
-
-    getContainer = (): HTMLElement | null => document.getElementById(this.id);
-
-    scrollListener = () => {
-        if (!this.isScrolling) {
-            window.requestAnimationFrame(() => {
-                const {itemsCoords} = this.state;
-                this.setState({itemsCoords: Object.assign({}, itemsCoords, {scrollTop: window.scrollY})});
-                this.isScrolling = false;
-            });
-            this.isScrolling = true;
-        }
-    };
-
-    addClickListener = () => {
-        window.addEventListener('click', this.onWindowClick);
-    };
-
-    removeClickListener = () => {
-        window.removeEventListener('click', this.onWindowClick);
-    };
-
-    addScrollListener = () => {
-        if (this.props.itemsPosition === 'fixed' && !this.props.ignoreScroll)
-            document.addEventListener('scroll', this.scrollListener);
-    };
-
-    removeScrollListener = () => {
-        document.removeEventListener('scroll', this.scrollListener);
-    };
-
-    getBaseColor = (): string => {
-        const {baseColor} = this.props;
-        if (baseColor !== undefined && baseColor !== null) return baseColor;
-        // noinspection JSDeprecatedSymbols
-        return this.context.baseColor;
-    };
-
-    componentDidMount = () => {
-        this.addClickListener();
-    };
-
-    componentDidUpdate = (prevProps: SelectProps, prevState: State) => {
-        const {itemsOpen} = this.state, prevOpen = prevState.itemsOpen;
-        if (itemsOpen && !prevOpen)
-            // Items are opened
-            this.addScrollListener();
-        else if (!itemsOpen && prevOpen)
-            // Items are closed
-            this.removeScrollListener();
-    };
-
-    componentWillUnmount = () => {
-        this.removeClickListener();
-        this.removeScrollListener();
-    };
-
-    render = () => {
-        const {
-            error, placeholder, containerClass, itemContainerClass, inputContainerClass, labelClass,
-            itemClass, itemsHeight, disabled, selectOnly, readOnly, label, renderItems, fullWidth, multiple, value,
-            unControlled, mobileNative, itemsPosition, onEnter
-        } = this.props, {searchValue, isHovered, isFocused, itemsOpen, hoverItem, itemsCoords} = this.state;
-        const selectValue = unControlled ? this.state.value : value;
-        return <Select onSelect={this.onSelect} onMouseEnter={this.onMouseEnter}
-                       hoverItem={hoverItem} onMouseLeave={this.onMouseLeave} onSearch={this.onSearch}
-                       onFocus={this.onFocus} onClick={this.onClick} error={error} placeholder={placeholder}
-                       containerClass={containerClass} inputContainerClass={inputContainerClass}
-                       labelClass={labelClass} itemContainerClass={itemContainerClass} itemClass={itemClass}
-                       baseColor={this.getBaseColor()} searchValue={searchValue} id={this.id}
-                       itemsHeight={itemsHeight} disabled={disabled} selectOnly={selectOnly} readOnly={readOnly}
-                       isHovered={isHovered} isFocused={isFocused} itemsOpen={itemsOpen} items={this.getItems()}
-                       label={label} onMouseEnterItem={this.onMouseEnterItem} renderItems={renderItems}
-                       onMouseLeaveItem={this.onMouseLeaveItem} onClickLabel={this.onClickLabel}
-                       fullWidth={fullWidth} multiple={multiple} value={selectValue} onClear={this.onClear}
-                       unControlled={unControlled} onSelectNative={this.onSelectNative} mobileNative={mobileNative}
-                       itemsCoords={itemsCoords} itemsPosition={itemsPosition} onEnter={onEnter}/>;
-    };
-}

package/src/js/select/style/dvrdSelect.scss

@@ -1,140 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.dvrd-select-container {
-  transition: margin-bottom .2s ease-in-out;
-  position: relative;
-
-  .dvrd-select-label {
-    color: $color-blue-text;
-    font-size: .9rem;
-    margin-bottom: .25rem;
-    display: block;
-    transition: color .2s ease-in-out;
-  }
-
-  .content-container {
-    border: 1px solid #D9D9D9;
-    border-radius: 4px;
-    transition: border-color .2s ease-in-out;
-    display: grid;
-    grid-template-columns: 1fr fit-content(100%);
-    grid-column-gap: .25rem;
-    align-items: center;
-    padding: .75rem;
-    cursor: pointer;
-    background-color: white;
-
-    .dvrd-select-value {
-      color: $color-blue-text;
-      font-family: avenir-light, sans-serif;
-    }
-
-    .dvrd-select-search {
-      width: 100%;
-      outline: none;
-      border: none;
-      padding: .75rem;
-      color: #2A435F;
-      border-radius: inherit;
-      font-family: avenir-light, sans-serif;
-    }
-
-    .dvrd-select-arrow {
-      font-size: .9rem;
-      color: #686869;
-    }
-
-    &.search {
-      padding: 0 .75rem 0 0;
-    }
-  }
-
-  .dvrd-select-items {
-    background-color: white;
-    position: absolute;
-    left: 0;
-    z-index: $z-index-high;
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility .1s ease-in-out, opacity .1s ease-in-out, box-shadow .1s ease-in-out;
-    display: flex;
-    flex-direction: column;
-    min-width: 100%;
-    border-radius: .5rem;
-    overflow-y: auto;
-
-    .dvrd-select-item {
-      padding: .75rem;
-      color: $color-blue-text;
-      background-color: white;
-      transition: background-color .2s ease-in-out;
-      cursor: pointer;
-      font-family: avenir-light, sans-serif;
-      white-space: nowrap;
-
-      &:hover {
-        background-color: #e9f2fe;
-      }
-    }
-
-    &.bottom {
-      bottom: 0;
-      transform: translateY(100%);
-    }
-
-    &.top {
-      top: 0;
-      transform: translateY(calc(-100% + 1rem));
-    }
-
-    &.open {
-      @include backgroundShadow;
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
-  .dvrd-select-error {
-    position: absolute;
-    bottom: 0;
-    transform: translateY(1rem);
-    left: 0;
-    color: red;
-    font-size: .8rem;
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility .1s ease-in-out, opacity .1s ease-in-out;
-  }
-
-  &.disabled {
-    .content-container {
-      background-color: #F9FAFB;
-      cursor: not-allowed;
-    }
-  }
-
-  &.error {
-    margin-bottom: 1rem;
-
-    .dvrd-select-label {
-      color: red;
-    }
-
-    .content-container {
-      border-color: red;
-
-      .dvrd-select-value {
-        color: red;
-      }
-    }
-
-    .dvrd-select-error {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-}

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

@@ -1,199 +0,0 @@
-/*!
- * Copyright (c) 2021. Dave van Rijn Development
- */
-
-@import '../../../style/variables';
-
-.selectContainer {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  margin-top: .8rem;
-  margin-bottom: 0;
-  transition: margin-bottom .2s ease-in-out;
-
-  &.fullWidth {
-    width: 100%;
-
-    .selectInputContainer .valueLabelContainer, .inputContainer {
-      width: 100%;
-    }
-  }
-
-  .selectInputContainer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-
-    .clearSelectButton {
-      font-size: .6rem;
-      color: red;
-      transition: color .2s ease-in-out;
-      cursor: pointer;
-
-      &:hover {
-        color: $color-red-1;
-      }
-    }
-
-    .valueLabelContainer {
-      @include borderRadius(.2rem);
-      border-width: 2px;
-      border-style: solid;
-      padding: .7rem .6rem;
-      transition: border-color .2s ease-in-out;
-      width: 20.7rem;
-      box-sizing: border-box;
-      margin-right: .5rem;
-      position: relative;
-      background-color: white;
-      min-height: 2.8rem;
-
-      .selectLabel {
-        @include centerY;
-        position: absolute;
-        left: .2rem;
-        font-size: .8rem;
-        transition: top .2s ease-in-out, transform .2s ease-in-out, font-size .2s ease-in-out, left .2s ease-in-out;
-        background-color: white;
-        padding: .2rem;
-        color: $color-gray-4;
-
-        &.up {
-          @include borderRadius(.2rem);
-          transform: none;
-          top: -.8rem;
-          font-size: .7rem;
-          color: $color-gray-3;
-        }
-      }
-
-      .labelContainer {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .valueLabel {
-          font-size: 1rem;
-          color: $color-gray-5;
-          user-select: none;
-
-          &.disabled, &.readOnly {
-            color: $color-gray-4;
-          }
-        }
-      }
-
-      &.hasError {
-        .selectLabel {
-          color: red !important;
-        }
-      }
-    }
-
-    .selectInput {
-      flex: 1;
-      margin-right: .5rem;
-      margin-top: 0;
-      cursor: text;
-      margin-bottom: 0;
-
-      .searchIcon {
-        font-size: 1.2rem;
-        color: $color-gray-5;
-        padding: 0;
-      }
-    }
-
-    .caretIcon {
-      transition: transform .2s ease-in-out;
-
-      &.down {
-        transition-delay: .2s;
-        transform: rotate(180deg);
-      }
-    }
-
-    //.error {
-    //  position: absolute;
-    //  bottom: -1.4rem;
-    //  left: .4rem;
-    //  color: red;
-    //  font-size: .9rem;
-    //}
-  }
-
-  .itemsContainer {
-    @include borderRadius(.5rem);
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-    background-color: white;
-    box-sizing: border-box;
-    border-top-left-radius: 0;
-    border: 1px solid $color-gray-7;
-    z-index: $z-index-high;
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility .15s ease-in-out, opacity .15s ease-in-out;
-    transition-delay: .2s;
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    .itemContainer {
-      cursor: pointer;
-      background-color: white;
-      transition: color .2s ease-in-out, background-color .2s ease-in-out;
-      padding: .5rem;
-      user-select: none;
-
-      &.readOnly {
-        cursor: not-allowed;
-        .itemLabel {
-          color: $color-gray-3;
-        }
-      }
-
-      &.multiple {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .selectedCheck {
-          color: $color-green-whatsapp;
-          font-size: 1rem;
-        }
-      }
-
-      .itemLabel {
-        cursor: inherit;
-      }
-    }
-
-    &.open {
-      visibility: visible;
-      opacity: 1;
-      transition-delay: 0s;
-    }
-  }
-
-  &.error {
-    margin-bottom: 2.4rem;
-  }
-
-  &.disabled, &.readOnly {
-    .selectInputContainer {
-      &, .selectInput {
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-.native-select-container {
-  display: flex;
-  flex-direction: column;
-
-  .native-select-label {
-    margin-bottom: .2rem;
-  }
-}