@dvrd/dvr-controls 1.0.44 → 1.0.46

package/src/js/select/dvrdMultiSelect.tsx

@@ -0,0 +1,389 @@
+/*
+ * Copyright (c) 2024. Dave van Rijn Development
+ */
+import './style/dvrdSelect.scss';
+
+import React, {MouseEventHandler, ReactElement, useEffect, useMemo, useRef, useState} from 'react';
+import classNames from 'classnames';
+import {ChangeFunction, ErrorType, SelectItemShape} from '../util/interfaces';
+import {hasHover, stopPropagation} from '../util/controlUtil';
+import AwesomeIcon from '../icon/awesomeIcon';
+import delay from 'lodash.delay';
+
+interface Props {
+    onChange: (selected: Array<string | number>) => MouseEventHandler;
+    onChangeSearch: ChangeFunction;
+    selected: Array<string | number>;
+    items: SelectItemShape[];
+    disabled?: boolean;
+    error?: ErrorType;
+    label?: string;
+    className?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    arrowClassName?: string;
+    errorClassName?: string;
+    itemContainerClassName?: string;
+    itemClassName?: string;
+    itemsPosition: 'top' | 'bottom';
+    selectOnly: boolean;
+    searchValue: string;
+    optionsContainerHeight: number | string;
+}
+
+// interface State {
+//     open: boolean;
+//     searchFocused: boolean;
+// }
+
+const transitionDuration = 200; // ms
+
+export default function DvrdMultiSelect(props: Props) {
+    const {
+        error, disabled, selected, onChange, onChangeSearch, items, optionsContainerHeight, label, labelClassName,
+        selectOnly, valueClassName, searchValue, arrowClassName, itemClassName, itemsPosition, itemContainerClassName,
+        errorClassName, className
+    } = props;
+    const [open, setOpen] = useState(false);
+    const [searchFocused, setSearchFocused] = useState(false);
+    const container = useRef<HTMLDivElement>(null);
+    const hasError = useMemo(() => !!error, [error]);
+    const itemsContainerStyle = useMemo(() => {
+        let maxHeight: string | number = optionsContainerHeight;
+        if (typeof maxHeight === 'number') maxHeight = `${maxHeight}px`;
+        return {maxHeight: maxHeight};
+    }, [optionsContainerHeight])
+
+    function onClickElement(evt: React.MouseEvent) {
+        stopPropagation(evt);
+        if (disabled) return;
+        setOpen(!open);
+    }
+
+    function onClickItem(_value: string | number) {
+        return function (evt: React.MouseEvent) {
+            stopPropagation(evt);
+            if (selected.includes(_value))
+                onChange(selected.filter((value: string | number) => value !== _value))(evt);
+            else onChange(selected.concat(_value))(evt);
+        }
+    }
+
+    function onFocusInput() {
+        setSearchFocused(true);
+        setOpen(true);
+    }
+
+    function onBlurInput() {
+        delay(() => {
+            setSearchFocused(false);
+            onChangeSearch({target: {value: ''}});
+        }, transitionDuration);
+    }
+
+    function getLongestValue(): string {
+        let longest: string = '';
+        for (const item of items) {
+            const stringLabel = item.label.toString();
+            if (stringLabel.length > longest.length)
+                longest = stringLabel;
+        }
+        return longest;
+    }
+
+    function getValueLabel(): string {
+        let valueLabel = '';
+        let extra = 0;
+        for (const item of items) {
+            if (selected.includes(item.value)) {
+                if (valueLabel.length) extra++;
+                else valueLabel = getItemLabel(item);
+            }
+        }
+        if (!valueLabel.length) return '';
+        if (extra) valueLabel += ` +${extra}`
+        return valueLabel;
+    }
+
+    function getItemLabel(item: SelectItemShape): string {
+        const {label} = item;
+        if (['string', 'number'].includes(typeof label)) return label.toString();
+        else if (!!item.valueLabel) return item.valueLabel;
+        return item.value.toString();
+    }
+
+    function renderLabel() {
+        if (!label) return null;
+        return <label className={classNames('dvrd-select-label', labelClassName)}
+                      onClick={onClickElement}>{label}</label>
+    }
+
+    function renderValue() {
+        const valueLabel = getValueLabel();
+        if (selectOnly)
+            return (
+                <div style={{display: 'flex', flexDirection: 'column'}}>
+                    <label className={classNames('dvrd-select-value', valueClassName)}
+                           onClick={onClickElement}>{valueLabel}</label>
+                    <label style={{height: 0, visibility: 'hidden'}}>{getLongestValue()}</label>
+                </div>
+            );
+        const value = searchFocused ? searchValue : valueLabel;
+        return <input className='dvrd-select-search' value={value} onChange={onChangeSearch} disabled={disabled}
+                      onFocus={onFocusInput} onBlur={onBlurInput} onClick={stopPropagation}/>
+    }
+
+    function renderArrow() {
+        return <AwesomeIcon name='chevron-down' onClick={onClickElement}
+                            className={classNames('dvrd-select-arrow', open && 'open', arrowClassName)}/>;
+    }
+
+    function renderItems() {
+        const _items = items.filter((item: SelectItemShape) => {
+            if (item.selectable === false) return false;
+            if (typeof item.label === 'string') return item.label.length > 0;
+            return true;
+        });
+        return (
+            <div
+                className={classNames('dvrd-select-items', (open && !disabled) && 'open', itemsPosition,
+                    itemContainerClassName)} style={itemsContainerStyle}>
+                {_items.map(renderItem)}
+            </div>
+        )
+    }
+
+    function renderItem(item: SelectItemShape, index: number) {
+        const {value, selectableItemLabel} = item;
+        const isSelected = selected.includes(value);
+        const label = selectableItemLabel ?? item.label;
+        if (['number', 'string'].includes(typeof label)) return (
+            <label key={index} className={classNames('dvrd-select-item', isSelected && 'selected', itemClassName)}
+                   onClick={onClickItem(value)}>{label}</label>
+        );
+        const labelElement: ReactElement = label as ReactElement;
+        const onClick = (evt: React.MouseEvent) => {
+            onClickItem(value)(evt);
+            labelElement.props.onClick?.(evt);
+        };
+        const className = classNames(labelElement.props.className, 'dvrd-select-item', isSelected && 'selected', itemClassName);
+        return React.cloneElement(labelElement, {...labelElement.props, onClick, className, key: index});
+    }
+
+    function renderError() {
+        if (!hasError) return null;
+        return <label className={classNames('dvrd-select-error', errorClassName)}>{error}</label>
+    }
+
+    function addClickListener() {
+        document.addEventListener('click', clickListener);
+    }
+
+    function removeClickListener() {
+        document.removeEventListener('click', clickListener);
+    }
+
+    function clickListener() {
+        if (!hasHover(container.current)) setOpen(false);
+    }
+
+    useEffect(() => {
+        if (open) addClickListener();
+        else removeClickListener();
+        return function () {
+            removeClickListener();
+        }
+    }, [open]);
+
+    return (
+        <div className={classNames('dvrd-select-container', 'multi', disabled && 'disabled', open && 'open',
+            hasError && 'error', className)} ref={container} onClick={onClickElement}>
+            {renderLabel()}
+            <div className={classNames('content-container', !selectOnly && 'search')}>
+                {renderValue()}
+                {renderArrow()}
+            </div>
+            {renderItems()}
+            {renderError()}
+        </div>
+    )
+}
+
+// class DvrdSelect extends PureComponent<Props, State> {
+//     private container: HTMLDivElement;
+//     state: State = {
+//         open: false,
+//         searchFocused: false,
+//     };
+//
+//     hasError = (): boolean => this.props.error !== undefined && this.props.error !== null;
+//
+//     onClickElement = (evt: React.MouseEvent) => {
+//         evt.stopPropagation();
+//         if (!this.props.disabled)
+//             this.setState({open: !this.state.open});
+//     };
+//
+//     onClickItem = (value: string | number) => (evt: React.MouseEvent) => {
+//         evt.stopPropagation();
+//         this.props.onChange(value)(evt);
+//         this.setState({open: false});
+//     };
+//
+//     onFocusInput = () => {
+//         this.setState({searchFocused: true, open: true});
+//     };
+//
+//     onBlurInput = () => {
+//         window.setTimeout(() => {
+//             this.setState({searchFocused: false});
+//             this.props.onChangeSearch({target: {value: ''}});
+//         }, 200);
+//     };
+//
+//     getLongestValue = (): string => {
+//         const {items} = this.props;
+//         let longest: string = '';
+//         for (const item of items) {
+//             if (item.label.toString().length > longest.length) {
+//                 longest = item.label.toString();
+//             }
+//         }
+//         return longest;
+//     };
+//
+//     getValueLabel = (): string | number => {
+//         const {value, items} = this.props;
+//         for (const item of items) {
+//             if (item.value === value) return this.getItemLabel(item);
+//         }
+//         return '';
+//     }
+//
+//     getItemLabel = (item: SelectItemShape): string | number => {
+//         const {label} = item;
+//         if (['string', 'number'].includes(typeof label)) return label as string | number;
+//         else if (!!item.valueLabel) return item.valueLabel;
+//         return item.value;
+//     }
+//
+//     getItemsContainerStyle = (): CSSProperties => {
+//         let {optionsContainerHeight} = this.props;
+//         if (typeof optionsContainerHeight === 'number') optionsContainerHeight = `${optionsContainerHeight}px`;
+//         return {maxHeight: optionsContainerHeight};
+//     }
+//
+//     renderLabel = () => {
+//         const {labelClassName, label} = this.props;
+//         if (!label) return null;
+//         return <label className={classNames('dvrd-select-label', labelClassName)}
+//                       onClick={this.onClickElement}>{label}</label>
+//     };
+//
+//     renderValue = () => {
+//         const {valueClassName, selectOnly, searchValue, onChangeSearch, disabled} = this.props,
+//             {searchFocused} = this.state, valueLabel = this.getValueLabel();
+//         if (selectOnly)
+//             return (
+//                 <div style={{display: 'flex', flexDirection: 'column'}}>
+//                     <label className={classNames('dvrd-select-value', valueClassName)}
+//                            onClick={this.onClickElement}>{valueLabel}</label>
+//                     <label style={{height: 0, visibility: 'hidden'}}>{this.getLongestValue()}</label>
+//                 </div>
+//             );
+//         const value = searchFocused ? searchValue : valueLabel;
+//         return <input className='dvrd-select-search' value={value} onChange={onChangeSearch} disabled={disabled}
+//                       onFocus={this.onFocusInput} onBlur={this.onBlurInput} onClick={stopPropagation}/>
+//     };
+//
+//     renderArrow = () => {
+//         const {arrowClassName} = this.props, {open} = this.state;
+//         return <AwesomeIcon name='chevron-down' onClick={this.onClickElement}
+//                             className={classNames('dvrd-select-arrow', open && 'open', arrowClassName)}/>;
+//     };
+//
+//     renderItems = () => {
+//         const {disabled, itemContainerClassName, itemsPosition} = this.props, {open} = this.state;
+//         const items = this.props.items.filter((item: SelectItemShape) => {
+//             if (item.selectable === false) return false;
+//             if (typeof item.label === 'string') return item.label.length > 0;
+//             return true;
+//         })
+//         return (
+//             <div
+//                 className={classNames('dvrd-select-items', (open && !disabled) && 'open', itemsPosition,
+//                     itemContainerClassName)} style={this.getItemsContainerStyle()}>
+//                 {items.map(this.renderItem)}
+//             </div>
+//         )
+//     };
+//
+//     renderItem = (item: SelectItemShape, index: number) => {
+//         const {value, selectableItemLabel} = item;
+//         const label = selectableItemLabel ?? item.label;
+//         const {itemClassName} = this.props;
+//         if (['number', 'string'].includes(typeof label)) return (
+//             <label key={index} className={classNames('dvrd-select-item', itemClassName)}
+//                    onClick={this.onClickItem(value)}>{label}</label>
+//         );
+//         const labelElement: ReactElement = label as ReactElement;
+//         const onClick = (evt: React.MouseEvent) => {
+//             this.onClickItem(value)(evt);
+//             labelElement.props.onClick?.(evt);
+//         };
+//         const className = classNames(labelElement.props.className, 'dvrd-select-item', itemClassName);
+//         return React.cloneElement(labelElement, Object.assign({}, labelElement.props, {
+//             onClick,
+//             className,
+//             key: index
+//         }));
+//     }
+//
+//     renderError = () => {
+//         if (!this.hasError()) return null;
+//         const {error, errorClassName} = this.props;
+//         return <label className={classNames('dvrd-select-error', errorClassName)}>{error}</label>
+//     };
+//
+//     addClickListener = () => {
+//         document.addEventListener('click', this.clickListener);
+//     };
+//
+//     removeClickListener = () => {
+//         document.removeEventListener('click', this.clickListener);
+//     }
+//
+//     clickListener = () => {
+//         if (!hasHover(this.container)) this.setState({open: false});
+//     };
+//
+//     componentDidUpdate = (props: Props, prevState: State) => {
+//         const {open} = this.state, prevOpen = prevState.open;
+//         if (open && !prevOpen) this.addClickListener();
+//         else if (!open && prevOpen) this.removeClickListener();
+//     };
+//
+//     componentWillUnmount = () => {
+//         this.removeClickListener();
+//     };
+//
+//     render = () => {
+//         const {className, disabled, selectOnly} = this.props, {open} = this.state;
+//         return (
+//             <div
+//                 className={classNames('dvrd-select-container', disabled && 'disabled', open && 'open',
+//                     this.hasError() && 'error', className)}
+//                 ref={(ref: HTMLDivElement) => {
+//                     this.container = ref
+//                 }} onClick={this.onClickElement}>
+//                 {this.renderLabel()}
+//                 <div className={classNames('content-container', !selectOnly && 'search')}>
+//                     {this.renderValue()}
+//                     {this.renderArrow()}
+//                 </div>
+//                 {this.renderItems()}
+//                 {this.renderError()}
+//             </div>
+//         )
+//     };
+// };

