feat(FilterItem): add FilterType MultiSelect

Author: vbersch

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'
 }