linear-react-components-ui 0.4.76-beta.34 → 0.4.76-beta.35

package/lib/assets/styles/button.scss

@@ -331,8 +331,10 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
   text-shadow: none;
   box-shadow: none;
   border-color: transparent !important;
+  transition: none;
 
   > svg {
-    display: none;
+    opacity: 0;
+    visibility: hidden;
   }
 }

package/lib/assets/styles/treeview.scss

@@ -15,6 +15,11 @@
       margin-left: -20px;
       cursor: pointer;
     }
+    .loading {
+      margin-left: -30px;
+      position: absolute;
+      margin-top: -5px;
+    }
   }
 }
 

package/lib/list/index.js

@@ -129,6 +129,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();
@@ -156,7 +187,7 @@ 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);
     };
@@ -169,39 +200,7 @@ var List = function List(props) {
       return item.props && item.props.itemId;
     }).filter(Boolean) : [children.props.itemId];
     setItensId(newItensIds);
-  }, [children.length]);
-
-  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());
-  };
-
+  }, [children]);
   (0, _react.useEffect)(function () {
     if (skeletonize) {
       var headersChildren = children.type && children.type === _helpers.LIST_ITEMS_TYPES.listHeader && children;
@@ -216,7 +215,7 @@ var List = function List(props) {
     } else {
       setNewChildren(children);
     }
-  }, [skeletonize, children.length]);
+  }, [skeletonize, children]);
   return /*#__PURE__*/_react["default"].createElement(_helpers.ListContext.Provider, {
     value: contextValues
   }, /*#__PURE__*/_react["default"].createElement("ul", {

package/lib/table/Body.js

@@ -63,7 +63,9 @@ var TableBody = function TableBody(_ref2) {
       skeletonize = context.skeletonize,
       skeletonInRows = context.skeletonInRows,
       strict = context.strict,
-      vertical = context.vertical;
+      vertical = context.vertical,
+      columnsCount = context.columnsCount;
+  var isSkeletonized = skeletonize && !vertical && skeletonInRows && columnsCount;
   return bodyScrollable ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "bodycontainer",
     ref: bodyContainerRef
@@ -74,11 +76,11 @@ var TableBody = function TableBody(_ref2) {
       contain: strict ? 'strict' : 'size layout style'
     }
   }, /*#__PURE__*/_react["default"].createElement("tbody", {
-    className: "tbody ".concat(skeletonize && !vertical && skeletonInRows ? 'skeleton-transparency' : '', " ").concat(customClass)
+    className: "tbody ".concat(isSkeletonized ? 'skeleton-transparency' : '', " ").concat(customClass)
   }, renderChildren(_extends({}, context, {
     children: children
   }))))) : /*#__PURE__*/_react["default"].createElement("tbody", {
-    className: "tbody ".concat(skeletonize && !vertical && skeletonInRows ? 'skeleton-transparency' : '', " ").concat(customClass)
+    className: "tbody ".concat(isSkeletonized ? 'skeleton-transparency' : '', " ").concat(customClass)
   }, renderChildren(_extends({}, context, {
     children: children
   })));

package/lib/table/Header.js

@@ -42,12 +42,14 @@ var getColumnsWidth = function getColumnsWidth(children) {
 };
 
 var getColumnsCount = function getColumnsCount(children) {
-  if (children && children.props) {
-    var columnsChildren = children.props.children;
-    return columnsChildren.length;
+  var columnsCount = 0;
+
+  if (_lodash["default"].isArray(children) && children.length > 0 && children[0].props) {
+    columnsCount = children[0].props.children.length;
   }
 
-  return undefined;
+  if (children && children.props) columnsCount = children.props.children.length;
+  return columnsCount;
 };
 
 var Header = function Header(_ref) {

package/lib/treeview/Node.js

@@ -260,11 +260,7 @@ var _initialiseProps = function _initialiseProps() {
           onKeyPress: null,
           tabIndex: 0,
           role: "button",
-          style: isLoading ? {
-            marginLeft: '-30px',
-            marginTop: '-5px'
-          } : null,
-          className: "opencloseicon",
+          className: isLoading ? 'loading' : 'opencloseicon',
           onClick: function onClick() {
             return _this3.openCloseTree(node);
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "0.4.76-beta.34",
+  "version": "0.4.76-beta.35",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "scripts": {