@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.36

package/HiSelectableList/HiSelectableList.js

@@ -1,264 +1,224 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-exports.styles = undefined;
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+exports.default = exports.styles = void 0;
 
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _createClass3 = _interopRequireDefault(_createClass2);
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _inherits2 = require('babel-runtime/helpers/inherits');
+var _react = _interopRequireDefault(require("react"));
 
-var _inherits3 = _interopRequireDefault(_inherits2);
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = require('react');
+var _List = _interopRequireDefault(require("@material-ui/core/List"));
 
-var _react2 = _interopRequireDefault(_react);
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
-var _propTypes = require('prop-types');
+var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListItem"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var styles = function styles() {
+  return {
+    root: {}
+  };
+};
+/**
+ * Construit une liste d'item sélectionnable (avec checkbox)
+ */
 
-var _mdiMaterialUi = require('mdi-material-ui');
 
-var _reactCustomScrollbars = require('react-custom-scrollbars');
+exports.styles = styles;
 
-var _List = require('material-ui/List');
+var HiSelectableList =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiSelectableList, _React$PureComponent);
 
-var _List2 = _interopRequireDefault(_List);
+  function HiSelectableList() {
+    var _getPrototypeOf2;
 
-var _withStyles = require('../styles/withStyles');
+    var _this;
 
-var _withStyles2 = _interopRequireDefault(_withStyles);
+    (0, _classCallCheck2.default)(this, HiSelectableList);
 
-var _HiSelectableListItem = require('./HiSelectableListItem');
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-var _HiSelectableListItem2 = _interopRequireDefault(_HiSelectableListItem);
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiSelectableList)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+    _this.handleSelect = function (item) {
+      return function (event) {
+        _this.props.onSelect(event, item);
+      };
+    };
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        root: {
-            padding: 0
-        }
+    _this.buildRecursiveListItem = function (item) {
+      var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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,
+          selectedItemIdList = _this$props.selectedItemIdList,
+          sort = _this$props.sort,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort"]);
+
+      if (sort && item.children) {
+        item.children.sort(_this.compareItem);
+      }
+
+      return _react.default.createElement(_react.default.Fragment, {
+        key: item.id
+      }, _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),
+        selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
+
+      }, item)), item.children && item.children.length > 0 && item.children.filter(function (subItem) {
+        return !(subItem.displayed === false);
+      }).map(function (subItem) {
+        return _this.buildRecursiveListItem(subItem, level + 1);
+      }));
     };
-};
 
-/**
- * Construit une liste d'item sélectionnable (avec checkbox)
- */
+    _this.compareItem = function (a, b) {
+      if (a.label === undefined || b.label === undefined) {
+        return 0;
+      }
 
-var HiSelectableList = function (_React$PureComponent) {
-    (0, _inherits3.default)(HiSelectableList, _React$PureComponent);
+      return a.label.toString().toLowerCase() > b.label.toString().toLowerCase();
+    };
 
-    function HiSelectableList() {
-        (0, _classCallCheck3.default)(this, HiSelectableList);
-        return (0, _possibleConstructorReturn3.default)(this, (HiSelectableList.__proto__ || (0, _getPrototypeOf2.default)(HiSelectableList)).apply(this, arguments));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiSelectableList, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          itemList = _this$props2.itemList,
+          onKeyDown = _this$props2.onKeyDown,
+          sort = _this$props2.sort;
+
+      if (sort) {
+        itemList.sort(this.compareItem);
+      }
+
+      return _react.default.createElement(_List.default, {
+        className: classes.root,
+        onKeyDown: onKeyDown
+      }, itemList.filter(function (item) {
+        return !(item.displayed === false);
+      }) // don't remove if undefined
+      .map(function (item) {
+        return _this2.buildRecursiveListItem(item);
+      }));
     }
-
-    (0, _createClass3.default)(HiSelectableList, [{
-        key: 'render',
-        value: function render() {
-            var _props = this.props,
-                classes = _props.classes,
-                itemList = _props.itemList,
-                selectedIdList = _props.selectedIdList,
-                onSelect = _props.onSelect,
-                maxHeight = _props.maxHeight,
-                hierarchySelected = _props.hierarchySelected,
-                parentItemSelectable = _props.parentItemSelectable,
-                hierarchy = _props.hierarchy,
-                translations = _props.translations,
-                icon = _props.icon,
-                parentIcon = _props.parentIcon,
-                hoverIcon = _props.hoverIcon,
-                checkedIcon = _props.checkedIcon,
-                allSelected = _props.allSelected,
-                checkbox = _props.checkbox,
-                hierarchic = _props.hierarchic,
-                disabledIds = _props.disabledIds,
-                others = (0, _objectWithoutProperties3.default)(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic', 'disabledIds']);
-
-
-            var parents = [];
-
-            return _react2.default.createElement(
-                _reactCustomScrollbars.Scrollbars,
-                { autoHeight: true, autoHeightMax: maxHeight },
-                _react2.default.createElement(
-                    _List2.default,
-                    { className: classes.root, onKeyDown: this.props.onKeyDown },
-                    itemList.map(function (item) {
-                        /**
-                         * Calcul du level de l'item
-                         */
-                        if (hierarchic) {
-                            // On stocke l'id des parents dans un tableau
-                            if (item.parentId && !parents.includes(item.parentId)) {
-                                parents.push(item.parentId);
-                            } else if (item.parentId && parents.includes(item.parentId)) {
-                                // Si l'item n'a pas de parentId ou qu'on l'a déjà stocké :
-                                // Et si le parentId n'est pas le dernier inseré
-                                if (item.parentId !== parents[parents.length - 1]) {
-                                    // On est donc redescendu d'un niveau
-                                    // donc on supprime le dernier parent
-                                    parents.pop();
-                                }
-                            } else if (!item.parentId && parents.length > 0) {
-                                // Si l'item n'a pas de parent et que le tableau des parent
-                                // n'est pas vide => on le réinitialise
-                                parents = [];
-                            }
-                        }
-
-                        /**
-                         * L'élément est-il selectionné ?
-                         */
-                        var selected = false;
-                        if (item.id === '_all') {
-                            selected = allSelected;
-                        } else if (!item.hasChildren) {
-                            selected = selectedIdList.includes(item.id);
-                        } else if (hierarchic && parentItemSelectable) {
-                            selected = hierarchySelected[item.id].length === hierarchy[item.id].length;
-                        }
-
-                        return _react2.default.createElement(_HiSelectableListItem2.default, (0, _extends3.default)({
-                            key: item.id,
-                            item: item,
-                            selected: selected,
-                            indeterminate: item.hasChildren && parentItemSelectable ? hierarchySelected[item.id].length > 0 && hierarchySelected[item.id].length !== hierarchy[item.id].length : false,
-                            onSelect: onSelect,
-                            hierarchySelected: hierarchySelected,
-                            parentItemSelectable: parentItemSelectable,
-                            nbChildren: typeof hierarchy !== 'undefined' && typeof hierarchy[item.id] !== 'undefined' ? hierarchy[item.id].length : 0,
-                            hierarchic: hierarchic,
-                            translations: translations,
-                            icon: icon,
-                            parentIcon: parentIcon,
-                            hoverIcon: hoverIcon,
-                            checkedIcon: checkedIcon,
-                            checkbox: checkbox,
-                            level: parents.length,
-                            disabled: disabledIds ? disabledIds.includes(item.id) : false
-                        }, others));
-                    })
-                )
-            );
-        }
-    }]);
-    return HiSelectableList;
-}(_react2.default.PureComponent);
+  }]);
+  return HiSelectableList;
+}(_react.default.PureComponent);
 
 HiSelectableList.defaultProps = {
-    checkbox: true,
-    allSelected: false,
-    maxHeight: 400,
-    hierarchySelected: {},
-    parentItemSelectable: false,
-    icon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    parentIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    hoverIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    checkedIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxMarked, { style: { width: 20, height: 20 } }),
-    translations: {
-        n_children: '%s items',
-        one_child: '%s item'
-    }
+  allSelected: false,
+  disabled: false,
+  disabledItemIdList: [],
+  hideCheckbox: false,
+  selectedItemIdList: [],
+  sort: false
 };
 HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Définit si tous les items de la liste sont sélectionnés
