feat(filters): add code to support multi level items

* feat(filters): refactor code to support nested level * feat(filters): add code to support multi level items * fix(filters): styles * fix(filters): fix sorting and remove unneeded fields from model * fix(filters): support flat list inputs * fix(filters): fix lint * fix(filters): fix switching flat and hierarchy in story
carbon-design-system · May 1, 2019 · e69d6f8 · e69d6f8
1 parent c1506e9
commit e69d6f8
Show file tree

Hide file tree

Showing 10 changed files with 4,677 additions and 464 deletions.
diff --git a/.storybook/addons.js b/.storybook/addons.js
@@ -1,3 +1,4 @@
 import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
 import '@storybook/addon-links/register';
 import 'storybook-addon-a11y/register';
diff --git a/package.json b/package.json
@@ -131,7 +131,8 @@
   "jest": {
     "collectCoverageFrom": [
       "src/components/**/*.js",
-      "!src/components/**/*-story.js"
+      "!src/components/**/*-story.js",
+      "src/internal/**/*.js"
     ],
     "setupFiles": [
       "<rootDir>/config/polyfills.js",

diff --git a/src/components/MultiSelect/MultiSelect-story.js b/src/components/MultiSelect/MultiSelect-story.js
@@ -24,6 +24,16 @@ const items = [
       {
         id: 'opt-4',
         text: 'Option 4',
+        options: [
+          {
+            id: 'subopt-25',
+            text: 'SubOption 25',
+          },
+          {
+            id: 'subopt-30',
+            text: 'SubOption 30',
+          },
+        ],
       },
     ],
   },
@@ -50,10 +60,49 @@ const items = [
       {
         id: 'opt-7',
         text: 'Option 7',
+        options: [
+          {
+            id: 'subopt-20',
+            text: 'SubOption 20',
+          },
+          {
+            id: 'subopt-15',
+            text: 'SubOption 15',
+          },
+          {
+            id: 'subopt-18',
+            text: 'SubOption 18',
+          },
+        ],
       },
       {
-        id: 'opt-7',
-        text: 'Option 7',
+        id: 'opt-8',
+        text: 'Option 8',
+        options: [
+          {
+            id: 'subopt-5',
+            text: 'SubOption 5',
+          },
+          {
+            id: 'subopt-10',
+            text: 'SubOption 10',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'item-5',
+    text: 'Item 5',
+    category: 'America',
+    options: [
+      {
+        id: 'opt-9',
+        text: 'Option 9',
+      },
+      {
+        id: 'opt-10',
+        text: 'Option 10',
       },
     ],
   },
@@ -72,6 +121,17 @@ const selectedItems = [
       {
         id: 'opt-4',
         text: 'Option 4',
+        options: [
+          {
+            id: 'subopt-25',
+            text: 'SubOption 25',
+          },
+          {
+            id: 'subopt-30',
+            text: 'SubOption 30',
+            checked: true,
+          },
+        ],
       },
     ],
   },
@@ -99,16 +159,187 @@ const selectedItems = [
       {
         id: 'opt-7',
         text: 'Option 7',
+        checked: true,
+        options: [
+          {
+            id: 'subopt-20',
+            text: 'SubOption 20',
+          },
+          {
+            id: 'subopt-15',
+            text: 'SubOption 15',
+          },
+          {
+            id: 'subopt-18',
+            text: 'SubOption 18',
+          },
+        ],
       },
       {
         id: 'opt-8',
         text: 'Option 8',
-        checked: true,
+        options: [
+          {
+            id: 'subopt-5',
+            text: 'SubOption 5',
+          },
+          {
+            id: 'subopt-10',
+            text: 'SubOption 10',
+          },
+        ],
       },
     ],
   },
 ];
-const defaultLabel = 'MultiSelect Label';
+
+const flattenItems = [
+  {
+    id: 'item-1',
+    text: 'Item 1',
+    category: 'Europe',
+    level: 0,
+  },
+  {
+    id: 'item-2',
+    text: 'Item 2',
+    category: 'Europe',
+    level: 0,
+    hasChildren: true,
+  },
+  {
+    id: 'opt-3',
+    text: 'Option 3',
+    category: 'Europe',
+    level: 1,
+    parentId: 'item-2',
+  },
+  {
+    id: 'opt-4',
+    text: 'Option 4',
+    category: 'Europe',
+    level: 1,
+    hasChildren: true,
+    parentId: 'item-2',
+  },
+  {
+    id: 'subopt-25',
+    text: 'SubOption 25',
+    category: 'Europe',
+    level: 2,
+    parentId: 'opt-4',
+  },
+  {
+    id: 'subopt-30',
+    text: 'SubOption 30',
+    category: 'Europe',
+    level: 2,
+    parentId: 'opt-4',
+  },
+  {
+    id: 'item-3',
+    text: 'Item 3',
+    category: 'Asia',
+    level: 0,
+    hasChildren: true,
+  },
+  {
+    id: 'opt-5',
+    text: 'Option 5',
+    category: 'Asia',
+    level: 1,
+    parentId: 'item-3',
+  },
+  {
+    id: 'item-4',
+    text: 'Item 4',
+    category: 'America',
+    level: 0,
+    hasChildren: true,
+  },
+  {
+    id: 'opt-7',
+    text: 'Option 7',
+    category: 'America',
+    level: 1,
+    hasChildren: true,
+    parentId: 'item-4',
+  },
+  {
+    id: 'subopt-20',
+    text: 'SubOption 20',
+    category: 'America',
+    level: 2,
+    parentId: 'opt-7',
+  },
+  {
+    id: 'subopt-15',
+    text: 'SubOption 15',
+    category: 'America',
+    level: 2,
+    parentId: 'opt-7',
+  },
+  {
+    id: 'opt-8',
+    text: 'Option 8',
+    category: 'America',
+    level: 1,
+    parentId: 'item-4',
+  },
+];
+const flattenSelectedItems = [
+  {
+    id: 'item-2',
+    text: 'Item 2',
+    category: 'Europe',
+    level: 0,
+    hasChildren: true,
+  },
+  {
+    id: 'opt-3',
+    text: 'Option 3',
+    category: 'Europe',
+    level: 1,
+    parentId: 'item-2',
+  },
+  {
+    id: 'subopt-30',
+    text: 'SubOption 30',
+    category: 'Europe',
+    level: 2,
+    parentId: 'opt-4',
+  },
+  {
+    id: 'item-3',
+    text: 'Item 3',
+    category: 'Asia',
+    level: 0,
+    hasChildren: true,
+  },
+  {
+    id: 'opt-5',
+    text: 'Option 5',
+    category: 'Asia',
+    level: 1,
+    parentId: 'item-3',
+  },
+  {
+    id: 'item-4',
+    text: 'Item 4',
+    category: 'America',
+    level: 0,
+    hasChildren: true,
+  },
+  {
+    id: 'opt-7',
+    text: 'Option 7',
+    category: 'America',
+    level: 1,
+    hasChildren: true,
+    parentId: 'item-4',
+  },
+];
+
 const defaultPlaceholder = 'Filter';
 
 const types = {
@@ -117,20 +348,9 @@ const types = {
 };
 
 const props = () => ({
-  filterable: boolean(
-    'Filterable (`<MultiSelect.Filterable>` instead of `<MultiSelect>`)',
-    false
-  ),
+  flatList: boolean('Flat list', false),
   disabled: boolean('Disabled (disabled)', false),
   light: boolean('Light variant (light)', false),
-  useTitleInItem: boolean('Show tooltip on hover', false),
-  type: select('UI type (Only for `<MultiSelect>`) (type)', types, 'default'),
-  label: text('Label (label)', defaultLabel),
-  invalid: boolean('Show form validation UI (invalid)', false),
-  invalidText: text(
-    'Form validation UI content (invalidText)',
-    'Invalid Selection'
-  ),
   onChange: action('onChange'),
 });
 
@@ -143,15 +363,17 @@ storiesOf('NestedFilterableMultiselect', module)
         Nested Filterable Multiselect
       `,
     })(() => {
-      const { filterable, ...multiSelectProps } = props();
-      const placeholder = !filterable ? undefined : defaultPlaceholder;
+      const { flatList, ...multiSelectProps } = props();
       return (
         <div style={{ width: 300 }}>
           <NestedFilterableMultiselect
             {...multiSelectProps}
-            items={items}
+            key={flatList ? 'flat' : 'hierarchy'}
+            items={flatList ? flattenItems : items}
             itemToString={item => (item ? item.text : '')}
-            initialSelectedItems={selectedItems}
+            initialSelectedItems={
+              flatList ? flattenSelectedItems : selectedItems
+            }
             placeholder={defaultPlaceholder}
           />
         </div>