@capillarytech/blaze-ui 0.1.6-alpha.40 → 0.1.6-alpha.42

package/CapRow/CapRow.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import { StyledRow, rowStyles } from './styles';
+import withStyles from '../utils/withStyles';
+
+const CapRow = ({
+  children,
+  className = '',
+  style = {},
+  justify = 'start',
+  align = 'top',
+  gutter = 0,
+  wrap = true,
+  type,
+  width,
+  height,
+  margin,
+  padding,
+  prefixCls = 'ant-row',
+  fullWidth = false,
+  fullHeight = false,
+  fillSpace = false,
+  responsive = true,
+  vertical = false,
+  noWrap = false,
+  gap = null,
+  ...rest
+}) => {
+  // Use either the gap property or gutter for spacing
+  const gutterValue = gap !== null ? null : gutter;
+  const wrapValue = noWrap ? false : wrap;
+
+  return (
+    <StyledRow
+      className={classnames(
+        'cap-row-v2',
+        {
+          'with-custom-width': width,
+          'with-custom-height': height,
+          'fill-space': fillSpace,
+          'full-width': fullWidth,
+          'full-height': fullHeight,
+          'ant-row-no-wrap': noWrap,
+          'with-gap': gap !== null,
+        },
+        className
+      )}
+      style={{
+        ...(gap !== null ? { gap: typeof gap === 'number' ? `${gap}px` : gap } : {}),
+        ...style,
+      }}
+      justify={justify}
+      align={align}
+      gutter={gutterValue}
+      wrap={wrapValue}
+      type={type}
+      width={width}
+      height={height}
+      margin={margin}
+      padding={padding}
+      prefixCls={prefixCls}
+      fullWidth={fullWidth}
+      fullHeight={fullHeight}
+      fillSpace={fillSpace}
+      responsive={responsive}
+      vertical={vertical}
+      {...rest}
+    >
+      {children}
+    </StyledRow>
+  );
+};
+
+CapRow.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between', 'space-evenly']),
+  align: PropTypes.oneOf(['top', 'middle', 'bottom', 'stretch']),
+  gutter: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.arrayOf(PropTypes.number),
+  ]),
+  wrap: PropTypes.bool,
+  type: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  margin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  prefixCls: PropTypes.string,
+  fullWidth: PropTypes.bool,
+  fullHeight: PropTypes.bool,
+  fillSpace: PropTypes.bool,
+  responsive: PropTypes.bool,
+  vertical: PropTypes.bool,
+  noWrap: PropTypes.bool,
+  gap: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.number),
+    PropTypes.string,
+  ]),
+};
+
+CapRow.defaultProps = {
+  className: '',
+  style: {},
+  justify: 'start',
+  align: 'top',
+  gutter: 0,
+  wrap: true,
+  prefixCls: 'ant-row',
+  fullWidth: false,
+  fullHeight: false,
+  fillSpace: false,
+  responsive: true,
+  vertical: false,
+  noWrap: false,
+};
+
+export default withStyles(CapRow, rowStyles);

package/CapRow/index.js

@@ -0,0 +1,3 @@
+import CapRow from './CapRow';
+
+export default CapRow;

package/CapRow/styles.js

@@ -0,0 +1,50 @@
+import styled, { css } from 'styled-components';
+import { Row } from 'antd-v5';
+import * as styledVars from '../styled/variables';
+
+export const StyledRow = styled(Row)`
+  width: ${({ width, fullWidth }) => (fullWidth ? '100%' : width || 'auto')};
+  height: ${({ height, fullHeight }) => (fullHeight ? '100%' : height || 'auto')};
+  margin: ${({ margin }) => margin || 'inherit'};
+  padding: ${({ padding }) => padding || 'inherit'};
+  ${({ responsive }) => !responsive && css`
+    display: flex;
+    flex-wrap: wrap;
+  `};
+  ${({ fillSpace }) => fillSpace && css`
+    flex: 1;
+  `};
+`;
+
+export const rowStyles = css`
+  &.cap-row-v2 {
+    &.with-custom-width {
+      width: auto;
+    }
+    
+    &.with-custom-height {
+      height: auto;
+    }
+    
+    &.fill-space {
+      flex: 1;
+    }
+    
+    &.full-width {
+      width: 100%;
+    }
+    
+    &.full-height {
+      height: 100%;
+    }
+
+    &.ant-row-no-wrap {
+      flex-wrap: nowrap;
+    }
+
+    &.with-gap {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
+  }
+`;

