@capillarytech/blaze-ui 0.1.6-alpha.38 → 0.1.6-alpha.4

package/CapTable/loadable.js

@@ -1,12 +1,12 @@
-import CapSkeleton from '../CapSkeleton';
+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 = (props) => (
-  <Suspense fallback={<CapSkeleton />}>
-    <LoadableComponent {...props} />
+const CapTableLoadable = () => (
+  <Suspense fallback={<CapSpin />}>
+    <LoadableComponent />
   </Suspense>
 );
 

package/CapTooltip/CapTooltip.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import { TooltipWrapper } from './styles';
+
+const CapTooltip = ({ overlayClassName, children, ...rest }) => {
+  return (
+    <TooltipWrapper>
+      <Tooltip
+        overlayClassName={classNames('cap-tooltip', overlayClassName)}
+        {...rest}
+      >
+        {children}
+      </Tooltip>
+    </TooltipWrapper>
+  );
+};
+
+/*
+  NOTE:
+    While using a disabled button with tooltip, wrap the button with an element with className "button-disabled-tooltip-wrapper".
+
+    <CapTooltip title="disabled button with tooltip">
+      <span className="button-disabled-tooltip-wrapper">
+        <CapButton disabled>Button</CapButton>
+      </span>
+    </CapTooltip>
+*/
+
+CapTooltip.propTypes = {
+  overlayClassName: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default CapTooltip;

package/CapTooltip/index.js

@@ -0,0 +1 @@
+export { default } from './CapTooltip';

package/CapTooltip/styles.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const TooltipWrapper = styled.span`
+  .cap-tooltip {
+    max-width: 324px;
+
+    .ant-tooltip-inner {
+      background-color: ${styledVars.FONT_COLOR_01};
+      font-size: ${styledVars.FONT_SIZE_M};
+      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
+      padding: 6px 8px;
+      min-height: 32px;
+      border-radius: ${styledVars.RADIUS_04};
+    }
+
+    &.cap-bgcolor-tooltip {
+      .ant-tooltip-inner {
+        background-color: ${styledVars.FONT_COLOR_05};
+      }
+    }
+
+    &.hide-tooltip-pointer {
+      .ant-tooltip-arrow {
+        display: none;
+      }
+    }
+  }
+
+  .button-disabled-tooltip-wrapper {
+    display: inline-flex;
+    cursor: not-allowed;
+
+    .cap-button.ant-btn[disabled] {
+      pointer-events: none;
+      & > * {
+        pointer-events: auto;
+        cursor: not-allowed;
+      }
+    }
+  }
+`;

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,322 +1,121 @@
-// Enhanced CapUnifiedSelect supporting 4 scenarios with advanced features in a single TreeSelect
-import React, { useState, useEffect } from 'react';
+// CapUnifiedSelect component using Ant Design v5 Select and TreeSelect directly
+import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { TreeSelect, Tooltip, Input, Button } from 'antd';
-import styled from 'styled-components';
-import uploadIcon from '../assets/upload.svg';
+import { Select, TreeSelect } from 'antd';
+import { SelectWrapper, HeaderWrapper, StyledInfoIcon } from './styles';
+import CapLabel from '../CapLabel';
+import CapTooltip from '../CapTooltip';
 
-import { InfoCircleOutlined, SearchOutlined, WarningFilled, DownOutlined } from '@ant-design/icons';
-
-import withStyles from '../utils/withStyles';
-import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
-
-const StyledTreeSelect = styled(TreeSelect)`
-  ${selectStyles}
-`;
-
-const CapUnifiedSelect = ({
+function CapUnifiedSelect({
   type,
   options = [],
+  treeData,
   value,
   onChange,
   placeholder = 'Select an option',
   className,
   style,
-  isError = false,
-  errorMessage,
-  popupClassName,
   allowClear = false,
-  headerLabel,
+  showSearch = false,
+  label,
   tooltip,
-  bylineText,
   disabled = false,
-  showUpload = false,
-  customPopupRender = true,
-  showSearch = true,
-  searchBasedOn = 'label',
-  onConfirm,
-  onCancel,
-  ...rest
-}) => {
-
-  const [searchText, setSearchText] = useState('');
-  const [tempValue, setTempValue] = useState(value);
-  const [allSelected, setAllSelected] = useState(false);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-
-  useEffect(() => {
-    setTempValue(value);
-  }, [value]);
+}) {
+  const selectVirtualizationProps = {
+    listHeight: 256,
+  };
 
   const treeSelectVirtualizationProps = {
     listHeight: 256,
     listItemHeight: 32,
   };
 
-  const NoResult = () => (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: 200, color: '#8c8c8c', fontSize: 14 }}>
-      <WarningFilled style={{ fontSize: 36, marginBottom: 8, color: '#bfbfbf' }} />
-      <div style={{ fontWeight: 500 }}>No results found</div>
-    </div>
-  );
-
-  const getFilteredTreeData = (data, search) => {
-    if (!search) return data;
-
-    const filterNode = node => {
-      if (searchBasedOn === 'value') {
-        const valueText = String(node.value || '').toLowerCase();
-        return valueText.includes(search.toLowerCase());
-      } else if (searchBasedOn === 'key') {
-        const keyText = String(node.key || '').toLowerCase();
-        return keyText.includes(search.toLowerCase());
-      } else {
-        // Default case, fall back to label
-        const labelText = node.label?.toLowerCase() || '';
-        return labelText.includes(search.toLowerCase());
-      }
-    };
-
-    const loop = data =>
-      data.map(item => {
-        const children = item.children ? loop(item.children) : [];
-        if (filterNode(item) || children.length) {
-          return { ...item, children };
-        }
-        return null;
-      }).filter(Boolean);
-
-    return loop(data);
-  };
-
-  const flattenLeafValues = nodes =>
-    nodes?.flatMap(node => node.children ? flattenLeafValues(node.children) : [node.value]) || [];
-
-  const isMulti = type === 'multiSelect' || type === 'multiTreeSelect';
-  const isTree = type === 'treeSelect' || type === 'multiTreeSelect';
-  
-  const dataSource = isTree ? options : options.map(opt => ({ title: opt.label, value: opt.value, key: opt.key || opt.value }));
-
-  const filteredTree = getFilteredTreeData(dataSource, searchText);
-  const leafValues = flattenLeafValues(filteredTree);
-
-  const handleSelectAll = () => {
-    console.log('Select All clicked');
-    const availableValues = leafValues;
-    if (allSelected) {
-      // If currently all selected, then unselect all
-      setTempValue([]);
-      setAllSelected(false);
-    } else {
-      // Otherwise select all available options
-      setTempValue(availableValues);
-      setAllSelected(true);
-    }
-  };
-
-  useEffect(() => {
-    if (isMulti && Array.isArray(tempValue)) {
-      setAllSelected(tempValue.length > 0 && tempValue.length === leafValues.length);
-    }
-  }, [tempValue, leafValues, isMulti]);
-
-  const handleConfirm = () => {
-    console.log('Confirm clicked');
-    if (onChange) onChange(tempValue);
-    setDropdownOpen(false);
-  };
-
-  const handleCancel = () => {
-    console.log('Cancel clicked');
-    setTempValue(value);
-    setDropdownOpen(false);
-  };
-
-  const handleTempChange = newValue => {
-    setTempValue(newValue);
-  };
-  
-  const handleDropdownVisibilityChange = open => {
-    if (!open) {
-      setTempValue(value);
-    }
-    setDropdownOpen(open);
-  };
-
-  const suffix = isMulti && Array.isArray(value) && value?.length > 1 ? (
-    <>
-      <span>+{value.length - 1} more <DownOutlined /></span>
-    </>
-  ) : (
-    <DownOutlined />
-  );
-
-  const prefix = () => {
-    if (isMulti && Array.isArray(value) && value?.length > 0) {
-      const selectedLabels = options.filter(opt => value.includes(opt.value)).map(opt => opt.label);
-      return selectedLabels[0];
-    }
-    return null;
-  };
-
   const renderHeader = () => {
-    if (!headerLabel && !tooltip) return null;
+    if (!label && !tooltip) return null;
+    
     return (
-      <>
-      <HeaderWrapper className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header')}>
-        {headerLabel && <label type="label16" className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-label')}>{headerLabel}</label>}
+      <HeaderWrapper className={disabled ? 'disabled' : ''}>
+        {label && (
+          <CapLabel type="label16" className={disabled ? 'disabled' : ''}>
+            {label}
+          </CapLabel>
+        )}
         {tooltip && (
-          <Tooltip title={tooltip} rootClassName="cap-unified-tooltip" className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-tooltip')}>
-            <InfoCircleOutlined />
-          </Tooltip>
+          <CapTooltip title={tooltip}>
+            <StyledInfoIcon className={disabled ? 'disabled' : ''} />
+          </CapTooltip>
         )}
       </HeaderWrapper>
-      <div className="cap-unified-select-header-byline-text">
-        {bylineText && <label className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-byline-text')}>{bylineText}</label>}
-      </div>
-      </>
     );
   };
 
   const renderDropdown = () => {
-    const currentItems = filteredTree;
-    const selectedCount = Array.isArray(tempValue) 
-      ? isTree 
-        ? tempValue.filter(val => leafValues.includes(val)).length 
-        : tempValue.length 
-      : (tempValue ? 1 : 0);
-
-    const renderCustomDropdown = menu => {
-      if (!customPopupRender) return menu;
-
+    if (type === 'treeSelect' || type === 'multiTreeSelect') {
       return (
-        <div className={classnames(popupClassName, `${type}-popup-container`)}>
-          {showSearch && (
-            <div style={{ borderBottom: '1px solid #f0f0f0' }}>
-              <Input
-                prefix={<SearchOutlined style={{ color: '#B3BAC5' }} />}
-                placeholder="Search"
-                variant="borderless"
-                value={searchText}
-                onChange={e => setSearchText(e.target.value)}
-                onKeyDown={e => e.stopPropagation()}
-              />
-            </div>
-            )}
-          {isMulti && showUpload && (
-            <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0' , height: '36px'}}>
-             <Button
-              type="link"
-              icon={<img src={uploadIcon} alt="upload" style={{ width: "16px", height: "20px" }} />}
-              onClick={() => {}}
-              style={{
-                color: '#2466EA', // AntD primary blue
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: '14px',
-                fontWeight: '400',
-                lineHeight: '20px',
-              }}
-            >
-              Upload
-            </Button>
-            </div>
-          )}
-          {isMulti && currentItems.length > 0 && (
-            <div style={{ padding: '8px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0' }} onClick={e => { e.stopPropagation(); handleSelectAll(); }}>
-                              <input type="checkbox" checked={allSelected} readOnly style={{ cursor: 'pointer' }} onClick={e => e.stopPropagation()} />
-              <label style={{ marginLeft: 8, cursor: 'pointer' }}>Select all</label>
-            </div>
-          )}
-
-          {currentItems.length === 0 ? <NoResult /> : menu}
-
-          {currentItems.length > 0 && isMulti && (
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', borderTop: '1px solid #f0f0f0' }}>
-              <div>
-                <Button type="primary" size="small" style={{ marginRight: 8 }} onClick={e => { e.stopPropagation(); handleConfirm(); }}>Confirm</Button>
-                <Button type="text" size="small" onClick={e => { e.stopPropagation(); handleCancel(); }}>Cancel</Button>
-              </div>
-              {selectedCount > 0 && <span style={{ color: '#8c8c8c', fontSize: '14px' }}>{selectedCount} selected</span>}
-            </div>
-          )}
-        </div>
-      );
-    };
-
-    return (
-      <>
-        <StyledTreeSelect
-          {...rest}
-          type={type}
-          treeData={filteredTree}
-          value={customPopupRender ? tempValue : value}
-          onChange={customPopupRender ? handleTempChange : onChange}
+        <TreeSelect
+          treeData={treeData || options}
+          value={value}
+          onChange={onChange}
           placeholder={placeholder}
-          maxTagCount={0}
-          maxTagPlaceholder={() => null}
-          prefix={isMulti && value.length > 0 && prefix()}
-          suffixIcon={suffix}
-          className={classnames(`cap-unified-tree-select ${className || ''}`)}
+          className={className}
           style={style}
-          status={isError ? 'error' : ''}
           allowClear={allowClear}
-          multiple={isMulti}
-          treeCheckable={isMulti}
-          showCheckedStrategy={TreeSelect.SHOW_PARENT}
+          showSearch={showSearch}
+          multiple={type === 'multiTreeSelect' ? true : false}
           virtual
+          treeDefaultExpandAll
           disabled={disabled}
-          filterTreeNode={false}
-          open={dropdownOpen}
-          onOpenChange={handleDropdownVisibilityChange}
           {...treeSelectVirtualizationProps}
-          popupRender={renderCustomDropdown}
         />
-        {isError && <div style={{ color: '#E83135' }} className="cap-unified-select-status">{errorMessage}</div>}
-      </>
+      );
+    }
+
+    return (
+      <Select
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={className}
+        style={style}
+        allowClear={allowClear}
+        showSearch={showSearch}
+        options={options}
+        mode={type === 'multiSelect' ? 'multiple' : undefined}
+        virtual
+        disabled={disabled}
+        {...selectVirtualizationProps}
+      />
     );
   };
 
   return (
-    <SelectWrapper className={classnames(`cap-unified-select-container ${className || ''}`)}>
+    <SelectWrapper>
       {renderHeader()}
       {renderDropdown()}
     </SelectWrapper>
   );
-};
+}
 
 CapUnifiedSelect.propTypes = {
   type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
   options: PropTypes.array,
+  treeData: PropTypes.array,
   value: PropTypes.any,
   onChange: PropTypes.func,
   placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   className: PropTypes.string,
   style: PropTypes.object,
   allowClear: PropTypes.bool,
-  headerLabel: PropTypes.string,
+  showSearch: PropTypes.bool,
+  label: PropTypes.string,
   tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   disabled: PropTypes.bool,
-  customPopupRender: PropTypes.bool,
-  showSearch: PropTypes.bool,
-  searchBasedOn: PropTypes.oneOf(['label', 'value', 'key']),
-  onConfirm: PropTypes.func,
-  onCancel: PropTypes.func,
-  isError: PropTypes.bool,
-  errorMessage: PropTypes.string,
-  popupClassName: PropTypes.string,
-  showUpload: PropTypes.bool,
 };
 
 CapUnifiedSelect.defaultProps = {
   type: 'select',
   allowClear: false,
-  customPopupRender: false,
-  showSearch: true,
-  searchBasedOn: 'label',
-  className: '',
-  popupClassName: '',
+  showSearch: false,
 };
 
-export default withStyles(CapUnifiedSelect, selectStyles);
+export default CapUnifiedSelect;

package/CapUnifiedSelect/index.js

@@ -1 +1,4 @@
-export { default } from './CapUnifiedSelect'; 
+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'));