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

package/lib/list/Item.js

@@ -21,8 +21,6 @@ var _helpers = _interopRequireDefault(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 }; }
@@ -46,7 +44,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,
@@ -70,8 +68,7 @@ var Item = function Item(props) {
   var _useContext = (0, _react.useContext)(_helpers["default"]),
       handleSelectItem = _useContext.handleSelectItem,
       selectable = _useContext.selectable,
-      selectedItemId = _useContext.selectedItemId,
-      selectedItemRef = _useContext.selectedItemRef;
+      selectedItemId = _useContext.selectedItemId;
 
   var dropdownContext = (0, _react.useContext)(_withDropdown.WithDropdownContext);
   var options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
@@ -80,8 +77,6 @@ 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;
   };
@@ -102,42 +97,23 @@ 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)) {
-      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) {
-        handleOnSelectItem(e);
+        if (_onClick !== undefined) _onClick(e, itemId);
+        if (dropdownContext) dropdownContext.handleDropdownClose();
+        if (selectable) handleSelectItem(itemId, _onClick);
       },
+      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/index.js

@@ -33,8 +33,6 @@ var _Header = _interopRequireDefault(require("./Header"));
 
 var _Item = _interopRequireDefault(require("./Item"));
 
-var constants = _interopRequireWildcard(require("../internals/constants"));
-
 var _Separator = _interopRequireDefault(require("./Separator"));
 
 require("../assets/styles/list.scss");
@@ -60,19 +58,6 @@ 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 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 children = props.children,
       customClass = props.customClass,
       condensed = props.condensed,
@@ -80,92 +65,29 @@ var List = function List(props) {
       style = props.style,
       selectable = props.selectable,
       onSelectItem = props.onSelectItem;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedItemId = _useState2[0],
+      setSelectedItemId = _useState2[1];
+
   var contextValues = {
     selectable: selectable,
     selectedItemId: selectedItemId,
-    selectedItemRef: selectedItemRef,
-    children: children,
-    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)) {
-      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();
+    handleSelectItem: function handleSelectItem(selectedId, onClick) {
+      if (!onSelectItem && onClick) setSelectedItemId(selectedId);
+      if (onSelectItem) onSelectItem(selectedId);
     }
-
-    return null;
   };
-
-  (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 () {
-    document.addEventListener('keydown', onKeyDown);
-    return function () {
-      document.removeEventListener('keydown', onKeyDown);
-    };
-  });
   (0, _react.useEffect)(function () {
     if (onSelectItem && props.selectedItemId) setSelectedItemId(props.selectedItemId);
   }, [props.selectedItemId]);
-  (0, _react.useEffect)(function () {
-    var newItensIds = children.length > 0 && children.map(function (item) {
-      return item.props.itemId;
-    }).filter(Boolean);
-    setItensId(newItensIds);
-  }, [children.length]);
   return /*#__PURE__*/_react["default"].createElement(_helpers["default"].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')
+    className: "list-component ".concat(condensed && '-condensed', " ").concat(customClass, " ").concat(!transparent && '-listbackground')
   }, children));
 };