@codacy/ui-components 0.46.2 → 0.47.0

package/lib/Modal/Modal.js

@@ -107,14 +107,16 @@ var ModalBody = function ModalBody(_ref3) {
       props = _objectWithoutProperties(_ref3, ["children"]);
 
   var _useScrollContainer = useScrollContainer(),
-      moreTop = _useScrollContainer.moreTop,
-      moreBottom = _useScrollContainer.moreBottom,
-      divProps = _objectWithoutProperties(_useScrollContainer, ["moreTop", "moreBottom"]);
+      atTop = _useScrollContainer.atTop,
+      atBottom = _useScrollContainer.atBottom,
+      scroll = _useScrollContainer.scroll,
+      height = _useScrollContainer.height,
+      divProps = _objectWithoutProperties(_useScrollContainer, ["atTop", "atBottom", "scroll", "height"]);
 
   return /*#__PURE__*/React.createElement(ModalBodyBox, Object.assign({
     px: defaultModalPadding,
-    moreTop: moreTop,
-    moreBottom: moreBottom
+    moreTop: !atTop,
+    moreBottom: !atBottom
   }, props, divProps), children);
 };
 

package/lib/ScrollableContent/ScrollableContent.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { ScrollableContentProps } from './ScrollableContent.types';
+import { ScrollState } from './useScrollContainer';
+export declare const ScrollableContentContext: React.Context<ScrollState>;
 /**
- * Description for ScrollableContent
+ * ScrollableContent
  */
 export declare const ScrollableContent: React.ForwardRefExoticComponent<ScrollableContentProps & React.RefAttributes<HTMLDivElement>>;

package/lib/ScrollableContent/ScrollableContent.js

@@ -2,8 +2,14 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import React from 'react';
 import { ScrollableContentWrapper } from './ScrollableContent.styles';
 import { useScrollContainer } from './useScrollContainer';
