@capillarytech/blaze-ui 0.1.4-alpha.6 → 0.1.5

package/CapInput/index.js

@@ -1,11 +1,10 @@
 import CapInput from './CapInput';
+import Number from './Number';
 import Search from './Search';
 import TextArea from './TextArea';
-import Number from './Number';
 
-// Attach subcomponents to the main component
+CapInput.Number = Number;
 CapInput.Search = Search;
 CapInput.TextArea = TextArea;
-CapInput.Number = Number;
 
-export default CapInput; 
+export default CapInput;

package/CapInput/loadable.js

@@ -4,6 +4,6 @@
 
 import { loadable } from '@capillarytech/cap-ui-utils';
 
-const CapInputLoadable = loadable(() => import('./index'));
+const CapInputLoadable = loadable(() => import('./CapInput'));
 
 export default CapInputLoadable; 

package/CapTable/CapTable.js

@@ -1,44 +1,28 @@
 /**
  * CapTable - Migrated to Ant Design v5
+ * A table component that supports:
+ * - Infinite scrolling with virtualization
+ * - Sequential data loading
+ * - Optimized scroll performance
  */
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useCallback, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { throttle } from 'lodash';
-import { Table } from 'antd';
-import styled from 'styled-components';
+import { debounce } from 'lodash';
 import classNames from 'classnames';
-import { CAP_G07 } from '../styled/variables';
+import { withStyles } from '@capillarytech/vulcan-react-sdk/utils';
+import styles, { StyledTable } from './styles';
 import LocaleHoc from '../LocaleHoc';
 
-const StyledTable = styled(Table)`
-  &.cap-table-v2 {
-    .ant-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 SCROLL_THRESHOLD = 80; // Percentage of scroll to trigger load
+const DEBOUNCE_DELAY = 250; // ms to wait between scroll events
+const DEFAULT_ROW_HEIGHT = 54;
+const DEFAULT_SCROLL_HEIGHT = 400;
 
 const CapTable = ({
   id,
   className,
   children,
-  infinteScroll,
+  infiniteScroll,
   pagination,
   dataSource,
   offset_limit,
@@ -47,91 +31,103 @@ 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;
-
-      if (currentScroll >= maxScroll - 10 && !showLoader) {
-        const offsetLimit = { ...offset_limit };
-        offsetLimit.offset += offsetLimit.limit;
-        setPagination?.(offsetLimit);
-      }
-    }, 50),
-  ).current;
+  const scrollRef = useRef(null);
+  const [hasMore, setHasMore] = useState(true);
+  const currentOffsetRef = useRef(0);
 
-  const addScrollEventListener = useCallback(() => {
-    const listTable = document.querySelector(`#${id} div.ant-table-body`);
-    if (listTable) {
-      listTable.addEventListener('scroll', onScrollThrottle);
+  const loadMore = useCallback(() => {
+    if (!showLoader && hasMore) {
+      const nextOffset = currentOffsetRef.current + 1;
+      const newOffsetLimit = {
+        ...offset_limit,
+        offset: nextOffset
+      };
+      
+      currentOffsetRef.current = nextOffset;
+      setPagination(newOffsetLimit);
     }
-  }, [id, onScrollThrottle]);
+  }, [showLoader, hasMore, setPagination, offset_limit]);
 
-  const callSetPaginationIfNotOverflow = useCallback(() => {
-    const yscrollheight = scroll?.y || 0;
-    const listTable = document.querySelector(`#${id} div.ant-table-body`);
-    let isOverflow = false;
+  const handleScroll = useCallback(
+    debounce((event) => {
+      const target = event.target;
+      if (!target || !infiniteScroll || !hasMore || showLoader) return;
 
-    if (yscrollheight && yscrollheight < listTable?.scrollHeight) {
-      isOverflow = true;
-    }
+      const scrollTop = Math.ceil(target.scrollTop);
+      const visibleHeight = target.clientHeight;
+      const totalHeight = target.scrollHeight;
+      
+      const scrolledPercentage = (scrollTop + visibleHeight) / totalHeight * 100;
 
-    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]);
+      if (scrolledPercentage >= SCROLL_THRESHOLD) {
+        loadMore();
+      }
+    }, DEBOUNCE_DELAY),
+    [infiniteScroll, showLoader, hasMore, loadMore]
+  );
 
