superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.30

package/app-typescript/components/TreeSelect.tsx

@@ -1,46 +1,87 @@
-import { any } from "prop-types";
 import * as React from "react";
 import { Icon } from "./Icon";
+import { Loader } from "./Loader";
+import nextId from "react-id-generator";
+import _debounce from 'lodash/debounce';
+import { InputWrapper } from "./Form";
+import { createPopper } from '@popperjs/core';
+import {isEqual} from 'lodash';
+import {getTextColor} from './Label';
 
 interface IState<T> {
-    value?: Array<T>;
-    options?: Array<T>;
-    firstBranchOptions?: Array<T>;          // to return on first branch in dropdown
-    getLabel?: string;                      // label from props
-    getMultilevelArray?: string;            // array from props
-    openDropdown?: boolean;                 // open/close dropdown
-    activeTree?: Array<any>;                // for filtered array
-    filterArr?: Array<T>;                   // for filtered array
-    searchFieldValue?: string;              // filter value of input
-    buttonTree?: Array<any>;                // array of button (for backButton)
-    buttonValue?: Array<any>;               // button for name of category
-    buttonMouseEvent?: boolean;             // valueButton hover
-    selectBranchWithChildren?: boolean;
+    value: Array<T>;
+    options: Array<ITreeNode<T>>;
+    firstBranchOptions: Array<any>;
+    openDropdown: boolean;
+    activeTree: Array<any>;
+    filterArr: Array<any>;
+    searchFieldValue: string;
+    buttonTree: Array<any>;
+    buttonValue: any;
+    buttonMouseEvent: boolean;
+    loading: boolean;
+    // provera: boolean;
 }
 
