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

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,121 +1,539 @@
-// CapUnifiedSelect component using Ant Design v5 Select and TreeSelect directly
-import React from 'react';
+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, 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';
 
-function CapUnifiedSelect({
+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 = ({
   type,
   options = [],
-  treeData,
   value,
   onChange,
-  placeholder = 'Select an option',
+  placeholder,
   className,
   style,
-  allowClear = false,
-  showSearch = false,
-  label,
+  isError,
+  errorMessage,
+  containerClassName,
+  popoverClassName,
+  allowClear,
+  headerLabel,
+  onUpload,
   tooltip,
-  disabled = false,
-}) {
-  const selectVirtualizationProps = {
-    listHeight: 256,
-  };
+  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);
 
-  const treeSelectVirtualizationProps = {
-    listHeight: 256,
-    listItemHeight: 32,
-  };
+  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]);
+
+  const displayValue = dropdownOpen ? tempValue : value;
 
-  const renderHeader = () => {
-    if (!label && !tooltip) return null;
+  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>
+      );
+    };
     
     return (
-      <HeaderWrapper className={disabled ? 'disabled' : ''}>
-        {label && (
-          <CapLabel type="label16" className={disabled ? 'disabled' : ''}>
-            {label}
-          </CapLabel>
+      <>
+        {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>
         )}
-        {tooltip && (
-          <CapTooltip title={tooltip}>
-            <StyledInfoIcon className={disabled ? 'disabled' : ''} />
-          </CapTooltip>
+        <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>
         )}
-      </HeaderWrapper>
+      </>
     );
-  };
+  }, [headerLabel, tooltip, bylineText, disabled]);
+
+  const renderCustomDropdown = useCallback(
+    (menu) => {
+      if (!customPopupRender) return menu;
+      const currentItems = filteredTree;
 
-  const renderDropdown = () => {
-    if (type === 'treeSelect' || type === 'multiTreeSelect') {
       return (
-        <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}
-        />
+        <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>
       );
-    }
+    },
+    [
+      customPopupRender,
+      filteredTree,
+      searchText,
+      isMulti,
+      showUpload,
+      onUpload,
+      noResultCustomText,
+      noResultCustomIcon,
+      options,
+      type,
+      tempValue,
+      handleConfirm,
+      handleClearAll,
+      popoverClassName,
+      className,
+      selectedLeafCount,
+    ]
+  );
 
-    return (
-      <Select
-        value={value}
-        onChange={onChange}
+  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}
         placeholder={placeholder}
-        className={className}
+        showSearch={false}
+        maxTagCount={0}
+        maxTagPlaceholder={() => null}
+        prefix={prefix || undefined}
+        suffixIcon={suffix}
+        className={combinedClassName}
+        classNames={{
+          popup: { root: classnames('custom-popup-container', className) },
+        }}
         style={style}
+        status={isError ? 'error' : ''}
         allowClear={allowClear}
-        showSearch={showSearch}
-        options={options}
-        mode={type === 'multiSelect' ? 'multiple' : undefined}
+        multiple={isMulti}
+        treeCheckable={isMulti}
+        treeCheckStrictly={false}
+        showCheckedStrategy={TreeSelect.SHOW_CHILD}
+        open={dropdownOpen}
+        onOpenChange={handleDropdownVisibilityChange}
         virtual
         disabled={disabled}
-        {...selectVirtualizationProps}
+        filterTreeNode={false}
+        listHeight={256}
+        listItemHeight={32}
+        popupRender={renderCustomDropdown}
+        {...rest}
       />
-    );
-  };
-
-  return (
-    <SelectWrapper>
-      {renderHeader()}
-      {renderDropdown()}
-    </SelectWrapper>
+      {isError && (
+        <CapLabel className="cap-unified-select-status" style={{ color: styledVars.CAP_RED }}>
+          {errorMessage}
+        </CapLabel>
+      )}
+    </CapRow>
   );
-}
+};
 
 CapUnifiedSelect.propTypes = {
-  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
+  type: PropTypes.oneOf(Object.values(SELECT_TYPES)),
   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,
-  showSearch: PropTypes.bool,
-  label: PropTypes.string,
+  headerLabel: 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',
+  type: SELECT_TYPES.SELECT,
+  placeholder: 'Select an option',
+  searchBasedOn: 'label',
+  noResultCustomText: 'No results found',
+  noResultCustomIcon: 'warning',
+  clearText: 'Clear',
+  options: [],
   allowClear: false,
-  showSearch: false,
+  customPopupRender: true,
+  showSearch: true,
+  className: '',
+  disabled: false,
+  readOnly: false,
+  showUpload: false,
+  isError: false,
+  onUpload: () => {},
+  onChange: () => {},
+  onConfirm: () => {},
 };
 
-export default CapUnifiedSelect;
+export default withMemo(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';