linear-react-components-ui 0.4.76-beta.33 → 0.4.76-beta.36

package/lib/list/index.js

@@ -35,11 +35,13 @@ var _Item = _interopRequireDefault(require("./Item"));
 
 var constants = _interopRequireWildcard(require("../internals/constants"));
 
+var _skeleton = _interopRequireDefault(require("../skeleton"));
+
 var _Separator = _interopRequireDefault(require("./Separator"));
 
 require("../assets/styles/list.scss");
 
-var _helpers = _interopRequireDefault(require("./helpers"));
+var _helpers = require("./helpers");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -55,11 +57,22 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var List = function List(props) {
+  var customClass = props.customClass,
+      condensed = props.condensed,
+      transparent = props.transparent,
+      style = props.style,
+      selectable = props.selectable,
+      onSelectItem = props.onSelectItem,
+      skeletonize = props.skeletonize,
+      skeletonItens = props.skeletonItens,
+      skeletonHeight = props.skeletonHeight,
+      children = props.children,
+      selectOnEnter = props.selectOnEnter;
   var selectedItemRef = (0, _react.useRef)(null);
   var listRef = (0, _react.useRef)(null);
 
@@ -73,18 +86,18 @@ var List = function List(props) {
       itensId = _useState4[0],
       setItensId = _useState4[1];
 
-  var children = props.children,
-      customClass = props.customClass,
-      condensed = props.condensed,
-      transparent = props.transparent,
-      style = props.style,
-      selectable = props.selectable,
-      onSelectItem = props.onSelectItem;
+  var _useState5 = (0, _react.useState)(children),
+      _useState6 = _slicedToArray(_useState5, 2),
+      newChildren = _useState6[0],
+      setNewChildren = _useState6[1];
+
   var contextValues = {
     selectable: selectable,
     selectedItemId: selectedItemId,
     selectedItemRef: selectedItemRef,
+    selectOnEnter: selectOnEnter,
     children: children,
+    skeletonize: skeletonize,
     handleSelectItem: function handleSelectItem(itemId, onClick) {
       if (!onSelectItem && onClick) setSelectedItemId(itemId);
       if (onSelectItem) onSelectItem(itemId);
@@ -92,7 +105,7 @@ var List = function List(props) {
   };
 
   var onKeyDown = function onKeyDown(e) {
-    if ([constants.keyCodes.ARROW_DOWN, constants.keyCodes.ARROW_UP].includes(e.keyCode)) {
+    if ([constants.keyCodes.ARROW_DOWN, constants.keyCodes.ARROW_UP].includes(e.keyCode) && !skeletonize) {
       e.preventDefault();
 
       if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
@@ -118,6 +131,37 @@ var List = function List(props) {
     return null;
   };
 
+  var getSkeleton = function getSkeleton() {
+    var length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    var maxSkeletonsItensExceeded = 2;
+    var skeletonItensCount = length > skeletonItens ? maxSkeletonsItensExceeded : Math.floor(skeletonItens / length);
+    var skeletonItensList = Array.from(Array(skeletonItensCount).keys());
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "skeleton-transparency"
+    }, skeletonItensList.map(function (id) {
+      return /*#__PURE__*/_react["default"].createElement(_Item["default"], {
+        key: id,
+        hovered: false,
+        style: {
+          pointerEvents: 'none'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
+        height: skeletonHeight,
+        style: {
+          margin: '6px 0'
+        }
+      }));
+    }));
+  };
+
+  var getNewChildren = function getNewChildren(headersChildren) {
+    return headersChildren.length > 0 ? headersChildren.map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
+        key: item.props.title
+      }, item, getSkeleton(headersChildren.length));
+    }) : /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, headersChildren, getSkeleton());
+  };
+
   (0, _react.useEffect)(function () {
     if (selectedItemRef.current && listRef.current && listRef.current.scroll) {
       var selectedItemRect = selectedItemRef.current.getBoundingClientRect();
@@ -145,28 +189,46 @@ var List = function List(props) {
     }
   }, [selectedItemRef.current]);
   (0, _react.useEffect)(function () {
-    document.addEventListener('keydown', onKeyDown);
+    if (!skeletonize) document.addEventListener('keydown', onKeyDown);
     return function () {
       document.removeEventListener('keydown', onKeyDown);
     };
-  });
+  }, [skeletonize, selectedItemId, itensId]);
   (0, _react.useEffect)(function () {
-    if (onSelectItem && props.selectedItemId) setSelectedItemId(props.selectedItemId);
+    if (onSelectItem && props.selectedItemId) {
+      setSelectedItemId(props.selectedItemId);
+      if (selectedItemRef.current) selectedItemRef.current.focus();
+    }
   }, [props.selectedItemId]);
   (0, _react.useEffect)(function () {
-    var newItensIds = children.length > 0 && children.map(function (item) {
-      return item.props.itemId;
-    }).filter(Boolean);
+    var newItensIds = children.length > 0 ? children.map(function (item) {
+      return item.props && item.props.itemId;
+    }).filter(Boolean) : [children.props.itemId];
     setItensId(newItensIds);
-  }, [children.length]);
-  return /*#__PURE__*/_react["default"].createElement(_helpers["default"].Provider, {
+  }, [children]);
+  (0, _react.useEffect)(function () {
+    if (skeletonize) {
+      var headersChildren = children.type && children.type === _helpers.LIST_ITEMS_TYPES.listHeader && children;
+
+      if (children.length > 0) {
+        headersChildren = children.filter(function (item) {
+          return item.type && item.type.name === _helpers.LIST_ITEMS_TYPES.listHeader;
+        });
+      }
+
+      setNewChildren(getNewChildren(headersChildren));
+    } else {
+      setNewChildren(children);
+    }
+  }, [skeletonize, children]);
+  return /*#__PURE__*/_react["default"].createElement(_helpers.ListContext.Provider, {
     value: contextValues
   }, /*#__PURE__*/_react["default"].createElement("ul", {
     "data-testid": "list-component",
     style: style,
     ref: listRef,
     className: "list-component ".concat(condensed && '-condensed', "\n        ").concat(customClass, " ").concat(!transparent && '-listbackground')
-  }, children));
+  }, newChildren));
 };
 
 List.propTypes = {
@@ -177,7 +239,11 @@ List.propTypes = {
   selectable: _propTypes["default"].bool,
   style: _propTypes["default"].object,
   onSelectItem: _propTypes["default"].func,
-  selectedItemId: _propTypes["default"].string
+  selectedItemId: _propTypes["default"].string,
+  skeletonize: _propTypes["default"].bool,
+  skeletonItens: _propTypes["default"].number,
+  skeletonHeight: _propTypes["default"].number,
+  selectOnEnter: _propTypes["default"].bool
 };
 List.defaultProps = {
   customClass: '',
@@ -186,7 +252,11 @@ List.defaultProps = {
   selectable: false,
   style: {},
   onSelectItem: undefined,
-  selectedItemId: ''
+  selectedItemId: '',
+  skeletonize: false,
+  skeletonItens: 5,
+  skeletonHeight: 48,
+  selectOnEnter: false
 };
 var _default = List;
 exports["default"] = _default;