-interface IProps<T> {
+interface IPropsBase<T> {
     value?: Array<T>;
-    options: Array<T>;
-    getLabel: string;
-    getMultilevelArray: string;
     selectBranchWithChildren?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     width?: string;
+    allowMultiple?: boolean;
+    loading?: boolean;
+    singleLevelSearch?: boolean;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    fullWidth?: boolean;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    label?: string;
+    disabled?: boolean;
+    getLabel(item: T): string;
+    getId(item: T): string;
+    getBackgroundColor?(item: T): string;
+    getBorderColor?(item: T): string;
     optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
-    valueTemplate?(item: T): React.ComponentType<T> | JSX.Element;
-    onChange(): void;
+    valueTemplate?(item: T, Wrapper: any): React.ComponentType<T> | JSX.Element;
+    onChange(e: Array<T>): void;
+}
+
+interface IPropsSync<T> extends IPropsBase<T> {
+    kind: 'synchronous';
+    getOptions(): Array<ITreeNode<T>>;
+}
+
+interface IPropsAsync<T> extends IPropsBase<T> {
+    kind: 'asynchronous';
+    getOptions?(): Array<ITreeNode<T>>;
+    searchOptions(term: string, callback?: (options: Array<ITreeNode<T>>) => void): any;
+}
+
+type IProps<T> = IPropsSync<T> | IPropsAsync<T>;
+
+export interface ITreeNode<T> {
+    value: T;
+    children?: Array<ITreeNode<T>>;
 }
 
 export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
-    private dropdownRef: any;
-    private openDropdownRef: any;
+    private dropdownRef: React.RefObject<HTMLInputElement>;
+    private openDropdownRef: React.RefObject<HTMLButtonElement>;
+    private htmlId: string = nextId();
+    private popperInstance: any;
 
     constructor(props: IProps<T>) {
         super(props);
         this.state = {
             value: this.props.value ? this.props.value : [],
-            options: this.props.options ? this.props.options : [],
-            firstBranchOptions: this.props.options ? this.props.options : [],
+            options: this.props.getOptions ? this.props.getOptions() : [],
+            firstBranchOptions: this.props.getOptions ? this.props.getOptions() : [],
             activeTree: [],
             filterArr: [],
             searchFieldValue: '',
@@ -48,6 +89,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
             buttonValue: [],
             buttonMouseEvent: false,
             openDropdown: false,
+            loading: false,
+            // provera: false
         };
 
         this.removeClick = this.removeClick.bind(this);
@@ -55,62 +98,110 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.backButton = this.backButton.bind(this);
         this.handleButton = this.handleButton.bind(this);
         this.backButtonValue = this.backButtonValue.bind(this);
+        this.handleTree = this.handleTree.bind(this);
+        this.filteredItem = this.filteredItem.bind(this);
+        this.banchButton = this.banchButton.bind(this);
+        this.handleDebounce = this.handleDebounce.bind(this);
+        this.toggleMenu = this.toggleMenu.bind(this);
         this.dropdownRef = React.createRef();
         this.openDropdownRef = React.createRef();
     }
 
+    componentDidMount = () => {
+        this.recursion(this.state.options);
+        document.addEventListener("mousedown", (event: any) => {
+            if ((this.dropdownRef.current && !this.dropdownRef.current.contains(event.target))
+            && (this.openDropdownRef.current && !this.openDropdownRef.current.contains(event.target))) {
+                this.setState({openDropdown: false});
+            }
+        });
+    }
+
+    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
+        if (!isEqual(prevState.value, this.state.value)) {
+            this.props.onChange(this.state.value);
+        } else if (!isEqual(prevProps.value, this.props.value)) {
+            this.props.onChange(this.state.value);
+        }
+        if (prevState.openDropdown !== this.state.openDropdown) {
+            this.toggleMenu();
+        }
+        if (this.props.kind === 'synchronous') {
+            if ((prevState.activeTree !== this.state.activeTree)
+            || (prevState.filterArr !== this.state.filterArr)
+            || (prevState.options !== this.state.options)) {
+                this.popperInstance.update();
+            }
+        }
+    }
+
+    toggleMenu() {
+        if (this.state.openDropdown) {
+            if (this.openDropdownRef.current && this.dropdownRef.current) {
+                this.popperInstance = createPopper(this.openDropdownRef.current, this.dropdownRef.current, {
+                    placement: 'bottom-start',
+                    modifiers: [
+                        {
+                            name: 'offset',
+                            options: {
+                                offset: [-4, 4],
+                            },
+                        },
+                    ],
+                });
+            }
+        }
+    }
+
     removeClick(i: number) {
         let newTags = this.state.value;
-        newTags.splice(i, 1);
+        newTags?.splice(i, 1);
 
         this.setState({
             value: newTags,
         });
-        this.props.onChange();
+        this.props.onChange(this.state.value);
     }
 