package/CapTooltip/CapTooltip.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip } from 'antd-v5';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import { tooltipStyles } from './styles';
+import withStyles from '../utils/withStyles';
+
+const StyledTooltip = styled(Tooltip)`
+  ${tooltipStyles}
+`;
+
+const CapTooltip = ({
+  title,
+  children,
+  placement = 'top',
+  visible,
+  defaultVisible = false,
+  trigger = 'hover',
+  destroyTooltipOnHide = false,
+  mouseEnterDelay = 0.1,
+  mouseLeaveDelay = 0.1,
+  overlayClassName = '',
+  overlayStyle,
+  onVisibleChange,
+  align,
+  arrowPointAtCenter = false,
+  autoAdjustOverflow = true,
+  getPopupContainer,
+  className = '',
+  ...rest
+}) => {
+  return (
+    <StyledTooltip
+      title={title}
+      placement={placement}
+      open={visible}
+      defaultOpen={defaultVisible}
+      trigger={trigger}
+      destroyTooltipOnHide={destroyTooltipOnHide}
+      mouseEnterDelay={mouseEnterDelay}
+      mouseLeaveDelay={mouseLeaveDelay}
+      overlayClassName={classnames('cap-tooltip-overlay-v2', overlayClassName)}
+      overlayStyle={overlayStyle}
+      onOpenChange={onVisibleChange}
+      align={align}
+      arrow={{ pointAtCenter: arrowPointAtCenter }}
+      autoAdjustOverflow={autoAdjustOverflow}
+      getPopupContainer={getPopupContainer}
+      className={classnames('cap-tooltip-v2', className)}
+      {...rest}
+    >
+      {children}
+    </StyledTooltip>
+  );
+};
+
+CapTooltip.propTypes = {
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  children: PropTypes.node,
+  placement: PropTypes.oneOf([
+    'top', 'left', 'right', 'bottom',
+    'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
+    'leftTop', 'leftBottom', 'rightTop', 'rightBottom',
+  ]),
+  visible: PropTypes.bool,
+  defaultVisible: PropTypes.bool,
+  trigger: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  destroyTooltipOnHide: PropTypes.bool,
+  mouseEnterDelay: PropTypes.number,
+  mouseLeaveDelay: PropTypes.number,
+  overlayClassName: PropTypes.string,
+  overlayStyle: PropTypes.object,
+  onVisibleChange: PropTypes.func,
+  align: PropTypes.object,
+  arrowPointAtCenter: PropTypes.bool,
+  autoAdjustOverflow: PropTypes.bool,
+  getPopupContainer: PropTypes.func,
+  className: PropTypes.string,
+};
+
+CapTooltip.defaultProps = {
+  placement: 'top',
+  defaultVisible: false,
+  trigger: 'hover',
+  destroyTooltipOnHide: false,
+  mouseEnterDelay: 0.1,
+  mouseLeaveDelay: 0.1,
+  overlayClassName: '',
+  arrowPointAtCenter: false,
+  autoAdjustOverflow: true,
+  className: '',
+};
+
+export default withStyles(CapTooltip, tooltipStyles);

package/CapTooltip/index.js

@@ -0,0 +1,3 @@
+import CapTooltip from './CapTooltip';
+
+export default CapTooltip;

package/CapTooltip/styles.js

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const tooltipStyles = css`
+  &.cap-tooltip-overlay-v2 {
+    .ant-tooltip-inner {
+      background-color: ${styledVars.CAP_G01};
+      color: ${styledVars.CAP_WHITE};
+      padding: 8px 12px;
+      font-size: 14px;
+      line-height: 20px;
+      border-radius: ${styledVars.RADIUS_04};
+      max-width: 300px;
+      word-wrap: break-word;
+    }
+
+    .ant-tooltip-arrow::before {
+      background-color: ${styledVars.CAP_G01};
+    }
+  }
+
+  .button-disabled-tooltip-wrapper {
+    display: inline-block;
+    cursor: not-allowed;
+
+    .ant-btn[disabled] {
+      pointer-events: none;
+    }
+  }
+`;
+
+export const StyledTooltipWrapper = styled.div`
+  display: inline-block;
+`;

