@hipay/hipay-material-ui 2.0.0-beta.66 → 2.0.0-beta.68

package/es/HiSelectableList/HiSelectableList.js

@@ -7,6 +7,7 @@ import withStyles from '../styles/withStyles';
 import HiSelectableListItem from './HiSelectableListItem';
 import { getNextItemSelectable, foldAccents } from '../utils/helpers';
 import keycode from 'keycode';
+import LazyLoad, { forceCheck } from 'react-lazyload';
 export const styles = () => ({
   root: {
     padding: 0
@@ -52,18 +53,35 @@ class HiSelectableList extends React.PureComponent {
         hideCheckbox,
         hoverIcon,
         icon,
+        lazy,
         selectedItemIdList,
         sort,
         onKeyDown,
         onKeyUp
       } = _this$props,
-            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
+            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
 
       if (sort && item.children) {
         item.children.sort(this.compareItem);
       }
 
-      return React.createElement(React.Fragment, {
+      const placeholderContent = React.createElement("div", {
+        style: {
+          width: '90%',
+          padding: '8px 6px',
+          height: 40,
+          position: 'sticky',
+          left: 0
+        }
+      }, React.createElement("div", {
+        style: {
+          backgroundColor: '#F5F5F5',
+          width: '100%',
+          height: '100%',
+          borderRadius: 4
+        }
+      }));
+      const itemComponent = React.createElement(React.Fragment, {
         key: item.id
       }, React.createElement(HiSelectableListItem, _extends({}, others, {
         checkedIcon: checkedIcon,
@@ -79,6 +97,19 @@ class HiSelectableList extends React.PureComponent {
         ,
         item: item
       }, item)), item.children && item.children.length > 0 && item.children.filter(subItem => !(subItem.displayed === false)).map(subItem => this.buildRecursiveListItem(subItem, level + 1)));
+
+      if (lazy) {
+        return React.createElement(LazyLoad, {
+          key: item.id,
+          height: 40,
+          offset: 400,
+          once: true,
+          overflow: true,
+          placeholder: placeholderContent
+        }, itemComponent);
+      } else {
+        return itemComponent;
+      }
     };
 
     this.compareItem = (a, b) => {
@@ -133,6 +164,12 @@ class HiSelectableList extends React.PureComponent {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.lazy && prevProps.itemList !== this.props.itemList) {
+      forceCheck();
+    }
+  }
+
   render() {
     const {
       classes,
@@ -161,6 +198,7 @@ HiSelectableList.defaultProps = {
   disabled: false,
   disabledItemIdList: [],
   hideCheckbox: false,
+  lazy: true,
   selectedItemIdList: [],
   sort: false,
   sortAppendList: ['_all']
@@ -216,6 +254,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   itemList: PropTypes.array.isRequired,
 
+  /**
+   * Active lazyloading on list items
+   */
+  lazy: PropTypes.bool,
+
   /**
    * Fonction de callback à la sélection d'un item, renvoie l'item sélectionné
    *

package/es/HiTable/HiTableRow.js

@@ -19,7 +19,7 @@ export const styles = theme => ({
       backgroundColor: `${theme.palette.action.hover} !important`
     }
   },
-  clicableRow: {
+  clickableRow: {
     cursor: 'pointer'
   }
 });
@@ -47,7 +47,7 @@ class HiTableRow extends React.PureComponent {
     } = this.props;
     return React.createElement(TableRow, {
       className: classNames(classes.row, {
-        [classes.clicableRow]: this.props.onClick
+        [classes.clickableRow]: this.props.onClick
       }),
       hover: true,
       onClick: event => this.handleClick(event, rowdata),

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.65
+/** @license HiPay-Material-UI v2.0.0-beta.68
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.65
+/** @license HiPay-Material-UI v2.0.0-beta.68
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.66",
+  "version": "2.0.0-beta.68",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -58,6 +58,7 @@
     "react-day-picker": "^7.2.4",
     "react-event-listener": "^0.6.2",
     "react-jss": "^8.1.0",
+    "react-lazyload": "^2.5.0",
     "react-leaflet": "^2.1.0",
     "react-pdf": "^3.0.5",
     "react-spinners": "^0.4.5",
@@ -73,4 +74,4 @@
   },
   "main": "./index.js",
   "module": "./index.es.js"
-}
+}