@capillarytech/blaze-ui 0.1.4-alpha.11 → 0.1.4-alpha.12

package/CapTable/CapTable.js

@@ -1,7 +1,7 @@
 /**
  * CapTable - Migrated to Ant Design v5
  */
-import React, { useCallback } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { throttle } from 'lodash';
 import { Table } from 'antd';
@@ -16,6 +16,22 @@ const StyledTable = styled(Table)`
       border: 1px solid ${CAP_G07};
     }
   }
+
+  &.show-loader {
+    .ant-table-body > table > tbody::after {
+      content: '${(props) => props.loadMoreData}';
+      display: flex;
+      justify-content: center;
+      position: absolute;
+      width: 100%;
+      align-items: center;
+      height: 60px;
+      text-align: center;
+      font-size: 16px;
+      color: gray;
+      border-top: 1px solid ${CAP_G07};
+    }
+  }
 `;
 
 const CapTable = ({
@@ -31,34 +47,90 @@ const CapTable = ({
   showLoader,
   ...rest
 }) => {
-  // Throttled scroll handler using Ant Design's onScroll
-  const onScroll = useCallback(
-    throttle(({ target }) => {
-      if (!infinteScroll || showLoader) return;
+  const setPaginationCalled = useRef(false);
+  const onScrollThrottle = useRef(
+    throttle((event) => {
+      const maxScroll = event.target.scrollHeight - event.target.clientHeight;
+      const currentScroll = event.target.scrollTop;
 
-      const { scrollHeight, scrollTop, clientHeight } = target;
-      const maxScroll = scrollHeight - clientHeight;
-      
-      if (scrollTop >= maxScroll - 10) {
+      if (currentScroll >= maxScroll - 10 && !showLoader) {
         const offsetLimit = { ...offset_limit };
         offsetLimit.offset += offsetLimit.limit;
         setPagination?.(offsetLimit);
       }
     }, 50),
-    [infinteScroll, showLoader, offset_limit, setPagination],
-  );
+  ).current;
+
+  const addScrollEventListener = useCallback(() => {
+    const listTable = document.querySelector(`#${id} div.ant-table-body`);
+    if (listTable) {
+      listTable.addEventListener('scroll', onScrollThrottle);
+    }
+  }, [id, onScrollThrottle]);
+
+  const callSetPaginationIfNotOverflow = useCallback(() => {
+    const yscrollheight = scroll?.y || 0;
+    const listTable = document.querySelector(`#${id} div.ant-table-body`);
+    let isOverflow = false;
+
+    if (yscrollheight && yscrollheight < listTable?.scrollHeight) {
+      isOverflow = true;
+    }
+
+    if (!isOverflow && setPagination && dataSource?.length > 0) {
+      setPaginationCalled.current = true;
+      const offsetLimit = { ...offset_limit };
+      offsetLimit.offset += offsetLimit.limit;
+      setPagination(offsetLimit);
+    }
+  }, [id, scroll?.y, setPagination, dataSource, offset_limit]);
+
+  useEffect(() => {
+    const limit = offset_limit?.limit || 10;
+    if (infinteScroll) {
+      addScrollEventListener();
+      if (dataSource?.length >= limit) {
+        callSetPaginationIfNotOverflow();
+      }
+    }
+
+    return () => {
+      const listTable = document.querySelector(`#${id} div.ant-table-body`);
+      if (listTable) {
+        listTable.removeEventListener('scroll', onScrollThrottle);
+      }
+    };
+  }, [
+    infinteScroll,
+    dataSource,
+    offset_limit,
+    addScrollEventListener,
+    callSetPaginationIfNotOverflow,
+    id,
+    onScrollThrottle,
+  ]);
+
+  useEffect(() => {
+    const limit = offset_limit?.limit || 10;
+    if (
+      !setPaginationCalled.current &&
+      infinteScroll &&
+      dataSource?.length >= limit
+    ) {
+      callSetPaginationIfNotOverflow();
+    }
+  }, [infinteScroll, dataSource, offset_limit, callSetPaginationIfNotOverflow]);
 
   return (
     <StyledTable
       {...rest}
       id={id}
       dataSource={dataSource}
-      scroll={{ ...scroll, y: scroll?.y || 400 }}
+      scroll={scroll}
       pagination={infinteScroll ? false : pagination}
-      className={classNames('cap-table-v2', className)}
-      loading={showLoader}
-      virtual={infinteScroll}
-      onScroll={onScroll}
+      className={classNames('cap-table-v2', className, {
+        'show-loader': showLoader,
+      })}
     />
   );
 };

package/dist/esm/CapTable/CapTable.js

@@ -11,7 +11,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 /**
  * CapTable - Migrated to Ant Design v5
  */
-import React, { useCallback } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { throttle } from 'lodash';
 import { Table } from 'antd';
@@ -22,7 +22,9 @@ import LocaleHoc from '../LocaleHoc';
 var StyledTable = styled(Table).withConfig({
   displayName: "StyledTable",
   componentId: "sc-o01z1q-0"
-})(["&.cap-table-v2{.ant-table{border:1px solid ", ";}}"], CAP_G07);
+})(["&.cap-table-v2{.ant-table{border:1px solid ", ";}}&.show-loader{.ant-table-body > table > tbody::after{content:'", "';display:flex;justify-content:center;position:absolute;width:100%;align-items:center;height:60px;text-align:center;font-size:16px;color:gray;border-top:1px solid ", ";}}"], CAP_G07, function (props) {
+  return props.loadMoreData;
+}, CAP_G07);
 var CapTable = function CapTable(_ref) {
   var id = _ref.id,
     className = _ref.className,
@@ -35,31 +37,65 @@ var CapTable = function CapTable(_ref) {
     scroll = _ref.scroll,
     showLoader = _ref.showLoader,
     rest = _objectWithoutProperties(_ref, _excluded);
-  // Throttled scroll handler using Ant Design's onScroll
-  var onScroll = useCallback(throttle(function (_ref2) {
-    var target = _ref2.target;
-    if (!infinteScroll || showLoader) return;
-    var scrollHeight = target.scrollHeight,
-      scrollTop = target.scrollTop,
-      clientHeight = target.clientHeight;
-    var maxScroll = scrollHeight - clientHeight;
-    if (scrollTop >= maxScroll - 10) {
+  var setPaginationCalled = useRef(false);
+  var onScrollThrottle = useRef(throttle(function (event) {
+    var maxScroll = event.target.scrollHeight - event.target.clientHeight;
+    var currentScroll = event.target.scrollTop;
+    if (currentScroll >= maxScroll - 10 && !showLoader) {
       var offsetLimit = _objectSpread({}, offset_limit);
       offsetLimit.offset += offsetLimit.limit;
       setPagination === null || setPagination === void 0 ? void 0 : setPagination(offsetLimit);
     }
-  }, 50), [infinteScroll, showLoader, offset_limit, setPagination]);
+  }, 50)).current;
+  var addScrollEventListener = useCallback(function () {
+    var listTable = document.querySelector("#".concat(id, " div.ant-table-body"));
+    if (listTable) {
+      listTable.addEventListener('scroll', onScrollThrottle);
+    }
+  }, [id, onScrollThrottle]);
+  var callSetPaginationIfNotOverflow = useCallback(function () {
+    var yscrollheight = (scroll === null || scroll === void 0 ? void 0 : scroll.y) || 0;
+    var listTable = document.querySelector("#".concat(id, " div.ant-table-body"));
+    var isOverflow = false;
+    if (yscrollheight && yscrollheight < (listTable === null || listTable === void 0 ? void 0 : listTable.scrollHeight)) {
+      isOverflow = true;
+    }
+    if (!isOverflow && setPagination && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0) {
+      setPaginationCalled.current = true;
+      var offsetLimit = _objectSpread({}, offset_limit);
+      offsetLimit.offset += offsetLimit.limit;
+      setPagination(offsetLimit);
+    }
+  }, [id, scroll === null || scroll === void 0 ? void 0 : scroll.y, setPagination, dataSource, offset_limit]);
+  useEffect(function () {
+    var limit = (offset_limit === null || offset_limit === void 0 ? void 0 : offset_limit.limit) || 10;
+    if (infinteScroll) {
+      addScrollEventListener();
+      if ((dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) >= limit) {
+        callSetPaginationIfNotOverflow();
+      }
+    }
+    return function () {
+      var listTable = document.querySelector("#".concat(id, " div.ant-table-body"));
+      if (listTable) {
+        listTable.removeEventListener('scroll', onScrollThrottle);
+      }
+    };
+  }, [infinteScroll, dataSource, offset_limit, addScrollEventListener, callSetPaginationIfNotOverflow, id, onScrollThrottle]);
+  useEffect(function () {
+    var limit = (offset_limit === null || offset_limit === void 0 ? void 0 : offset_limit.limit) || 10;
+    if (!setPaginationCalled.current && infinteScroll && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) >= limit) {
+      callSetPaginationIfNotOverflow();
+    }
+  }, [infinteScroll, dataSource, offset_limit, callSetPaginationIfNotOverflow]);
   return /*#__PURE__*/React.createElement(StyledTable, _extends({}, rest, {
     id: id,
     dataSource: dataSource,
-    scroll: _objectSpread(_objectSpread({}, scroll), {}, {
-      y: (scroll === null || scroll === void 0 ? void 0 : scroll.y) || 400
-    }),
+    scroll: scroll,
     pagination: infinteScroll ? false : pagination,
-    className: classNames('cap-table-v2', className),
-    loading: showLoader,
-    virtual: infinteScroll,
-    onScroll: onScroll
+    className: classNames('cap-table-v2', className, {
+      'show-loader': showLoader
+    })
   }));
 };
 CapTable.propTypes = {