Merge pull request #76 from kenshoo/add_support_to_showSelectedItems_

Add support for showSelectedItems - default = true
kenshoo · Mar 28, 2018 · 67540ee · 67540ee
2 parents 95f75c7 + 33fdc5f
commit 67540ee
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 16 deletions.
diff --git a/src/components/multi_select.js b/src/components/multi_select.js
@@ -18,6 +18,7 @@ export class MultiSelect extends PureComponent {
     onChange: PropTypes.func,
     showSearch: PropTypes.bool,
     showSelectAll: PropTypes.bool,
+    showSelectedItems: PropTypes.bool,
     searchIcon: PropTypes.string,
     deleteIcon: PropTypes.string,
     searchRenderer: PropTypes.func,
@@ -34,6 +35,7 @@ export class MultiSelect extends PureComponent {
     messages: {},
     showSearch: true,
     showSelectAll: true,
+    showSelectedItems: true,
     height: 400,
     itemHeight: 40,
     loaderRenderer: Loader
@@ -59,6 +61,7 @@ export class MultiSelect extends PureComponent {
       height,
       itemHeight,
       showSelectAll,
+      showSelectedItems,
       itemRenderer,
       selectedItemRenderer,
       filteredItems,
@@ -113,20 +116,21 @@ export class MultiSelect extends PureComponent {
             disabled={disabled}
           />
         )}
-        {!loading && (
-          <DestinationList
-            selectionStatusRenderer={selectionStatusRenderer}
-            selectedIds={selectedIds}
-            clearAll={clearAll}
-            messages={messages}
-            selectedItems={selectedItems}
-            itemHeight={itemHeight}
-            height={height}
-            unselectItem={unselectItem}
-            selectedItemRenderer={selectedItemRenderer}
-            noItemsRenderer={noItemsRenderer}
-          />
-        )}
+        {!loading &&
+          showSelectedItems && (
+            <DestinationList
+              selectionStatusRenderer={selectionStatusRenderer}
+              selectedIds={selectedIds}
+              clearAll={clearAll}
+              messages={messages}
+              selectedItems={selectedItems}
+              itemHeight={itemHeight}
+              height={height}
+              unselectItem={unselectItem}
+              selectedItemRenderer={selectedItemRenderer}
+              noItemsRenderer={noItemsRenderer}
+            />
+          )}
       </div>
     );
   }

diff --git a/stories/multi-select.stories.js b/stories/multi-select.stories.js
@@ -115,6 +115,18 @@ storiesOf("React Multi Select", module)
       />
     );
   })
+  .add("Without Selected Items", () => {
+    return (
+      <ReactMultiSelect
+        items={manyItems}
+        loading={boolean("Loading", false)}
+        onChange={action("onChange")}
+        showSearch={boolean("Show search", true)}
+        showSelectAll={boolean("Show select all", true)}
+        showSelectedItems={boolean("Show selected items", false)}
+      />
+    );
+  })
   .add("With custom components", () => {
     return (
       <ReactMultiSelect

diff --git a/tests/components/__snapshots__/multi_select.spec.js.snap b/tests/components/__snapshots__/multi_select.spec.js.snap
@@ -88,6 +88,38 @@ exports[`MultiSelect can remove select all 1`] = `
 </div>
 `;
 
+exports[`MultiSelect can remove selected items 1`] = `
+<div
+  className="wrapper"
+  style={
+    Object {
+      "height": 400,
+    }
+  }
+>
+  <SourceList
+    calculatedHeight={315}
+    disabled={false}
+    filterItems={undefined}
+    filteredItems={Array []}
+    getList={undefined}
+    isAllSelected={false}
+    itemHeight={40}
+    itemRenderer={[Function]}
+    messages={Object {}}
+    noItemsRenderer={[Function]}
+    searchIcon={undefined}
+    searchRenderer={[Function]}
+    selectAllItems={undefined}
+    selectAllRenderer={[Function]}
+    selectItem={undefined}
+    selectedIds={Array []}
+    showSearch={true}
+    showSelectAll={true}
+  />
+</div>
+`;
+
 exports[`MultiSelect custom itemRenderer 1`] = `
 <div
   className="wrapper"

diff --git a/tests/components/multi_select.spec.js b/tests/components/multi_select.spec.js
@@ -81,13 +81,17 @@ describe("MultiSelect", () => {
 
   test("passes disabled if maxSelectedItem has passed", () => {
     const renderer = new ShallowRenderer();
-    const tree = renderer.render(<MultiSelect selectedItems={[1, 2]} maxSelectedItems={2}/>);
+    const tree = renderer.render(
+      <MultiSelect selectedItems={[1, 2]} maxSelectedItems={2} />
+    );
     expect(tree).toMatchSnapshot();
   });
 
   test("does not pass disabled if maxSelectedItem has passed", () => {
     const renderer = new ShallowRenderer();
-    const tree = renderer.render(<MultiSelect selectedItems={[1, 2]} maxSelectedItems={4}/>);
+    const tree = renderer.render(
+      <MultiSelect selectedItems={[1, 2]} maxSelectedItems={4} />
+    );
     expect(tree).toMatchSnapshot();
   });
 
@@ -148,4 +152,10 @@ describe("MultiSelect", () => {
     );
     expect(tree).toMatchSnapshot();
   });
+
+  test("can remove selected items", () => {
+    const renderer = new ShallowRenderer();
+    const tree = renderer.render(<MultiSelect showSelectedItems={false} />);
+    expect(tree).toMatchSnapshot();
+  });
 });