package/CapUnifiedSelect/CapUnifiedSelect.js

@@ -1,15 +1,13 @@
 // Enhanced CapUnifiedSelect supporting 4 scenarios with advanced features in a single TreeSelect
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { TreeSelect, Tooltip, Input, Button } from 'antd-v5';
+import { TreeSelect, Input, Button } from 'antd-v5';
 import styled from 'styled-components';
-import uploadIcon from '../assets/upload.svg';
-
-import { InfoCircleOutlined, SearchOutlined, WarningFilled, DownOutlined } from '@ant-design/icons';
-
+import * as styledVars from '../styled/variables';
+import { CapLabel, CapTooltip, CapRow, CapIcon } from '../';
 import withStyles from '../utils/withStyles';
-import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
+import { SelectWrapper, selectStyles } from './styles';
 
 const StyledTreeSelect = styled(TreeSelect)`
   ${selectStyles}
@@ -55,14 +53,18 @@ const CapUnifiedSelect = ({
     listItemHeight: 32,
   };
 
-  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>
-  );
-
-  const getFilteredTreeData = (data, search) => {
+  const NoResult = memo(({ noResultText, className }) => (
+    <CapRow 
+      className={classnames(className, "cap-unified-select-no-result")} 
+      align="middle" 
+      gap={8}
+    >
+      <CapIcon type="warning" size="s" />
+      <CapLabel className="cap-unified-select-no-result-text">{noResultText}</CapLabel>
+    </CapRow>
+  ));
+
+  const getFilteredTreeData = useCallback((data, search) => {
     if (!search) return data;
 
     const filterNode = node => {
@@ -73,7 +75,6 @@ const CapUnifiedSelect = ({
         const keyText = String(node.key || '').toLowerCase();
         return keyText.includes(search.toLowerCase());
       } else {
-        // Default case, fall back to label
         const labelText = node.label?.toLowerCase() || '';
         return labelText.includes(search.toLowerCase());
       }
@@ -89,86 +90,91 @@ const CapUnifiedSelect = ({
       }).filter(Boolean);
 
     return loop(data);
-  };
+  }, [searchBasedOn]);
 
-  const flattenLeafValues = nodes =>
-    nodes?.flatMap(node => node.children ? flattenLeafValues(node.children) : [node.value]) || [];
+  const flattenLeafValues = useCallback(nodes =>
+    nodes?.flatMap(node => node.children ? flattenLeafValues(node.children) : [node.value]) || [], []);
 
-  const isMulti = type === 'multiSelect' || type === 'multiTreeSelect';
-  const isTree = type === 'treeSelect' || type === 'multiTreeSelect';
+  const isMulti = useMemo(() => type === 'multiSelect' || type === 'multiTreeSelect', [type]);
+  const isTree = useMemo(() => type === 'treeSelect' || type === 'multiTreeSelect', [type]);
   
-  const dataSource = isTree ? options : options.map(opt => ({ title: opt.label, value: opt.value, key: opt.key || opt.value }));
+  const dataSource = useMemo(() => {
+    return isTree ? options : options.map(opt => ({ title: opt.label, value: opt.value, key: opt.key || opt.value }));
+  }, [isTree, options]);
 
-  const filteredTree = getFilteredTreeData(dataSource, searchText);
-  const leafValues = flattenLeafValues(filteredTree);
+  const filteredTree = useMemo(() => getFilteredTreeData(dataSource, searchText), [dataSource, searchText]);
+  const leafValues = useMemo(() => flattenLeafValues(filteredTree), [filteredTree]);
 
-  const handleSelectAll = () => {
+  const handleSelectAll = useCallback(() => {
     const availableValues = leafValues;
     if (allSelected) {
-      // If currently all selected, then unselect all
       setTempValue([]);
       setAllSelected(false);
     } else {
-      // Otherwise select all available options
       setTempValue(availableValues);
       setAllSelected(true);
     }
-  };
+  }, [allSelected, leafValues]);
 
   useEffect(() => {
     if (isMulti && Array.isArray(tempValue)) {
-      setAllSelected(tempValue.length > 0 && tempValue.length === leafValues.length);
+      const allItemsSelected = tempValue.length > 0 && leafValues.length > 0 && tempValue.length === leafValues.length;
+      setAllSelected(allItemsSelected);
     }
   }, [tempValue, leafValues, isMulti]);
 
-  const handleConfirm = () => {
-    console.log('Confirm clicked');
+  const handleConfirm = useCallback(() => {
     if (onChange) onChange(tempValue);
-  };
+  }, [onChange, tempValue]);
 
-  const handleCancel = () => {
-    console.log('Cancel clicked');
+  const handleCancel = useCallback(() => {
     setTempValue(value);
-  };
+  }, [value]);
 
-  const handleTempChange = newValue => {
+  const handleTempChange = useCallback(newValue => {
     setTempValue(newValue);
-  };
+  }, []);
 
-  const suffix = isMulti && Array.isArray(value) && value?.length > 1 ? (
-    <>
-      <span>+{value.length - 1} more <DownOutlined /></span>
-    </>
-  ) : (
-    <DownOutlined />
-  );
+  const suffix = useMemo(() => {
+    return isMulti && Array.isArray(value) && value?.length > 1 ? (
+      <>
+        <span>+{value.length - 1} more <CapIcon type="down" size="s" /></span>
+      </>
+    ) : (
+      <CapIcon type="down" size="s" />
+    );
+  }, [isMulti, value]);
 
-  const prefix = () => {
+  const prefix = useMemo(() => {
     if (isMulti && Array.isArray(value) && value?.length > 0) {
       const selectedLabels = options.filter(opt => value.includes(opt.value)).map(opt => opt.label);
       return selectedLabels[0];
     }
     return null;
-  };
+  }, [isMulti, value, options]);
 
-  const renderHeader = () => {
+  const renderHeader = useCallback(() => {
     if (!headerLabel && !tooltip) return null;
     return (
       <>
-      <HeaderWrapper className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header')}>
-        {headerLabel && <label type="label16" className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-label')}>{headerLabel}</label>}
+      <CapRow 
+        className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header')}
+        align="middle"
+        gap={8}
+      >
+        {headerLabel && <CapLabel type="label16" className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-label')}>{headerLabel}</CapLabel>}
         {tooltip && (
-          <Tooltip title={tooltip} rootClassName="cap-unified-tooltip" className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-tooltip')}>
-            <InfoCircleOutlined />
-          </Tooltip>
+          <CapTooltip title={tooltip} className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-tooltip')}>
+            <CapIcon type="info-circle" size="s" />
+          </CapTooltip>
         )}
-      </HeaderWrapper>
+      </CapRow>
       <div className="cap-unified-select-header-byline-text">
-        {bylineText && <label className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-byline-text')}>{bylineText}</label>}
+        {bylineText && <CapLabel className={classnames(disabled ? 'disabled' : '', 'cap-unified-select-header-byline-text')}>{bylineText}</CapLabel>}
       </div>
       </>
     );
-  };
+  }, [headerLabel, tooltip, bylineText, disabled]);
 
   const renderDropdown = () => {
     const currentItems = filteredTree;
@@ -184,53 +190,55 @@ const CapUnifiedSelect = ({
       return (
         <div className={classnames(popupClassName, `${type}-popup-container`)}>
           {showSearch && (
-            <div style={{ borderBottom: '1px solid #f0f0f0' }}>
+            <CapRow className={classnames("cap-unified-select-search-container")} align="middle">
               <Input
-                prefix={<SearchOutlined style={{ color: '#B3BAC5' }} />}
+                prefix={<CapIcon type="search" size="s" style={{ color: styledVars.CAP_G06 }} />}
                 placeholder="Search"
                 variant="borderless"
                 value={searchText}
                 onChange={e => setSearchText(e.target.value)}
                 onKeyDown={e => e.stopPropagation()}
               />
-            </div>
+            </CapRow>
             )}
           {isMulti && showUpload && (
-            <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0' , height: '36px'}}>
+            <CapRow className={classnames("cap-unified-select-upload-container")} align="middle">
              <Button
               type="link"
-              icon={<img src={uploadIcon} alt="upload" style={{ width: "16px", height: "20px" }} />}
+              icon={<CapIcon type="upload" size="s" />}
               onClick={() => {}}
-              style={{
-                color: '#2466EA', // AntD primary blue
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: '14px',
-                fontWeight: '400',
-                lineHeight: '20px',
-              }}
+              className={classnames("cap-unified-select-upload-button")}
             >
               Upload
             </Button>
-            </div>
+            </CapRow>
           )}
           {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()} />
-              <label style={{ marginLeft: 8, cursor: 'pointer' }}>Select all</label>
-            </div>
+            <CapRow 
+              className={classnames("cap-unified-select-select-all-container")} 
+              onClick={e => { e.stopPropagation(); handleSelectAll(); }}
+              align="middle"
+              gap={8}
+            >
+              <input type="checkbox" checked={allSelected} className={classnames("cap-unified-select-select-all-checkbox")} onClick={e => e.stopPropagation()} />
+              <CapLabel className={classnames("cap-unified-select-select-all-label")}>Select all</CapLabel>
+            </CapRow>
           )}
 
           {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' }}>
-              <div>
-                <Button type="primary" size="small" style={{ marginRight: 8 }} onClick={e => { e.stopPropagation(); handleConfirm(); }}>Confirm</Button>
+            <CapRow 
+              className={classnames("cap-unified-select-confirm-container")} 
+              justify="space-between" 
+              align="middle"
+            >
+              <CapRow gap={8}>
+                <Button type="primary" size="small" className={classnames("cap-unified-select-confirm-button")} onClick={e => { e.stopPropagation(); handleConfirm(); }}>Confirm</Button>
                 <Button type="text" size="small" onClick={e => { e.stopPropagation(); handleCancel(); }}>Cancel</Button>
-              </div>
-              {selectedCount > 0 && <span style={{ color: '#8c8c8c', fontSize: '14px' }}>{selectedCount} selected</span>}
-            </div>
+              </CapRow>
+              {selectedCount > 0 && <CapLabel className={classnames("cap-unified-select-selected-count")}>{selectedCount} selected</CapLabel>}
+            </CapRow>
           )}
         </div>
       );
@@ -245,9 +253,10 @@ const CapUnifiedSelect = ({
           value={customPopupRender ? tempValue : value}
           onChange={customPopupRender ? handleTempChange : onChange}
           placeholder={placeholder}
+          showSearch={false}
           maxTagCount={0}
           maxTagPlaceholder={() => null}
-          prefix={isMulti && value.length > 0 && prefix()}
+          prefix={isMulti && value.length > 0 && prefix}
           suffixIcon={suffix}
           className={classnames(`cap-unified-tree-select ${className || ''}`)}
           style={style}
@@ -262,7 +271,7 @@ const CapUnifiedSelect = ({
           {...treeSelectVirtualizationProps}
           popupRender={renderCustomDropdown}
         />
-        {isError && <div style={{ color: '#E83135' }} className="cap-unified-select-status">{errorMessage}</div>}
+        {isError && <CapLabel className={classnames("cap-unified-select-status")} style={{ color: 'red' }}>{errorMessage}</CapLabel>}
       </>
     );
   };
@@ -300,12 +309,18 @@ CapUnifiedSelect.propTypes = {
 
 CapUnifiedSelect.defaultProps = {
   type: 'select',
+  options: [],
+  placeholder: 'Select an option',
   allowClear: false,
-  customPopupRender: false,
+  customPopupRender: true,
   showSearch: true,
   searchBasedOn: 'label',
   className: '',
   popupClassName: '',
+  disabled: false,
+  showUpload: false,
+  isError: false,
+  noResultText: 'No results found'
 };
 
 export default withStyles(CapUnifiedSelect, selectStyles);