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

package/CapTable/CapTable.js

@@ -1,7 +1,7 @@
 /**
  * CapTable - Migrated to Ant Design v5
  */
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { throttle } from 'lodash';
 import { Table } from 'antd';
@@ -16,22 +16,6 @@ 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 = ({
@@ -47,90 +31,34 @@ const CapTable = ({
   showLoader,
   ...rest
 }) => {
-  const setPaginationCalled = useRef(false);
-  const onScrollThrottle = useRef(
-    throttle((event) => {
-      const maxScroll = event.target.scrollHeight - event.target.clientHeight;
-      const currentScroll = event.target.scrollTop;
+  // Throttled scroll handler using Ant Design's onScroll
+  const onScroll = useCallback(
+    throttle(({ target }) => {
+      if (!infinteScroll || showLoader) return;
 
-      if (currentScroll >= maxScroll - 10 && !showLoader) {
+      const { scrollHeight, scrollTop, clientHeight } = target;
+      const maxScroll = scrollHeight - clientHeight;
+      
+      if (scrollTop >= maxScroll - 10) {
         const offsetLimit = { ...offset_limit };
         offsetLimit.offset += offsetLimit.limit;
         setPagination?.(offsetLimit);
       }
     }, 50),
-  ).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]);
+    [infinteScroll, showLoader, offset_limit, setPagination],
+  );
 
   return (
     <StyledTable
       {...rest}
       id={id}
       dataSource={dataSource}
-      scroll={scroll}
+      scroll={{ ...scroll, y: scroll?.y || 400 }}
       pagination={infinteScroll ? false : pagination}
-      className={classNames('cap-table-v2', className, {
-        'show-loader': showLoader,
-      })}
+      className={classNames('cap-table-v2', className)}
+      loading={showLoader}
+      virtual={infinteScroll}
+      onScroll={onScroll}
     />
   );
 };

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, { useEffect, useRef, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { throttle } from 'lodash';
 import { Table } from 'antd';
@@ -22,9 +22,7 @@ import LocaleHoc from '../LocaleHoc';
 var StyledTable = styled(Table).withConfig({
   displayName: "StyledTable",
   componentId: "sc-o01z1q-0"
-})(["&.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);
+})(["&.cap-table-v2{.ant-table{border:1px solid ", ";}}"], CAP_G07);
 var CapTable = function CapTable(_ref) {
   var id = _ref.id,
     className = _ref.className,
@@ -37,65 +35,31 @@ var CapTable = function CapTable(_ref) {
     scroll = _ref.scroll,
     showLoader = _ref.showLoader,
     rest = _objectWithoutProperties(_ref, _excluded);
-  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) {
+  // 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 offsetLimit = _objectSpread({}, offset_limit);
       offsetLimit.offset += offsetLimit.limit;
       setPagination === null || setPagination === void 0 ? void 0 : setPagination(offsetLimit);
     }
-  }, 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]);
+  }, 50), [infinteScroll, showLoader, offset_limit, setPagination]);
   return /*#__PURE__*/React.createElement(StyledTable, _extends({}, rest, {
     id: id,
     dataSource: dataSource,
-    scroll: scroll,
+    scroll: _objectSpread(_objectSpread({}, scroll), {}, {
+      y: (scroll === null || scroll === void 0 ? void 0 : scroll.y) || 400
+    }),
     pagination: infinteScroll ? false : pagination,
-    className: classNames('cap-table-v2', className, {
-      'show-loader': showLoader
-    })
+    className: classNames('cap-table-v2', className),
+    loading: showLoader,
+    virtual: infinteScroll,
+    onScroll: onScroll
   }));
 };
 CapTable.propTypes = {