-    handleMultiLevel(event, item) {
-        if (item[this.props.getMultilevelArray]) {
+    handleMultiLevel(item: ITreeNode<T>) {
+        if (item.children) {
             this.setState({
                 activeTree: [...this.state.activeTree, this.state.options],
-                options: item[this.props.getMultilevelArray],
+                options: item.children,
             });
         }
     }
 
-    handleButton(event, item) {
+    handleButton(item: ITreeNode<T>) {
         this.setState({
             buttonTree: [...this.state.buttonTree, this.state.buttonValue],
             buttonValue: item,
         });
     }
 
-    handleValue(event, item) {
-            let checkItem = this.state.value.find((valueItem: any) => {
-                return valueItem === item;
+    handleValue(event: React.MouseEvent<HTMLLIElement, MouseEvent>, item: ITreeNode<T>) {
+        if (this.props.allowMultiple) {
+            let checkItem = this.state.value.find((valueItem: T) => {
+                return this.props.getId(valueItem) === this.props.getId(item.value);
             });
-
             if (!checkItem) {
-                this.setState({value: [...this.state.value, item]});
+                this.setState({value: [...this.state.value, item.value]});
             }
-
             if (!event.ctrlKey) {
-                this.setState({options: this.state.firstBranchOptions, activeTree: [], openDropdown: false});
+                if (this.props.getOptions) {
+                    this.setState({options: this.state.firstBranchOptions, activeTree: [], openDropdown: false});
+                } else {
+                    this.setState({activeTree: [], openDropdown: false});
+                }
             }
             this.setState({buttonMouseEvent: false});
-    }
-
-    handleBranchValue(event, item) {
-        if (this.props.selectBranchWithChildren) {
-
-            let checkItem = this.state.value.find((valueItem: any) => {
-                return valueItem === item;
+        } else {
+            let checkItem = this.state.value.find((valueItem: T) => {
+                return this.props.getId(valueItem) === this.props.getId(item.value);
             });
-
             if (!checkItem) {
-                this.setState({value: [...this.state.value, item]});
+                this.setState({value: [item.value]});
             }
-
             if (!event.ctrlKey) {
                 this.setState({options: this.state.firstBranchOptions, activeTree: [], openDropdown: false});
             }
@@ -118,11 +209,86 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         }
     }
 
+    handleBranchValue(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, item: ITreeNode<T>) {
+        if (this.props.allowMultiple) {
+            if (this.props.selectBranchWithChildren) {
+                let checkItem = this.state.value.find((valueItem: T) => {
+                    return this.props.getId(valueItem) === this.props.getId(item.value);
+                });
+                if (!checkItem) {
+                    this.setState({value: [...this.state.value, item.value]});
+                }
+                if (!event.ctrlKey) {
+                    this.setState({options: this.state.firstBranchOptions, activeTree: [], openDropdown: false});
+                }
+                this.setState({buttonMouseEvent: false});
+            }
+        } else {
+            if (this.props.selectBranchWithChildren) {
+                let checkItem = this.state.value.find((valueItem: T) => {
+                    return this.props.getId(valueItem) === this.props.getId(item.value);
+                });
+                if (!checkItem) {
+                    this.setState({value: [item.value]});
+                }
+                if (!event.ctrlKey) {
+                    this.setState({options: this.state.firstBranchOptions, activeTree: [], openDropdown: false});
+                }
+                this.setState({buttonMouseEvent: false});
+            }
+        }
+    }
+
+    handleTree(event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeNode<T>) {
+        if (option.children) {
+            this.handleButton(option);
+            this.handleMultiLevel(option);
+            if (event.altKey && this.props.allowMultiple) {
+                if (this.props.selectBranchWithChildren) {
+                    let filteredItems: Array<T> = [];
+                    option.children.forEach((item: { value: T; }) => {
+                        if (!this.state.value.includes(item.value)) {
+                            filteredItems.push(item.value);
+                        }
+                    });
+                    this.setState({
+                        value: [...this.state.value, ...filteredItems],
+                        options: this.state.firstBranchOptions,
+                        openDropdown: false,
+                        activeTree: [],
+                    });
+                } else {
+                    let filteredItems: Array<T> = [];
+                    option.children.forEach((item: ITreeNode<T>) => {
+                        if (!this.state.value.includes(item.value)
+                        && !item.children) {
+                            filteredItems.push(item.value);
+                        }
+                    });
+                    if (filteredItems.length > 0) {
+                        this.setState({
+                            value: [...this.state.value, ...filteredItems],
+                            options: this.state.firstBranchOptions,
+                            openDropdown: false,
+                            activeTree: [],
+                        });
+                    }
+                }
+            }
+        } else {
+            this.handleValue(event, option);
+            if (!event.ctrlKey) {
+                this.setState({openDropdown: false});
+            }
+        }
+    }
+
     backButton = () => {
         if (this.state.activeTree.length > 0) {
             this.setState({
                 options: this.state.activeTree.pop(),
             });
+            return;
         } else {
             return false;
         }
@@ -134,197 +300,365 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         });
     }
 
-    recursion(arr) {
-        if (this.props.selectBranchWithChildren) {
-            arr.map((item: any) => {
-                this.state.filterArr.push(item);
-                if (item[this.props.getMultilevelArray]) {
-                    this.recursion(item[this.props.getMultilevelArray]);
-                }
-            });
-        } else {
-            arr.map((item: any) => {
-                if (!item[this.props.getMultilevelArray]) {
-                    this.state.filterArr.push(item);
+    recursion(arr: Array<ITreeNode<T>>) {
+        arr.map((item) => {
+            this.state.filterArr.push(item);
+            if (item.children) {
+                this.recursion(item.children);
+            }
+        });
+    }
+
+    filteredItem(arr: Array<ITreeNode<T>>) {
+        if (this.props.kind === 'synchronous') {
+            let filteredArr = arr.filter((item) => {
+                if (this.state.searchFieldValue) {
+                    if (this.props.getLabel(item.value)
+                    .toLowerCase().includes(this.state.searchFieldValue.toLowerCase())) {
+                        return item.value;
+                    } else {
+                        return;
+                    }
                 } else {
-                    this.recursion(item[this.props.getMultilevelArray]);
+                    return item.value;
                 }
             });
+
+            if (filteredArr.length === 0) {
+                return <li className="suggestion-item--nothing-found">Nothing fonud</li>;
+            } else {
+                return filteredArr.map((option, i) => {
+                    let selectedItem = this.state.value.some((obj) =>
+                        this.props.getId(obj) === this.props.getId(option.value),
+                    );
+                    return <li key={i}
+                    className={`suggestion-item suggestion-item--multi-select`}
+                    onClick={(event) => {
+                        this.setState({
+                            searchFieldValue: '',
+                        }),
+                        event.preventDefault();
+                        event.stopPropagation();
+                        this.handleTree(event, option);
+                    }}>
+                        {this.props.getBorderColor
+                        && <div className="item-border"
+                        style={{backgroundColor: this.props.getBorderColor(option.value)}}></div>}
+                        <span
+                        style={this.props.getBackgroundColor
+                            ? {backgroundColor: this.props.getBackgroundColor(option.value),
+                            color: getTextColor(this.props.getBackgroundColor(option.value))}
+                            : undefined}
+                        className={'suggestion-item--bgcolor'
+                        + (selectedItem ? ' suggestion-item--disabled' : '')}
+                        >
+                            {this.props.optionTemplate
+                            ? this.props.optionTemplate(option.value)
+                            : this.props.getLabel(option.value)}
+                        </span>
+                        {option.children && <span className="suggestion-item__icon">
+                            <Icon name="chevron-right-thin"></Icon>
+                        </span>}
+                    </li>;
+                });
+            }
+        } else if (this.props.kind === 'asynchronous') {
+            return this.state.options.map((item, i) => {
+                let selectedItem = this.state.value.some((obj) =>
+                    this.props.getId(obj) === this.props.getId(item.value),
+                );
+                return (
+                    <li key={i}
+                    className={`suggestion-item suggestion-item--multi-select`}
+                    onClick={(event) => {
+                    this.handleValue(event, item);
+                    }}>
+                        {this.props.optionTemplate
+                        ? this.props.optionTemplate(item.value)
+                        : <span
+                        className={selectedItem
+                        ? 'suggestion-item--disabled' : undefined}
+                        >
+                            {this.props.getLabel(item.value)}
+                        </span>}
+                    </li>
+                );
+            });
+        } else {
+            return;
         }
     }
 
-    componentDidMount = () => {
-        this.recursion(this.state.options);
-        document.addEventListener("mousedown", (event) => {
-            if ((this.dropdownRef.current && !this.dropdownRef.current.contains(event.target))
-            && (this.openDropdownRef.current && !this.openDropdownRef.current.contains(event.target))) {
-                this.setState({openDropdown: false});
-            }
-        });
+    banchButton() {
+        let selectedButton = this.state.value.some((obj) =>
+            this.props.getId(obj) === this.props.getId(this.state.buttonValue.value),
+        );
+
+        if (!selectedButton) {
+            return <button
+            className={'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : '')}
+            onMouseOver={() => this.setState({buttonMouseEvent: true})}
+            onMouseOut={() => this.setState({buttonMouseEvent: false})}
+            value={this.state.buttonValue}
+            onClick={(event) => this.handleBranchValue(event, this.state.buttonValue)}>
+                Choose entire category
+            </button>;
+        } else {
+            return <button
+            className={'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : '') + ' autocomplete__button--disabled'}
+            value={this.state.buttonValue}>
+                Category selected
+            </button>;
+        }
     }
 
-    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
-        if (prevState.value !== this.state.value) {
-            this.props.onChange();
-        } else if (prevProps.value !== this.props.value) {
-            this.props.onChange();
+    private debounceFn = _debounce(this.handleDebounce, 500);
+    private ICancelFn: any;
+
+    handleDebounce() {
+        this.setState({options: []});
+        if (this.props.kind === 'asynchronous') {
+            if (this.state.searchFieldValue) {
+                this.setState({
+                    loading: true,
+                    // provera: false
+                });
+                this.ICancelFn = this.props.searchOptions(this.state.searchFieldValue, (items) => {
+                    // if (items.length === 0) {
+                    //     this.setState({provera: true, loading: false})
+                    // } else {
+                        this.setState({options: items, loading: false});
+                        this.popperInstance.update();
+                    // }
+                });
+            }
         }
     }
 
     render() {
-
         return (
-            <div className="tags-input tags-input--multiselect">
-                <div className="tags-input__tags">
-                    {this.props.readonly
-                    || <button ref={this.openDropdownRef}
-                    className="tags-input__add-button"
-                    onClick={() => this.setState({openDropdown: !this.state.openDropdown})}>
-                        <i className="icon-plus-large"></i>
-                    </button>}
-                        <ul className="tags-input__tag-list">
-                            {this.state.value.map((item, i) => {
-                                return <React.Fragment key={i}>
-                                    <li
-                                    className={"tags-input__tag-item tags-input__tag-item-multiselect"
-                                    + (this.props.readonly ? ' tags-input__tag-item-readonly' : '')}
-                                    onClick={(event) => this.props.readonly || this.removeClick(i)}>
-                                        <span className="tags-input__helper-box">
+            <InputWrapper
+            label={this.props.label}
+            error={this.props.error}
+            required={this.props.required}
+            disabled={this.props.disabled}
+            invalid={this.props.invalid}
+            info={this.props.info}
+            inlineLabel={this.props.inlineLabel}
+            labelHidden={this.props.labelHidden}
+            fullWidth={this.props.fullWidth}
+            htmlId={this.htmlId}
+            tabindex={this.props.tabindex}>
+                <div className={`tags-input tags-input--${this.props.allowMultiple ? 'multi-select' : 'single-select'} sd-input__input`}>
+                    {this.props.allowMultiple
+                        ? <div className="tags-input__tags">
+                            {this.props.readOnly
+                            || <button ref={this.openDropdownRef}
+                            className="tags-input__add-button"
+                            onClick={() => this.setState({openDropdown: !this.state.openDropdown})}>
+                                <i className="icon-plus-large"></i>
+                            </button>}
+                            <ul className="tags-input__tag-list">
+                                {this.state.value.map((item, i: number) => {
+                                    const Wrapper: React.ComponentType<{backgroundColor?: string}>
+                                    = ({backgroundColor, children}) => (
+                                        <li
+                                        className={"tags-input__tag-item tags-input__tag-item--multi-select"
+                                        + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')}
+                                        onClick={() => !this.props.readOnly && this.removeClick(i)}
+                                        style={this.props.valueTemplate
+                                        ? {backgroundColor}
+                                        : this.props.getBackgroundColor
+                                        && {backgroundColor: this.props.getBackgroundColor(item)}}>
+                                            <span
+                                            style={{color: backgroundColor
+                                            ? getTextColor(backgroundColor)
+                                            : this.props.getBackgroundColor
+                                            &&  getTextColor(this.props.getBackgroundColor(item))}}
+                                            className="tags-input__helper-box">
+                                                {children}
+                                                {!this.props.readOnly && <span className="tags-input__remove-button">
+                                                    <Icon name="close-small"></Icon>
+                                                </span>}
+                                            </span>
+                                        </li>
+                                    );
+
+                                    return (
+                                        <React.Fragment key={i}>
                                             {this.props.valueTemplate
-                                            ? this.props.valueTemplate(item)
-                                            : <span>{item[this.props.getLabel]}</span>}
-                                            {this.props.readonly
+                                            ? this.props.valueTemplate(item, Wrapper)
+                                            : <Wrapper>
+                                                <span>{this.props.getLabel(item)}</span>
+                                            </Wrapper>
+                                            }
+                                        </React.Fragment>
+                                    );
+                                })}
+                            </ul>
+                            {this.state.value.length > 0
+                                ? this.props.readOnly
+                                || <button className="tags-input__remove-value"
+                                style={{position: 'relative', bottom: '2px'}}
+                                onClick={() => this.setState({value: []})}>
+                                    <Icon name='remove-sign'></Icon>
+                                </button> : null}
+                        </div>
+                        : <div className="tags-input__tags">
+                            {this.props.readOnly
+                            || <button
+                            className="tags-input__overlay-button"
+                            ref={this.openDropdownRef}
+                            onClick={() => this.setState({openDropdown: !this.state.openDropdown})}>
+                            </button>}
+                            {this.state.value.length < 1 && <span className={ 'tags-input__single-item'
+                            + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')}>
+                                <span className="tags-input__placeholder">
+                                    {this.props.placeholder}
+                                </span>
+                            </span>}
+                            {this.state.value.map((item, i: number) => {
+                                const Wrapper: React.ComponentType<{backgroundColor?: string, borderColor?: string}>
+                                = ({backgroundColor, borderColor, children}) => (
+                                    <span
+                                    className={ 'tags-input__single-item'
+                                    + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')}
+                                    onClick={() => this.props.readOnly || this.removeClick(i)}>
+                                        {this.props.getBorderColor
+                                        && <div className="item-border item-border-selected"
+                                        style={borderColor
+                                        ? {backgroundColor: borderColor}
+                                        : {backgroundColor: this.props.getBorderColor(item)}}></div>}
+                                        <span
+                                        style={{color: backgroundColor && getTextColor(backgroundColor)}}
+                                        className="tags-input__helper-box">
+                                            <span
+                                            className={backgroundColor && `tags-input__tag-item`}
+                                            style={{backgroundColor, margin: 0}}>
+                                                {children}
+                                            </span>
+                                            {this.props.readOnly
                                             || <span className="tags-input__remove-button">
-                                                <i className="icon-close-small"></i>
+                                                <Icon name='remove-sign'></Icon>
                                             </span>}
                                         </span>
-                                    </li>
+                                    </span>
+                                );
+
+                                return <React.Fragment key={i}>
+                                    {this.props.valueTemplate
+                                    ? this.props.valueTemplate(item, Wrapper)
+                                    : <Wrapper>
+                                        <span>{this.props.getLabel(item)}</span>
+                                    </Wrapper>
+                                    }
                                 </React.Fragment>;
                             })}
-                        </ul>
-                </div>
+                       </div>
+                    }
 
-                {this.state.openDropdown &&
-                <div className={"autocomplete autocomplete-multiselect" + (this.props.width === 'medium' ? ' autocomplete-multiselect-width' : '')} ref={this.dropdownRef}>
-                    <div className='autocomplete__header'>
-                        <div className="autocomplete__icon" onClick={() => {
-                        this.backButtonValue();
-                        this.backButton();
-                        }}>
-                            {this.state.activeTree.length > 0
-                            ? <Icon name="arrow-left" className="arrow-left"></Icon>
-                            : <Icon name="search" className="search"></Icon>}
-                        </div>
-                        <div className='autocomplete__filter'>
-                            {this.state.activeTree.length > 0
-                                ? <button
-                                className={'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multiselect' : '')}
-                                onMouseOver={() => this.setState({buttonMouseEvent: true})}
-                                onMouseOut={() => this.setState({buttonMouseEvent: false})}
-                                value={this.state.buttonValue}
-                                onClick={(event) => this.handleBranchValue(event, this.state.buttonValue)}>
-                                    {this.state.buttonMouseEvent && this.props.selectBranchWithChildren ? 'Choose entire category' : this.state.buttonValue[this.props.getLabel]}
-                                </button>
-                                : <input
+                    {this.state.openDropdown
+                    && <div className={"autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')} ref={this.dropdownRef}>
+                        <div className='autocomplete__header'>
+                            <div className="autocomplete__icon" onClick={() => {
+                            this.backButtonValue();
+                            this.backButton();
+                            }}>
+                                <Icon name="search" className="search"></Icon>
+                            </div>
+                            <div className='autocomplete__filter'>
+                                <input
+                                placeholder={this.props.searchPlaceholder}
                                 type="text"
                                 className="autocomplete__input"
-                                ref={(input: any) => input && input.focus()}
+                                ref={(input) => input && input.focus()}
                                 value={this.state.searchFieldValue}
                                 onChange={(event) => {
-                                    this.setState({searchFieldValue: event.target.value});
-                                }}
-                                />
-                            }
-                        </div>
-                    </div>
-                    <ul className="suggestion-list suggestion-list--multi-select">
-                        {this.state.searchFieldValue === ''
-                            ? this.state.options.map((option, i) => {
-                                return (
-                                    <li key={i}
-                                    className={`suggestion-item suggestion-item--multi-select`}
-                                    onClick={(event) => {
-                                        event.preventDefault();
-                                        event.stopPropagation();
-                                        if (option[this.props.getMultilevelArray]) {
-                                            this.handleButton(event, option);
-                                            this.handleMultiLevel(event, option);
-                                            if (event.altKey) {
-                                                if (this.props.selectBranchWithChildren) {
-                                                    let filteredItems = option[this.props.getMultilevelArray]
-                                                    .filter((item) => {
-                                                        if (!this.state.value.includes(item)) {
-                                                            return item;
-                                                        }
-                                                    });
-                                                    this.setState({
-                                                        value: [...this.state.value, ...filteredItems],
-                                                        options: this.state.firstBranchOptions,
-                                                        openDropdown: false,
-                                                        activeTree: [],
-                                                    });
-                                                } else {
-                                                    let filteredItems = option[this.props.getMultilevelArray]
-                                                    .filter((item) => {
-                                                        if (!this.state.value.includes(item)
-                                                        && !item[this.props.getMultilevelArray]) {
-                                                            return item;
-                                                        }
-                                                    });
-                                                    if (filteredItems.length > 0) {
-                                                        this.setState({
-                                                            value: [...this.state.value, ...filteredItems],
-                                                            options: this.state.firstBranchOptions,
-                                                            openDropdown: false,
-                                                            activeTree: [],
-                                                        });
-                                                    }
-                                                }
-                                            }
-                                        } else {
-                                            this.handleValue(event, option);
-                                            if (!event.ctrlKey) {
-                                                this.setState({openDropdown: false});
-                                            }
+                                    if (this.props.kind === 'synchronous') {
+                                        this.setState({searchFieldValue: event.target.value});
+                                        this.popperInstance.update();
+                                    } else if (this.props.kind === 'asynchronous') {
+                                        if (this.ICancelFn) {
+                                            this.ICancelFn();
                                         }
-                                    }}>
-                                        {this.props.optionTemplate
-                                        ? this.props.optionTemplate(option)
-                                        : <span className={this.state.value.includes(option) ? 'suggestion-item--disabled' : null}>
-                                            {option[this.props.getLabel]}
-                                        </span>}
-                                        {option[this.props.getMultilevelArray] && <span className="suggestion-item__icon">
-                                            <Icon name="chevron-right-thin"></Icon>
-                                        </span>}
-                                    </li>
-                                );
-                            })
-                            : this.state.filterArr.filter((item: any) => {
-                                if (this.state.searchFieldValue) {
-                                    if (item[this.props.getLabel]
-                                    .toLowerCase().includes(this.state.searchFieldValue.toLowerCase())) {
-                                        return item;
+                                        this.setState({searchFieldValue: event.target.value, options: []});
+                                        this.popperInstance.update();
+                                        this.debounceFn();
+                                    } else {
+                                        return;
                                     }
-                                } else {
-                                    return item;
-                                }
-                            }).map((item, i) => {
-                                return <li key={i}
-                                className={`suggestion-item suggestion-item--multi-select`}
-                                onClick={(event) => {
-                                    this.handleValue(event, item);
-                                }}>
-                                    <span
-                                    className={this.state.value.includes(item)
-                                    ? 'suggestion-item--disabled' : null}>
-                                        {item[this.props.getLabel]}
-                                    </span>
-                                </li>;
-                            })
+                                    // if(!this.state.searchFieldValue) {
+                                    //     this.setState({provera: false});
+                                    // }
+                                }} />
+                            </div>
+                        </div>
+                        {this.state.activeTree.length > 0
+                        && <div className='autocomplete__category-header'>
+                            <div className="autocomplete__icon" onClick={() => {
+                            this.backButtonValue();
+                            this.backButton();
+                            }}>
+                                <Icon name="arrow-left" className="arrow-left"></Icon>
+                            </div>
+                            <div className='autocomplete__filter'>
+                                <button
+                                className={'autocomplete__category-title'}
+                                value={this.state.buttonValue}>
+                                    {this.props.optionTemplate
+                                    ? this.props.optionTemplate(this.state.buttonValue.value)
+                                    : this.props.getLabel(this.state.buttonValue.value)}
+                                </button>
+                                {this.props.selectBranchWithChildren && this.banchButton()}
+                            </div>
+                        </div>}
+                        {this.state.loading
+                        ? <ul className="suggestion-list--loader"><Loader overlay={true}></Loader></ul>
+                        : this.state.searchFieldValue === ''
+                            ? this.props.getOptions
+                                ? <ul className="suggestion-list suggestion-list--multi-select">
+                                {this.state.options
+                                .map((option, i: React.Key | undefined) => {
+                                    let selectedItem = this.state.value.some((obj) =>
+                                        this.props.getId(obj) === this.props.getLabel(option.value),
+                                    );
+                                    return (
+                                        <li key={i}
+                                        className={`suggestion-item suggestion-item--multi-select`}
+                                        onClick={(event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            this.handleTree(event, option);
+                                        }}>
+                                            {(this.props.getBorderColor && !this.props.allowMultiple) && <div className="item-border" style={{backgroundColor: this.props.getBorderColor(option.value)}}></div>}
+                                            <span
+                                            style={(this.props.getBackgroundColor && option.value)
+                                                ? {backgroundColor: this.props.getBackgroundColor(option.value),
+                                                color: getTextColor(this.props.getBackgroundColor(option.value))}
+                                                : undefined}
+                                            className={'suggestion-item--bgcolor'
+                                            + (selectedItem ? ' suggestion-item--disabled' : '')}
+                                            >
+                                                {this.props.optionTemplate
+                                                ? this.props.optionTemplate(option.value)
+                                                : this.props.getLabel(option.value)}
+                                            </span>
+                                            {option.children && <span className="suggestion-item__icon">
+                                                <Icon name="chevron-right-thin"></Icon>
+                                            </span>}
+                                        </li>
+                                    );
+                                })}</ul> : null
+                            : <ul className="suggestion-list suggestion-list--multi-select">
+                                {this.filteredItem(this.props.singleLevelSearch
+                                ? this.state.options : this.state.filterArr)}
+                                {/* {this.state.provera
+                                    && <li className="suggestion-item--nothing-found">Nothing fonud</li>} */}
+                            </ul>
                         }
-                    </ul>
-                </div>}
-            </div>
+                    </div>}
+                </div>
+            </InputWrapper>
         );
     }
 }