@hipay/hipay-material-ui 2.3.0-rcstyleguide-beta2 → 2.3.0-rcstyleguide-beta4

package/old_components/HiSelectableList/HiSelectableList.js

@@ -0,0 +1,292 @@
+"use strict";
+
+var _interopRequireWildcard = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/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/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/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
+ */
+
+
+exports.styles = styles;
+
+var HiSelectableList =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiSelectableList, _React$PureComponent);
+
+  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 = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
+      } else if (key === 'up') {
+        event.preventDefault();
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    });
+    (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);
+      }
+
+      var placeholderContent = _react.default.createElement("div", {
+        style: {
+          width: '90%',
+          padding: '8px 6px',
+          height: 40,
+          position: 'sticky',
+          left: 0
+        }
+      }, _react.default.createElement("div", {
+        style: {
+          backgroundColor: '#F5F5F5',
+          width: '100%',
+          height: '100%',
+          borderRadius: 4
+        }
+      }));
+
+      var itemComponent = _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),
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
+        selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
+        ,
+        item: item,
+        classes: {
+          listItem: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.suggestionFocus, index === suggestionFocusIndex))
+        }
+      }, 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.default.createElement(_reactLazyload.default, {
+          key: item.id,
+          height: 40,
+          offset: 400,
+          once: true,
+          overflow: true,
+          placeholder: placeholderContent
+        }, itemComponent);
+      }
+
+      return itemComponent;
+    });
+    (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;
+      }
+
+      var sortAppendList = _this.props.sortAppendList;
+
+      if (sortAppendList.indexOf(a.id) < sortAppendList.indexOf(b.id)) {
+        return 1;
+      }
+
+      if (sortAppendList.indexOf(a.id) > sortAppendList.indexOf(b.id)) {
+        return -1;
+      }
+
+      return (0, _helpers.foldAccents)(a.label.toString().toLowerCase()) > (0, _helpers.foldAccents)(b.label.toString().toLowerCase()) ? 1 : -1;
+    });
+    return _this;
+  }
+
+  (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();
+        }
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.lazy && prevProps.itemList !== this.props.itemList) {
+        (0, _reactLazyload.forceCheck)();
+      }
+    }
+  }, {
+    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);
+      }
+
+      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);
+
+(0, _defineProperty2.default)(HiSelectableList, "defaultProps", {
+  allSelected: false,
+  disabled: false,
+  disabledItemIdList: [],
+  hideCheckbox: false,
+  lazy: true,
+  selectedItemIdList: [],
+  sort: false,
+  sortAppendList: ['_all']
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSelectableList',
+  index: 51
+})(HiSelectableList);
+
+exports.default = _default;

package/old_components/HiSelectableList/HiSelectableListHierarchic.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/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/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/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 styles = function styles() {
+  return {
+    root: {}
+  };
+};
+/**
+ * Construit une liste d'item sélectionnable (avec checkbox)
+ */
+
+
+exports.styles = styles;
+
+var HiSelectableListHierarchic =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiSelectableListHierarchic, _React$PureComponent);
+
+  function HiSelectableListHierarchic() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiSelectableListHierarchic);
+
+    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)(HiSelectableListHierarchic)).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), "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,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList"]);
+      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_HiSelectableListItem.default, (0, _extends2.default)({}, others, {
+        checkedIcon: checkedIcon,
+        disabled: disabled || disabledItemIdList.includes(item.id),
+        hideCheckbox: hideCheckbox,
+        hoverIcon: hoverIcon,
+        icon: icon,
+        key: item.id,
+        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;
+      }).map(function (subItem) {
+        return _this.buildRecursiveListItem(subItem, level + 1);
+      }));
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiSelectableListHierarchic, [{
+    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,
+          checkedIcon = _this$props2.checkedIcon,
+          disabled = _this$props2.disabled,
+          disabledItemIdList = _this$props2.disabledItemIdList,
+          hideCheckbox = _this$props2.hideCheckbox,
+          hoverIcon = _this$props2.hoverIcon,
+          icon = _this$props2.icon,
+          selectedItemIdList = _this$props2.selectedItemIdList,
+          others = (0, _objectWithoutProperties2.default)(_this$props2, ["classes", "itemList", "onKeyDown", "checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList"]);
+      var parents = [];
+      return _react.default.createElement(_List.default, {
+        className: classes.root,
+        onKeyDown: onKeyDown
+      }, itemList.filter(function (item) {
+        return !item.displayed;
+      }).map(function (item) {
+        // 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 = [];
+        }
+
+        return _react.default.createElement(_HiSelectableListItem.default, (0, _extends2.default)({}, others, {
+          checkedIcon: checkedIcon,
+          disabled: disabled || disabledItemIdList.includes(item.id),
+          hideCheckbox: hideCheckbox,
+          hoverIcon: hoverIcon,
+          icon: icon,
+          key: item.id,
+          level: parents.length,
+          onSelect: _this2.handleSelect(item),
+          selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
+
+        }, item));
+      }));
+    }
+  }]);
+  return HiSelectableListHierarchic;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(HiSelectableListHierarchic, "defaultProps", {
+  allSelected: false,
+  disabled: false,
+  disabledItemIdList: [],
+  hideCheckbox: false,
+  selectedItemIdList: []
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSelectableListHierarchic'
+})(HiSelectableListHierarchic);
+
+exports.default = _default;