Added new prop: selectedItemHeight (#130)

* Added new prop: selectedItemHeight * added selectedItemHeight to the tests
kenshoo · Feb 7, 2019 · 2704a32 · 2704a32
1 parent 3f00ad7
commit 2704a32
Show file tree

Hide file tree

Showing 5 changed files with 351 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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]}