superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.4

package/app-typescript/components/TreeSelect.tsx

@@ -1,46 +1,79 @@
-import { any } from "prop-types";
 import * as React from "react";
 import { Icon } from "./Icon";
+import { Loader } from "./Loader";
+import classNames from 'classnames';
+import nextId from "react-id-generator";
 
 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>;                // to return on first branch in dropdown
+    openDropdown: boolean;                         // open/close dropdown
+    activeTree: Array<any>;                         // for filtered array
+    filterArr: Array<any>;                          // for filtered array
+    searchFieldValue: string;                      // filter value of input
+    buttonTree: Array<any>;                         // array of button (for backButton)
+    buttonValue: any;                              // button for name of category
+    buttonMouseEvent: boolean;                     // valueButton hover
+    loading: boolean;
+    invalid: 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;
+    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;
     optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
     valueTemplate?(item: T): React.ComponentType<T> | JSX.Element;
-    onChange(): void;
+    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();
 
     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 +81,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
             buttonValue: [],
             buttonMouseEvent: false,
             openDropdown: false,
+            loading: this.props.loading ? this.props.loading : false,
+            invalid: this.props.invalid ? this.props.invalid : false,
         };
 
         this.removeClick = this.removeClick.bind(this);
@@ -55,62 +90,62 @@ 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.dropdownRef = React.createRef();
         this.openDropdownRef = React.createRef();
     }
 
     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 +153,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,28 +244,18 @@ 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);
-                } else {
-                    this.recursion(item[this.props.getMultilevelArray]);
-                }
-            });
-        }
+    recursion(arr: Array<ITreeNode<T>>) {
+        arr.map((item) => {
+            this.state.filterArr.push(item);
+            if (item.children) {
+                this.recursion(item.children);
+            }
+        });
     }
 
     componentDidMount = () => {
         this.recursion(this.state.options);
-        document.addEventListener("mousedown", (event) => {
+        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});
@@ -165,165 +265,293 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
 
     componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
         if (prevState.value !== this.state.value) {
-            this.props.onChange();
+            this.props.onChange(this.state.value);
         } else if (prevProps.value !== this.props.value) {
-            this.props.onChange();
+            this.props.onChange(this.state.value);
+        }
+    }
+
+    filteredItem(arr: Array<ITreeNode<T>>) {
+        if (this.props.kind === 'synchronous') {
+            return 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 {
+                    return item.value;
+                }
+            }).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.optionTemplate
+                        ? this.props.optionTemplate(option.value)
+                        : <span
+                        className={selectedItem
+                        ? 'suggestion-item--disabled' : undefined}
+                        >
+                            {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;
+        }
+    }
+
+    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>;
         }
     }
 
     render() {
 
+        const labelClasses = classNames('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
+
+        const classesLabel = classNames('sd-input', {
+            'sd-input--inline-label': this.props.inlineLabel,
+            'sd-input--required': this.props.required,
+            'sd-input--disabled': this.props.disabled,
+            'sd-input--full-width': this.props.fullWidth,
+            'sd-input--invalid': this.props.invalid || this.state.invalid,
+        });
+
         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">
-                                            {this.props.valueTemplate
-                                            ? this.props.valueTemplate(item)
-                                            : <span>{item[this.props.getLabel]}</span>}
-                                            {this.props.readonly
-                                            || <span className="tags-input__remove-button">
-                                                <i className="icon-close-small"></i>
-                                            </span>}
-                                        </span>
-                                    </li>
-                                </React.Fragment>;
-                            })}
-                        </ul>
-                </div>
+            <div className={classesLabel}>
+                <label className={labelClasses} htmlFor={this.htmlId} id={this.htmlId + 'label'}
+                        tabIndex={this.props.tabindex === undefined ? undefined : -1}>
+                    {this.props.label}
+                </label>
 
-                {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 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) => {
+                                    return <React.Fragment key={i}>
+                                        <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)}>
+                                            <span className="tags-input__helper-box">
+                                                {this.props.valueTemplate
+                                                ? this.props.valueTemplate(item)
+                                                : <span>{this.props.getLabel(item)}</span>}
+                                                {this.props.readOnly
+                                                || <span className="tags-input__remove-button">
+                                                    <Icon name="close-small"></Icon>
+                                                </span>}
+                                            </span>
+                                        </li>
+                                    </React.Fragment>;
+                                })}
+                            </ul>
+                            {this.state.value.length > 0  ?
+                            this.props.readOnly
+                                || <button className="tags-input__remove-value"
+                                onClick={() => this.setState({value: []})}>
+                                    <Icon name='remove-sign'></Icon>
+                                </button> : null}
                         </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
+                        : <div className="tags-input__tags">
+                            <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) => {
+                                    return <React.Fragment key={i}>
+                                        <span
+                                        className={ 'tags-input__single-item'
+                                        + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')}
+                                        onClick={() => this.props.readOnly || this.removeClick(i)}>
+                                            <span className="tags-input__helper-box">
+                                                {this.props.valueTemplate
+                                                ? this.props.valueTemplate(item)
+                                                : <span>{this.props.getLabel(item)}</span>}
+                                                {this.props.readOnly
+                                                || <span className="tags-input__remove-button">
+                                                    <Icon name='remove-sign'></Icon>
+                                                </span>}
+                                            </span>
+                                        </span>
+                                    </React.Fragment>;
+                                })}
+                       </div>
+                    }
+
+                    {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.singleLevelSearch ? 'Search this category...' : 'Search...'}
                                 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});
+                                    const value = event.target.value;
+                                    if (this.props.kind === 'asynchronous') {
+                                        this.setState({
+                                            searchFieldValue: value,
+                                            loading: true,
+                                        }),
+                                        this.props.searchOptions(value, (items) => {
+                                            this.setState({options: items, loading: false});
+                                        });
+                                    } else if (this.props.kind === 'synchronous') {
+                                        this.setState({searchFieldValue: value});
+                                    }
                                 }}
                                 />
-                            }
+                            </div>
                         </div>
-                    </div>
-                    <ul className="suggestion-list suggestion-list--multi-select">
-                        {this.state.searchFieldValue === ''
-                            ? this.state.options.map((option, i) => {
+                        {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();
-                                        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});
-                                            }
-                                        }
+                                        this.handleTree(event, option);
                                     }}>
                                         {this.props.optionTemplate
-                                        ? this.props.optionTemplate(option)
-                                        : <span className={this.state.value.includes(option) ? 'suggestion-item--disabled' : null}>
-                                            {option[this.props.getLabel]}
+                                        ? this.props.optionTemplate(option.value)
+                                        : <span
+                                        className={selectedItem
+                                        ? 'suggestion-item--disabled' : undefined}
+                                        >
+                                            {this.props.getLabel(option.value)}
                                         </span>}
-                                        {option[this.props.getMultilevelArray] && <span className="suggestion-item__icon">
+                                        {option.children && <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;
-                                    }
-                                } 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>;
-                            })
-                        }
-                    </ul>
-                </div>}
+                            })}</ul> : null
+                            :
+                            <ul className="suggestion-list suggestion-list--multi-select">
+                                {this.filteredItem(this.props.singleLevelSearch
+                                ? this.state.options : this.state.filterArr)}
+                            </ul>
+                    }
+                    </div>}
+                </div>
+
+                <div className='sd-input__message-box'>
+                    {this.props.info && !this.props.invalid && !this.state.invalid ?
+                        <div className='sd-input__hint'>{this.props.info}</div> : null}
+                    {this.props.invalid || this.state.invalid ?
+                        <div className='sd-input__message'>{this.props.error}</div>
+                        : null}
+                </div>
             </div>
         );
     }