+  // Setup scroll listener and handle initial load
   useEffect(() => {
-    const limit = offset_limit?.limit || 10;
-    if (infinteScroll) {
-      addScrollEventListener();
-      if (dataSource?.length >= limit) {
-        callSetPaginationIfNotOverflow();
-      }
+    const tableBody = document.querySelector(`#${id} .ant-table-body`);
+    if (!tableBody) return;
+
+    scrollRef.current = tableBody;
+    tableBody.addEventListener('scroll', handleScroll, { passive: true });
+    
+    // Check if initial load needed
+    const shouldLoadInitially = tableBody.scrollHeight <= tableBody.clientHeight 
+      && !showLoader 
+      && hasMore;
+
+    if (shouldLoadInitially) {
+      currentOffsetRef.current = 0;
+      loadMore();
     }
 
+    // Cleanup
     return () => {
-      const listTable = document.querySelector(`#${id} div.ant-table-body`);
-      if (listTable) {
-        listTable.removeEventListener('scroll', onScrollThrottle);
-      }
+      scrollRef.current?.removeEventListener('scroll', handleScroll);
+      handleScroll.cancel();
     };
-  }, [
-    infinteScroll,
-    dataSource,
-    offset_limit,
-    addScrollEventListener,
-    callSetPaginationIfNotOverflow,
-    id,
-    onScrollThrottle,
-  ]);
+  }, [id, handleScroll, showLoader, hasMore, loadMore]);
 
+  // Handle data changes
   useEffect(() => {
-    const limit = offset_limit?.limit || 10;
-    if (
-      !setPaginationCalled.current &&
-      infinteScroll &&
-      dataSource?.length >= limit
-    ) {
-      callSetPaginationIfNotOverflow();
+    if (!dataSource?.length) {
+      currentOffsetRef.current = 0;
+      setHasMore(true);
+    } else {
+      setHasMore(true);
+    }
+  }, [dataSource]);
+
+  const tableClassName = classNames(
+    'cap-table-v2',
+    className,
+    {
+      'show-loader': showLoader,
+      'infinite-scroll': infiniteScroll,
+      'has-more': hasMore
     }
-  }, [infinteScroll, dataSource, offset_limit, callSetPaginationIfNotOverflow]);
+  );
 
   return (
     <StyledTable
-      {...rest}
       id={id}
+      className={tableClassName}
       dataSource={dataSource}
-      scroll={scroll}
-      pagination={infinteScroll ? false : pagination}
-      className={classNames('cap-table-v2', className, {
-        'show-loader': showLoader,
-      })}
-    />
+      pagination={false}
+      scroll={{ 
+        x: scroll?.x,
+        y: scroll?.y || DEFAULT_SCROLL_HEIGHT,
+        scrollToFirstRowOnChange: false
+      }}
+      virtual={infiniteScroll}
+      rowHeight={DEFAULT_ROW_HEIGHT}
+      {...rest}
+    >
+      {children}
+    </StyledTable>
   );
 };
 
@@ -139,25 +135,13 @@ CapTable.propTypes = {
   id: PropTypes.string.isRequired,
   className: PropTypes.string,
   children: PropTypes.node,
-  infinteScroll: PropTypes.bool,
-  pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  infiniteScroll: PropTypes.bool,
+  pagination: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   dataSource: PropTypes.array,
-  offset_limit: PropTypes.shape({
-    offset: PropTypes.number,
-    limit: PropTypes.number,
-  }),
+  offset_limit: PropTypes.object,
   setPagination: PropTypes.func,
   scroll: PropTypes.object,
   showLoader: PropTypes.bool,
 };
 
-CapTable.defaultProps = {
-  infinteScroll: false,
-  showLoader: false,
-  offset_limit: {
-    offset: 0,
-    limit: 10,
-  },
-};
-
-export default LocaleHoc(CapTable, { key: 'CapTable' });
+export default LocaleHoc(withStyles(CapTable, styles), { key: 'CapTable' });

package/CapTable/index.js

@@ -1 +1,3 @@
-export { default } from './CapTable'; 
+import CapTableLoadable from './loadable';
+
+export default CapTableLoadable; 

package/CapTable/loadable.js

@@ -0,0 +1,13 @@
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import { loadable } from '@capillarytech/cap-ui-utils';
+import React, { Suspense } from 'react';
+
+const LoadableComponent = loadable(() => import('./CapTable'));
+
+const CapTableLoadable = () => (
+  <Suspense fallback={<CapSpin />}>
+    <LoadableComponent />
+  </Suspense>
+);
+
+export default CapTableLoadable;

