@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/select/select.tsx

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

package/src/js/select/selectController.tsx

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