package/src/js/select/dvrdSelectController.tsx

@@ -2,14 +2,17 @@
  * Copyright (c) 2021. Dave van Rijn Development
  */
 
-import React, {PureComponent} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import DvrdSelect from "./dvrdSelect";
 import {ChangeFunction, ErrorType, SelectItemShape} from "../util/interfaces";
 import {stringContains} from '../util/controlUtil';
+import DvrdMultiSelect from "./dvrdMultiSelect";
+
+type ValueType = string | number | Array<string | number>;
 
 interface Props {
-    onChange: ChangeFunction;
-    value: string | number;
+    onChange: ChangeFunction<ValueType>;
+    value: string | number | Array<string | number>;
     items: SelectItemShape[];
     disabled?: boolean;
     label?: string;
@@ -21,66 +24,124 @@ interface Props {
     errorClassName?: string;
     itemContainerClassName?: string;
     itemClassName?: string;
-    itemsPosition: 'top' | 'bottom';
-    selectOnly: boolean;
-    optionsContainerHeight: number | string;
-    unControlled?: boolean;
-}
-
-interface State {
-    searchValue: string;
-    value: string | number;
+    itemsPosition?: 'top' | 'bottom';
+    selectOnly?: false;
+    optionsContainerHeight?: number | string;
+    unControlled?: true;
+    multi?: true;
 }
 
-export default class DvrdSelectController extends PureComponent<Props, State> {
-    private select: DvrdSelect;
+// interface State {
+//     searchValue: string;
+//     value: string | number | Array<string | number>;
+// }
 
-    static defaultProps = {
-        itemsPosition: 'bottom',
-        selectOnly: true,
-        optionsContainerHeight: '15rem',
-    };
+export default function DvrdSelectController(props: Props) {
+    const {
+        value, multi, unControlled, onChange, items, error, className, labelClassName, valueClassName,
+        itemContainerClassName, arrowClassName, errorClassName, itemClassName, label, disabled
+    } = props;
+    const [search, setSearch] = useState('');
+    const [internalValue, setInternalValue] = useState<ValueType>('');
+    const _items = useMemo(() => {
+        if (!search) return items;
+        return items.filter((item) => stringContains(item.label.toString(), search));
+    }, [items, search]);
+    const _value = useMemo(() => unControlled ? internalValue : value,
+        [unControlled, internalValue, value]);
 
-    state: State = {
-        searchValue: '',
-        value: this.props.value,
-    };
-
-    onChange = (value: string | number) => () => {
-        this.props.onChange(value);
-        this.setState({value});
-    };
+    function _onChange(value: ValueType) {
+        return function () {
+            onChange(value);
+            setInternalValue(value);
+        }
+    }
 
-    onChangeSearch = (evt: React.ChangeEvent<HTMLInputElement>) => {
-        const {value} = evt.target;
-        this.setState({searchValue: value});
-    };
+    function onChangeSearch(evt: React.ChangeEvent<HTMLInputElement>) {
+        setSearch(evt.target.value);
+    }
 
-    onOpen = (evt: React.MouseEvent) => {
-        if (this.select) this.select.onClickElement(evt);
-    };
+    useEffect(() => {
+        if (multi && !Array.isArray(value)) throw new TypeError('Value must be an array in multi mode');
+        else if (!multi && Array.isArray(value)) throw new TypeError('Value must be a string or number in single mode');
+        if (!unControlled && value !== internalValue) setInternalValue(value);
+    }, [value, multi, unControlled]);
 
-    getItems = () => {
-        const items = this.props.items.slice(), {searchValue} = this.state;
-        if (!searchValue) return items;
-        return items.filter((item) => stringContains(item.label.toString(), searchValue))
-    }
+    const itemsPosition = props.itemsPosition ?? 'bottom';
+    const optionsContainerHeight = props.optionsContainerHeight ?? '15rem';
+    const selectOnly = props.selectOnly !== false;
+    if (multi) return (
+        <DvrdMultiSelect onChange={_onChange} onChangeSearch={onChangeSearch}
+                         selected={_value as Array<string | number>} items={_items} itemsPosition={itemsPosition}
+                         selectOnly={selectOnly} searchValue={search} optionsContainerHeight={optionsContainerHeight}
+                         className={className} error={error} label={label} arrowClassName={arrowClassName}
+                         errorClassName={errorClassName} itemClassName={itemClassName}
+                         itemContainerClassName={itemContainerClassName} valueClassName={valueClassName}
+                         labelClassName={labelClassName} disabled={disabled}/>
+    );
+    return (
+        <DvrdSelect onChange={_onChange} onChangeSearch={onChangeSearch} value={_value as number | string}
+                    items={_items} itemsPosition={itemsPosition} selectOnly={selectOnly} searchValue={search}
+                    optionsContainerHeight={optionsContainerHeight} className={className} error={error} label={label}
+                    arrowClassName={arrowClassName} errorClassName={errorClassName} itemClassName={itemClassName}
+                    itemContainerClassName={itemContainerClassName} valueClassName={valueClassName}
+                    labelClassName={labelClassName} disabled={disabled}/>
+    );
+}
 
-    render = () => {
-        const {
-            arrowClassName, label, error, className, labelClassName, valueClassName, itemContainerClassName,
-            itemClassName, errorClassName, disabled, itemsPosition, selectOnly, optionsContainerHeight, unControlled
-        } = this.props, {searchValue} = this.state;
-        const value = !!unControlled ? this.state.value : this.props.value;
-        return (
-            <DvrdSelect onChange={this.onChange} value={value} items={this.getItems()} disabled={disabled}
-                        errorClassName={errorClassName} itemClassName={itemClassName}
-                        itemContainerClassName={itemContainerClassName} valueClassName={valueClassName}
-                        labelClassName={labelClassName} className={className} error={error} label={label}
-                        arrowClassName={arrowClassName} itemsPosition={itemsPosition} ref={(ref: DvrdSelect) => {
-                this.select = ref
-            }} searchValue={searchValue} onChangeSearch={this.onChangeSearch} selectOnly={selectOnly}
-                        optionsContainerHeight={optionsContainerHeight}/>
-        );
-    }
-};
+// class _DvrdSelectController extends PureComponent<Props, State> {
+//     private select: DvrdSelect;
+//
+//     static defaultProps = {
+//         itemsPosition: 'bottom',
+//         selectOnly: true,
+//         optionsContainerHeight: '15rem',
+//     };
+//
+//     state: State = {
+//         searchValue: '',
+//         value: this.props.value,
+//     };
+//
+//     onChange = (value: string | number) => () => {
+//         this.props.onChange(value);
+//         this.setState({value});
+//     };
+//
+//     onChangeSearch = (evt: React.ChangeEvent<HTMLInputElement>) => {
+//         const {value} = evt.target;
+//         this.setState({searchValue: value});
+//     };
+//
+//     onOpen = (evt: React.MouseEvent) => {
+//         if (this.select) this.select.onClickElement(evt);
+//     };
+//
+//     getItems = () => {
+//         const items = this.props.items.slice(), {searchValue} = this.state;
+//         if (!searchValue) return items;
+//         return items.filter((item) => stringContains(item.label.toString(), searchValue))
+//     }
+//
+//     render = () => {
+//         const {
+//             arrowClassName, label, error, className, labelClassName, valueClassName, itemContainerClassName,
+//             itemClassName, errorClassName, disabled, itemsPosition, selectOnly, optionsContainerHeight, unControlled,
+//             multi
+//         } = this.props, {searchValue} = this.state;
+//         const value = !!unControlled ? this.state.value : this.props.value;
+//         if (!multi && Array.isArray(value)) throw new TypeError('Value cannot be an array in single mode');
+//         else if (multi && !Array.isArray(value)) throw new TypeError('Value must be an array in multi mode');
+//         return (
+//             <DvrdSelect onChange={this.onChange} value={value as string | number} items={this.getItems()}
+//                         disabled={disabled}
+//                         errorClassName={errorClassName} itemClassName={itemClassName}
+//                         itemContainerClassName={itemContainerClassName} valueClassName={valueClassName}
+//                         labelClassName={labelClassName} className={className} error={error} label={label}
+//                         arrowClassName={arrowClassName} itemsPosition={itemsPosition} ref={(ref: DvrdSelect) => {
+//                 this.select = ref
+//             }} searchValue={searchValue} onChangeSearch={this.onChangeSearch} selectOnly={selectOnly}
+//                         optionsContainerHeight={optionsContainerHeight}/>
+//         );
+//     }
+// };

package/src/js/sidebarMenu/sidebarMenu.tsx

@@ -4,7 +4,7 @@
 import './style/sidebarMenu.scss';
 
 import React, {MouseEventHandler, ReactNode, useContext, useEffect, useRef, useState} from 'react';
-import {useLocation} from 'react-router-dom';
+import {NavLink, useLocation} from 'react-router-dom';
 import {SidebarItem, SideMenuMode} from "../util/interfaces";
 import classNames from 'classnames';
 import {AwesomeIcon, generateComponentId, isAbsoluteLink} from "../../../index";
@@ -82,21 +82,33 @@ export default function SidebarMenu(props: Props) {
 
     function renderItem(isChild: boolean = false) {
         return function (item: SidebarItem) {
-            const {className, icon, id, label, children} = item,
+            const {className, icon, id, label, children, asNavLink} = item,
                 isActive = itemHasActiveId(item, activeItem),
                 cls = classNames(className, mode === SideMenuMode.COMPACT ? 'side-bar-item' : 'side-bar-item-full',
                     isChild && 'child', children !== undefined && 'with-children');
-            return (
-                <div key={id} className={cls} onClick={_onClickItem(item)} id={id}>
-                    {renderIcon(isActive, isChild, label, icon)}
+
+            const content = (
+                <>
+                    {renderIcon(isChild, label, icon)}
                     {mode === SideMenuMode.COMPACT && <div className='active-indicator'/>}
-                    <span className={classNames('item-label', isActive && 'active')}>{label}</span>
+                    <span className='item-label'>{label}</span>
                     {children !== undefined && (
                         <>
                             {isActive && <div className='line'/>}
                             {renderChildren(isActive)(children)}
                         </>
                     )}
+                </>
+            );
+
+            if (asNavLink) return (
+                <NavLink key={id} to={item.route as string} className={cls} id={id}>
+                    {content}
+                </NavLink>
+            );
+            return (
+                <div key={id} className={classNames(cls, isActive && 'active')} onClick={_onClickItem(item)} id={id}>
+                    {content}
                 </div>
             )
         }
@@ -113,8 +125,8 @@ export default function SidebarMenu(props: Props) {
         }
     }
 
-    function renderIcon(isActive: boolean, isChild: boolean, label: string, icon?: IconName | ReactNode): ReactNode {
-        const className = classNames('item-icon', isActive && 'active');
+    function renderIcon(isChild: boolean, label: string, icon?: IconName | ReactNode): ReactNode {
+        const className = 'item-icon'
         if (icon) {
             if (typeof icon === 'string') return <AwesomeIcon name={icon as IconName} className={className}/>;
             else if (React.isValidElement(icon))