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

package/CapInput/CapInput.js

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Input } from 'antd';
+import { Input } from 'antd-v5';
 import { WarningOutlined, CheckCircleOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import * as styledVars from '../styled/variables';

package/CapInput/Number.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { InputNumber } from 'antd';
+import { InputNumber } from 'antd-v5';
 
 const CapInputNumber = React.forwardRef((props, ref) => {
   const { size = 'large', ...rest } = props;

package/CapInput/Search.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Input } from 'antd';
+import { Input } from 'antd-v5';
 
 const { Search } = Input;
 

package/CapInput/TextArea.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Input } from 'antd';
+import { Input } from 'antd-v5';
 
 const { TextArea } = Input;
 

package/CapSkeleton/CapSkeleton.js

@@ -0,0 +1,17 @@
+/**
+ * CapSkeleton - Migrated to Ant Design v5
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Skeleton } from 'antd-v5';
+
+const CapSkeleton = ({ className, ...rest }) => {
+  const combinedClassName = `cap-skeleton-v2 ${className || ''}`.trim();
+  return <Skeleton className={combinedClassName} {...rest} />;
+};
+
+CapSkeleton.propTypes = {
+  className: PropTypes.string
+};
+
+export default CapSkeleton; 

package/CapSkeleton/index.js

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

package/CapSpin/CapSpin.js

@@ -0,0 +1,23 @@
+/**
+ * CapSpin - Migrated to Ant Design v5
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Spin } from 'antd-v5';
+
+const CapSpin = ({ className, ...rest }) => (
+  <Spin className={className} {...rest} />
+);
+
+CapSpin.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'default', 'large']),
+  spinning: PropTypes.bool,
+  tip: PropTypes.string,
+  delay: PropTypes.number,
+  indicator: PropTypes.node,
+  fullscreen: PropTypes.bool,
+  wrapperClassName: PropTypes.string
+};
+
+export default CapSpin; 

package/CapSpin/index.js

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

package/CapTable/loadable.js

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

package/CapTable/styles.js

@@ -1,4 +1,4 @@
-import { Table } from 'antd';
+import { Table } from 'antd-v5';
 import styled from 'styled-components';
 import * as styledVars from '../styled/variables';
 

package/CapTestSelect/CapTestSelect.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Select } from 'antd-v5';
+
+/**
+ * Test component to verify Ant Design v5 Select integration
+ * This is a simple wrapper for testing purposes only
+ */
+const CapTestSelect = (props) => {
+  return <Select {...props} />;
+};
+
+CapTestSelect.propTypes = {
+  // Common Select props from antd
+  allowClear: PropTypes.bool,
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
+  ]),
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  mode: PropTypes.oneOf(['multiple', 'tags']),
+  placeholder: PropTypes.string,
+  showSearch: PropTypes.bool,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
+  ]),
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.node,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      disabled: PropTypes.bool
+    })
+  )
+};
+
+CapTestSelect.defaultProps = {
+  allowClear: false,
+  disabled: false,
+  loading: false,
+  showSearch: false
+};
+
+export default CapTestSelect; 

package/CapTestSelect/index.js

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

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,121 +1,312 @@
-// CapUnifiedSelect component using Ant Design v5 Select and TreeSelect directly
-import React from 'react';
+// Enhanced CapUnifiedSelect supporting 4 scenarios with advanced features in a single TreeSelect
+import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
-import { Select, TreeSelect } from 'antd';
-import { SelectWrapper, HeaderWrapper, StyledInfoIcon } from './styles';
-import CapLabel from '../CapLabel';
-import CapTooltip from '../CapTooltip';
+import classnames from 'classnames';
+import { TreeSelect, Tooltip, Input, Button } from 'antd-v5';
+import styled from 'styled-components';
+import * as styledVars from '../styled/variables';
+import uploadIcon from '../assets/upload.svg';
 
