@capillarytech/blaze-ui 0.1.4-alpha.16 → 0.1.4-alpha.18

package/CapInput/index.js

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

package/CapTable/CapTable.js

@@ -1,21 +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, useCallback, useState } from 'react';
+import React, { useEffect, useCallback, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { throttle } from 'lodash';
+import { debounce } from 'lodash';
 import classNames from 'classnames';
-
 import { withStyles } from '@capillarytech/vulcan-react-sdk/utils';
-
 import styles, { StyledTable } from './styles';
 import LocaleHoc from '../LocaleHoc';
 
+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,
@@ -24,58 +31,99 @@ const CapTable = ({
   showLoader,
   ...rest
 }) => {
-  const [hasCheckedInitialLoad, setHasCheckedInitialLoad] = useState(false);
+  const scrollRef = useRef(null);
+  const [hasMore, setHasMore] = useState(true);
+  const currentOffsetRef = useRef(0);
+
+  const loadMore = useCallback(() => {
+    if (!showLoader && hasMore) {
+      const nextOffset = currentOffsetRef.current + 1;
+      const newOffsetLimit = {
+        ...offset_limit,
+        offset: nextOffset
+      };
+      
+      currentOffsetRef.current = nextOffset;
+      setPagination(newOffsetLimit);
+    }
+  }, [showLoader, hasMore, setPagination, offset_limit]);
 
-  // Combine scroll check and load more logic
-  const checkAndLoadMore = useCallback(
-    throttle((target) => {
-      if (!infinteScroll || showLoader) return;
+  const handleScroll = useCallback(
+    debounce((event) => {
+      const target = event.target;
+      if (!target || !infiniteScroll || !hasMore || showLoader) return;
 
-      const { scrollTop, scrollHeight, clientHeight } = target;
-      const maxScroll = scrollHeight - clientHeight;
-      const threshold = maxScroll * 0.8; // Load more when 80% scrolled
+      const scrollTop = Math.ceil(target.scrollTop);
+      const visibleHeight = target.clientHeight;
+      const totalHeight = target.scrollHeight;
+      
+      const scrolledPercentage = (scrollTop + visibleHeight) / totalHeight * 100;
 
-      if (scrollTop >= threshold) {
-        setPagination(offset_limit);
+      if (scrolledPercentage >= SCROLL_THRESHOLD) {
+        loadMore();
       }
-    }, 300),
-    [infinteScroll, showLoader, offset_limit, setPagination],
+    }, DEBOUNCE_DELAY),
+    [infiniteScroll, showLoader, hasMore, loadMore]
   );
 
-  // Handle scroll event
-  const onScroll = useCallback(
-    ({ target }) => {
-      checkAndLoadMore(target);
-    },
-    [checkAndLoadMore],
-  );
+  // Setup scroll listener and handle initial load
+  useEffect(() => {
+    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;
 
-  // Combined effect for initial load check and scroll setup
+    if (shouldLoadInitially) {
+      currentOffsetRef.current = 0;
+      loadMore();
+    }
+
+    // Cleanup
+    return () => {
+      scrollRef.current?.removeEventListener('scroll', handleScroll);
+      handleScroll.cancel();
+    };
+  }, [id, handleScroll, showLoader, hasMore, loadMore]);
+
+  // Handle data changes
   useEffect(() => {
-    if (!hasCheckedInitialLoad && infinteScroll) {
-      const tableBody = document.querySelector(`#${id} .ant-table-body`);
-      if (tableBody) {
-        const { scrollHeight, clientHeight } = tableBody;
-        if (scrollHeight === clientHeight) {
-          setPagination(offset_limit);
-        }
-        setHasCheckedInitialLoad(true);
-      }
+    if (!dataSource?.length) {
+      currentOffsetRef.current = 0;
+      setHasMore(true);
+    } else {
+      setHasMore(true);
     }
-  }, [id, infinteScroll, hasCheckedInitialLoad, offset_limit, setPagination]);
+  }, [dataSource]);
+
+  const tableClassName = classNames(
+    'cap-table-v2',
+    className,
+    {
+      'show-loader': showLoader,
+      'infinite-scroll': infiniteScroll,
+      'has-more': hasMore
+    }
+  );
 
   return (
     <StyledTable
       id={id}
-      className={classNames('cap-table-v2', className, {
-        'show-loader': showLoader,
-      })}
+      className={tableClassName}
       dataSource={dataSource}
-      pagination={pagination}
-      scroll={scroll}
-      onScroll={onScroll}
-      virtual={infinteScroll} // Enable virtual scrolling
-      rowHeight={54} // Fixed row height for virtual scrolling
+      pagination={false}
+      scroll={{ 
+        x: scroll?.x,
+        y: scroll?.y || DEFAULT_SCROLL_HEIGHT,
+        scrollToFirstRowOnChange: false
+      }}
+      virtual={infiniteScroll}
+      rowHeight={DEFAULT_ROW_HEIGHT}
       {...rest}
     >
       {children}
@@ -84,10 +132,10 @@ const CapTable = ({
 };
 
 CapTable.propTypes = {
-  id: PropTypes.string,
+  id: PropTypes.string.isRequired,
   className: PropTypes.string,
   children: PropTypes.node,
-  infinteScroll: PropTypes.bool,
+  infiniteScroll: PropTypes.bool,
   pagination: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   dataSource: PropTypes.array,
   offset_limit: PropTypes.object,

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/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',
+  },
+}); 

package/CapUnifiedSelect/styles.js

@@ -0,0 +1,182 @@
+import { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const selectStyles = css`
+  &.cap-unified-select {
+    width: 100%;
+    font-family: ${styledVars.FONT_FAMILY};
+
+    .ant-select-selector {
+      border-radius: ${styledVars.RADIUS_04};
+      transition: ${styledVars.TRANSITION_ALL};
+      padding: 0 12px;
+      min-height: 32px;
+      display: flex;
+      align-items: center;
+      
+      &:hover {
+        border-color: ${styledVars.CAP_G11};
+      }
+    }
+
+    /* Right slot content styles */
+    .cap-unified-select-right-slot {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-left: 8px;
+    }
+
+    &.ant-select-focused {
+      .ant-select-selector {
+        border-color: ${styledVars.CAP_G01} !important;
+        box-shadow: none !important;
+      }
+    }
+
+    /* Error state */
+    &.ant-select-status-error {
+      .ant-select-selector {
+        border-color: ${styledVars.CAP_RED};
+      }
+    }
+
+    /* Disabled state */
+    &.ant-select-disabled {
+      .ant-select-selector {
+        background-color: ${styledVars.CAP_G08};
+        cursor: not-allowed;
+      }
+    }
+
+    /* Dropdown styles */
+    .ant-select-dropdown {
+      padding: 4px;
+      border-radius: ${styledVars.RADIUS_04};
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+      .ant-select-item {
+        border-radius: ${styledVars.RADIUS_04};
+        padding: 8px 12px;
+        transition: ${styledVars.TRANSITION_ALL};
+
+        &-option-selected {
+          background-color: ${styledVars.CAP_PRIMARY.light};
+          color: ${styledVars.CAP_PRIMARY.base};
+          font-weight: 500;
+        }
+
+        &-option-active {
+          background-color: ${styledVars.CAP_G08};
+        }
+      }
+
+      /* Search input styles */
+      .ant-select-search {
+        padding: 8px;
+        
+        input {
+          border-radius: ${styledVars.RADIUS_04};
+          transition: ${styledVars.TRANSITION_ALL};
+          
+          &:focus {
+            border-color: ${styledVars.CAP_G01};
+            box-shadow: none;
+          }
+        }
+      }
+    }
+
+    /* Multiple selection styles */
+    &.ant-select-multiple {
+      .ant-select-selection-item {
+        background-color: ${styledVars.CAP_PRIMARY.light};
+        border-color: ${styledVars.CAP_PRIMARY.light};
+        border-radius: ${styledVars.RADIUS_04};
+        color: ${styledVars.CAP_PRIMARY.base};
+        margin: 2px 4px 2px 0;
+        padding: 0 8px;
+        height: 24px;
+        line-height: 22px;
+
+        &-remove {
+          color: ${styledVars.CAP_PRIMARY.base};
+          
+          &:hover {
+            color: ${styledVars.CAP_PRIMARY.hover};
+          }
+        }
+      }
+
+      .ant-select-selection-overflow {
+        flex-wrap: wrap;
+        gap: 4px;
+      }
+    }
+
+    /* Tree select styles */
+    .ant-select-tree {
+      padding: 4px 0;
+
+      .ant-select-tree-node-content-wrapper {
+        padding: 4px 8px;
+        border-radius: ${styledVars.RADIUS_04};
+        transition: ${styledVars.TRANSITION_ALL};
+
+        &:hover {
+          background-color: ${styledVars.CAP_G08};
+        }
+
+        &.ant-select-tree-node-selected {
+          background-color: ${styledVars.CAP_PRIMARY.light};
+          color: ${styledVars.CAP_PRIMARY.base};
+          font-weight: 500;
+        }
+      }
+
+      .ant-select-tree-switcher {
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+      }
+
+      .ant-select-tree-checkbox {
+        margin: 4px 8px 4px 0;
+      }
+    }
+
+    /* Size variations */
+    &.ant-select-lg {
+      .ant-select-selector {
+        height: 40px;
+        padding: 0 16px;
+      }
+
+      .ant-select-selection-item {
+        height: 28px;
+        line-height: 26px;
+      }
+    }
+
+    &.ant-select-sm {
+      .ant-select-selector {
+        height: 24px;
+        padding: 0 8px;
+      }
+
+      .ant-select-selection-item {
+        height: 20px;
+        line-height: 18px;
+      }
+    }
+
+    /* Loading state */
+    &.ant-select-loading {
+      .ant-select-arrow {
+        .anticon-loading {
+          color: ${styledVars.CAP_PRIMARY.base};
+        }
+      }
+    }
+  }
+`;