From 2704a323d05d2a28e1f9d29d8f0a0b73fee9571d Mon Sep 17 00:00:00 2001
From: Shamil Mammadov <shamil.mammadof@gmail.com>
Date: Thu, 7 Feb 2019 02:25:19 +0100
Subject: [PATCH] Added new prop: selectedItemHeight (#130)

* Added new prop: selectedItemHeight

* added selectedItemHeight to the tests
---
 README.md                                     |   1 +
 src/components/multi_select.js                |   4 +-
 stories/multi-select.stories.js               |   1 +
 .../__snapshots__/multi_select.spec.js.snap   | 332 ++++++++++++++++++
 tests/components/multi_select.spec.js         |  14 +
 5 files changed, 351 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 92f0f31..6c5764f 100644
--- a/README.md
+++ b/README.md
@@ -89,6 +89,7 @@ class Example extends Component {
 | `wrapperClassName`              | `String`              | ''                                               | wrapper class name - Used for customizing the style.
 | `height`                        | `number`              | 400                                              | available items list height.
 | `itemHeight`                    | `number`              | 40                                               | the height of an item in the list.
+| `selectedItemHeight`            | `number`              | `itemHeight`                                     | the height of the selected item in the list.
 | `selectAllHeight`               | `number`              | `itemHeight`                                     | the height of the selectAll component, by default will use the value of the itemHeight.
 | `maxSelectedItems`              | `number`              |                                                  | defines the maximum items that can be selected, overrides showSelectAll.
 | `filterFunction`                | `function`            | based on label                                   | The function used to filter items based on the search query.
diff --git a/src/components/multi_select.js b/src/components/multi_select.js
index 483ae20..902461f 100644
--- a/src/components/multi_select.js
+++ b/src/components/multi_select.js
@@ -32,6 +32,7 @@ export class MultiSelect extends PureComponent {
     selectedItemRenderer: PropTypes.func,
     height: PropTypes.number,
     itemHeight: PropTypes.number,
+    selectedItemHeight: PropTypes.number,
     selectAllHeight: PropTypes.number,
     loaderRenderer: PropTypes.any,
     maxSelectedItems: PropTypes.number,
@@ -76,6 +77,7 @@ export class MultiSelect extends PureComponent {
       showSearch,
       height,
       itemHeight,
+      selectedItemHeight,
       selectAllHeight,
       showSelectAll,
       showSelectedItems,
@@ -149,7 +151,7 @@ export class MultiSelect extends PureComponent {
               clearAll={clearAll}
               messages={messages}
               selectedItems={selectedItems}
-              itemHeight={itemHeight}
+              itemHeight={selectedItemHeight || itemHeight}
               height={height}
               unselectItems={unselectItems}
               selectedItemRenderer={selectedItemRenderer}
diff --git a/stories/multi-select.stories.js b/stories/multi-select.stories.js
index d88a1f0..9e2cb4f 100644
--- a/stories/multi-select.stories.js
+++ b/stories/multi-select.stories.js
@@ -265,6 +265,7 @@ storiesOf("React Multi Select", module)
           itemRenderer={ListRendererItem}
           selectAllHeight={40}
           itemHeight={300}
+          selectedItemHeight={40}
           items={utils.images}
           loading={boolean("Loading", false)}
           onChange={action("onChange")}
diff --git a/tests/components/__snapshots__/multi_select.spec.js.snap b/tests/components/__snapshots__/multi_select.spec.js.snap
index be2ce51..19500b1 100644
--- a/tests/components/__snapshots__/multi_select.spec.js.snap
+++ b/tests/components/__snapshots__/multi_select.spec.js.snap
@@ -3959,6 +3959,338 @@ exports[`MultiSelect will pass selectAllHeight without itemHeight 1`] = `
 </JssProvider>
 `;
 
+exports[`MultiSelect will pass selectedItemHeight 1`] = `
+<JssProvider
+  generateClassName={[Function]}
+  jss={
+    Jss {
+      "generateClassName": [Function],
+      "id": 3,
+      "options": Object {
+        "Renderer": [Function],
+        "createGenerateClassName": [Function],
+        "plugins": Array [
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+            "onProcessRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+            "onProcessStyle": [Function],
+            "onUpdate": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+            "onProcessRule": [Function],
+          },
+          Object {
+            "onProcessStyle": [Function],
+          },
+          Object {
+            "onChangeValue": [Function],
+            "onProcessStyle": [Function],
+          },
+          Object {
+            "onChangeValue": [Function],
+            "onProcessStyle": [Function],
+          },
+          Object {
+            "onChangeValue": [Function],
+            "onProcessRule": [Function],
+            "onProcessStyle": [Function],
+          },
+          Object {
+            "onProcessStyle": [Function],
+          },
+        ],
+      },
+      "plugins": PluginsRegistry {
+        "hooks": Object {
+          "onChangeValue": Array [
+            [Function],
+            [Function],
+            [Function],
+          ],
+          "onCreateRule": Array [
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+          ],
+          "onProcessRule": Array [
+            [Function],
+            [Function],
+            [Function],
+          ],
+          "onProcessSheet": Array [],
+          "onProcessStyle": Array [
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+          ],
+          "onUpdate": Array [
+            [Function],
+          ],
+        },
+      },
+      "version": "9.8.7",
+    }
+  }
+>
+  <div
+    className="wrapper"
+    style={
+      Object {
+        "height": 400,
+      }
+    }
+  >
+    <SourceList
+      calculatedHeight={315}
+      disabled={false}
+      filterItems={undefined}
+      filteredItems={Array []}
+      getList={undefined}
+      isAllSelected={false}
+      itemHeight={40}
+      itemRenderer={[Function]}
+      listRenderer={[Function]}
+      messages={Object {}}
+      noItemsRenderer={[Function]}
+      searchIcon={undefined}
+      searchRenderer={[Function]}
+      searchValue={undefined}
+      selectAllHeight={undefined}
+      selectAllItems={undefined}
+      selectAllRenderer={[Function]}
+      selectItem={undefined}
+      selectedIds={Array []}
+      showSearch={true}
+      showSelectAll={true}
+      withGrouping={false}
+    />
+    <DestinationList
+      clearAll={undefined}
+      height={400}
+      itemHeight={60}
+      listRenderer={[Function]}
+      messages={Object {}}
+      noItemsRenderer={[Function]}
+      selectedIds={Array []}
+      selectedItemRenderer={[Function]}
+      selectedItems={Array []}
+      selectionStatusRenderer={[Function]}
+      unselectItems={undefined}
+      withGrouping={false}
+    />
+  </div>
+</JssProvider>
+`;
+
+exports[`MultiSelect will pass selectedItemHeight 2`] = `
+<JssProvider
+  generateClassName={[Function]}
+  jss={
+    Jss {
+      "generateClassName": [Function],
+      "id": 3,
+      "options": Object {
+        "Renderer": [Function],
+        "createGenerateClassName": [Function],
+        "plugins": Array [
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+            "onProcessRule": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+            "onProcessStyle": [Function],
+            "onUpdate": [Function],
+          },
+          Object {
+            "onCreateRule": [Function],
+            "onProcessRule": [Function],
+          },
+          Object {
+            "onProcessStyle": [Function],
+          },
+          Object {
+            "onChangeValue": [Function],
+            "onProcessStyle": [Function],
+          },
+          Object {
+            "onChangeValue": [Function],
+            "onProcessStyle": [Function],
+          },
+          Object {
+            "onChangeValue": [Function],
+            "onProcessRule": [Function],
+            "onProcessStyle": [Function],
+          },
+          Object {
+            "onProcessStyle": [Function],
+          },
+        ],
+      },
+      "plugins": PluginsRegistry {
+        "hooks": Object {
+          "onChangeValue": Array [
+            [Function],
+            [Function],
+            [Function],
+          ],
+          "onCreateRule": Array [
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+          ],
+          "onProcessRule": Array [
+            [Function],
+            [Function],
+            [Function],
+          ],
+          "onProcessSheet": Array [],
+          "onProcessStyle": Array [
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+            [Function],
+          ],
+          "onUpdate": Array [
+            [Function],
+          ],
+        },
+      },
+      "version": "9.8.7",
+    }
+  }
+>
+  <div
+    className="wrapper"
+    style={
+      Object {
+        "height": 400,
+      }
+    }
+  >
+    <SourceList
+      calculatedHeight={315}
+      disabled={false}
+      filterItems={undefined}
+      filteredItems={Array []}
+      getList={undefined}
+      isAllSelected={false}
+      itemHeight={40}
+      itemRenderer={[Function]}
+      listRenderer={[Function]}
+      messages={Object {}}
+      noItemsRenderer={[Function]}
+      searchIcon={undefined}
+      searchRenderer={[Function]}
+      searchValue={undefined}
+      selectAllHeight={undefined}
+      selectAllItems={undefined}
+      selectAllRenderer={[Function]}
+      selectItem={undefined}
+      selectedIds={Array []}
+      showSearch={true}
+      showSelectAll={true}
+      withGrouping={false}
+    />
+    <DestinationList
+      clearAll={undefined}
+      height={400}
+      itemHeight={60}
+      listRenderer={[Function]}
+      messages={Object {}}
+      noItemsRenderer={[Function]}
+      selectedIds={Array []}
+      selectedItemRenderer={[Function]}
+      selectedItems={Array []}
+      selectionStatusRenderer={[Function]}
+      unselectItems={undefined}
+      withGrouping={false}
+    />
+  </div>
+</JssProvider>
+`;
+
 exports[`MultiSelect with generateClassName 1`] = `
 <JssProvider
   generateClassName={[Function]}
diff --git a/tests/components/multi_select.spec.js b/tests/components/multi_select.spec.js
index 097c502..78857be 100644
--- a/tests/components/multi_select.spec.js
+++ b/tests/components/multi_select.spec.js
@@ -183,6 +183,20 @@ describe("MultiSelect", () => {
     expect(tree).toMatchSnapshot();
   });
 
+  test("will pass selectedItemHeight", () => {
+    const renderer = new ShallowRenderer();
+    const tree = renderer.render(<MultiSelect selectedItemHeight={60} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  test("will pass selectedItemHeight", () => {
+    const renderer = new ShallowRenderer();
+    const tree = renderer.render(
+      <MultiSelect itemHeight={40} selectedItemHeight={60} />
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
   test("will pass selectAllHeight", () => {
     const renderer = new ShallowRenderer();
     const tree = renderer.render(