-function CapUnifiedSelect({
+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 = ({
   type,
   options = [],
-  treeData,
   value,
   onChange,
   placeholder = 'Select an option',
   className,
   style,
+  isError = false,
+  errorMessage,
+  popupClassName,
   allowClear = false,
-  showSearch = false,
-  label,
+  headerLabel,
   tooltip,
+  bylineText,
   disabled = false,
-}) {
-  const selectVirtualizationProps = {
-    listHeight: 256,
-  };
+  showUpload = false,
+  customPopupRender = true,
+  showSearch = true,
+  searchBasedOn = 'label',
+  onConfirm,
+  onCancel,
+  noResultText = 'No results found',
+  ...rest
+}) => {
+
+  const [searchText, setSearchText] = useState('');
+  const [tempValue, setTempValue] = useState(value);
+  const [allSelected, setAllSelected] = useState(false);
+
+
+  useEffect(() => {
+    setTempValue(value);
+  }, [value]);
 
   const treeSelectVirtualizationProps = {
     listHeight: 256,
     listItemHeight: 32,
   };
 
-  const renderHeader = () => {
-    if (!label && !tooltip) return null;
-    
+  const NoResult = memo(({ noResultText, className }) => (
+    <div className={classnames(className, "cap-unified-select-no-result")}>
+      <WarningFilled className="cap-unified-select-no-result-icon" />
+      <div className="cap-unified-select-no-result-text">{noResultText}</div>
+    </div>
+  ));
+
+  const getFilteredTreeData = useCallback((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 {
+        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);
+  }, [searchBasedOn]);
+
+  const flattenLeafValues = useCallback(nodes =>
+    nodes?.flatMap(node => node.children ? flattenLeafValues(node.children) : [node.value]) || [], []);
+
+  const isMulti = useMemo(() => type === 'multiSelect' || type === 'multiTreeSelect', [type]);
+  const isTree = useMemo(() => type === 'treeSelect' || type === 'multiTreeSelect', [type]);
+  
+  const dataSource = useMemo(() => {
+    return isTree ? options : options.map(opt => ({ title: opt.label, value: opt.value, key: opt.key || opt.value }));
+  }, [isTree, options]);
+
+  const filteredTree = useMemo(() => getFilteredTreeData(dataSource, searchText), [dataSource, searchText]);
+  const leafValues = useMemo(() => flattenLeafValues(filteredTree), [filteredTree]);
+
+  const handleSelectAll = useCallback(() => {
+    const availableValues = leafValues;
+    if (allSelected) {
+      setTempValue([]);
+      setAllSelected(false);
+    } else {
+      setTempValue(availableValues);
+      setAllSelected(true);
+    }
+  }, [allSelected, leafValues]);
+
+  useEffect(() => {
+    if (isMulti && Array.isArray(tempValue)) {
+      const allItemsSelected = tempValue.length > 0 && leafValues.length > 0 && tempValue.length === leafValues.length;
+      setAllSelected(allItemsSelected);
+    }
+  }, [tempValue, leafValues, isMulti]);
+
+  const handleConfirm = useCallback(() => {
+    if (onChange) onChange(tempValue);
+  }, [onChange, tempValue]);
+
+  const handleCancel = useCallback(() => {
+    setTempValue(value);
+  }, [value]);
+
+  const handleTempChange = useCallback(newValue => {
+    setTempValue(newValue);
+  }, []);
+
+  const suffix = useMemo(() => {
+    return isMulti && Array.isArray(value) && value?.length > 1 ? (
+      <>
+        <span>+{value.length - 1} more <DownOutlined /></span>
+      </>
+    ) : (
+      <DownOutlined />
+    );
+  }, [isMulti, value]);
+
+  const prefix = useMemo(() => {
+    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;
+  }, [isMulti, value, options]);
+
+  const renderHeader = useCallback(() => {
+    if (!headerLabel && !tooltip) return null;
     return (
-      <HeaderWrapper className={disabled ? 'disabled' : ''}>
-        {label && (
-          <CapLabel type="label16" className={disabled ? 'disabled' : ''}>
-            {label}
-          </CapLabel>
-        )}
+      <>
+      <HeaderWrapper className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header')}>
+        {headerLabel && <label type="label16" className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-label')}>{headerLabel}</label>}
         {tooltip && (
-          <CapTooltip title={tooltip}>
-            <StyledInfoIcon className={disabled ? 'disabled' : ''} />
-          </CapTooltip>
+          <Tooltip title={tooltip} rootClassName="cap-unified-tooltip" className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-tooltip')}>
+            <InfoCircleOutlined />
+          </Tooltip>
         )}
       </HeaderWrapper>
+      <div className="cap-unified-select-header-byline-text">
+        {bylineText && <label className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-byline-text')}>{bylineText}</label>}
+      </div>
+      </>
     );
-  };
+  }, [headerLabel, tooltip, bylineText, disabled]);
 
   const renderDropdown = () => {
-    if (type === 'treeSelect' || type === 'multiTreeSelect') {
+    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;
+
       return (
-        <TreeSelect
-          treeData={treeData || options}
-          value={value}
-          onChange={onChange}
+        <div className={classnames(popupClassName, `${type}-popup-container`)}>
+          {showSearch && (
+            <div className={classnames("cap-unified-select-search-container")}>
+              <Input
+                prefix={<SearchOutlined style={{ color: styledVars.CAP_G06 }} />}
+                placeholder="Search"
+                variant="borderless"
+                value={searchText}
+                onChange={e => setSearchText(e.target.value)}
+                onKeyDown={e => e.stopPropagation()}
+              />
+            </div>
+            )}
+          {isMulti && showUpload && (
+            <div className={classnames("cap-unified-select-upload-container")}>
+             <Button
+              type="link"
+              icon={<img src={uploadIcon} alt="upload" />}
+              onClick={() => {}}
+              className={classnames("cap-unified-select-upload-button")}
+            >
+              Upload
+            </Button>
+            </div>
+          )}
+          {isMulti && currentItems.length > 0 && (
+            <div className={classnames("cap-unified-select-select-all-container")} onClick={e => { e.stopPropagation(); handleSelectAll(); }}>
+                <input type="checkbox" checked={allSelected} className={classnames("cap-unified-select-select-all-checkbox")} onClick={e => e.stopPropagation()} />
+              <label className={classnames("cap-unified-select-select-all-label")}>Select all</label>
+            </div>
+          )}
+
+          {currentItems.length === 0 ? <NoResult noResultText={noResultText} className={classnames(className, "cap-unified-select-no-result")}/> : menu}
+
+          {currentItems.length > 0 && isMulti && (
+            <div className={classnames("cap-unified-select-confirm-container")}>
+              <div>
+                <Button type="primary" size="small" className={classnames("cap-unified-select-confirm-button")} onClick={e => { e.stopPropagation(); handleConfirm(); }}>Confirm</Button>
+                <Button type="text" size="small" onClick={e => { e.stopPropagation(); handleCancel(); }}>Cancel</Button>
+              </div>
+              {selectedCount > 0 && <span className={classnames("cap-unified-select-selected-count")}>{selectedCount} selected</span>}
+            </div>
+          )}
+        </div>
+      );
+    };
+
+    return (
+      <>
+        <StyledTreeSelect
+          {...rest}
+          type={type}
+          treeData={filteredTree}
+          value={customPopupRender ? tempValue : value}
+          onChange={customPopupRender ? handleTempChange : onChange}
           placeholder={placeholder}
-          className={className}
+          showSearch={false}
+          maxTagCount={0}
+          maxTagPlaceholder={() => null}
+          prefix={isMulti && value.length > 0 && prefix}
+          suffixIcon={suffix}
+          className={classnames(`cap-unified-tree-select ${className || ''}`)}
           style={style}
+          status={isError ? 'error' : ''}
           allowClear={allowClear}
-          showSearch={showSearch}
-          multiple={type === 'multiTreeSelect' ? true : false}
+          multiple={isMulti}
+          treeCheckable={isMulti}
+          showCheckedStrategy={TreeSelect.SHOW_PARENT}
           virtual
-          treeDefaultExpandAll
           disabled={disabled}
+          filterTreeNode={false}
           {...treeSelectVirtualizationProps}
+          popupRender={renderCustomDropdown}
         />
-      );
-    }
-
-    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}
-      />
+        {isError && <div className={classnames("cap-unified-select-status")}>{errorMessage}</div>}
+      </>
     );
   };
 
   return (
-    <SelectWrapper>
+    <SelectWrapper className={classnames(className, 'cap-unified-select-container')}>
       {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,
-  showSearch: PropTypes.bool,
-  label: PropTypes.string,
+  headerLabel: 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',
+  options: [],
+  placeholder: 'Select an option',
   allowClear: false,
-  showSearch: false,
+  customPopupRender: true,
+  showSearch: true,
+  searchBasedOn: 'label',
+  className: '',
+  popupClassName: '',
+  disabled: false,
+  showUpload: false,
+  isError: false,
+  noResultText: 'No results found'
 };
 
-export default CapUnifiedSelect;
+export default withStyles(CapUnifiedSelect, selectStyles);

package/CapUnifiedSelect/index.js

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