linear-react-components-ui 0.4.76-beta.32 → 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/commons.scss

@@ -116,6 +116,16 @@
   }
 }
 
+%skeleton-transparency {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgb(255,255,255);
+  background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 30%,
+    rgba(255,255,255,0.6) 70%,rgba(255,255,255,0.8) 100%);
+}
+
 /* Efeito utilizado para o componente Skeleton */
 @keyframes shimmer {
   0% {

package/lib/assets/styles/list.scss

@@ -20,6 +20,14 @@ $item-height: 48px;
       line-height: 40px!important;
     }
   }
+  > .skeleton-transparency {
+    position: relative;
+    &::after {
+      @extend %skeleton-transparency;
+      top: 0;
+      left: 0;
+    }
+  }
 }
 
 .item-container {

package/lib/assets/styles/sidenav.scss

@@ -12,6 +12,10 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
   overflow: hidden;
   background-color: transparent;
   border: 1px solid #eee;
+  &.-blocked {
+    opacity: 0.4;
+    pointer-events: none;
+  }
   > .expandedmenu,
   > .collapsedmenu {
     height: auto;
@@ -26,10 +30,16 @@ que utilizam. Em caso de mudança, ficar atento para os refatores.
         align-items: center;
         justify-content: center;
         padding-left: 0px;
+        > .searchmenubutton {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       }
       &.-customsidenavitem:hover {
         background-color: white;
-        cursor: text;
       }
       &.-disabled {
         @extend %component-disabled;

package/lib/assets/styles/table.scss

@@ -1,5 +1,6 @@
 @import "colors.scss";
 @import "effects.scss";
+@import "commons.scss";
 
 .table-component {
   width: 100%;
@@ -23,13 +24,7 @@
   > .tbody {
     position: relative;
     &.skeleton-transparency::before {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: rgb(255,255,255);
-      background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 30%,
-        rgba(255,255,255,0.6) 70%,rgba(255,255,255,0.8) 100%);
+      @extend %skeleton-transparency;
     }
   }
   > .headercontainer > .innertable > .theader > .trow,

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/inputs/search/index.js

@@ -301,6 +301,7 @@ SearchField.propTypes = {
   disabled: _propTypes["default"].bool,
   readOnly: _propTypes["default"].bool,
   value: _propTypes["default"].string,
+  placeHolder: _propTypes["default"].string,
   permissionAttr: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)])
 };
 SearchField.defaultProps = {
@@ -312,6 +313,7 @@ SearchField.defaultProps = {
   disabled: false,
   readOnly: false,
   value: undefined,
+  placeHolder: '',
   permissionAttr: undefined
 };
 var _default = SearchField;

package/lib/inputs/select/multiple/index.js

@@ -272,12 +272,12 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
 
       if (e.keyCode === constants.keyCodes.ENTER) {
         this.onSelect(selected);
-      } else if ([constants.keyCodes.ARROW_DOWN, constants.keyCodes.ARROW_UP].includes(e.keyCode)) {
+      } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         var index = dataSource.findIndex(function (d) {
           return d === selected;
         });
 
-        if (e.keyCode === constants.keyCodes.ARROW_UP) {
+        if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
           index = index === dataSource.length - 1 ? 0 : index + 1;
         } else {
           index = index === 0 ? dataSource.length - 1 : index - 1;

package/lib/inputs/select/simple/index.js

@@ -388,12 +388,12 @@ var _initialiseProps = function _initialiseProps() {
         e.preventDefault();
 
         _this3.onSelect(selected);
-      } else if ([constants.keyCodes.ARROW_DOWN, constants.keyCodes.ARROW_UP].includes(e.keyCode)) {
+      } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
         var index = dataSource.findIndex(function (d) {
           return d[idKey] === selected[idKey];
         });
 
-        if (e.keyCode === constants.keyCodes.ARROW_UP) {
+        if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
           index = index === dataSource.length - 1 ? 0 : index + 1;
         } else {
           index = index === 0 ? dataSource.length - 1 : index - 1;

package/lib/internals/constants.js

@@ -7,9 +7,10 @@ exports.PARA_ENGANAR_O_ESLINT_JA_QUE_TENHO_SO_UMA_CONSTANTE = exports.keyCodes =
 var keyCodes = {
   TAB: 9,
   ENTER: 13,
-  ARROW_UP: 40,
-  ARROW_DOWN: 38,
-  BACKSPACE: 8
+  ARROW_UP: 38,
+  ARROW_DOWN: 40,
+  BACKSPACE: 8,
+  F: 70
 };
 exports.keyCodes = keyCodes;
 var PARA_ENGANAR_O_ESLINT_JA_QUE_TENHO_SO_UMA_CONSTANTE = 1;

package/lib/list/Item.js

@@ -17,10 +17,12 @@ var _icons = _interopRequireDefault(require("../icons"));
 
 var _checkbox = _interopRequireDefault(require("../checkbox"));
 
-var _helpers = _interopRequireDefault(require("./helpers"));
+var _helpers = require("./helpers");
 
 var _withDropdown = require("../dropdown/withDropdown");
 
+var constants = _interopRequireWildcard(require("../internals/constants"));
+
 var _permissionValidations = require("../permissionValidations");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -44,7 +46,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var Item = function Item(props) {
-  var _onClick = props.onClick,
+  var onClick = props.onClick,
       leftIconName = props.leftIconName,
       leftIcon = props.leftIcon,
       displayCheckbox = props.displayCheckbox,
@@ -65,10 +67,12 @@ var Item = function Item(props) {
       visible = props.visible,
       permissionAttr = props.permissionAttr;
 
-  var _useContext = (0, _react.useContext)(_helpers["default"]),
+  var _useContext = (0, _react.useContext)(_helpers.ListContext),
       handleSelectItem = _useContext.handleSelectItem,
       selectable = _useContext.selectable,
-      selectedItemId = _useContext.selectedItemId;
+      selectedItemId = _useContext.selectedItemId,
+      selectedItemRef = _useContext.selectedItemRef,
+      skeletonize = _useContext.skeletonize;
 
   var dropdownContext = (0, _react.useContext)(_withDropdown.WithDropdownContext);
   var options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
@@ -77,6 +81,8 @@ var Item = function Item(props) {
       _useState2 = _slicedToArray(_useState, 1),
       onDenied = _useState2[0];
 
+  var history = (0, _reactRouterDom.useHistory)();
+
   var shouldDisable = function shouldDisable() {
     return disabled || onDenied.disabled;
   };
@@ -97,23 +103,42 @@ var Item = function Item(props) {
     return null;
   };
 
+  var handleOnSelectItem = function handleOnSelectItem(e) {
+    if (onClick !== undefined) onClick(e, itemId);
+    if (dropdownContext) dropdownContext.handleDropdownClose();
+    if (selectable) handleSelectItem(itemId, onClick);
+  };
+
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    if ([constants.keyCodes.ENTER].includes(e.keyCode) && !skeletonize) {
+      e.preventDefault();
+      handleOnSelectItem(e);
+      if (url) history.push(url);
+    }
+  }, [url]);
+
   var getProps = function getProps() {
     if (shouldDisable()) return undefined;
-    if (_onClick === undefined && dropdownContext === undefined && !selectable) return null;
+    if (onClick === undefined && dropdownContext === undefined && !selectable) return null;
     return {
       onClick: function onClick(e) {
-        if (_onClick !== undefined) _onClick(e, itemId);
-        if (dropdownContext) dropdownContext.handleDropdownClose();
-        if (selectable) handleSelectItem(itemId, _onClick);
+        handleOnSelectItem(e);
       },
-      onKeyDown: null,
       role: 'button',
+      onKeyDown: onKeyDown,
       tabIndex: '0'
     };
   };
 
+  (0, _react.useEffect)(function () {
+    document.addEventListener('keydown', onKeyDown);
+    return function () {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, []);
   if (!visible || onDenied.unvisible) return null;
   return /*#__PURE__*/_react["default"].createElement("li", _extends({
+    ref: itemId && selectedItemId === itemId ? selectedItemRef : null,
     style: style,
     className: "item-container ".concat(hovered && 'hovered', "\n        ").concat(itemId && selectedItemId === itemId ? '-activedlist' : '')
   }, getProps(), {

package/lib/list/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.LIST_ITEMS_TYPES = exports.ListContext = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,5 +11,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var ListContext = /*#__PURE__*/_react["default"].createContext();
 
-var _default = ListContext;
-exports["default"] = _default;
+exports.ListContext = ListContext;
+var LIST_ITEMS_TYPES = {
+  listHeader: 'Header',
+  listItem: 'Item',
+  listSeparator: 'Separator'
+};
+exports.LIST_ITEMS_TYPES = LIST_ITEMS_TYPES;

package/lib/list/index.js

@@ -33,11 +33,15 @@ var _Header = _interopRequireDefault(require("./Header"));
 
 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 }; }
 
@@ -58,37 +62,168 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var List = function List(props) {
-  var children = props.children,
-      customClass = props.customClass,
+  var customClass = props.customClass,
       condensed = props.condensed,
       transparent = props.transparent,
       style = props.style,
       selectable = props.selectable,
-      onSelectItem = props.onSelectItem;
+      onSelectItem = props.onSelectItem,
+      skeletonize = props.skeletonize,
+      skeletonItens = props.skeletonItens,
+      skeletonHeight = props.skeletonHeight,
+      children = props.children;
+  var selectedItemRef = (0, _react.useRef)(null);
+  var listRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(''),
       _useState2 = _slicedToArray(_useState, 2),
       selectedItemId = _useState2[0],
       setSelectedItemId = _useState2[1];
 
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      itensId = _useState4[0],
+      setItensId = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(children),
+      _useState6 = _slicedToArray(_useState5, 2),
+      newChildren = _useState6[0],
+      setNewChildren = _useState6[1];
+
   var contextValues = {
     selectable: selectable,
     selectedItemId: selectedItemId,
-    handleSelectItem: function handleSelectItem(selectedId, onClick) {
-      if (!onSelectItem && onClick) setSelectedItemId(selectedId);
-      if (onSelectItem) onSelectItem(selectedId);
+    selectedItemRef: selectedItemRef,
+    children: children,
+    skeletonize: skeletonize,
+    handleSelectItem: function handleSelectItem(itemId, onClick) {
+      if (!onSelectItem && onClick) setSelectedItemId(itemId);
+      if (onSelectItem) onSelectItem(itemId);
+    }
+  };
+
+  var onKeyDown = function onKeyDown(e) {
+    if ([constants.keyCodes.ARROW_DOWN, constants.keyCodes.ARROW_UP].includes(e.keyCode) && !skeletonize) {
+      e.preventDefault();
+
+      if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
+        if (selectedItemId === itensId[itensId.length - 1]) {
+          setSelectedItemId(itensId[0]);
+        } else {
+          var index = itensId.indexOf(selectedItemId === '' ? '0' : selectedItemId);
+          setSelectedItemId(itensId[index + 1]);
+        }
+      } else if (e.keyCode === constants.keyCodes.ARROW_UP) {
+        if (selectedItemId === itensId[0]) {
+          setSelectedItemId(itensId[itensId.length - 1]);
+        } else {
+          var _index = itensId.indexOf(selectedItemId);
+
+          setSelectedItemId(itensId[_index - 1]);
+        }
+      }
+
+      return selectedItemRef.current && selectedItemRef.current.focus();
     }
+
+    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();
+      var listRect = listRef.current.getBoundingClientRect();
+      var defaultScrollTop = 0;
+      var defaultBottomOffset = 100;
+
+      if (selectedItemRect.top - selectedItemRect.height > listRect.bottom) {
+        listRef.current.scroll({
+          top: selectedItemRect.top
+        });
+      } else if (selectedItemRect.top + selectedItemRect.height - listRect.y >= listRect.height) {
+        listRef.current.scroll({
+          top: listRef.current.scrollTop + selectedItemRect.height
+        });
+      } else if (selectedItemRect.bottom < defaultBottomOffset) {
+        listRef.current.scroll({
+          top: defaultScrollTop
+        });
+      } else {
+        listRef.current.scroll({
+          top: listRef.current.scrollTop - selectedItemRect.height
+        });
+      }
+    }
+  }, [selectedItemRef.current]);
+  (0, _react.useEffect)(function () {
+    if (!skeletonize) document.addEventListener('keydown', onKeyDown);
+    return function () {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [skeletonize]);
   (0, _react.useEffect)(function () {
     if (onSelectItem && props.selectedItemId) setSelectedItemId(props.selectedItemId);
   }, [props.selectedItemId]);
-  return /*#__PURE__*/_react["default"].createElement(_helpers["default"].Provider, {
+  (0, _react.useEffect)(function () {
+    var newItensIds = children.length > 0 ? children.map(function (item) {
+      return item.props && item.props.itemId;
+    }).filter(Boolean) : [children.props.itemId];
+    setItensId(newItensIds);
+  }, [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,
-    className: "list-component ".concat(condensed && '-condensed', " ").concat(customClass, " ").concat(!transparent && '-listbackground')
-  }, children));
+    ref: listRef,
+    className: "list-component ".concat(condensed && '-condensed', "\n        ").concat(customClass, " ").concat(!transparent && '-listbackground')
+  }, newChildren));
 };
 
 List.propTypes = {
@@ -99,7 +234,10 @@ 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
 };
 List.defaultProps = {
   customClass: '',
@@ -108,7 +246,10 @@ List.defaultProps = {
   selectable: false,
   style: {},
   onSelectItem: undefined,
-  selectedItemId: ''
+  selectedItemId: '',
+  skeletonize: false,
+  skeletonItens: 5,
+  skeletonHeight: 48
 };
 var _default = List;
 exports["default"] = _default;