feat(FilterItem): Add MultiSelect option to FilterTypes (#79)

Author: vbersch

packages/main/__karma_snapshots__/FilterBar.md

@@ -352,6 +352,31 @@
                   </div>
                 </div>
               </FilterItem>
+              <FilterItem filterItems={{...}} label="Classification" type="MultiSelect" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
+                <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
+                  <div className="FilterItem--innerFilterItemContainer---">
+                    <Label for="">
+                      <ui5-label for="" class="">
+                        Classification
+                      </ui5-label>
+                    </Label>
+                    <MultiComboBox onSelectionChange={[Function: onMultiCbChange]} value="" placeholder="" valueState="None">
+                      <ui5-multi-combobox value="" placeholder="" value-state="None" class="">
+                        <StandardListItem data-key="1" type="Active" infoState="None">
+                          <ui5-li data-key="1" type="Active" info-state="None" class="">
+                            Text 1
+                          </ui5-li>
+                        </StandardListItem>
+                        <StandardListItem data-key="2" type="Active" infoState="None">
+                          <ui5-li data-key="2" type="Active" info-state="None" class="">
+                            Text 2
+                          </ui5-li>
+                        </StandardListItem>
+                      </ui5-multi-combobox>
+                    </MultiComboBox>
+                  </div>
+                </div>
+              </FilterItem>
             </div>
           </div>
         </FilterBar>

packages/main/src/components/FilterBar/FilterBar.karma.tsx

@@ -106,12 +106,19 @@ describe('FilterBar', () => {
           key="classification3"
           type={FilterType.Default}
         />
+        <FilterItem
+          // onChange={(e) => alert(e.getParameter('selectedItem').key)}
+          filterItems={filterItems}
+          label="Classification"
+          key="classification3"
+          type={FilterType.MultiSelect}
+        />
       </FilterBar>
     );
     // console.log(wrapper.debug());
     // console.log(wrapper.find('Select').debug());
     wrapper
-      .find('ui5-li')
+      .find('ui5-option')
       .at(1)
       .simulate('change');
 

packages/main/src/components/FilterBar/demo.stories.tsx

@@ -9,6 +9,7 @@ import { PlacementType } from '../../lib/PlacementType';
 import { Switch } from '../../lib/Switch';
 import { TitleLevel } from '../../lib/TitleLevel';
 import { VariantManagement } from '../../lib/VariantManagement';
+import { action } from '@storybook/addon-actions';
 
 const flavours = [];
 for (let i = 1; i <= 9; i++) {
@@ -57,17 +58,17 @@ function renderStory() {
       >
         <Switch />
       </FilterItem>
-      {/*<FilterItem*/}
-      {/*key={'filter2'}*/}
-      {/*type={FilterType.Custom}*/}
-      {/*label={'Custom Filter 2'}*/}
-      {/*changeEventName={'onSelect'}*/}
-      {/*valueParamName={'state'}*/}
-      {/*>*/}
-      {/*<RadioButton text={"Custom Radio Button filter"} onSelect={(e) => {*/}
-      {/*alert(e.parameters.selectedItem);*/}
-      {/*}}/>*/}
-      {/*</FilterItem>*/}
+      <FilterItem
+        onChange={action('onChange')}
+        filterItems={filterItems}
+        style={{
+          maxWidth: '200px'
+        }}
+        label="Multi"
+        key="Multi"
+        type={FilterType.MultiSelect}
+        loading={boolean('loading', false)}
+      />
     </FilterBar>
   );
 }

packages/main/src/components/FilterItem/index.tsx

@@ -1,12 +1,14 @@
 import { Event, StyleClassHelper } from '@ui5/webcomponents-react-base';
-import React, { forwardRef, ReactNode, RefObject, useMemo, FC } from 'react';
+import React, { FC, forwardRef, ReactNode, RefObject, useMemo } from 'react';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { BusyIndicator } from '../../lib/BusyIndicator';
 import { FilterType } from '../../lib/FilterType';
 import { Input } from '../../lib/Input';
 import { Label } from '../../lib/Label';
 import { createUseStyles } from 'react-jss';
 import { Select } from '../../lib/Select';
+import { MultiComboBox } from '../../lib/MultiComboBox';
+import { StandardListItem } from '../../lib/StandardListItem';
 import { Option } from '../../lib/Option';
 import styles from './FilterItem.jss';
 import { BusyIndicatorType } from '../../lib/BusyIndicatorType';
@@ -52,6 +54,17 @@ const FilterItem: FC<FilterItemPropTypes> = forwardRef((props: FilterItemPropTyp
     onChange(Event.of(null, e.getOriginalEvent(), { selectedItem: item }));
   }
 
+  function onMultiCbChange(e) {
+    const selectedItems = e.getParameter('items');
+    onChange(
+      Event.of(null, e.getOriginalEvent(), {
+        selectedItems: selectedItems.map((item) => {
+          return getItemByKey(item.getAttribute('data-key'));
+        })
+      })
+    );
+  }
+
   const filterComponent = useMemo(() => {
     if (loading) {
       return (
@@ -68,6 +81,16 @@ const FilterItem: FC<FilterItemPropTypes> = forwardRef((props: FilterItemPropTyp
     switch (type) {
       case FilterType.Default:
         return <Input placeholder={placeholder} onChange={onSelect} style={{ width: '100%' }} />;
+      case FilterType.MultiSelect:
+        return (
+          <MultiComboBox onSelectionChange={onMultiCbChange}>
+            {filterItems.map((item) => (
+              <StandardListItem data-key={item.key} key={item.key}>
+                {item.text}
+              </StandardListItem>
+            ))}
+          </MultiComboBox>
+        );
       case FilterType.Select:
         return (
           <Select onChange={onSelect} style={{ width: '100%' }}>

packages/main/src/enums/FilterType.ts

@@ -1,5 +1,6 @@
 export enum FilterType {
   Default = 'Default',
   Select = 'Select',
+  MultiSelect = 'MultiSelect',
   Custom = 'Custom'
 }