@capillarytech/blaze-ui 0.1.6-alpha.67 → 0.1.6-alpha.8

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,539 +1,121 @@
-import React, { useState, useEffect, useMemo, useCallback, memo } 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, Input, Button, Checkbox } from 'antd-v5';
-import styled from 'styled-components';
-import * as styledVars from '../styled/variables';
-import { CapLabel, CapTooltipWithInfo, CapRow, CapIcon, CapTooltip } from '../';
-import withStyles from '../utils/withStyles';
-import withMemo from '../utils/withMemo';
-import { HeaderWrapper, selectStyles } from './styles';
+import { Select, TreeSelect } from 'antd';
+import { SelectWrapper, HeaderWrapper, StyledInfoIcon } from './styles';
+import CapLabel from '../CapLabel';
+import CapTooltip from '../CapTooltip';
 
-const SELECT_TYPES = {
-  SELECT: 'select',
-  MULTI_SELECT: 'multiSelect',
-  TREE_SELECT: 'treeSelect',
-  MULTI_TREE_SELECT: 'multiTreeSelect'
-};
-
-const StyledTreeSelect = styled(TreeSelect)`
-  ${selectStyles}
-`;
-
-const NoResult = memo(({ noResultCustomText, className, showUpload, options, noResultCustomIcon }) => (
-  <CapRow
-    className={classnames(className, 'cap-unified-select-no-result')}
-    align="middle"
-    gap={8}
-  >
-    <CapIcon type={noResultCustomIcon} size="m" />
-    <CapLabel className="cap-unified-select-no-result-text">
-      {showUpload && options?.length === 0
-        ? noResultCustomText
-        : 'No results found'}
-    </CapLabel>
-  </CapRow>
-));
-
-const SelectAllCheckbox = memo(({ currentItems, tempValue, setTempValue, processTreeData }) => {
-  const { leafValues = [] } = processTreeData ? processTreeData(currentItems) : {};
-  const totalAvailable = leafValues.length;
-  const leafSet = new Set(leafValues);
-  const selectedInScope = Array.isArray(tempValue)
-    ? tempValue.filter((v) => leafSet.has(v)).length
-    : 0;
-
-  const allChecked = totalAvailable > 0 && selectedInScope === totalAvailable;
-  const indeterminate = selectedInScope > 0 && selectedInScope < totalAvailable;
-
-  const handleChange = (e) => {
-    if (e.target.checked) {
-      const merged = new Set(Array.isArray(tempValue) ? tempValue : []);
-      leafValues.forEach((v) => merged.add(v));
-      setTempValue(Array.from(merged));
-    } else {
-      const toRemove = new Set(leafValues);
-      const next = (Array.isArray(tempValue) ? tempValue : []).filter(
-        (v) => !toRemove.has(v)
-      );
-      setTempValue(next);
-    }
-  };
-
-  return (
-    <CapRow className="cap-unified-select-select-all-container" align="middle">
-      <Checkbox
-        className="cap-unified-select-select-all-checkbox"
-        checked={allChecked}
-        indeterminate={indeterminate}
-        onChange={handleChange}
-      >
-        <CapLabel type="label14" className="cap-unified-select-select-all-label">Select all</CapLabel>
-      </Checkbox>
-    </CapRow>
-  );
-});
-
-const buildTreeMaps = (nodes) => {
-  const result = {
-    leafValues: [],
-    parentChildMap: {},
-    nodeMap: {},
-  };
-  if (!nodes) return result;
-
-  const traverse = (items) => {
-    items?.forEach((item) => {
-      result.nodeMap[item.value] = item;
-      if (item?.children && item.children.length > 0) {
-        result.parentChildMap[item.value] = item.children.map(child => child?.value);
-        traverse(item.children);
-      } else {
-        result.leafValues.push(item.value);
-      }
-    });
-  };
-  traverse(nodes);
-  return result;
-};
-
-const countSelectedLeaves = (treeMaps, selectedValues) => {
-  if (!Array.isArray(selectedValues) || !selectedValues?.length) return 0;
-  const expandedSet = new Set(selectedValues);
-  const processNode = (value) => {
-    const children = treeMaps?.parentChildMap?.[value];
-    if (!children) return;
-    children?.forEach(childValue => {
-      expandedSet.add(childValue);
-      processNode(childValue);
-    });
-  };
-  selectedValues?.forEach(processNode);
-  return treeMaps?.leafValues?.reduce((count, leaf) => expandedSet.has(leaf) ? count + 1 : count, 0) || 0;
-};
-
-const filterTreeData = (data, search, searchBasedOn) => {
-  if (!data?.length || !search) return data;
-  const searchLower = search.toLowerCase();
-  const nodeMatchesSearch = (node) => {
-    const target = searchBasedOn === 'value'
-      ? String(node?.value ?? '')
-      : searchBasedOn === 'key'
-        ? String(node?.key ?? '')
-        : String(node?.label ?? node?.title ?? '');
-    return target.toLowerCase().includes(searchLower);
-  };
-  const loop = (items) =>
-    items.reduce((acc, item) => {
-      if (!item) return acc;
-      const children = item?.children?.length ? loop(item.children) : [];
-      if (nodeMatchesSearch(item) || children.length) {
-        acc.push({ ...item, children });
-      }
-      return acc;
-    }, []);
-  return loop(data);
-};
-
-const CapUnifiedSelect = ({
+function CapUnifiedSelect({
   type,
   options = [],
+  treeData,
   value,
   onChange,
-  placeholder,
+  placeholder = 'Select an option',
   className,
   style,
-  isError,
-  errorMessage,
-  containerClassName,
-  popoverClassName,
-  allowClear,
-  headerLabel,
-  onUpload,
+  allowClear = false,
+  showSearch = false,
+  label,
   tooltip,
-  bylineText,
-  disabled,
-  showUpload,
-  customPopupRender,
-  showSearch,
-  readOnly,
-  searchBasedOn,
-  onConfirm,
-  clearText,
-  noResultCustomText,
-  noResultCustomIcon,
-  ...rest
-}) => {
-  const [searchText, setSearchText] = useState('');
-  const [tempValue, setTempValue] = useState(value);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-
-  useEffect(() => {
-    const isEqual = Array.isArray(value) && Array.isArray(tempValue)
-      ? value?.length === tempValue?.length && value.every((v) => tempValue.includes(v))
-      : value === tempValue;
-    if (!isEqual) setTempValue(value);
-  }, [value]);
-
-  const isMulti = useMemo(() => type === SELECT_TYPES.MULTI_SELECT || type === SELECT_TYPES.MULTI_TREE_SELECT, [type]);
-  const isTree = useMemo(() => type === SELECT_TYPES.TREE_SELECT || type === SELECT_TYPES.MULTI_TREE_SELECT, [type]);
-
-  const dataSource = useMemo(() => {
-    if (!options?.length) return [];
-    const enhanceOptions = (opts) =>
-      opts.map((opt) => {
-        const decoratedTitle = (
-          <CapRow className="cap-unified-select-option-with-suffix">
-            <CapLabel type="label14" className="cap-unified-select-option-label">{opt?.label}</CapLabel>
-            {opt?.optionSuffix && <div className="cap-unified-select-option-suffix">
-              {opt?.optionSuffix} {opt?.optionSuffixInfo && <CapTooltipWithInfo title={opt?.optionSuffixInfo} />}
-            </div>}
-            {opt?.optionTooltipInfo && <CapTooltipWithInfo title={opt?.optionTooltipInfo} />}
-          </CapRow>
-        );
-
-        return {
-          ...opt,
-          title: decoratedTitle,
-          label: opt?.label,
-          children: opt?.children ? enhanceOptions(opt.children) : [],
-        };
-      });
-
-    return isTree ? enhanceOptions(options) : options.map((opt) => ({
-      ...opt,
-      title: (
-        <CapRow className="cap-unified-select-option-with-suffix">
-          <CapLabel type="label14" className="cap-unified-select-option-label">{opt?.label}</CapLabel>
-          {opt?.optionSuffix && <div className="cap-unified-select-option-suffix">
-            {opt?.optionSuffix} {opt?.optionSuffixInfo && <CapTooltipWithInfo title={opt?.optionSuffixInfo} />}
-          </div>}
-          {opt?.optionTooltipInfo && <CapTooltipWithInfo title={opt?.optionTooltipInfo} />}
-        </CapRow>
-      ),
-      label: opt?.label,
-    }));
-  }, [isTree, options]);
-
-  const filteredTree = useMemo(
-    () => filterTreeData(dataSource, searchText, searchBasedOn),
-    [dataSource, searchText, searchBasedOn]
-  );
-
-  const treeMaps = useMemo(() => buildTreeMaps(options), [options]);
-  const selectedLeafCount = useMemo(() => countSelectedLeaves(treeMaps, tempValue), [treeMaps, tempValue]);
+  disabled = false,
+}) {
+  const selectVirtualizationProps = {
+    listHeight: 256,
+  };
 
-  const displayValue = dropdownOpen ? tempValue : value;
+  const treeSelectVirtualizationProps = {
+    listHeight: 256,
+    listItemHeight: 32,
+  };
 
-  const suffix = useMemo(() => {
-    const count = Array.isArray(displayValue) ? displayValue?.length : (displayValue ? 1 : 0);
-    const renderTooltipTitle = (values) => {
-      return (
-        <div className="cap-unified-select-more-tooltip-content">
-          {values.map((val, idx) => (
-            <div key={idx}>{val}</div>
-          ))}
-        </div>
-      );
-    };
+  const renderHeader = () => {
+    if (!label && !tooltip) return null;
     
     return (
-      <>
-        {isMulti && count > 1 && (
-          <span className="cap-unified-select-more-text">
-            <CapTooltip 
-              title={renderTooltipTitle(displayValue.slice(1))} 
-              placement="bottom" 
-              overlayClassName="cap-unified-select-more-tooltip"
-              arrowPointAtCenter={true}
-            >
-              <span>+{count - 1} more</span>
-            </CapTooltip>
-          </span>
+      <HeaderWrapper className={disabled ? 'disabled' : ''}>
+        {label && (
+          <CapLabel type="label16" className={disabled ? 'disabled' : ''}>
+            {label}
+          </CapLabel>
         )}
-        <CapIcon
-          className="cap-unified-select-suffix-icon"
-          type={dropdownOpen ? 'up' : 'down'}
-          size="s"
-        />
-      </>
-    );
-  }, [isMulti, displayValue, dropdownOpen]);
-
-  const prefix = useMemo(() => {
-    if (isMulti && Array.isArray(displayValue) && displayValue?.length > 0) {
-      const firstLeafValue = displayValue.find(val => treeMaps?.leafValues?.includes(val));
-      return treeMaps?.nodeMap?.[firstLeafValue]?.label || null;
-    }
-    return null;
-  }, [isMulti, displayValue, treeMaps]);
-
-  const handleConfirm = useCallback(() => {
-    onChange?.(tempValue);
-    setDropdownOpen(false);
-    setSearchText('');
-    onConfirm?.(tempValue);
-  }, [onChange, onConfirm, tempValue]);
-
-  const handleClearAll = useCallback(() => {
-    const cleared = isMulti ? [] : undefined;
-    setTempValue(cleared);
-    onChange?.(cleared);
-    setDropdownOpen(false);
-  }, [isMulti, onChange]);
-  
-
-  const handleDropdownVisibilityChange = useCallback((open) => {
-    if (readOnly) {
-      return;
-    }
-    if (!open && !customPopupRender) {
-      onChange?.(tempValue);
-    } else if (!open) {
-      setTempValue(value);
-    }
-    setDropdownOpen(open);
-  }, [customPopupRender, value, onChange, tempValue, readOnly]);
-
-  const renderHeader = useMemo(() => {
-    if (!headerLabel && !tooltip) return null;
-    return (
-      <>
-        <HeaderWrapper className={classnames(disabled && 'disabled', 'cap-unified-select-header')}>
-          {headerLabel && (
-            <CapLabel
-              type="label16"
-              className={classnames(disabled && 'disabled', 'cap-unified-select-header-label')}
-            >
-              {headerLabel}
-            </CapLabel>
-          )}
-          {tooltip && (
-            <CapTooltipWithInfo
-              title={tooltip}
-              className={classnames(disabled && 'disabled', 'cap-unified-select-header-tooltip')}
-              iconProps={{ disabled }}
-            />
-          )}
-        </HeaderWrapper>
-        {bylineText && (
-          <div className="cap-unified-select-header-byline-text">
-            <CapLabel
-              className={classnames(disabled && 'disabled', 'cap-unified-select-header-byline-text')}
-            >
-              {bylineText}
-            </CapLabel>
-          </div>
+        {tooltip && (
+          <CapTooltip title={tooltip}>
+            <StyledInfoIcon className={disabled ? 'disabled' : ''} />
+          </CapTooltip>
         )}
-      </>
+      </HeaderWrapper>
     );
-  }, [headerLabel, tooltip, bylineText, disabled]);
-
-  const renderCustomDropdown = useCallback(
-    (menu) => {
-      if (!customPopupRender) return menu;
-      const currentItems = filteredTree;
+  };
 
+  const renderDropdown = () => {
+    if (type === 'treeSelect' || type === 'multiTreeSelect') {
       return (
-        <div className={classnames(popoverClassName, `${type}-popup-container`)}>
-          {showSearch && (
-            <CapRow className="cap-unified-select-search-container" align="middle">
-              <Input
-                prefix={<CapIcon type="search" size="s" style={{ color: styledVars.CAP_G06 }} />}
-                placeholder="Search"
-                variant="borderless"
-                value={searchText}
-                onChange={(e) => setSearchText(e.target.value)}
-                allowClear
-              />
-            </CapRow>
-          )}
-
-          {isMulti && showUpload && (
-            <CapRow className="cap-unified-select-upload-container" align="middle" onClick={onUpload}>
-              <CapIcon type="upload" size="s" style={{ color: styledVars.CAP_SECONDARY.base }} />
-              <CapLabel type="label14" className="cap-unified-select-upload-label">Upload</CapLabel>
-            </CapRow>
-          )}
-
-          {isMulti && currentItems.length > 0 && (
-            <SelectAllCheckbox
-              currentItems={currentItems}
-              tempValue={tempValue}
-              setTempValue={setTempValue}
-              processTreeData={buildTreeMaps}
-            />
-          )}
-
-          {currentItems.length === 0 ? (
-            <NoResult
-              noResultCustomText={noResultCustomText}
-              className={className}
-              showUpload={showUpload}
-              options={options}
-              noResultCustomIcon={noResultCustomIcon}
-            />
-          ) : (
-            menu
-          )}
-
-          {currentItems.length > 0 && isMulti && (
-            <div className="cap-unified-select-confirm-container">
-              <div className="cap-unified-select-confirm-button-group">
-                <Button
-                  type="primary"
-                  size="small"
-                  className="cap-unified-select-confirm-button"
-                  onClick={handleConfirm}
-                >
-                  Confirm
-                </Button>
-                <Button
-                  type="text"
-                  className="cap-unified-select-cancel-button"
-                  size="small"
-                  onClick={handleClearAll}
-                >
-                  {clearText}
-                </Button>
-                <CapLabel className="cap-unified-select-selected-count">
-                  {selectedLeafCount} selected
-                </CapLabel>
-              </div>
-            </div>
-          )}
-
-          {(type === SELECT_TYPES.SELECT || type === SELECT_TYPES.TREE_SELECT) && (
-            <CapRow className="cap-unified-select-tree-clear-container" onClick={handleClearAll}>
-              <CapLabel className="cap-unified-select-tree-clear-label">{clearText}</CapLabel>
-            </CapRow>
-          )}
-        </div>
+        <TreeSelect
+          treeData={treeData || options}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          className={className}
+          style={style}
+          allowClear={allowClear}
+          showSearch={showSearch}
+          multiple={type === 'multiTreeSelect' ? true : false}
+          virtual
+          treeDefaultExpandAll
+          disabled={disabled}
+          {...treeSelectVirtualizationProps}
+        />
       );
-    },
-    [
-      customPopupRender,
-      filteredTree,
-      searchText,
-      isMulti,
-      showUpload,
-      onUpload,
-      noResultCustomText,
-      noResultCustomIcon,
-      options,
-      type,
-      tempValue,
-      handleConfirm,
-      handleClearAll,
-      popoverClassName,
-      className,
-      selectedLeafCount,
-    ]
-  );
-
-  const combinedClassName = useMemo(
-    () => classnames(
-      containerClassName, 
-      'cap-unified-tree-select', 
-      { 'cap-unified-tree-select-readonly': readOnly },
-      className
-    ),
-    [containerClassName, className, readOnly]
-  );
+    }
 
-  return (
-    <CapRow className={classnames(className, 'cap-unified-select-container')}>
-      {renderHeader}
-      <StyledTreeSelect
-        type={type}
-        treeData={filteredTree}
-        value={customPopupRender ? tempValue : value}
-        treeNodeLabelProp='label'
-        onChange={isMulti ? setTempValue : onChange}
+    return (
+      <Select
+        value={value}
+        onChange={onChange}
         placeholder={placeholder}
-        showSearch={false}
-        maxTagCount={0}
-        maxTagPlaceholder={() => null}
-        prefix={prefix || undefined}
-        suffixIcon={suffix}
-        className={combinedClassName}
-        classNames={{
-          popup: { root: classnames('custom-popup-container', className) },
-        }}
+        className={className}
         style={style}
-        status={isError ? 'error' : ''}
         allowClear={allowClear}
-        multiple={isMulti}
-        treeCheckable={isMulti}
-        treeCheckStrictly={false}
-        showCheckedStrategy={TreeSelect.SHOW_CHILD}
-        open={dropdownOpen}
-        onOpenChange={handleDropdownVisibilityChange}
+        showSearch={showSearch}
+        options={options}
+        mode={type === 'multiSelect' ? 'multiple' : undefined}
         virtual
         disabled={disabled}
-        filterTreeNode={false}
-        listHeight={256}
-        listItemHeight={32}
-        popupRender={renderCustomDropdown}
-        {...rest}
+        {...selectVirtualizationProps}
       />
-      {isError && (
-        <CapLabel className="cap-unified-select-status" style={{ color: styledVars.CAP_RED }}>
-          {errorMessage}
-        </CapLabel>
-      )}
-    </CapRow>
+    );
+  };
+
+  return (
+    <SelectWrapper>
+      {renderHeader()}
+      {renderDropdown()}
+    </SelectWrapper>
   );
-};
+}
 
 CapUnifiedSelect.propTypes = {
-  type: PropTypes.oneOf(Object.values(SELECT_TYPES)),
+  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
   options: PropTypes.array,
+  treeData: PropTypes.array,
   value: PropTypes.any,
-  containerClassName: PropTypes.string,
   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,
-  readOnly: PropTypes.bool,
-  bylineText: PropTypes.string,
-  customPopupRender: PropTypes.bool,
-  showSearch: PropTypes.bool,
-  searchBasedOn: PropTypes.oneOf(['label', 'value', 'key']),
-  onConfirm: PropTypes.func,
-  isError: PropTypes.bool,
-  errorMessage: PropTypes.string,
-  popoverClassName: PropTypes.string,
-  showUpload: PropTypes.bool,
-  onUpload: PropTypes.func,
-  clearText: PropTypes.string,
-  noResultCustomText: PropTypes.string,
-  noResultCustomIcon: PropTypes.string,
 };
 
 CapUnifiedSelect.defaultProps = {
-  type: SELECT_TYPES.SELECT,
-  placeholder: 'Select an option',
-  searchBasedOn: 'label',
-  noResultCustomText: 'No results found',
-  noResultCustomIcon: 'warning',
-  clearText: 'Clear',
-  options: [],
+  type: 'select',
   allowClear: false,
-  customPopupRender: true,
-  showSearch: true,
-  className: '',
-  disabled: false,
-  readOnly: false,
-  showUpload: false,
-  isError: false,
-  onUpload: () => {},
-  onChange: () => {},
-  onConfirm: () => {},
+  showSearch: false,
 };
 
-export default withMemo(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'));