@capillarytech/blaze-ui 0.1.6-alpha.6 → 0.1.6-alpha.60

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,121 +1,601 @@
-// 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, Input, Button, Checkbox } from 'antd-v5';
+import styled from 'styled-components';
+import * as styledVars from '../styled/variables';
+import { CapLabel, CapTooltipWithInfo, CapRow, CapIcon } from '../';
+import withStyles from '../utils/withStyles';
+import withMemo from '../utils/withMemo';
+import { HeaderWrapper, selectStyles } from './styles';
 
-function CapUnifiedSelect({
+const StyledTreeSelect = styled(TreeSelect)`
+  ${selectStyles}
+`;
+
+const CapUnifiedSelect = ({
   type,
   options = [],
-  treeData,
   value,
   onChange,
   placeholder = 'Select an option',
   className,
   style,
+  isError = false,
+  errorMessage,
+  containerClassName,
+  popoverClassName,
   allowClear = false,
-  showSearch = false,
-  label,
+  headerLabel,
+  onUpload,
   tooltip,
+  bylineText,
   disabled = false,
-}) {
-  const selectVirtualizationProps = {
-    listHeight: 256,
-  };
+  showUpload = false,
+  customPopupRender = true,
+  showSearch = true,
+  searchBasedOn = 'label',
+  onConfirm,
+  onCancel,
+  size = 'm',
+  noResultCustomText = 'No results found',
+  noResultCustomIcon = 'warning',
+  ...rest
+}) => {
+  const [searchText, setSearchText] = useState('');
+  const [tempValue, setTempValue] = useState(value);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  useEffect(() => {
+    setTempValue(value);
+  }, [value]);
 
   const treeSelectVirtualizationProps = {
     listHeight: 256,
     listItemHeight: 32,
   };
 
-  const renderHeader = () => {
-    if (!label && !tooltip) return null;
-    
+  const NoResult = ({ noResultCustomText, className, showUpload, options }) => (
+    <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 getFilteredTreeData = useCallback(
+    (data, search) => {
+      if (!search || !data || data.length === 0) return data;
+      const searchLower = search.toLowerCase();
+
+      const filterNode = (node) => {
+        if (!node) return false;
+
+        let textToSearch = '';
+
+        if (searchBasedOn === 'value') {
+          textToSearch = String(node.value || '').toLowerCase();
+        } else if (searchBasedOn === 'key') {
+          textToSearch = String(node.key || '').toLowerCase();
+        } else {
+          textToSearch = String(node.label || node.title || '').toLowerCase();
+        }
+
+        return textToSearch.includes(searchLower);
+      };
+
+      const loop = (data) => {
+        if (!data) return [];
+
+        return data
+          .map((item) => {
+            if (!item) return null;
+
+            const children =
+              item.children && item.children.length > 0
+                ? loop(item.children)
+                : [];
+
+            if (filterNode(item) || children.length > 0) {
+              return { ...item, children };
+            }
+            return null;
+          })
+          .filter(Boolean);
+      };
+
+      return loop(data);
+    },
+    [searchBasedOn],
+  );
+
+  const processTreeData = useCallback((nodes, selectedValues = null) => {
+    const result = {
+      leafValues: [],
+      parentChildMap: {},
+      nodeMap: {},
+      selectedCount: 0,
+    };
+
+    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);
+
+    if (
+      selectedValues &&
+      Array.isArray(selectedValues) &&
+      selectedValues.length > 0
+    ) {
+      const expandedSet = new Set(selectedValues);
+
+      const processNode = (value) => {
+        const children = result.parentChildMap[value];
+        if (!children) return;
+
+        children.forEach((childValue) => {
+          expandedSet.add(childValue);
+          processNode(childValue);
+        });
+      };
+
+      selectedValues.forEach(processNode);
+
+      result.leafValues.forEach((value) => {
+        if (expandedSet.has(value)) result.selectedCount++;
+      });
+    }
+
+    return result;
+  }, []);
+
+  const isMulti = useMemo(
+    () => type === 'multiSelect' || type === 'multiTreeSelect',
+    [type],
+  );
+  const isTree = useMemo(
+    () => type === 'treeSelect' || type === 'multiTreeSelect',
+    [type],
+  );
+
+  const dataSource = useMemo(() => {
+    // Skip transformation if options is empty or undefined
+    if (!options || options.length === 0) return [];
+
+    // Only transform if not a tree select
+    return isTree
+      ? options
+      : options.map((opt) => ({
+          title: opt?.label,
+          value: opt?.value,
+          key: opt?.key || opt?.value,
+        }));
+  }, [isTree, options]);
+
+  const filteredTree = useMemo(() => {
+    // Skip filtering if search text is empty
+    if (!searchText) return dataSource;
+
+    return getFilteredTreeData(dataSource, searchText);
+  }, [dataSource, searchText, getFilteredTreeData]);
+
+  const handleConfirm = useCallback(() => {
+    if (onChange) onChange(tempValue);
+    setDropdownOpen(false);
+    if (onConfirm) onConfirm(tempValue);
+  }, [onChange, onConfirm, tempValue]);
+
+  const handleCancel = useCallback(() => {
+    setTempValue(value);
+    setDropdownOpen(false);
+    if (onCancel) onCancel();
+  }, [value, onCancel]);
+
+  const handleTempChange = useCallback((newValue) => {
+    setTempValue(newValue);
+  }, []);
+
+  const handleDropdownVisibilityChange = useCallback(
+    (open) => {
+      if (open === false && !customPopupRender) {
+        if (onChange) onChange(tempValue);
+      } else if (open === false) {
+        setTempValue(value);
+      }
+      setDropdownOpen(open);
+    },
+    [value, onChange, tempValue, customPopupRender],
+  );
+
+  const suffix = useMemo(() => {
+    const displayValue = dropdownOpen ? tempValue : value;
+    const showMore = isMulti && Array.isArray(displayValue) && displayValue.length > 1;
     return (
-      <HeaderWrapper className={disabled ? 'disabled' : ''}>
-        {label && (
-          <CapLabel type="label16" className={disabled ? 'disabled' : ''}>
-            {label}
-          </CapLabel>
-        )}
-        {tooltip && (
-          <CapTooltip title={tooltip}>
-            <StyledInfoIcon className={disabled ? 'disabled' : ''} />
-          </CapTooltip>
+      <>
+        {showMore && <span>+{displayValue.length - 1} more </span>}
+        <CapIcon className="cap-unified-select-suffix-icon" type={dropdownOpen ? 'up' : 'down'} size="s" />
+      </>
+    );
+  }, [isMulti, value, tempValue, dropdownOpen]);
+
+  const prefix = useMemo(() => {
+    if (isMulti) {
+      if (Array.isArray(tempValue) && tempValue?.length > 0) {
+        const firstSelectedValue = tempValue[0];
+        const firstSelectedOption = options?.find(
+          (opt) => opt?.value === firstSelectedValue,
+        );
+        return firstSelectedOption?.label || null;
+      } else if (Array.isArray(value) && value?.length > 0) {
+        const firstSelectedValue = value[0];
+        const firstSelectedOption = options?.find(
+          (opt) => opt?.value === firstSelectedValue,
+        );
+        return firstSelectedOption?.label || null;
+      }
+    }
+    return null;
+  }, [isMulti, value, tempValue, options]);
+
+  const renderHeader = useCallback(() => {
+    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 renderDropdown = useCallback(() => {
+    const currentItems = filteredTree;
+    const selectedCount = Array.isArray(tempValue)
+      ? isTree
+        ? processTreeData(dataSource, tempValue).selectedCount
+        : tempValue?.length || 0
+      : tempValue
+        ? 1
+        : 0;
 
-  const renderDropdown = () => {
-    if (type === 'treeSelect' || type === 'multiTreeSelect') {
-      return (
-        <TreeSelect
-          treeData={treeData || options}
-          value={value}
+    const renderCustomDropdown = useCallback(
+      (menu) => {
+        if (!customPopupRender) return menu;
+
+        return (
+          <div
+            className={classnames(popoverClassName, `${type}-popup-container`)}
+          >
+            {showSearch && (
+              <CapRow
+                className={classnames('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)}
+                />
+              </CapRow>
+            )}
+            {isMulti && showUpload && (
+              <CapRow
+                className={classnames('cap-unified-select-upload-container')}
+                align="middle"
+                onClick={onUpload}
+              >
+                <CapIcon
+                  type="upload"
+                  size="s"
+                  style={{ color: styledVars.CAP_SECONDARY.base }}
+                />
+                <CapLabel
+                  type="label14"
+                  className={classnames('cap-unified-select-upload-label')}
+                >
+                  Upload
+                </CapLabel>
+              </CapRow>
+            )}
+            {isMulti &&
+              currentItems.length > 0 &&
+              (() => {
+                const { leafValues } = processTreeData(currentItems);
+                const totalAvailable = leafValues.length;
+                const selectedInScope = processTreeData(
+                  currentItems,
+                  tempValue,
+                ).selectedCount;
+
+                return (
+                  <CapRow
+                    className={classnames(
+                      'cap-unified-select-select-all-container',
+                    )}
+                    align="middle"
+                  >
+                    <Checkbox
+                      className={classnames(
+                        'cap-unified-select-select-all-checkbox',
+                      )}
+                      checked={
+                        totalAvailable > 0 && selectedInScope === totalAvailable
+                      }
+                      indeterminate={
+                        selectedInScope > 0 && selectedInScope < totalAvailable
+                      }
+                      onChange={(e) => {
+                        setTempValue(e.target.checked ? leafValues : []);
+                      }}
+                    >
+                      <CapLabel
+                        type="label14"
+                        className={classnames(
+                          'cap-unified-select-select-all-label',
+                        )}
+                      >
+                        Select all
+                      </CapLabel>
+                    </Checkbox>
+                  </CapRow>
+                );
+              })()}
+
+            {currentItems.length === 0 ? (
+              <NoResult
+                noResultCustomText={noResultCustomText}
+                className={classnames(
+                  className,
+                  'cap-unified-select-no-result',
+                )}
+                showUpload={showUpload}
+                options={options}
+              />
+            ) : (
+              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={handleCancel}
+                  >
+                    Cancel
+                  </Button>
+                  <CapLabel className="cap-unified-select-selected-count">
+                    {selectedCount} selected
+                  </CapLabel>
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      },
+      [
+        customPopupRender,
+        popoverClassName,
+        type,
+        showSearch,
+        searchText,
+        isMulti,
+        showUpload,
+        currentItems,
+        tempValue,
+        className,
+        noResultCustomText,
+        onUpload,
+        handleConfirm,
+        handleCancel,
+        processTreeData,
+      ],
+    );
+
+    return (
+      <>
+        <StyledTreeSelect
+          type={type}
+          treeData={filteredTree}
+          value={customPopupRender ? tempValue : value}
           onChange={onChange}
           placeholder={placeholder}
-          className={className}
+          showSearch={false}
+          maxTagCount={0}
+          maxTagPlaceholder={() => null}
+          prefix={tempValue?.length > 0 ? prefix : undefined}
+          suffixIcon={suffix}
+          className={classnames(
+            containerClassName,
+            `cap-unified-tree-select`,
+            className,
+          )}
+          classNames={{
+            popup: { root: classnames('custom-popup-container', className) },
+          }}
           style={style}
+          status={isError ? 'error' : ''}
           allowClear={allowClear}
-          showSearch={showSearch}
-          multiple={type === 'multiTreeSelect' ? true : false}
+          multiple={isMulti}
+          treeCheckable={isMulti}
+          open={dropdownOpen}
+          onOpenChange={handleDropdownVisibilityChange}
+          showCheckedStrategy={TreeSelect.SHOW_PARENT}
           virtual
-          treeDefaultExpandAll
           disabled={disabled}
+          filterTreeNode={false}
           {...treeSelectVirtualizationProps}
+          popupRender={renderCustomDropdown}
+          {...rest}
         />
-      );
-    }
-
-    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 && (
+          <CapLabel
+            className={classnames('cap-unified-select-status')}
+            style={{ color: 'red' }}
+          >
+            {errorMessage}
+          </CapLabel>
+        )}
+      </>
     );
-  };
+  }, [
+    filteredTree,
+    tempValue,
+    value,
+    prefix,
+    suffix,
+    className,
+    style,
+    isError,
+    errorMessage,
+    allowClear,
+    isMulti,
+    isTree,
+    dropdownOpen,
+    customPopupRender,
+    handleTempChange,
+    onChange,
+    disabled,
+    handleDropdownVisibilityChange,
+    treeSelectVirtualizationProps,
+    dataSource,
+    processTreeData,
+  ]);
 
   return (
-    <SelectWrapper>
+    <CapRow className={classnames(className, 'cap-unified-select-container')}>
       {renderHeader()}
       {renderDropdown()}
-    </SelectWrapper>
+    </CapRow>
   );
-}
+};
 
 CapUnifiedSelect.propTypes = {
-  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
+  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,
+  onUpload: PropTypes.func,
+  size: PropTypes.oneOf(['s', 'm', 'l', 'xl']),
 };
 
 CapUnifiedSelect.defaultProps = {
   type: 'select',
+  placeholder: 'Select an option',
+  searchBasedOn: 'label',
+  noResultCustomText: 'No results found',
+  noResultCustomIcon: 'warning',
+  options: [],
+  size: 'm',
   allowClear: false,
-  showSearch: false,
+  customPopupRender: true,
+  showSearch: true,
+  className: '',
+  popupClassName: '',
+  disabled: false,
+  showUpload: false,
+  isError: false,
+  onUpload: () => {},
+  onChange: () => {},
+  onConfirm: () => {},
+  onCancel: () => {},
 };
 
-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';