-     */
-    allSelected: _propTypes2.default.bool,
-    /**
-     * Affiche une checkbox
-     */
-    checkbox: _propTypes2.default.bool,
-    /**
-     * Icon affiché lorsque l'item est sélectionné
-     */
-    checkedIcon: _propTypes2.default.node,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: _propTypes2.default.object,
-    /**
-     * Liste des ids des items disabled
-     */
-    disabledIds: _propTypes2.default.array,
-    /**
-     * Tableau associatif : parentId => [children objects]
-     */
-    hierarchy: _propTypes2.default.object,
-    /**
-     * partially selected items
-     */
-    hierarchySelected: _propTypes2.default.object,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
-     */
-    hoverIcon: _propTypes2.default.node,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné
-     */
-    icon: _propTypes2.default.node,
-    /**
-     * Liste d'éléments
-     */
-    itemList: _propTypes2.default.array.isRequired,
-    /**
-     * Hauteur maximal (px)
-     */
-    maxHeight: _propTypes2.default.number,
-    /**
-     * Fonction de callback à la sélection d'un item, renvoie l'id de l'item
-     *
-     * @param {object} event The event source of the callback
-     * @param {object} item selected/unselected
-     */
-    onSelect: _propTypes2.default.func.isRequired,
-    /**
-     * Icon affiché lorsqu'un item parent n'est pas sélectionné
-     */
-    parentIcon: _propTypes2.default.node,
-    /**
-     * Les items parents sont sélectionnables
-     */
-    parentItemSelectable: _propTypes2.default.bool,
-    /**
-     * Liste des id des éléments sélectionnés
-     */
-    selectedIdList: _propTypes2.default.array.isRequired,
-    /**
-     * Traductions (par défaut en anglais)
-     */
-    translations: _propTypes2.default.object,
-    /**
-     * Type de l'élément
-     */
-    type: _propTypes2.default.string
+  /**
+   * Définit si tous les items de la liste sont sélectionnés
+   */
+  allSelected: _propTypes.default.bool,
+
+  /**
+   * Icon affiché lorsque l'item est sélectionné
+   */
+  checkedIcon: _propTypes.default.node,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Désactive la listes
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Liste des ids des items disabled
+   */
+  disabledItemIdList: _propTypes.default.array,
+
+  /**
+   * N'affiche pas de checkboxes
+   */
+  hideCheckbox: _propTypes.default.bool,
+
+  /**
+   * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+   */
+  hoverIcon: _propTypes.default.node,
+
+  /**
+   * Icon affiché lorsque l'item n'est pas sélectionné
+   */
+  icon: _propTypes.default.node,
+
+  /**
+   * Liste d'éléments ([ { id: '', label: '', ... } ])
+   */
+  itemList: _propTypes.default.array.isRequired,
+
+  /**
+   * 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.default.func.isRequired,
+
+  /**
+   * Liste des id des éléments sélectionnés
+   */
+  selectedItemIdList: _propTypes.default.array,
+
+  /**
+   * Tri des éléments selon leur label
+   */
+  sort: _propTypes.default.bool
 } : {};
-exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSelectableList' })(HiSelectableList);
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSelectableList'
+})(HiSelectableList);
+
+exports.default = _default;