+export var ScrollableContentContext = React.createContext({
+  atTop: true,
+  atBottom: true,
+  scroll: 0,
+  height: 0
+});
 /**
- * Description for ScrollableContent
+ * ScrollableContent
  */
 
 export var ScrollableContent = React.forwardRef(function (_ref, ref) {
@@ -11,13 +17,22 @@ export var ScrollableContent = React.forwardRef(function (_ref, ref) {
       props = _objectWithoutProperties(_ref, ["children"]);
 
   var _useScrollContainer = useScrollContainer(),
-      moreTop = _useScrollContainer.moreTop,
-      moreBottom = _useScrollContainer.moreBottom,
-      divProps = _objectWithoutProperties(_useScrollContainer, ["moreTop", "moreBottom"]);
+      atTop = _useScrollContainer.atTop,
+      atBottom = _useScrollContainer.atBottom,
+      scroll = _useScrollContainer.scroll,
+      height = _useScrollContainer.height,
+      divProps = _objectWithoutProperties(_useScrollContainer, ["atTop", "atBottom", "scroll", "height"]);
 
-  return /*#__PURE__*/React.createElement(ScrollableContentWrapper, Object.assign({}, props, {
-    moreTop: moreTop,
-    moreBottom: moreBottom,
+  return /*#__PURE__*/React.createElement(ScrollableContentContext.Provider, {
+    value: {
+      atTop: atTop,
+      atBottom: atBottom,
+      scroll: scroll,
+      height: height
+    }
+  }, /*#__PURE__*/React.createElement(ScrollableContentWrapper, Object.assign({}, props, {
+    moreTop: !atTop,
+    moreBottom: !atBottom,
     ref: ref
-  }), /*#__PURE__*/React.createElement("div", divProps, children));
+  }), /*#__PURE__*/React.createElement("div", divProps, children)));
 });

package/lib/ScrollableContent/ScrollableContent.types.d.ts

@@ -1,7 +1,7 @@
 import { ContainerComponentProps } from '../types';
-import { SpaceProps, LayoutProps } from '../system-props/types';
 import { Color } from '../theme';
-export interface ScrollableContentProps extends ContainerComponentProps, SpaceProps, LayoutProps {
+import { FlexProps } from '../Flexbox';
+export interface ScrollableContentProps extends ContainerComponentProps, FlexProps {
     background?: Color;
     fadeHeight?: string;
 }

package/lib/ScrollableContent/useScrollContainer.d.ts

@@ -1,7 +1,15 @@
 import React from 'react';
+export interface ScrollState {
+    atTop: boolean;
+    atBottom: boolean;
+    scroll: number;
+    height: number;
+}
 export declare const useScrollContainer: () => {
+    atTop: boolean;
+    atBottom: boolean;
+    scroll: number;
+    height: number;
     onScroll: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void;
     ref: React.RefObject<HTMLDivElement>;
-    moreTop: boolean;
-    moreBottom: boolean;
 };

package/lib/ScrollableContent/useScrollContainer.js

@@ -1,30 +1,38 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import { throttle } from 'lodash';
 export var useScrollContainer = function useScrollContainer() {
   var ref = useRef(null);
 
-  var _useState = useState(false),
+  var _useState = useState({
+    atTop: true,
+    atBottom: true,
+    scroll: 0,
+    height: 0
+  }),
       _useState2 = _slicedToArray(_useState, 2),
-      moreTop = _useState2[0],
-      setMoreTop = _useState2[1];
+      state = _useState2[0],
+      setState = _useState2[1];
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      moreBottom = _useState4[0],
-      setMoreBottom = _useState4[1];
-
-  var throttledHandler = throttle(function (scrollHeight, scrollTop, containerHeight) {
-    if (scrollHeight > containerHeight) {
-      if (!moreTop && scrollTop > 0) setMoreTop(true);
-      if (moreTop && scrollTop <= 0) setMoreTop(false);
-      if (!moreBottom && scrollTop < scrollHeight - containerHeight) setMoreBottom(true);
-      if (moreBottom && scrollTop >= scrollHeight - containerHeight) setMoreBottom(false);
-    } else {
-      if (moreTop) setMoreTop(false);
-      if (moreBottom) setMoreBottom(false);
-    }
-  }, 100);
+  var throttledHandler = useMemo(function () {
+    return throttle(function (scrollHeight, scrollTop, containerHeight) {
+      setState({
+        atTop: scrollHeight <= containerHeight || scrollTop <= 10,
+        atBottom: scrollHeight <= containerHeight || scrollTop >= scrollHeight - containerHeight - 10,
+        scroll: scrollTop,
+        height: containerHeight
+      });
+    }, 250);
+  }, []);
+  var resizeObserver = useMemo(function () {
+    return new ResizeObserver(function (entries) {
+      if (entries.length > 0) {
+        var div = entries[0].target;
+        throttledHandler(div.scrollHeight, div.scrollTop, div.offsetHeight);
+      }
+    });
+  }, [throttledHandler]);
   var onScroll = useCallback(function (event) {
     var e = event.currentTarget;
     throttledHandler(e.scrollHeight, e.scrollTop, e.offsetHeight);
@@ -35,10 +43,15 @@ export var useScrollContainer = function useScrollContainer() {
       throttledHandler(div.scrollHeight, div.scrollTop, div.offsetHeight);
     }
   }, [throttledHandler]);
-  return {
+  useEffect(function () {
+    var containerDiv = ref.current;
+    if (containerDiv) resizeObserver.observe(containerDiv);
+    return function () {
+      if (containerDiv) resizeObserver.unobserve(containerDiv);
+    };
+  }, [resizeObserver]);
+  return _objectSpread({
     onScroll: onScroll,
-    ref: ref,
-    moreTop: moreTop,
-    moreBottom: moreBottom
-  };
+    ref: ref
+  }, state);
 };

package/lib/Table/Table.d.ts

@@ -1,11 +1,20 @@
 import React from 'react';
 import { TableProps, TableHeaderProps, TableHeaderCellProps, TableRowsProps, TableRowProps, TableCellProps } from './Table.types';
+export interface TableContextType {
+    columnsCount: number;
+    setColumnsCount: (n: number) => void;
+}
+export declare const TableContext: React.Context<TableContextType>;
 export declare const ColumnsGroup: React.FC<TableHeaderProps>;
 export declare const Table: React.FC<TableProps> & {
     Header: React.FC<TableHeaderProps>;
     HeaderCell: React.FC<TableHeaderCellProps>;
     Rows: React.FC<TableRowsProps>;
     Row: React.FC<TableRowProps>;
+    VirtualRow: React.FC<TableRowProps & {
+        index: number;
+        height: number;
+    }>;
     Cell: React.FC<TableCellProps>;
     SelectableHeader: React.FC<import("./NewSelectableTable").SelectableHeaderProps>;
     SelectableRow: React.FC<import("./NewSelectableTable").SelectableRowProps>;

package/lib/Table/Table.js

@@ -1,10 +1,17 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import React from 'react';
+import React, { useContext, useState, useCallback } from 'react';
 import { TableWrapper, StyledTableHeader, StyledTableHeaderCell, StyledTableBodyCell, StyledTableBody, StyledTableRow, StyledTable } from './Table.styles';
 import { IconAndText } from '../IconAndText';
 import { SortDown, SortUp } from '../Icons';
 import { SelectableHeader, SelectableRow } from './NewSelectableTable';
-import { useCallback } from 'react';
+import { ScrollableContentContext } from '../ScrollableContent';
+export var TableContext = React.createContext({
+  columnsCount: 0,
+  setColumnsCount: function setColumnsCount() {
+    return null;
+  }
+});
 /**
  * Styled table component
  */
@@ -13,11 +20,23 @@ var TableComponent = function TableComponent(_ref) {
   var children = _ref.children,
       props = _objectWithoutProperties(_ref, ["children"]);
 
-  return /*#__PURE__*/React.createElement(TableWrapper, props, /*#__PURE__*/React.createElement(StyledTable, null, children));
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      columnsCount = _useState2[0],
+      setColumnsCount = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: {
+      columnsCount: columnsCount,
+      setColumnsCount: setColumnsCount
+    }
+  }, /*#__PURE__*/React.createElement(TableWrapper, props, /*#__PURE__*/React.createElement(StyledTable, null, children)));
 };
 
 export var ColumnsGroup = function ColumnsGroup(_ref2) {
   var children = _ref2.children;
+  var tableCtx = useContext(TableContext);
+  if (tableCtx) tableCtx.setColumnsCount(React.Children.count(children));
   return /*#__PURE__*/React.createElement("colgroup", null, React.Children.map(children, function (child) {
     if (React.isValidElement(child)) {
       if (child.props.width) {
@@ -85,31 +104,51 @@ var HeaderCell = function HeaderCell(_ref4) {
   }, props), content);
 };
 
-var Rows = function Rows(_ref5) {
+var Cell = function Cell(_ref5) {
   var children = _ref5.children,
-      props = _objectWithoutProperties(_ref5, ["children"]);
+      _ref5$align = _ref5.align,
+      align = _ref5$align === void 0 ? 'left' : _ref5$align,
+      span = _ref5.span,
+      props = _objectWithoutProperties(_ref5, ["children", "align", "span"]);
 
-  return /*#__PURE__*/React.createElement(StyledTableBody, props, children);
+  var tableCtx = useContext(TableContext);
+  return /*#__PURE__*/React.createElement(StyledTableBodyCell, Object.assign({
+    colSpan: span === 'auto' ? tableCtx === null || tableCtx === void 0 ? void 0 : tableCtx.columnsCount : span,
+    align: align
+  }, props), children);
 };
 
-var Row = function Row(_ref6) {
+var Rows = function Rows(_ref6) {
   var children = _ref6.children,
       props = _objectWithoutProperties(_ref6, ["children"]);
 
-  return /*#__PURE__*/React.createElement(StyledTableRow, props, children);
+  return /*#__PURE__*/React.createElement(StyledTableBody, props, children);
 };
 
-var Cell = function Cell(_ref7) {
+var Row = function Row(_ref7) {
   var children = _ref7.children,
-      _ref7$align = _ref7.align,
-      align = _ref7$align === void 0 ? 'left' : _ref7$align,
-      span = _ref7.span,
-      props = _objectWithoutProperties(_ref7, ["children", "align", "span"]);
+      props = _objectWithoutProperties(_ref7, ["children"]);
 
-  return /*#__PURE__*/React.createElement(StyledTableBodyCell, Object.assign({
-    colSpan: span,
-    align: align
-  }, props), children);
+  return /*#__PURE__*/React.createElement(StyledTableRow, props, children);
+};
+
+var VirtualRow = function VirtualRow(_ref8) {
+  var children = _ref8.children,
+      index = _ref8.index,
+      height = _ref8.height,
+      props = _objectWithoutProperties(_ref8, ["children", "index", "height"]);
+
+  var scrollCtx = useContext(ScrollableContentContext);
+  var top = (index + 1) *
+  /* +1 to acknowledge the header row */
+  height;
+  var threshold = height / 2;
+  var inViewport = top >= scrollCtx.scroll - threshold && top <= scrollCtx.scroll + scrollCtx.height + threshold;
+  return /*#__PURE__*/React.createElement(StyledTableRow, Object.assign({}, props, {
+    height: height
+  }), inViewport ? children : /*#__PURE__*/React.createElement(Cell, {
+    span: "auto"
+  }));
 };
 
 export var Table = Object.assign(TableComponent, {
@@ -117,6 +156,7 @@ export var Table = Object.assign(TableComponent, {
   HeaderCell: HeaderCell,
   Rows: Rows,
   Row: Row,
+  VirtualRow: VirtualRow,
   Cell: Cell,
   SelectableHeader: SelectableHeader,
   SelectableRow: SelectableRow

package/lib/Table/Table.types.d.ts

@@ -30,8 +30,9 @@ export interface TableRowsProps extends ContainerComponentProps {
 }
 export interface TableRowProps extends ContainerComponentProps, DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> {
     background?: Color;
+    height?: number;
 }
 export interface TableCellProps extends BaseCellProps {
-    span?: number;
+    span?: number | 'auto';
 }
 export {};

package/lib/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useStatefulRef';
 export * from './useForwardedRef';
+export * from './useInfiniteScroll';

package/lib/hooks/index.js

@@ -1,2 +1,3 @@
 export * from './useStatefulRef';
-export * from './useForwardedRef';
+export * from './useForwardedRef';
+export * from './useInfiniteScroll';

package/lib/hooks/useInfiniteScroll.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function useInfiniteScroll<T extends Element>(ref: React.RefObject<T>, onLoadMore?: () => void, containerRef?: Element | null): void;

package/lib/hooks/useInfiniteScroll.js

@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useRef } from 'react';
+export function useInfiniteScroll(ref, onLoadMore, containerRef) {
+  var observer = useRef();
+  var handleLoadMore = useCallback(function (entries, _) {
+    if (entries[0].isIntersecting && onLoadMore) {
+      onLoadMore();
+    }
+  }, [onLoadMore]);
+  useEffect(function () {
+    if (ref.current) {
+      observer.current = new IntersectionObserver(handleLoadMore, {
+        root: containerRef
+      });
+      observer.current.observe(ref.current);
+    }
+
+    return function () {
+      if (observer.current) observer.current.disconnect();
+    };
+  }, [ref, handleLoadMore, containerRef]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.46.2",
+  "version": "0.47.0",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -33,6 +33,7 @@
     "@pathofdev/react-tag-input": "github:inesgomas/react-tag-input#9820d2ae045d9398fbd3ba9021f675b127003237",
     "@popperjs/core": "^2.5.4",
     "@styled-system/should-forward-prop": "^5.1.5",
+    "@types/resize-observer-browser": "^0.1.6",
     "autosize": "^4.0.2",
     "emotion-theming": "10.x",
     "lodash": "^4.17.20",