Merge pull request #113 from kenshoo/add-item-grouping

Item grouping

README.md

@@ -94,6 +94,7 @@ class Example extends Component {
 | `searchValue`                   | `string`              |                                                  | The value of the search field.
 | `searchValueChanged`            | `function`            |                                                  | Function to handle the change of search field. Accepts value as a single argument.
 |`responsiveHeight`               | `string`              | 400px                                            | Responsive height of the wrapping component, can send percent for example: `70%` 
+|`withGrouping`                   | `boolean`             | false                                            | Your items will be grouped by the group prop values - see "item grouping" section below  
 
 
 ## Customization
@@ -122,6 +123,8 @@ Each item receives the following props:
 
 `disabled` - defines if item should be disabled. Item won't be clickable for selection and will be ignored when clicking "Select All".
 
+`group` - group item - no checkbox, not clickable, black colored
+
 <br/>
 
 **Select All**
@@ -236,6 +239,20 @@ You can use your own messages. Here is the default messages object:
   }
 ```
 
+#### Item grouping
+
+You can add also grouping to your items - add a group prop with the group name as a value to each of your items and add withGrouping prop as well.
+```jsx
+ <MultiSelect
+         items={[{id: 1, label: "item1", group: "group1"},
+                 {id: 2, label: "item2", group: "group1"}
+                 {id: 3, label: "item3", group: "group2"}]}
+         withGrouping
+         selectedItems={selectedItems}
+         onChange={this.handleChange}
+       />
+```
+
 ## How to Contribute
 
 #### Setting up development environment

src/components/destination_list.js

@@ -6,6 +6,7 @@ import List from "./list/items_list";
 import NoItems from "./items/no_items";
 import SelectedItem from "./items/selected_item";
 import SelectionStatus from "./selection_status/selection_status";
+import { groupItems } from "./item_grouping_util";
 
 const DestinationList = ({
   selectionStatusRenderer,
@@ -17,9 +18,13 @@ const DestinationList = ({
   height,
   unselectItems,
   selectedItemRenderer,
-  noItemsRenderer
+  noItemsRenderer,
+  withGrouping
 }) => {
   const SelectionStatusRenderer = selectionStatusRenderer;
+  const updatedSelectedItems = withGrouping
+    ? groupItems(selectedItems)
+    : selectedItems;
   return (
     <Column>
       <SelectionStatusRenderer
@@ -30,7 +35,7 @@ const DestinationList = ({
         noneSelectedMessage={messages.noneSelectedMessage}
       />
       <List
-        items={selectedItems}
+        items={updatedSelectedItems}
         itemHeight={itemHeight}
         height={height - 45}
         onClick={(event, id) => unselectItems([id])}
@@ -52,7 +57,8 @@ DestinationList.propTypes = {
   height: PropTypes.number,
   unselectItems: PropTypes.func,
   selectedItemRenderer: PropTypes.any,
-  noItemsRenderer: PropTypes.any
+  noItemsRenderer: PropTypes.any,
+  withGrouping: PropTypes.bool
 };
 
 DestinationList.defaultProps = {
@@ -63,7 +69,8 @@ DestinationList.defaultProps = {
   itemHeight: 40,
   height: 400,
   selectedItemRenderer: SelectedItem,
-  noItemsRenderer: NoItems
+  noItemsRenderer: NoItems,
+  withGrouping: false
 };
 
 export default DestinationList;

src/components/item_grouping_util.js

@@ -0,0 +1,23 @@
+const generateGroup = name => ({
+  id: name,
+  label: name,
+  isGroup: true,
+  disabled: true
+});
+
+const getGroupItems = (groupName, items) => {
+  return items.filter(item => item.group === groupName);
+};
+
+export const groupItems = items => {
+  if (!items || items.length === 0) {
+    return items;
+  }
+  const uniqueGroups = Array.from(new Set(items.map(item => item.group)));
+  return uniqueGroups.reduce((result, groupName) => {
+    const groupItems = getGroupItems(groupName, items);
+    result.push(generateGroup(groupName));
+    result.push(...groupItems);
+    return result;
+  }, []);
+};

src/components/items/item.js

@@ -11,6 +11,7 @@ const Item = ({
   height,
   onClick,
   withBorder,
+  group,
   checked,
   indeterminate,
   disabled
@@ -19,18 +20,21 @@ const Item = ({
     className={classnames(styles.item, {
       [styles.with_border]: withBorder,
       [styles.selected]: checked,
-      [styles.disabled]: disabled
+      [styles.disabled]: disabled,
+      [styles.with_grouping]: group
     })}
     style={{ height }}
     onClick={onClick}
   >
-    <Checkbox
-      type="checkbox"
-      color="primary"
-      checked={checked}
-      indeterminate={indeterminate}
-      disabled={disabled}
-    />
+    {!group && (
+      <Checkbox
+        type="checkbox"
+        color="primary"
+        checked={checked}
+        indeterminate={indeterminate}
+        disabled={disabled}
+      />
+    )}
     <ItemLabel label={item.label} />
   </div>
 );

src/components/items/item.scss

@@ -25,4 +25,9 @@
 
 .with_border {
   border-bottom: 1px solid $border-color;
-}
+}
+
+.with_grouping {
+  color: $color-black;
+  padding-left: 10px;
+}

src/components/items/selected_item.js

@@ -6,12 +6,17 @@ import ItemLabel from "./item_label";
 
 import styles from "./selected_item.scss";
 
-const SelectedItem = ({ item, height }) => (
-  <div className={styles.selected_item} style={{ height }}>
+const SelectedItem = ({ item, height, group }) => (
+  <div
+    className={group ? styles.with_grouping : styles.selected_item}
+    style={{ height }}
+  >
     <ItemLabel label={item.label} />
-    <IconButton>
-      <CloseIcon />
-    </IconButton>
+    {!group && (
+      <IconButton>
+        <CloseIcon />
+      </IconButton>
+    )}
   </div>
 );
 

src/components/items/selected_item.scss

@@ -11,4 +11,10 @@
   &:hover {
     background-color: $hover-background-color;
   }
-}
+}
+
+.with_grouping {
+  @extend .selected_item;
+  pointer-events: none;
+  color: $color-black;
+}

src/components/list/list.js

@@ -69,6 +69,7 @@ class InnerList extends PureComponent {
       >
         <Renderer
           item={item}
+          group={item.isGroup}
           height={itemHeight}
           checked={checked}
           disabled={disabled && !checked}

src/components/multi_select.js

@@ -28,7 +28,8 @@ export class MultiSelect extends PureComponent {
     itemHeight: PropTypes.number,
     selectAllHeight: PropTypes.number,
     loaderRenderer: PropTypes.any,
-    maxSelectedItems: PropTypes.number
+    maxSelectedItems: PropTypes.number,
+    withGrouping: PropTypes.bool
   };
 
   static defaultProps = {
@@ -40,7 +41,8 @@ export class MultiSelect extends PureComponent {
     showSelectedItems: true,
     height: 400,
     itemHeight: 40,
-    loaderRenderer: Loader
+    loaderRenderer: Loader,
+    withGrouping: false
   };
 
   calculateHeight() {
@@ -88,7 +90,8 @@ export class MultiSelect extends PureComponent {
       messages,
       loading,
       maxSelectedItems,
-      searchValue
+      searchValue,
+      withGrouping
     } = this.props;
     const calculatedHeight = this.calculateHeight();
     const selectedIds = selectedItems.map(item => item.id);
@@ -123,6 +126,7 @@ export class MultiSelect extends PureComponent {
             noItemsRenderer={noItemsRenderer}
             disabled={disabled}
             selectAllHeight={selectAllHeight}
+            withGrouping={withGrouping}
           />
         )}
         {!loading &&
@@ -138,6 +142,7 @@ export class MultiSelect extends PureComponent {
               unselectItems={unselectItems}
               selectedItemRenderer={selectedItemRenderer}
               noItemsRenderer={noItemsRenderer}
+              withGrouping={withGrouping}
             />
           )}
       </div>

src/components/source_list.js

@@ -7,6 +7,7 @@ import NoItems from "./items/no_items";
 import Search from "./search/search";
 import SelectAll from "./items/select_all";
 import Item from "./items/item";
+import { groupItems } from "./item_grouping_util";
 
 const SourceList = ({
   searchRenderer,
@@ -28,10 +29,14 @@ const SourceList = ({
   selectItem,
   noItemsRenderer,
   disabled,
-  searchValue
+  searchValue,
+  withGrouping
 }) => {
   const SearchRenderer = searchRenderer;
   const SelectAllRenderer = selectAllRenderer;
+  const updatedFilteredItems = withGrouping
+    ? groupItems(filteredItems)
+    : filteredItems;
   return (
     <Column>
       {showSearch && (
@@ -55,7 +60,7 @@ const SourceList = ({
       <List
         ref={getList}
         offset={1}
-        items={filteredItems}
+        items={updatedFilteredItems}
         itemHeight={itemHeight}
         height={calculatedHeight}
         onClick={selectItem}
@@ -89,7 +94,8 @@ SourceList.propTypes = {
   selectAllItems: PropTypes.func,
   getList: PropTypes.func,
   selectItem: PropTypes.func,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  withGrouping: PropTypes.bool
 };
 
 SourceList.defaultProps = {
@@ -105,7 +111,8 @@ SourceList.defaultProps = {
   selectedIds: [],
   filteredItems: [],
   messages: {},
-  disabled: false
+  disabled: false,
+  withGrouping: false
 };
 
 export default SourceList;