linear-react-components-ui 0.4.76-beta.26 → 0.4.76-beta.27

package/lib/assets/styles/sidenav.scss

@@ -26,10 +26,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/list/Item.js

@@ -108,13 +108,13 @@ var Item = function Item(props) {
     if (selectable) handleSelectItem(itemId, onClick);
   };
 
-  var onKeyDown = function onKeyDown(e) {
+  var onKeyDown = (0, _react.useCallback)(function (e) {
     if ([constants.keyCodes.ENTER].includes(e.keyCode)) {
       e.preventDefault();
       handleOnSelectItem(e);
       if (url) history.push(url);
     }
-  };
+  }, [url]);
 
   var getProps = function getProps() {
     if (shouldDisable()) return undefined;
@@ -123,12 +123,18 @@ var Item = function Item(props) {
       onClick: function onClick(e) {
         handleOnSelectItem(e);
       },
-      onKeyDown: onKeyDown,
       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,

package/lib/menus/sidenav/index.js

@@ -43,8 +43,6 @@ var _NavSubMenuItem = _interopRequireDefault(require("./NavSubMenuItem"));
 
 var _NavMenuGroup = _interopRequireDefault(require("./NavMenuGroup"));
 
-var _text = _interopRequireDefault(require("../../inputs/text"));
-
 var _ExpandMenu = _interopRequireDefault(require("./ExpandMenu"));
 
 require("../../assets/styles/sidenav.scss");
@@ -100,30 +98,20 @@ var SideNav = function SideNav(props) {
       isExpanded = _useState2[0],
       setIsExpanded = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(true),
+  var _useState3 = (0, _react.useState)([]),
       _useState4 = _slicedToArray(_useState3, 2),
-      searchFieldHasNoFocus = _useState4[0],
-      setSearchFieldHasNoFocus = _useState4[1];
+      menuItemsContent = _useState4[0],
+      setMenuItemsContent = _useState4[1];
 
-  var _useState5 = (0, _react.useState)([]),
+  var _useState5 = (0, _react.useState)({}),
       _useState6 = _slicedToArray(_useState5, 2),
-      menuItemsContent = _useState6[0],
-      setMenuItemsContent = _useState6[1];
+      sideNavDimensions = _useState6[0],
+      setSideNavDimensions = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(''),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = _slicedToArray(_useState7, 2),
-      searchContent = _useState8[0],
-      setSearchContent = _useState8[1];
-
-  var _useState9 = (0, _react.useState)({}),
-      _useState10 = _slicedToArray(_useState9, 2),
-      sideNavDimensions = _useState10[0],
-      setSideNavDimensions = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      openSearchMenuPopup = _useState12[0],
-      setOpenSearchMenuPopup = _useState12[1];
+      openSearchMenuPopup = _useState8[0],
+      setOpenSearchMenuPopup = _useState8[1];
 
   var searchFieldRef = (0, _react.useRef)(null);
   var sideNavRef = (0, _react.useRef)(null);
@@ -133,41 +121,6 @@ var SideNav = function SideNav(props) {
     if (onExpandMenuClick) onExpandMenuClick(!isExpanded);
   };
 
-  var returnLeftElements = function returnLeftElements() {
-    var propsTextField = {};
-
-    if (searchFieldHasNoFocus) {
-      propsTextField = {
-        leftElements: [/*#__PURE__*/_react["default"].createElement("div", {
-          key: "searchMenuIcon",
-          role: "button",
-          tabIndex: "-1",
-          style: {
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            justifyContent: 'center'
-          },
-          onKeyDown: function onKeyDown() {},
-          onClick: function onClick() {
-            if (searchFieldRef && searchFieldRef.current) {
-              setSearchFieldHasNoFocus(false);
-              setTimeout(function () {
-                searchFieldRef.current.focus();
-              }, 150);
-            }
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
-          name: "search",
-          customClass: "searchmenuicon",
-          size: menuSize === 'small' && 16 || menuSize === 'medium' && 22 || menuSize === 'large' && 32
-        }))]
-      };
-    }
-
-    return propsTextField;
-  };
-
   var getPopupMenuSearchStyle = function getPopupMenuSearchStyle() {
     var left = sideNavDimensions.left,
         top = sideNavDimensions.top,
@@ -186,8 +139,6 @@ var SideNav = function SideNav(props) {
 
   var closeSearchMenuPopup = function closeSearchMenuPopup() {
     setOpenSearchMenuPopup(false);
-    setSearchContent('');
-    setSearchFieldHasNoFocus(true);
   };
 
   var compareChild = function compareChild(child) {
@@ -220,11 +171,15 @@ var SideNav = function SideNav(props) {
     }
   };
 
+  var openSearchMenu = function openSearchMenu() {
+    setOpenSearchMenuPopup(true);
+    if (searchFieldRef.current) searchFieldRef.current.focus();
+  };
+
   var onKeyDown = function onKeyDown(e) {
     if ([constants.keyCodes.F].includes(e.keyCode) && e.ctrlKey && e.shiftKey) {
       e.preventDefault();
-      setSearchFieldHasNoFocus(false);
-      if (searchFieldRef.current) searchFieldRef.current.focus();
+      openSearchMenu();
     }
   };
 
@@ -259,30 +214,21 @@ var SideNav = function SideNav(props) {
       customClass: "-customsidenavitem",
       tooltip: "Pesquisar funcionalidades (CTRL+SHIFT+F)",
       tooltipPosition: "right"
-    }, /*#__PURE__*/_react["default"].createElement(_text["default"], _extends({
-      value: searchContent,
-      customClassForWrapper: "-customsizes",
-      customClass: "-customsizes",
-      customClassForSideButtons: "-iconcenter",
-      customClassForInputContent: searchFieldHasNoFocus ? '-hidden' : '',
-      onFocus: function onFocus() {
-        return setSearchFieldHasNoFocus(false);
-      },
-      onBlur: function onBlur(e) {
-        if (e.target.value === '') setSearchFieldHasNoFocus(true);
-      },
-      inputRef: searchFieldRef,
-      onChange: function onChange(e) {
-        setSearchContent(e.target.value);
-        setOpenSearchMenuPopup(e.target.value !== '');
-        setSideNavDimensions(sideNavRef.current.getBoundingClientRect());
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      key: "searchMenuIcon",
+      className: "searchmenubutton",
+      role: "button",
+      tabIndex: "-1",
+      onKeyDown: function onKeyDown() {},
+      onClick: function onClick() {
+        if (!openSearchMenuPopup) openSearchMenu();else closeSearchMenuPopup();
       }
-    }, returnLeftElements())), openSearchMenuPopup && /*#__PURE__*/_react["default"].createElement(_popup_menu_search["default"], _extends({}, props, {
+    }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+      name: "search",
+      customClass: "searchmenuicon",
+      size: menuSize === 'small' && 16 || menuSize === 'medium' && 22 || menuSize === 'large' && 32
+    })), openSearchMenuPopup && /*#__PURE__*/_react["default"].createElement(_popup_menu_search["default"], _extends({}, props, {
       style: getPopupMenuSearchStyle(),
-      searchContent: searchContent,
-      handleSetSearchContent: function handleSetSearchContent(searchValue) {
-        return setSearchContent(searchValue);
-      },
       handlerClose: closeSearchMenuPopup,
       menuItemsContent: menuItemsContent && returnMenuItems()
     }))));
@@ -328,7 +274,7 @@ SideNav.defaultProps = {
   showExpandMenu: false,
   onExpandMenuClick: undefined,
   enableMenuSearch: false,
-  menuSearchEmptyMessage: undefined
+  menuSearchEmptyMessage: ''
 };
 var _default = SideNav;
 exports["default"] = _default;

package/lib/menus/sidenav/popup_menu_search/index.js

@@ -41,13 +41,11 @@ var body = document.getElementsByTagName('body')[0];
 
 var PopupMenuSearch = function PopupMenuSearch(props) {
   var style = props.style,
-      searchContent = props.searchContent,
       menuItemsContent = props.menuItemsContent,
       handlerClose = props.handlerClose,
-      menuSearchEmptyMessage = props.menuSearchEmptyMessage,
-      handleSetSearchContent = props.handleSetSearchContent;
+      menuSearchEmptyMessage = props.menuSearchEmptyMessage;
 
-  var _useState = (0, _react.useState)(searchContent),
+  var _useState = (0, _react.useState)(''),
       _useState2 = _slicedToArray(_useState, 2),
       searchFieldContent = _useState2[0],
       setSearchFieldContent = _useState2[1];
@@ -57,6 +55,11 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
       searchResult = _useState4[0],
       setSearchResult = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      defaultSelectedItemId = _useState6[0],
+      setDefaultSelectedItemId = _useState6[1];
+
   var searchFieldRef = (0, _react.useRef)(null);
   var popupRef = (0, _react.useRef)(document.createElement('div'));
   popupRef.current.className = 'searchmenu';
@@ -80,22 +83,20 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
   (0, _react.useEffect)(function () {
     popupRef.current.style = style;
   }, [style]);
+  (0, _react.useEffect)(function () {
+    if (searchResult.length > 0) setDefaultSelectedItemId(searchResult[0].id);
+  }, []);
 
   var search = function search(value) {
     var filter = value.toLowerCase();
     var result = menuItemsContent && menuItemsContent.filter(function (item) {
       return item.content.toLowerCase().includes(filter);
     });
+    if (result.length > 0) setDefaultSelectedItemId(result[0].id);
     setSearchFieldContent(value);
-    handleSetSearchContent(value);
     setSearchResult(result);
   };
 
-  (0, _react.useEffect)(function () {
-    setSearchFieldContent(searchContent);
-    search(searchContent);
-  }, [searchContent]);
-
   var returnList = function returnList() {
     if (searchResult && searchResult.length > 0) {
       return /*#__PURE__*/_react["default"].createElement(_list["default"], {
@@ -103,6 +104,7 @@ var PopupMenuSearch = function PopupMenuSearch(props) {
         transparent: true,
         selectable: true,
         onSelectItem: handlerClose,
+        selectedItemId: defaultSelectedItemId,
         style: {
           margin: '25px 0px',
           border: 'none',

package/lib/menus/sidenav/sidenav.spec.js

@@ -307,7 +307,7 @@ describe('SideNav Menu', function () {
         })),
             container = _render9.container;
 
-        expect(container.querySelector('.inputwrapper')).toBeInTheDocument();
+        expect(container.querySelector('.searchmenubutton')).toBeInTheDocument();
       });
       it('should render tooltip on over menu search item', function () {
         var _render10 = (0, _react2.render)(sidebarNavMockRender({
@@ -321,7 +321,7 @@ describe('SideNav Menu', function () {
 
         expect(document.querySelector('.tooltip-component')).toBeInTheDocument();
       });
-      it('should focus input when pressed HotKey', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+      it('should open popup menu when pressed HotKey', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
         var _render11, container;
 
         return regeneratorRuntime.wrap(function _callee4$(_context4) {
@@ -340,7 +340,7 @@ describe('SideNav Menu', function () {
                   shiftKey: true
                 });
 
-                expect(container.querySelector('.inputwrapper .sidebuttons')).not.toBeInTheDocument();
+                expect(document.querySelector('.searchmenu')).toBeInTheDocument();
 
               case 3:
               case "end":
@@ -349,13 +349,21 @@ describe('SideNav Menu', function () {
           }
         }, _callee4);
       })));
-      it('should render menu search on input change', function () {
+      it('should search on input change', function () {
         var _render12 = (0, _react2.render)(sidebarNavMockRender({
           enableMenuSearch: true
         })),
             container = _render12.container;
 
-        var input = container.querySelector('.inputwrapper .inputcontent .textinput');
+        _react2.fireEvent.keyDown(container, {
+          key: 'F',
+          code: 'keyF',
+          keyCode: 70,
+          ctrlKey: true,
+          shiftKey: true
+        });
+
+        var input = document.querySelector('.searchmenu .inputwrapper .inputcontent .textinput');
 
         _react2.fireEvent.change(input, {
           target: {
@@ -364,7 +372,7 @@ describe('SideNav Menu', function () {
         });
 
         expect(document.querySelector('.searchmenu')).toBeInTheDocument();
-        expect(document.querySelectorAll('.list-component .item').length).toBe(5);
+        expect(document.querySelectorAll('.searchmenu .list-component .item').length).toBe(5);
       });
     });
   });

package/package.json

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