package/CapTable/styles.js

@@ -1,25 +1,61 @@
-import { css } from 'styled-components';
+import { Table } from 'antd';
+import styled, { css } from 'styled-components';
+
 import * as styledVars from '../styled/variables';
 
-export const tableStyles = css`
+const {
+  CAP_G09,
+  CAP_G01,
+  CAP_G06,
+  CAP_G07,
+  CAP_G10,
+  SPACING_16,
+  SPACING_24,
+  FONT_SIZE_S,
+} = styledVars;
+
+export const StyledTable = styled(Table)`
+  &.cap-table-v2 {
+    .ant-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};
+    }
+  }
+`;
+export default css`
   .ant-table {
-    border: 1px solid ${styledVars.CAP_G07};
+    border: 1px solid ${CAP_G07};
 
     .ant-table-thead > tr > th {
-      color: ${styledVars.CAP_G01};
-      font-size: ${styledVars.FONT_SIZE_S};
-      line-height: ${styledVars.SPACING_16};
-      background-color: ${styledVars.CAP_G10};
+      color: ${CAP_G01};
+      font-size: ${FONT_SIZE_S};
+      line-height: ${SPACING_16};
+      background-color: ${CAP_G10};
       text-align: left;
     }
 
     .ant-table-thead > tr > th,
     .ant-table-tbody > tr > td {
-      padding: ${styledVars.SPACING_16} ${styledVars.SPACING_24};
+      padding: ${SPACING_16} ${SPACING_24};
     }
 
     .ant-table-tbody > tr > td {
-      border-bottom: 1px solid ${styledVars.CAP_G07};
+      border-bottom: 1px solid ${CAP_G07};
     }
 
     .ant-table-tbody > tr:last-child > td {
@@ -30,37 +66,37 @@ export const tableStyles = css`
     .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
     .ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td,
     .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
-      background-color: ${styledVars.CAP_G09};
+      background-color: ${CAP_G09};
     }
 
     .ant-table-thead > tr > th .ant-table-column-sorter-up,
     .ant-table-thead > tr > th .ant-table-column-sorter-down {
       &.active {
-        color: ${styledVars.CAP_G01};
+        color: ${CAP_G01};
       }
       &:not(.active) {
-        color: ${styledVars.CAP_G06};
+        color: ${CAP_G06};
       }
     }
 
     .ant-table-thead {
       .table-children {
-        padding: 6px ${styledVars.SPACING_24} 16px;
+        padding: 6px ${SPACING_24} 16px;
         position: relative;
       }
 
       .table-parent {
         padding-bottom: 0;
-        padding-left: ${styledVars.SPACING_24};
+        padding-left: ${SPACING_24};
       }
 
       .table-children.show-separator:not(:last-child)::after {
-        content: "";
+        content: '';
         height: 8px;
         width: 1px;
         right: 0;
         top: 30%;
-        background-color: ${styledVars.CAP_G07};
+        background-color: ${CAP_G07};
         position: absolute;
       }
     }
@@ -85,8 +121,12 @@ export const tableStyles = css`
 
   &.hide-hover {
     .ant-table {
-      .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
-      .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
+      .ant-table-thead
+        > tr.ant-table-row-hover:not(.ant-table-expanded-row)
+        > td,
+      .ant-table-tbody
+        > tr.ant-table-row-hover:not(.ant-table-expanded-row)
+        > td,
       .ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td,
       .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
         background: none;
@@ -95,6 +135,6 @@ export const tableStyles = css`
   }
 
   a {
-    color: ${styledVars.CAP_G01};
+    color: ${CAP_G01};
   }
-`; 
+`;

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -0,0 +1,159 @@
+import React, { useMemo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Select, TreeSelect } from 'antd';
+import styled from 'styled-components';
+import { selectStyles } from './styles';
+import { useIntl } from 'react-intl';
+import messages from './messages';
+
+const StyledSelect = styled(Select)`${selectStyles}`;
+const StyledTreeSelect = styled(TreeSelect)`${selectStyles}`;
+
+const CapUnifiedSelect = ({
+  type,
+  options,
+  treeData,
+  value,
+  onChange,
+  onSearch,
+  placeholder,
+  disabled,
+  loading,
+  allowClear,
+  enableSearch,
+  maxTagCount,
+  size,
+  status,
+  className,
+  style,
+  rightSlotContent,
+  virtualized,
+  ...restProps
+}) => {
+  const intl = useIntl();
+
+  const handleChange = useCallback((newValue, option) => {
+    if (onChange) {
+      onChange(newValue, option);
+    }
+  }, [onChange]);
+
+  const handleSearch = useCallback((searchText) => {
+    if (onSearch) {
+      onSearch(searchText);
+    }
+  }, [onSearch]);
+
+  const mergedClassName = useMemo(() => {
+    const classes = ['cap-unified-select'];
+    if (className) classes.push(className);
+    return classes.join(' ');
+  }, [className]);
+
+  // Common props for both Select and TreeSelect
+  const commonProps = {
+    value,
+    onChange: handleChange,
+    onSearch: enableSearch ? handleSearch : undefined,
+    placeholder: placeholder || intl.formatMessage(messages.selectPlaceholder),
+    disabled,
+    loading,
+    allowClear,
+    showSearch: enableSearch,
+    maxTagCount,
+    size,
+    status,
+    className: mergedClassName,
+    style,
+    virtual: virtualized,
+    notFoundContent: loading 
+      ? intl.formatMessage(messages.loading)
+      : intl.formatMessage(messages.noData),
+    ...restProps
+  };
+
+  // Render right slot content if provided
+  const suffixIcon = rightSlotContent && (
+    <div className="cap-unified-select-right-slot">
+      {rightSlotContent}
+    </div>
+  );
+
+  // For tree-based selects
+  if (type === 'treeSelect' || type === 'multiTreeSelect') {
+    return (
+      <StyledTreeSelect
+        {...commonProps}
+        treeData={treeData}
+        multiple={type === 'multiTreeSelect'}
+        suffixIcon={suffixIcon}
+      />
+    );
+  }
+
+  // For regular selects
+  return (
+    <StyledSelect
+      {...commonProps}
+      mode={type === 'multiSelect' ? 'multiple' : undefined}
+      options={options}
+      suffixIcon={suffixIcon}
+    />
+  );
+};
+
+CapUnifiedSelect.propTypes = {
+  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']).isRequired,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.any,
+      disabled: PropTypes.bool,
+    })
+  ),
+  treeData: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.node,
+      value: PropTypes.any,
+      children: PropTypes.array,
+      disabled: PropTypes.bool,
+    })
+  ),
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  onSearch: PropTypes.func,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  allowClear: PropTypes.bool,
+  enableSearch: PropTypes.bool,
+  maxTagCount: PropTypes.number,
+  size: PropTypes.oneOf(['small', 'middle', 'large']),
+  status: PropTypes.oneOf(['error', 'warning']),
+  className: PropTypes.string,
+  style: PropTypes.object,
+  rightSlotContent: PropTypes.node,
+  virtualized: PropTypes.bool,
+};
+
+CapUnifiedSelect.defaultProps = {
+  options: [],
+  treeData: [],
+  value: undefined,
+  onChange: undefined,
+  onSearch: undefined,
+  placeholder: '',
+  disabled: false,
+  loading: false,
+  allowClear: true,
+  enableSearch: false,
+  maxTagCount: undefined,
+  size: 'middle',
+  status: undefined,
+  className: '',
+  style: {},
+  rightSlotContent: null,
+  virtualized: true,
+};
+
+export default CapUnifiedSelect; 

package/CapUnifiedSelect/index.js

@@ -0,0 +1,4 @@
+import CapUnifiedSelect from './CapUnifiedSelect';
+import CapUnifiedSelectLoadable from './loadable';
+
+export default CapUnifiedSelectLoadable; 

package/CapUnifiedSelect/loadable.js

@@ -0,0 +1,3 @@
+import loadable from '@loadable/component';
+
+export default loadable(() => import('./CapUnifiedSelect')); 

package/CapUnifiedSelect/messages.js

@@ -0,0 +1,24 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  selectPlaceholder: {
+    id: 'cap.unified.select.placeholder',
+    defaultMessage: 'Select an option',
+  },
+  searchPlaceholder: {
+    id: 'cap.unified.select.search.placeholder',
+    defaultMessage: 'Search...',
+  },
+  noData: {
+    id: 'cap.unified.select.no.data',
+    defaultMessage: 'No data',
+  },
+  loading: {
+    id: 'cap.unified.select.loading',
+    defaultMessage: 'Loading...',
+  },
+  selected: {
+    id: 'cap.unified.select.selected',
+    defaultMessage: '{count} items selected',
+  },
+});