@hipay/hipay-material-ui 2.3.0-rc.4 → 2.3.0-rc.PSYCHE-2530

package/es/HiSelectableList/HiSelectableList.js

@@ -1,78 +1,130 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import React from 'react';
-import PropTypes from 'prop-types';
-import List from '@material-ui/core/List';
-import { withStyles } from '@material-ui/core/styles';
-import HiSelectableListItem from './HiSelectableListItem';
-import { getNextItemSelectable, foldAccents } from '../utils/helpers';
-import keycode from 'keycode';
-import LazyLoad, { forceCheck } from 'react-lazyload';
-import classNames from 'classnames';
-export const styles = theme => ({
-  root: {
-    padding: 0
-  },
-  suggestionFocus: {
-    backgroundColor: theme.palette.action.hover,
-    fontWeight: theme.typography.fontWeightMedium
-  }
+"use strict";
+
+var _interopRequireWildcard = require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _List = _interopRequireDefault(require("@material-ui/core/List"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListItem"));
+
+var _helpers = require("../utils/helpers");
+
+var _keycode = _interopRequireDefault(require("keycode"));
+
+var _reactLazyload = _interopRequireWildcard(require("react-lazyload"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      padding: 0,
+      backgroundColor: theme.palette.background3
+    },
+    suggestionFocus: {
+      backgroundColor: theme.palette.action.hover,
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  };
+};
 /**
  * Construit une liste d'item sélectionnable (avec checkbox)
  * - la navigation au clavier est gérée par l'event KeyDown
  * - le premier focus est géré sur le DidMount
  */
 
-class HiSelectableList extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
 
-    this.handleSelect = item => event => {
-      this.props.onSelect(event, item);
-    };
+exports.styles = styles;
+
+var HiSelectableList =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiSelectableList, _React$PureComponent);
 
-    this.handleKeyDown = event => {
-      let nextItem;
-      const key = keycode(event);
+  function HiSelectableList() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiSelectableList);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiSelectableList)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelect", function (item) {
+      return function (event) {
+        _this.props.onSelect(event, item);
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
+      var nextItem;
+      var key = (0, _keycode.default)(event);
 
       if (key === 'down') {
         event.preventDefault();
-        nextItem = getNextItemSelectable(document.activeElement, 'down');
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
       } else if (key === 'up') {
         event.preventDefault();
-        nextItem = getNextItemSelectable(document.activeElement, 'up');
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
       }
 
       if (nextItem) {
         nextItem.focus();
       }
-    };
-
-    this.buildRecursiveListItem = (item, index, level = 0) => {
-      const _this$props = this.props,
-            {
-        checkedIcon,
-        disabled,
-        disabledItemIdList,
-        hideCheckbox,
-        hoverIcon,
-        icon,
-        lazy,
-        selectedItemIdList,
-        sort,
-        onKeyDown,
-        onKeyUp,
-        suggestionFocusIndex,
-        classes
-      } = _this$props,
-            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp", "suggestionFocusIndex", "classes"]);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buildRecursiveListItem", function (item, index) {
+      var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var _this$props = _this.props,
+          checkedIcon = _this$props.checkedIcon,
+          disabled = _this$props.disabled,
+          disabledItemIdList = _this$props.disabledItemIdList,
+          hideCheckbox = _this$props.hideCheckbox,
+          hoverIcon = _this$props.hoverIcon,
+          icon = _this$props.icon,
+          lazy = _this$props.lazy,
+          selectedItemIdList = _this$props.selectedItemIdList,
+          sort = _this$props.sort,
+          onKeyDown = _this$props.onKeyDown,
+          onKeyUp = _this$props.onKeyUp,
+          suggestionFocusIndex = _this$props.suggestionFocusIndex,
+          classes = _this$props.classes,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp", "suggestionFocusIndex", "classes"]);
 
       if (sort && item.children) {
-        item.children.sort(this.compareItem);
+        item.children.sort(_this.compareItem);
       }
 
-      const placeholderContent = React.createElement("div", {
+      var placeholderContent = _react.default.createElement("div", {
         style: {
           width: '90%',
           padding: '8px 6px',
@@ -80,7 +132,7 @@ class HiSelectableList extends React.PureComponent {
           position: 'sticky',
           left: 0
         }
-      }, React.createElement("div", {
+      }, _react.default.createElement("div", {
         style: {
           backgroundColor: '#F5F5F5',
           width: '100%',
@@ -88,30 +140,33 @@ class HiSelectableList extends React.PureComponent {
           borderRadius: 4
         }
       }));
-      const itemComponent = React.createElement(React.Fragment, {
+
+      var itemComponent = _react.default.createElement(_react.default.Fragment, {
         key: item.id
-      }, React.createElement(HiSelectableListItem, _extends({}, others, {
+      }, _react.default.createElement(_HiSelectableListItem.default, (0, _extends2.default)({}, others, {
         checkedIcon: checkedIcon,
         disabled: disabled || disabledItemIdList.includes(item.id),
         hideCheckbox: hideCheckbox,
         hoverIcon: hoverIcon,
         icon: icon,
         level: level,
-        onSelect: this.handleSelect(item),
+        onSelect: _this.handleSelect(item),
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
         ,
         item: item,
         classes: {
-          listItem: classNames({
-            [classes.suggestionFocus]: index === suggestionFocusIndex
-          })
+          listItem: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.suggestionFocus, index === suggestionFocusIndex))
         }
-      }, item)), item.children && item.children.length > 0 && item.children.filter(subItem => !(subItem.displayed === false)).map(subItem => this.buildRecursiveListItem(subItem, index, level + 1)));
+      }, item)), item.children && item.children.length > 0 && item.children.filter(function (subItem) {
+        return !(subItem.displayed === false);
+      }).map(function (subItem) {
+        return _this.buildRecursiveListItem(subItem, index, level + 1);
+      }));
 
       if (lazy) {
-        return React.createElement(LazyLoad, {
+        return _react.default.createElement(_reactLazyload.default, {
           key: item.id,
           height: 40,
           offset: 400,
@@ -122,18 +177,17 @@ class HiSelectableList extends React.PureComponent {
       }
 
       return itemComponent;
-    };
-
-    this.compareItem = (a, b) => {
-      if (this.props.comparItemFunc) {
-        return this.props.comparItemFunc(a, b);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "compareItem", function (a, b) {
+      if (_this.props.comparItemFunc) {
+        return _this.props.comparItemFunc(a, b);
       }
 
       if (a.label === undefined || b.label === undefined) {
         return 0;
       }
 
-      const sortAppendList = this.props.sortAppendList;
+      var sortAppendList = _this.props.sortAppendList;
 
       if (sortAppendList.indexOf(a.id) < sortAppendList.indexOf(b.id)) {
         return 1;
@@ -143,69 +197,82 @@ class HiSelectableList extends React.PureComponent {
         return -1;
       }
 
-      return foldAccents(a.label.toString().toLowerCase()) > foldAccents(b.label.toString().toLowerCase()) ? 1 : -1;
-    };
+      return (0, _helpers.foldAccents)(a.label.toString().toLowerCase()) > (0, _helpers.foldAccents)(b.label.toString().toLowerCase()) ? 1 : -1;
+    });
+    return _this;
   }
 
-  componentDidMount() {
-    // Focus on last item selected
-    if (this.props.overlay && this.props.overlay.getElementsByTagName('li')[0]) {
-      if (Array.isArray(this.props.value) && this.props.value.length > 0 || !Array.isArray(this.props.value) && this.props.value) {
-        let item = this.props.overlay.getElementsByTagName('li')[0];
-        let lastSelectedValue = Array.isArray(this.props.value) ? this.props.value[this.props.value.length - 1] : this.props.value;
-        let index = 0;
-        this.props.itemList.forEach(option => {
-          if (option.id === lastSelectedValue) {
-            item = this.props.overlay.getElementsByTagName('li')[index];
-          }
-
-          index++;
-
-          if (option.children && option.children.length) {
-            option.children.forEach(option => {
-              if (option.id === lastSelectedValue) {
-                item = this.props.overlay.getElementsByTagName('li')[index];
-              }
-
-              index++;
-            });
-          }
-        });
-        item && item.focus();
+  (0, _createClass2.default)(HiSelectableList, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      // Focus on last item selected
+      if (this.props.overlay && this.props.overlay.getElementsByTagName('li')[0]) {
+        if (Array.isArray(this.props.value) && this.props.value.length > 0 || !Array.isArray(this.props.value) && this.props.value) {
+          var item = this.props.overlay.getElementsByTagName('li')[0];
+          var lastSelectedValue = Array.isArray(this.props.value) ? this.props.value[this.props.value.length - 1] : this.props.value;
+          var index = 0;
+          this.props.itemList.forEach(function (option) {
+            if (option.id === lastSelectedValue) {
+              item = _this2.props.overlay.getElementsByTagName('li')[index];
+            }
+
+            index++;
+
+            if (option.children && option.children.length) {
+              option.children.forEach(function (option) {
+                if (option.id === lastSelectedValue) {
+                  item = _this2.props.overlay.getElementsByTagName('li')[index];
+                }
+
+                index++;
+              });
+            }
+          });
+          item && item.focus();
+        }
       }
     }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.lazy && prevProps.itemList !== this.props.itemList) {
-      forceCheck();
-    }
-  }
-
-  render() {
-    const {
-      classes,
-      itemList,
-      sort
-    } = this.props;
-
-    if (sort) {
-      itemList.sort(this.compareItem);
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.lazy && prevProps.itemList !== this.props.itemList) {
+        (0, _reactLazyload.forceCheck)();
+      }
     }
-
-    return React.createElement(List, {
-      className: classes.root,
-      onKeyDown: this.handleKeyDown,
-      innerRef: el => {
-        this.el = el;
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          itemList = _this$props2.itemList,
+          sort = _this$props2.sort;
+
+      if (sort) {
+        itemList.sort(this.compareItem);
       }
-    }, itemList.filter(item => !(item.displayed === false)) // don't remove if undefined
-    .map((item, index) => this.buildRecursiveListItem(item, index)));
-  }
 
-}
+      return _react.default.createElement(_List.default, {
+        className: classes.root,
+        onKeyDown: this.handleKeyDown,
+        innerRef: function innerRef(el) {
+          _this3.el = el;
+        }
+      }, itemList.filter(function (item) {
+        return !(item.displayed === false);
+      }) // don't remove if undefined
+      .map(function (item, index) {
+        return _this3.buildRecursiveListItem(item, index);
+      }));
+    }
+  }]);
+  return HiSelectableList;
+}(_react.default.PureComponent);
 
-HiSelectableList.defaultProps = {
+(0, _defineProperty2.default)(HiSelectableList, "defaultProps", {
   allSelected: false,
   disabled: false,
   disabledItemIdList: [],
@@ -214,103 +281,12 @@ HiSelectableList.defaultProps = {
   selectedItemIdList: [],
   sort: false,
   sortAppendList: ['_all']
-};
-HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Définit si tous les items de la liste sont sélectionnés
-   */
-  allSelected: PropTypes.bool,
-
-  /**
-   * Icon affiché lorsque l'item est sélectionné
-   */
-  checkedIcon: PropTypes.node,
-
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: PropTypes.object,
-
-  /**
-   * Fonction de comparaison utilisée pour les tris
-   */
-  comparItemFunc: PropTypes.func,
-
-  /**
-   * Désactive la listes
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Liste des ids des items disabled
-   */
-  disabledItemIdList: PropTypes.array,
-
-  /**
-   * N'affiche pas de checkboxes
-   */
-  hideCheckbox: PropTypes.bool,
-
-  /**
-   * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
-   */
-  hoverIcon: PropTypes.node,
-
-  /**
-   * Icon affiché lorsque l'item n'est pas sélectionné
-   */
-  icon: PropTypes.node,
-
-  /**
-   * Liste d'éléments ([ { id: '', label: '', ... } ])
-   */
-  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é
-   *
-   * @param {object} event The event source of the callback
-   * @param {object} item selected/unselected
-   */
-  onSelect: PropTypes.func.isRequired,
-
-  /**
-   * Overlay récupéré au niveau de la div précédant le HiSelectInput
-   */
-  overlay: PropTypes.object,
-
-  /**
-   * Liste des id des éléments sélectionnés
-   */
-  selectedItemIdList: PropTypes.array,
-
-  /**
-   * Index de l'item "focus"
-   */
-  suggestionFocusIndex: PropTypes.number,
-
-  /**
-   * Tri des éléments selon leur label
-   */
-  sort: PropTypes.bool,
-
-  /**
-   * Liste des éléments à placer en premier, peu import le tri
-   */
-  sortAppendList: PropTypes.array,
-
-  /**
-   * Value(s) du select
-   */
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array])
-} : {};
-export default withStyles(styles, {
+});
+
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiSelectableList',
   index: 51
-})(HiSelectableList);
+})(HiSelectableList);
+
+exports.default = _default;