@capillarytech/blaze-ui 0.1.6-alpha.37 → 0.1.6-alpha.39

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -11,6 +11,10 @@ import { InfoCircleOutlined, SearchOutlined, WarningFilled, DownOutlined } from
 import withStyles from '../utils/withStyles';
 import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
 
+const StyledTreeSelect = styled(TreeSelect)`
+  ${selectStyles}
+`;
+
 const CapUnifiedSelect = ({
   type,
   options = [],
@@ -33,16 +37,15 @@ const CapUnifiedSelect = ({
   searchBasedOn = 'label',
   onConfirm,
   onCancel,
+  noResultText = 'No results found',
   ...rest
 }) => {
-  const StyledTreeSelect = styled(TreeSelect)`
-    ${selectStyles}
-  `;
 
   const [searchText, setSearchText] = useState('');
   const [tempValue, setTempValue] = useState(value);
   const [allSelected, setAllSelected] = useState(false);
 
+
   useEffect(() => {
     setTempValue(value);
   }, [value]);
@@ -52,10 +55,10 @@ const CapUnifiedSelect = ({
     listItemHeight: 32,
   };
 
-  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>
+  const NoResult = ({ 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>
   );
 
@@ -101,8 +104,15 @@ const CapUnifiedSelect = ({
 
   const handleSelectAll = () => {
     const availableValues = leafValues;
-    setTempValue(allSelected ? [] : availableValues);
-    setAllSelected(!allSelected);
+    if (allSelected) {
+      // If currently all selected, then unselect all
+      setTempValue([]);
+      setAllSelected(false);
+    } else {
+      // Otherwise select all available options
+      setTempValue(availableValues);
+      setAllSelected(true);
+    }
   };
 
   useEffect(() => {
@@ -112,15 +122,13 @@ const CapUnifiedSelect = ({
   }, [tempValue, leafValues, isMulti]);
 
   const handleConfirm = () => {
-    if (onConfirm) onConfirm(tempValue);
-    else onChange(tempValue);
-    setSearchText('');
+    console.log('Confirm clicked');
+    if (onChange) onChange(tempValue);
   };
 
   const handleCancel = () => {
-    if (onCancel) onCancel();
+    console.log('Cancel clicked');
     setTempValue(value);
-    setSearchText('');
   };
 
   const handleTempChange = newValue => {
@@ -164,7 +172,11 @@ const CapUnifiedSelect = ({
 
   const renderDropdown = () => {
     const currentItems = filteredTree;
-    const selectedCount = Array.isArray(tempValue) ? tempValue.length : (tempValue ? 1 : 0);
+    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;
@@ -180,7 +192,7 @@ const CapUnifiedSelect = ({
                 value={searchText}
                 onChange={e => setSearchText(e.target.value)}
                 onKeyDown={e => e.stopPropagation()}
-                />
+              />
             </div>
             )}
           {isMulti && showUpload && (
@@ -204,12 +216,12 @@ const CapUnifiedSelect = ({
           )}
           {isMulti && currentItems.length > 0 && (
             <div style={{ padding: '8px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0' }} onClick={e => { e.stopPropagation(); handleSelectAll(); }}>
-              <input type="checkbox" checked={allSelected} readOnly style={{ cursor: 'pointer' }} onClick={e => e.stopPropagation()} />
+                              <input type="checkbox" checked={allSelected} readOnly style={{ cursor: 'pointer' }} onClick={e => e.stopPropagation()} />
               <label style={{ marginLeft: 8, cursor: 'pointer' }}>Select all</label>
             </div>
           )}
 
-          {currentItems.length === 0 ? <NoResult /> : menu}
+          {currentItems.length === 0 ? <NoResult noResultText={noResultText} className={classnames(className, "cap-unified-select-no-result")}/> : menu}
 
           {currentItems.length > 0 && isMulti && (
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', borderTop: '1px solid #f0f0f0' }}>
@@ -256,7 +268,7 @@ const CapUnifiedSelect = ({
   };
 
   return (
-    <SelectWrapper className={classnames(`cap-unified-select-container ${className || ''}`)}>
+    <SelectWrapper className={classnames(className, 'cap-unified-select-container')}>
       {renderHeader()}
       {renderDropdown()}
     </SelectWrapper>

package/CapUnifiedSelect/styles.js

@@ -141,6 +141,23 @@ export const selectStyles = css`
     .multiSelect-popup-container .ant-select-tree-treenode{
       margin-left: 10px !important;
     }
+    .cap-unified-select-no-result{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 200px;
+      color: #8c8c8c;
+      font-size: 14px;
+    }
+    .cap-unified-select-no-result-icon{
+      font-size: 36px;
+      margin-bottom: 8px;
+      color: #bfbfbf;
+    }
+    .cap-unified-select-no-result-text{
+      font-weight: 500;
+    }
   }
   &.cap-unified-select {
     width: 100%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/blaze-ui",
   "author": "Capillary Technologies",
-  "version": "0.1.6-alpha.37",
+  "version": "0.1.6-alpha.39",
   "description": "Capillary UI component library with Ant Design v5",
   "main": "./index.js",
   "sideEffects": [