@capillarytech/blaze-ui 0.1.6-alpha.15 → 0.1.6-alpha.17

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,10 +1,11 @@
-// CapUnifiedSelect component using Ant Design v5 Select and TreeSelect directly
-import React from 'react';
+// Enhanced CapUnifiedSelect supporting 4 scenarios with advanced features
+import React, { useState, useEffect } 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 { Select, TreeSelect, Tooltip, Input, Button } from 'antd';
+import { InfoCircleOutlined, SearchOutlined, WarningFilled, DownOutlined } from '@ant-design/icons';
+import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
+import withStyles from './withStyles';
 
 const CapUnifiedSelect = ({
   type,
@@ -15,12 +16,26 @@ const CapUnifiedSelect = ({
   placeholder = 'Select an option',
   className,
   style,
+  status,
+  statusMessage,
   allowClear = false,
-  showSearch = false,
   label,
   tooltip,
   disabled = false,
+  treeCheckable = false,
+  customPopupRender = false,
+  onConfirm,
+  onCancel
 }) => {
+  const [searchText, setSearchText] = useState('');
+  const [tempValue, setTempValue] = useState(value);
+  const [allSelected, setAllSelected] = useState(false);
+  
+  // Update tempValue when value changes
+  useEffect(() => {
+    setTempValue(value);
+  }, [value]);
+ 
   const selectVirtualizationProps = {
     listHeight: 256,
   };
@@ -30,66 +45,261 @@ const CapUnifiedSelect = ({
     listItemHeight: 32,
   };
 
+  // No results component
+  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>
+  );
+
+  // Filter tree data based on search text
+  const getFilteredTreeData = (data, search) => {
+    if (!search) return data;
+    
+    const filterNode = node => {
+      const titleText = node.title?.toLowerCase() || '';
+      const labelText = node.label?.toLowerCase() || '';
+      return titleText.includes(search.toLowerCase()) || 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);
+  };
+
+  // Get all leaf node values from tree data
+  const flattenedLeafValues = (nodes) =>
+    nodes?.flatMap((node) =>
+      node.children ? flattenedLeafValues(node.children) : [node.value]
+    ) || [];
+
+  const filteredTree = getFilteredTreeData(treeData || options, searchText);
+  const filteredOptions = !searchText ? options : options.filter(opt => 
+    opt.label?.toLowerCase().includes(searchText.toLowerCase())
+  );
+  
+  // All available leaf values for the current filtered tree data
+  const leafValues = flattenedLeafValues(filteredTree);
+
+  // Handles select all checkbox click
+  const handleSelectAll = (isTree = false) => {
+    const availableValues = isTree ? leafValues : filteredOptions.map(opt => opt.value);
+    
+    if (allSelected) {
+      setTempValue([]);
+    } else {
+      setTempValue(availableValues);
+    }
+    
+    setAllSelected(!allSelected);
+  };
+  
+  // Update allSelected state when value changes
+  useEffect(() => {
+    const isMultipleMode = type === 'multiSelect' || type === 'multiTreeSelect';
+    if (isMultipleMode && Array.isArray(tempValue)) {
+      const availableValues = type.includes('tree') ? leafValues : filteredOptions.map(opt => opt.value);
+      setAllSelected(tempValue.length > 0 && tempValue.length === availableValues.length);
+    }
+  }, [tempValue, filteredOptions, leafValues, type]);
+  
+  // Handle confirmation
+  const handleConfirm = () => {
+    if (onConfirm) {
+      onConfirm(tempValue);
+    } else {
+      onChange(tempValue);
+    }
+    setSearchText('');
+  };
+  
+  // Handle cancellation
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    }
+    setTempValue(value);
+    setSearchText('');
+  };
+  
+  // Handle temporary value change
+  const handleTempChange = (newValue) => {
+    setTempValue(newValue);
+  };
+
+  const suffix =
+  type === "multiTreeSelect" && type === "multiSelect" && value.length > 0 ? (
+    <>
+      <span>
+        +{value.length} more
+        <DownOutlined />
+      </span>
+    </>
+  ) : (
+    <DownOutlined />
+  );
+
   const renderHeader = () => {
     if (!label && !tooltip) return null;
-    
     return (
       <HeaderWrapper className={disabled ? 'disabled' : ''}>
-        {label && (
-          <CapLabel type="label16" className={disabled ? 'disabled' : ''}>
-            {label}
-          </CapLabel>
-        )}
+        {label && <label type="label16" className={disabled ? 'disabled' : ''}>{label}</label>}
         {tooltip && (
-          <CapTooltip title={tooltip}>
-            <StyledInfoIcon className={disabled ? 'disabled' : ''} />
-          </CapTooltip>
+          <Tooltip title={tooltip} style={{ color: '#B3BAC5' }}>
+            <InfoCircleOutlined className={disabled ? 'disabled' : ''} />
+          </Tooltip>
         )}
       </HeaderWrapper>
     );
   };
 
   const renderDropdown = () => {
+    const isMultipleSelect = type === 'multiSelect' || type === 'multiTreeSelect';
+    const isTreeMode = type === 'treeSelect' || type === 'multiTreeSelect';
+    const currentItems = isTreeMode ? filteredTree : filteredOptions;
+    const selectedCount = Array.isArray(tempValue) ? tempValue.length : (tempValue ? 1 : 0);
+    
+    // Custom dropdown render for both Select and TreeSelect
+    const renderCustomDropdown = (menu) => {
+      if (!customPopupRender) return menu;
+      
+      return (
+        <>
+          <div style={{ borderBottom: '1px solid #f0f0f0', padding: '8px' }}>
+            <Input
+              prefix={<SearchOutlined style={{ color: "#B3BAC5" }} />}
+              placeholder="Search"
+              variant="borderless"
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+          </div>
+          
+          {isMultipleSelect && currentItems.length > 0 && (
+            <div style={{
+              padding: '8px 12px',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              borderBottom: '1px solid #f0f0f0'
+            }} 
+            onClick={() => handleSelectAll(isTreeMode)}>
+              <input 
+                type="checkbox" 
+                checked={allSelected} 
+                readOnly 
+                style={{ cursor: 'pointer' }}
+              />
+              <label style={{ marginLeft: 8, cursor: 'pointer' }}>Select all</label>
+            </div>
+          )}
+          
+          {currentItems.length === 0 ? <NoResult /> : menu}
+          
+          {currentItems.length > 0 && isMultipleSelect && (
+            <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={handleConfirm}>
+                  Confirm
+                </Button>
+                <Button type="text" size="small" onClick={handleCancel}>
+                  Cancel
+                </Button>
+              </div>
+              {selectedCount > 0 && (
+                <span style={{ color: '#8c8c8c', fontSize: '14px' }}>
+                  {selectedCount} selected
+                </span>
+              )}
+            </div>
+          )}
+        </>
+      );
+    };
+
     if (type === 'treeSelect' || type === 'multiTreeSelect') {
       return (
-        <TreeSelect
-          treeData={treeData || options}
-          value={value}
-          onChange={onChange}
+        <>
+          <TreeSelect
+            treeData={filteredTree}
+            value={customPopupRender ? tempValue : value}
+            onChange={customPopupRender ? handleTempChange : onChange}
+            placeholder={placeholder}
+            maxTagCount={0} // hides all tags
+            maxTagPlaceholder={() => null} // hides default `+N more` placeholder
+            prefix={type === "multiTreeSelect" && value.length > 0 && <>{placeholder}</>}
+            suffixIcon={suffix}
+            className={classnames(`cap-unified-tree-select ${className || ''}`)}
+            style={style}
+            status={status}
+            allowClear={allowClear}
+            showSearch={false}
+            multiple={type === 'multiTreeSelect'}
+            treeCheckable={treeCheckable}
+            showCheckedStrategy={TreeSelect.SHOW_PARENT}
+            virtual
+            disabled={disabled}
+            filterTreeNode={false}
+            {...treeSelectVirtualizationProps}
+            popupRender={renderCustomDropdown}
+            />
+            {status === 'error' && <div style={{ color: '#E83135' }} className="cap-unified-select-status">{statusMessage}</div>}
+        </>
+      );
+    }
+
+    return (
+      <>
+        <Select
+          options={filteredOptions}
+          value={customPopupRender ? tempValue : value}
+          onChange={customPopupRender ? handleTempChange : onChange}
           placeholder={placeholder}
-          className={className}
+          maxTagCount={0}
+          maxTagPlaceholder={() => null} 
+          prefix={type === "multiSelect" && value.length > 0 && <>{placeholder}</>}
+          suffixIcon={suffix}
+          className={classnames(`cap-unified-select ${className || ''}`)}
           style={style}
           allowClear={allowClear}
-          showSearch={showSearch}
-          multiple={type === 'multiTreeSelect' ? true : false}
+          showSearch={false}
+          mode={type === 'multiSelect' ? 'multiple' : undefined}
           virtual
-          treeDefaultExpandAll
           disabled={disabled}
-          {...treeSelectVirtualizationProps}
+          status={status}
+          {...selectVirtualizationProps}
+          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}
-      />
+        {status === 'error' && <div style={{ color: '#E83135' }} className="cap-unified-select-status">{statusMessage}</div>}
+      </>
     );
-  };
+  }; 
 
   return (
-    <SelectWrapper>
+    <SelectWrapper className={classnames(`cap-unified-select-container ${className || ''}`)}>
       {renderHeader()}
       {renderDropdown()}
     </SelectWrapper>
@@ -106,16 +316,20 @@ CapUnifiedSelect.propTypes = {
   className: PropTypes.string,
   style: PropTypes.object,
   allowClear: PropTypes.bool,
-  showSearch: PropTypes.bool,
   label: PropTypes.string,
   tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   disabled: PropTypes.bool,
+  treeCheckable: PropTypes.bool,
+  customPopupRender: PropTypes.bool,
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func,
 };
 
 CapUnifiedSelect.defaultProps = {
   type: 'select',
   allowClear: false,
-  showSearch: false,
+  customPopupRender: false,
+  treeCheckable: false,
 };
 
-export default CapUnifiedSelect;
+export default withStyles(CapUnifiedSelect, selectStyles);

package/CapUnifiedSelect/styles.js

@@ -23,21 +23,72 @@ export const HeaderWrapper = styled.div`
   }
 `;
 
+export const DropdownFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border-top: 1px solid #f0f0f0;
+  
+  .footer-buttons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .total-count {
+    color: #8c8c8c;
+    font-size: 12px;
+  }
+`;
+
+export const SearchInputWrapper = styled.div`
+  padding: 8px;
+  border-bottom: 1px solid #f0f0f0;
+`;
+
+export const SelectAllCheckbox = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 1px solid #f0f0f0;
+  user-select: none;
+  
+  input[type="checkbox"] {
+    cursor: pointer;
+  }
+`;
+
+export const NoResultWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: #8c8c8c;
+  font-size: 14px;
+`;
+
 
 
 export const StyledInfoIcon = styled.span`
-  color: ${styledVars.CAP_G2};
+  color: ${styledVars.CAP_G05};
   font-size: 16px;
   cursor: help;
+  margin-left: 4px;
+  display: flex;
+  align-items: center;
 
   &:hover {
-    color: ${styledVars.CAP_G1};
+    color: ${styledVars.CAP_G03};
   }
 
   &.disabled {
     cursor: not-allowed;
     &:hover {
-      color: ${styledVars.CAP_G2};
+      color: ${styledVars.CAP_G05};
     }
   }
 `;
@@ -91,30 +142,46 @@ export const selectStyles = css`
     }
 
     /* Dropdown styles */
