@dvrd/dvr-controls 1.0.81 → 1.0.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.81",
+  "version": "1.0.82",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/select/dvrdGroupedSelect.tsx

@@ -8,6 +8,7 @@ import {ErrorType, GroupedSelectItem, SelectValueType} from "../util/interfaces"
 import classNames from 'classnames';
 import AwesomeIcon from "../icon/awesomeIcon";
 import defer from 'lodash.defer';
+import {stopPropagation} from "../util/controlUtil";
 
 
 interface Props {
@@ -27,6 +28,7 @@ interface Props {
     maxItemsHeight?: number | string;
     highlightSelected?: true;
     placeholder?: string;
+    searchable?: boolean;
 }
 
 export type GroupedSelectRef = { open: VoidFunction; close: VoidFunction; toggle: (forcedValue?: boolean) => void };
@@ -42,12 +44,19 @@ function findInItems(items: Array<GroupedSelectItem>, value: string | number): G
     return null;
 }
 
+function itemMatchesSearch(item: GroupedSelectItem, search: string): boolean {
+    if (!search) return true;
+    return item.label.toString().toLowerCase().includes(search.toLowerCase());
+}
+
 function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
     const {
         className, label, labelClassName, value, placeholder, valueClassName, error, itemContainerClassName,
-        onChange, items, itemClassName, disabled, errorClassName, highlightSelected
+        onChange, items, itemClassName, disabled, errorClassName, highlightSelected, searchable
     } = props;
     const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const [searchActive, setSearchActive] = useState(false);
     const maxItemsHeight: string | undefined = useMemo(() => {
         const {maxItemsHeight} = props;
         if (maxItemsHeight) {
@@ -71,8 +80,36 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
                 longest = item.label.toString();
         return longest;
     }, [items]);
+    const availableItems = useMemo(() => {
+        if (!searchable || !search.trim()) return items;
+        const _items: Array<GroupedSelectItem> = [];
+        for (const item of items) {
+            if (itemMatchesSearch(item, search)) _items.push(item);
+            else if (item.children) {
+                if (!!item.children.find((child: GroupedSelectItem) => itemMatchesSearch(child, search)))
+                    _items.push(item);
+            }
+        }
+        return _items;
+    }, [items, searchable, search]);
     const itemsContainer = useRef<HTMLDivElement>(null);
 
+    function onChangeSearch(evt: React.ChangeEvent<HTMLInputElement>) {
+        const {value} = evt.target;
+        setSearch(value);
+    }
+
+    function onFocusSearch() {
+        if (searchable) {
+            setSearchActive(true);
+            setOpen(true);
+        }
+    }
+
+    function onBlurSearch() {
+        if (searchable) setSearchActive(false);
+    }
+
     function onSelectItem(item: GroupedSelectItem) {
         return function (evt: React.MouseEvent) {
             evt.stopPropagation();
@@ -122,36 +159,61 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
     }
 
     function renderValue() {
-        const hasValue = selectedLabel !== null;
-        const canRender = hasValue && !['string', 'number'].includes(typeof selectedLabel)
         const chevIcon = itemsPosition === 'bottom' ? 'chevron-down' : 'chevron-up';
-        const placeholderHidden = !placeholder?.length;
         return (
-            <div className={classNames('grouped-select-value-container', valueClassName)}>
-                {hasValue ?
-                    canRender ? renderCustomValue(selectedLabel as React.ReactElement) :
-                        <label className='grouped-select-value'>{selectedLabel}</label> :
-                    <label className={classNames('grouped-select-placeholder', placeholderHidden && 'hidden')}>
-                        {placeholderHidden ? 'placeholder' : placeholder}</label>
-                }
+            <div className={classNames('grouped-select-value-container', searchable && 'searchable', valueClassName)}>
+                {renderValueInput()}
+                {renderValueCustom()}
+                {renderValueLabel()}
+                {renderValuePlaceholder()}
                 <AwesomeIcon name={chevIcon} className='chev-icon'/>
                 <div style={{height: 0, visibility: 'hidden'}}>{longestValue}</div>
             </div>
         );
     }
 
-    function renderCustomValue(value: React.ReactElement) {
-        return React.cloneElement(value, {
-            ...value.props,
-            className: classNames(value.props?.className, 'grouped-select-value')
+    function renderValueInput() {
+        if (!searchable) return null;
+        const _value = searchActive ? search : selectedLabel?.toString();
+        return (
+            <input onChange={onChangeSearch} value={_value} onFocus={onFocusSearch}
+                   onBlur={onBlurSearch} className='dvrd-grouped-select-search' disabled={disabled}
+                   onClick={stopPropagation} placeholder={placeholder}/>
+        )
+    }
+
+    function renderValueCustom() {
+        if (selectedLabel === null || searchable) return null; // Nothing selected, or using a search input
+        if (['string', 'number'].includes(typeof selectedLabel)) return null; // Not a custom element
+        const element = selectedLabel as React.ReactElement;
+        return React.cloneElement(element, {
+            ...element.props,
+            className: classNames(element.props?.className, 'grouped-select-value')
         });
     }
 
+    function renderValueLabel() {
+        if (selectedLabel === null || searchable) return null; // Nothing selected, or using a search input
+        if (!['string', 'number'].includes(typeof selectedLabel)) return null; // A custom element
+        return (
+            <label className='grouped-select-value'>{selectedLabel}</label>
+        );
+    }
+
+    function renderValuePlaceholder() {
+        if (selectedLabel !== null || searchable) return null; // Something is selected, or we are using a search input
+        const placeholderHidden = !placeholder?.length;
+        return (
+            <label className={classNames('grouped-select-placeholder', placeholderHidden && 'hidden')}>
+                {placeholderHidden ? 'placeholder' : placeholder}</label>
+        );
+    }
+
     function renderItemsContainer() {
         return (
             <div className={classNames('grouped-select-items', itemContainerClassName)}
                  style={{maxHeight: maxItemsHeight}} ref={itemsContainer}>
-                {items.map(renderItem())}
+                {availableItems.map(renderItem())}
             </div>
         )
     }

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

@@ -33,6 +33,16 @@
       cursor: pointer;
       background-color: white;
 
+      .dvrd-grouped-select-search {
+        width: 100%;
+        outline: none;
+        border: none;
+        padding: .75rem;
+        color: #2A435F;
+        border-radius: inherit;
+        font-family: avenir-light, sans-serif;
+      }
+
       .grouped-select-placeholder, .grouped-select-value {
         user-select: none;
         vertical-align: middle;
@@ -55,6 +65,10 @@
         transition: transform .2s ease-in-out;
         color: $color-gray-3;
       }
+
+      &.searchable {
+        padding: 0 .75rem 0 0;
+      }
     }
 
     .grouped-select-items {