Merge pull request #128 from quriobot/add-custom-listRenderer-and-mul…

…tiImageSelect-to-the-stories

Add custom list renderer and multi image select to the stories

package.json

@@ -11,6 +11,7 @@
     "build:stats": "NODE_ENV=production webpack  --config config/webpack/webpack.prod.js -p --bail --json > stats.json  --mode production",
     "build:production": "webpack --config config/webpack/webpack.prod.js --mode production",
     "test": "cross-env BABEL_DISABLE_CACHE=1 jest --config config/jest/jest.config.json --coverage",
+    "test:updateSnapshot": "cross-env BABEL_DISABLE_CACHE=1 jest --config config/jest/jest.config.json --updateSnapshot",
     "test:watch": "cross-env BABEL_DISABLE_CACHE=1 jest --watchAll --config config/jest/jest.config.json",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
@@ -71,6 +72,7 @@
     "react-addons-test-utils": "^15.0.0",
     "react-addons-update": "^15.4.1",
     "react-dom": "^16.0.0",
+    "react-slick": "^0.23.2",
     "react-test-renderer": "^16.0.0",
     "sass-loader": "^6.0.6",
     "semantic-release": "^8.2.0",

src/components/destination_list.js

@@ -1,8 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { List } from "react-virtualized/dist/commonjs/List";
 
 import Column from "./column/column";
-import List from "./list/items_list";
+import ItemsList from "./list/items_list";
 import NoItems from "./items/no_items";
 import SelectedItem from "./items/selected_item";
 import SelectionStatus from "./selection_status/selection_status";