-    .ant-select-dropdown {
-      padding: 4px;
-      border-radius: ${styledVars.RADIUS_04};
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-
-      .ant-select-item {
-        border-radius: ${styledVars.RADIUS_04};
-        padding: 8px 12px;
-        transition: ${styledVars.TRANSITION_ALL};
+    .ant-select-dropdown, 
+    &.ant-select-dropdown,
+    &.ant-select-dropdown-placement-bottomLeft {
+      padding: 0;
+      border-radius: 12px !important;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      overflow: hidden;
+
+      /* Option base style - no background */
+      .ant-select-item-option {
+        padding: 10px 16px;
+        font-size: 14px;
+        color: #1c2530;
+        font-weight: 500;
+        background-color: transparent !important;
+
+        /* Hover state only */
+        &:not(.ant-select-item-option-disabled):hover {
+          background-color: #fffbe6 !important;
+          border-radius: 4px;
+          color: #1c2530 !important;
+        }
 
-        &-option-selected {
-          background-color: ${styledVars.CAP_PRIMARY.light};
+        /* Selected state */
+        &-selected {
           color: ${styledVars.CAP_PRIMARY.base};
           font-weight: 500;
         }
 
-        &-option-active {
-          background-color: ${styledVars.CAP_G08};
+        /* Remove active state background unless hovered */
+        &-active:not(:hover):not(.ant-select-item-option-disabled) {
+          background-color: transparent !important;
         }
       }
 
       /* Search input styles */
+      .ant-select-dropdown-search,
       .ant-select-search {
-        padding: 8px;
+        padding: 8px 12px;
+        border-bottom: 1px solid #f0f0f0;
         
         input {
           border-radius: ${styledVars.RADIUS_04};
@@ -126,6 +193,64 @@ export const selectStyles = css`
           }
         }
       }
+      
+      /* Scrollbar */
+      .rc-virtual-list-scrollbar-thumb {
+        background-color: #dcdcdc;
+        border-radius: 4px;
+      }
+
+      /* Divider */
+      .ant-divider-horizontal {
+        margin: 0;
+      }
+      
+      /* No result UI */
+      .no-result {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 200px;
+        color: #8c8c8c;
+        font-size: 14px;
+      }
+      
+      /* Dropdown search inside custom popup */
+      .dropdown-search {
+        padding: 8px;
+        border-bottom: 1px solid #f0f0f0;
+      }
+      
+      /* Select all checkbox */
+      .select-all-checkbox {
+        display: flex;
+        align-items: center;
+        padding: 8px 12px;
+        cursor: pointer;
+        font-weight: 500;
+        border-bottom: 1px solid #f0f0f0;
+        user-select: none;
+        
+        input[type="checkbox"] {
+          cursor: pointer;
+        }
+      }
+      
+      /* Footer buttons */
+      .dropdown-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px;
+        border-top: 1px solid #f0f0f0;
+      }
+      
+      /* Selected counter */
+      .selected-count {
+        color: #8c8c8c;
+        font-size: 12px;
+      }
     }
 
     /* Multiple selection styles */
@@ -162,14 +287,15 @@ export const selectStyles = css`
       .ant-select-tree-node-content-wrapper {
         padding: 4px 8px;
         border-radius: ${styledVars.RADIUS_04};
-        transition: ${styledVars.TRANSITION_ALL};
+        background-color: transparent !important;
 
         &:hover {
-          background-color: ${styledVars.CAP_G08};
+          background-color: #fffbe6 !important;
+          color: #1c2530 !important;
+          border-radius: 4px;
         }
 
         &.ant-select-tree-node-selected {
-          background-color: ${styledVars.CAP_PRIMARY.light};
           color: ${styledVars.CAP_PRIMARY.base};
           font-weight: 500;
         }
@@ -184,6 +310,19 @@ export const selectStyles = css`
       .ant-select-tree-checkbox {
         margin: 4px 8px 4px 0;
       }
+      
+      .ant-select-tree-treenode {
+        padding: 2px 0;
+        
+        &:hover {
+          background-color: transparent;
+        }
+      }
+      
+      .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
+        background-color: ${styledVars.CAP_PRIMARY.base};
+        border-color: ${styledVars.CAP_PRIMARY.base};
+      }
     }
 
     /* Size variations */
@@ -219,5 +358,17 @@ export const selectStyles = css`
         }
       }
     }
+
+    &.cap-unified-tree-select .cap-unified-select .ant-select-selection-overflow,
+    &.cap-unified-select .ant-select-selection-overflow {
+      display: none; /* hides pill wrapper */
+    }
+
+    &.cap-unified-tree-select .cap-unified-select .suffix-counter,
+    &.cap-unified-select .suffix-counter {
+      color: #1c2530;
+      font-weight: 500;
+      margin-right: 12px; /* optional, adjust spacing */
+    }
   }
 `;