@@ -34,7 +35,7 @@ const DestinationList = ({
         selectedMessage={messages.selectedMessage}
         noneSelectedMessage={messages.noneSelectedMessage}
       />
-      <List
+      <ItemsList
         items={updatedSelectedItems}
         itemHeight={itemHeight}
         height={height - 45}
@@ -62,6 +63,7 @@ DestinationList.propTypes = {
 };
 
 DestinationList.defaultProps = {
+  listRenderer: List,
   selectionStatusRenderer: SelectionStatus,
   selectedIds: [],
   messages: {},

src/components/list/items_list.js

@@ -7,6 +7,7 @@ import InnerList from "./list";
 class ItemsList extends PureComponent {
   static propTypes = {
     renderer: PropTypes.any,
+    listRenderer: PropTypes.any,
     noItemsRenderer: PropTypes.any,
     itemHeight: PropTypes.number,
     height: PropTypes.number,
@@ -34,7 +35,9 @@ class ItemsList extends PureComponent {
   }
 
   update() {
-    this.listRef.forceUpdateGrid();
+    if (this.listRef) {
+      this.listRef.forceUpdateGrid();
+    }
   }
 
   componentDidUpdate() {
@@ -54,6 +57,7 @@ class ItemsList extends PureComponent {
       noItemsMessage,
       noItemsRenderer,
       renderer,
+      listRenderer,
       selectedIds,
       onClick,
       disabled,
@@ -73,6 +77,7 @@ class ItemsList extends PureComponent {
             noItemsMessage={noItemsMessage}
             noItemsRenderer={noItemsRenderer}
             renderer={renderer}
+            listRenderer={listRenderer}
             itemHeight={itemHeight}
             onClick={onClick}
             items={items}

src/components/list/list.js

@@ -9,6 +9,7 @@ import NoItems from "../items/no_items";
 class InnerList extends PureComponent {
   static propTypes = {
     renderer: PropTypes.any,
+    listRenderer: PropTypes.any,
     noItemsRenderer: PropTypes.any,
     itemHeight: PropTypes.number,
     height: PropTypes.number,
@@ -22,6 +23,7 @@ class InnerList extends PureComponent {
 
   static defaultProps = {
     renderer: Item,
+    listRenderer: List,
     noItemsRenderer: NoItems,
     itemHeight: 40,
     height: 400,
@@ -85,16 +87,26 @@ class InnerList extends PureComponent {
   }
 
   render() {
-    const { height, itemHeight, items, offset, width, getlistRef } = this.props;
+    const {
+      height,
+      itemHeight,
+      items,
+      offset,
+      width,
+      getlistRef,
+      listRenderer
+    } = this.props;
+    const ListRenderer = listRenderer;
     return (
-      <List
+      <ListRenderer
         ref={getlistRef}
         className={styles.list}
         rowRenderer={this.rowRenderer}
         noRowsRenderer={this.noRowsRenderer}
         width={width - offset}
         rowHeight={itemHeight}
         height={height}
+        items={items}
         rowCount={items.length}
       />
     );

src/components/multi_select.js

@@ -29,13 +29,14 @@ export class MultiSelect extends PureComponent {
     searchIcon: PropTypes.string,
     deleteIcon: PropTypes.string,
     searchRenderer: PropTypes.func,
-    selectedItemRenderer: PropTypes.any,
+    selectedItemRenderer: PropTypes.func,
     height: PropTypes.number,
     itemHeight: PropTypes.number,
     selectAllHeight: PropTypes.number,
     loaderRenderer: PropTypes.any,
     maxSelectedItems: PropTypes.number,
     withGrouping: PropTypes.bool,
+    listRenderer: PropTypes.func,
     generateClassName: PropTypes.func
   };
 
@@ -100,7 +101,8 @@ export class MultiSelect extends PureComponent {
       maxSelectedItems,
       searchValue,
       withGrouping,
-      generateClassName
+      generateClassName,
+      listRenderer
     } = this.props;
     const calculatedHeight = this.calculateHeight();
     const selectedIds = selectedItems.map(item => item.id);
@@ -137,6 +139,7 @@ export class MultiSelect extends PureComponent {
               disabled={disabled}
               selectAllHeight={selectAllHeight}
               withGrouping={withGrouping}
+              listRenderer={listRenderer}
             />
           )}
           {!loading &&

src/components/source_list.js

@@ -1,8 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { List } from "react-virtualized/dist/commonjs/List";
 
 import Column from "./column/column";
-import List from "./list/items_list";
+import ItemsList from "./list/items_list";
 import NoItems from "./items/no_items";
 import Search from "./search/search";
 import SelectAll from "./items/select_all";
@@ -30,7 +31,8 @@ const SourceList = ({
   noItemsRenderer,
   disabled,
   searchValue,
-  withGrouping
+  withGrouping,
+  listRenderer
 }) => {
   const SearchRenderer = searchRenderer;
   const SelectAllRenderer = selectAllRenderer;
@@ -57,7 +59,7 @@ const SourceList = ({
           selectAllMessage={messages.selectAllMessage}
         />
       )}
-      <List
+      <ItemsList
         ref={getList}
         offset={1}
         items={updatedFilteredItems}
@@ -66,6 +68,7 @@ const SourceList = ({
         onClick={selectItem}
         selectedIds={selectedIds}
         renderer={itemRenderer}
+        listRenderer={listRenderer}
         noItemsRenderer={noItemsRenderer}
         noItemsMessage={messages.noItemsMessage}
         disabled={disabled}
@@ -95,14 +98,16 @@ SourceList.propTypes = {
   getList: PropTypes.func,
   selectItem: PropTypes.func,
   disabled: PropTypes.bool,
-  withGrouping: PropTypes.bool
+  withGrouping: PropTypes.bool,
+  listRenderer: PropTypes.func
 };
 
 SourceList.defaultProps = {
   searchRenderer: Search,
   selectAllRenderer: SelectAll,
   noItemsRenderer: NoItems,
   itemRenderer: Item,
+  listRenderer: List,
   showSearch: true,
   showSelectAll: true,
   isAllSelected: false,

stories/custom_components/list_renderer/index.js

@@ -0,0 +1,32 @@
+import React from "react";
+import Slider from "react-slick";
+import "!style-loader!css-loader!./style.scss";
+
+const ListRenderer = ({ items, width, height, className, rowRenderer }) => {
+  const Item = rowRenderer;
+  const settings = {
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  };
+
+  return (
+    <div
+      style={{
+        width,
+        height,
+        position: "absolute"
+      }}
+      className={className}
+    >
+      <Slider {...settings}>
+        {items.map((item, key) => (
+          <Item style={{ width }} key={key} index={key} />
+        ))}
+      </Slider>
+    </div>
+  );
+};
+
+export default ListRenderer;

stories/custom_components/list_renderer/item.js

@@ -0,0 +1,28 @@
+import React from "react";
+import TickOutline from "react-icons/lib/ti/tick-outline";
+import Tick from "react-icons/lib/ti/tick";
+
+import style from "./item_style.scss";
+
+const Item = ({ item, checked, height }) => {
+  return (
+    <div
+      className={style.item}
+      style={{
+        height,
+        backgroundImage: `url(${item.img})`
+      }}
+    >
+      <div className={`${style.icon} ${checked ? style.icon_checked : ""}`}>
+        {!checked ? (
+          <TickOutline color={!checked ? "#41B6E6" : ""} />
+        ) : (
+          <Tick color={checked ? "#fff" : ""} />
+        )}
+      </div>
+      <div className={style.label}>{item.label}</div>
+    </div>
+  );
+};
+
+export default Item;

stories/custom_components/list_renderer/item_style.scss

@@ -0,0 +1,37 @@
+.item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+
+    color: #000000;
+    background-size: cover;
+    background-color: #fff;
+}
+
+.icon {
+    position: absolute;
+    left: 15px;
+    top: 15px;
+    width: 50px;
+    height: 50px;
+    border-radius: 25px;
+    font-size: 3em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255,255,255, 0.2); 
+}
+
+.icon_checked {
+    background-color: #41B6E6;
+}
+
+.label {
+    font-size: 4em;
+    display: inline-block;
+    padding: .5em 1em;
+    border-radius: 5px;
+    background-color: rgba(255,255,255,.2);
+}

stories/custom_components/list_renderer/style.scss

@@ -0,0 +1,16 @@
+@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css");
+@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css");
+
+.slick-arrow {
+    z-index: 100;
+    transform: translate(0, -50%) scale(2);
+}
+.slick-prev {
+    left: 20px;
+}
+.slick-next {
+    right: 20px;
+}
+.slick-prev:before, .slick-next:before {
+    color: rgba(255,255,255,.4);
+}

stories/multi-select.stories.js

@@ -9,6 +9,8 @@ import SelectAll from "./custom_components/select_all";
 import SelectionStatus from "./custom_components/selection_status";
 import Search, { SearchWithValue } from "./custom_components/search";
 import Item from "./custom_components/item";
+import ListRenderer from "./custom_components/list_renderer";
+import ListRendererItem from "./custom_components/list_renderer/item";
 import SelectedItem from "./custom_components/selected_item";
 import * as utils from "./multi_select_stories_util";
 
@@ -196,7 +198,7 @@ storiesOf("React Multi Select", module)
     withReadme(Readme, () => {
       class ValueController extends React.Component {
         state = {
-          value: ""
+          value: "",
         };
 
         onChange = value => {
@@ -253,4 +255,23 @@ storiesOf("React Multi Select", module)
         />
       );
     })
+  )
+  .add(
+    "Carousel Multi Select",
+    withReadme(Readme, () => {
+      return (
+        <ReactMultiSelect
+          listRenderer={ListRenderer}
+          itemRenderer={ListRendererItem}
+          selectAllHeight={40}
+          itemHeight={300}
+          items={utils.images}
+          loading={boolean("Loading", false)}
+          onChange={action("onChange")}
+          showSearch={boolean("Show search", true)}
+          showSelectAll={boolean("Show select all", true)}
+          messages={{ disabledItemsTooltip: "You can select up to 4 items" }}
+        />
+      );
+    })
   );

stories/multi_select_stories_util.js

@@ -20,8 +20,17 @@ const generateItemsWithGroups = (size, groupSize) =>
     group: `Group ${Math.floor(index / groupSize)}`
   }));
 
+const generateImages = size =>
+  Array.apply(null, { length: size }).map((i, index) => ({
+    id: index,
+    label: `Item ${index}`,
+    img: `https://picsum.photos/600/400?image=${index * 10}`
+  }));
+
 export const items = generateItems(50);
 
+export const images = generateImages(10);
+
 export const manyItems = generateItems(7000);
 
 export const withDisabledItems = generateItems(10).map((i, index) => ({