fix(ConditionBuilder): can't change month or year for Date type (carb…

…on-design-system#5623) * fix(ConditionBuilder): can't change month or year for Date type * fix(ConditionBuilder): invalid date text * fix(ConditionBuilder): popover open/close handlers * fix(ConditionBuilder): popover open/close handlers 2 * fix(ConditionBuilder): popover refining * fix(ConditionBuilder): popover refining2 * fix(ConditionBuilder): remove changes * fix(ConditionBuilder): remove changes3
amal-k-joy · Jul 2, 2024 · e093199 · e093199
1 parent da5fd0a
commit e093199
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 39 deletions.
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.js
@@ -140,6 +140,22 @@ const ConditionBlock = (props) => {
         }
       : {};
   };
+
+  const renderChildren = (popoverRef) => {
+    return (
+      <ItemComponent
+        conditionState={{
+          property,
+          operator,
+          value,
+        }}
+        onChange={onValueChangeHandler}
+        config={config}
+        data-name="valueField"
+        parentRef={popoverRef}
+      />
+    );
+  };
   return (
     <div
       className={cx(
@@ -159,7 +175,6 @@ const ConditionBlock = (props) => {
       )}
       role="row"
       aria-label={conditionRowText}
-      tabIndex={-1}
       {...getAriaAttributes()}
     >
       {conjunction ? (
@@ -240,19 +255,8 @@ const ConditionBlock = (props) => {
           data-name="valueField"
           condition={condition}
           config={config}
-        >
-          <ItemComponent
-            conditionState={{
-              property,
-              operator,
-              value,
-            }}
-            onChange={onValueChangeHandler}
-            config={config}
-            type={type}
-            data-name="valueField"
-          />
-        </ConditionBuilderItem>
+          renderChildren={renderChildren}
+        />
       )}
       <span role="gridcell" aria-label={removeConditionText}>
         <ConditionBuilderButton

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.js
@@ -260,7 +260,7 @@ ConditionBuilder.propTypes = {
   /**
    * Optional prop, if you need to pass translations to the texts on the component instead of the defined defaults.
    * This callback function will receive the message id and you need to return the corresponding text for that id.
-   * The message id will be one of [   "ifText","addConditionText",   "addConditionGroupText",   "addSubgroupText",   "conditionText",   "propertyText",   "operatorText",   "valueText",   "connectorText",   "conditionRowText",   "removeConditionText",   "addConditionRowText",   "startText",   "endText",   "clearSearchText",   "actionsText",   "then",   "removeActionText",   "addActionText",   "invalidText",   "invalidNumberWarnText"]
+   * The message id will be one of [   "ifText","addConditionText",   "addConditionGroupText",   "addSubgroupText",   "conditionText",   "propertyText",   "operatorText",   "valueText",   "connectorText",   "conditionRowText",   "removeConditionText",   "addConditionRowText",   "startText",   "endText",   "clearSearchText",   "actionsText",   "then",   "removeActionText",   "addActionText",   "invalidText", "invalidDateText",  "invalidNumberWarnText"]
 ]
    */
   translateWithId: PropTypes.func,

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContext/DataConfigs.js
@@ -118,11 +118,19 @@ export const valueRenderers = {
   },
   date: (value) => {
     if (Array.isArray(value) && value.length > 1) {
-      const start = value?.[0] ? formatDate(new Date(value[0])) : '';
-      const end = value?.[1] ? formatDate(new Date(value[1])) : '';
+      const start =
+        value?.[0] && !isNaN(new Date(value[0]))
+          ? formatDate(new Date(value[0]))
+          : '';
+      const end =
+        value?.[1] && !isNaN(new Date(value[1]))
+          ? formatDate(new Date(value[1]))
+          : '';
       return `${start} To ${end}`;
+    } else if (Array.isArray(value) && !isNaN(new Date(value[0]))) {
+      return formatDate(new Date(value[0]));
     } else {
-      return value && new Date(value) ? formatDate(new Date(value)) : value;
+      return value;
     }
   },
   custom: (value) => value,

diff --git a/...ibm-products/src/components/ConditionBuilder/ConditionBuilderContext/translationObject.js b/...ibm-products/src/components/ConditionBuilder/ConditionBuilderContext/translationObject.js
@@ -34,5 +34,6 @@ export const translationsObject = {
   removeActionText: 'Remove Action',
   addActionText: 'Add action',
   invalidText: 'Incomplete',
+  invalidDateText: 'Invalid Date',
   invalidNumberWarnText: 'Invalid number, must be 0 or greater',
 };
diff --git a/...ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js b/...ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js
@@ -21,27 +21,37 @@ export const ConditionBuilderItem = ({
   condition,
   popOverClassName,
   config,
+  renderChildren,
   ...rest
 }) => {
   const contentRef = useRef(null);
+  const popoverRef = useRef(null);
   const [open, setOpen] = useState(false);
 
-  const [invalidText, addConditionText, labelText] = useTranslations([
-    'invalidText',
-    'addConditionText',
-    label,
-  ]);
+  const [invalidText, addConditionText, labelText, invalidDateText] =
+    useTranslations([
+      'invalidText',
+      'addConditionText',
+      label,
+      'invalidDateText',
+    ]);
   const getPropertyDetails = () => {
     if (label === 'INVALID') {
       return {
         propertyLabel: invalidText,
         isInvalid: true,
       };
+    } else if (label === 'INVALID_DATE') {
+      return {
+        propertyLabel: invalidDateText,
+        isInvalid: true,
+      };
     }
     const propertyId =
       rest['data-name'] == 'valueField' && type
         ? valueRenderers[type](label, config)
         : labelText;
+
     return {
       isInvalid: false,
       propertyLabel: propertyId,
@@ -59,23 +69,23 @@ export const ConditionBuilderItem = ({
       //if any condition is changed, state prop is triggered
       if (condition.popoverToOpen && currentField !== condition.popoverToOpen) {
         // close the previous popover
-        setOpen(false);
+        closePopover();
       } else if (
         currentField == 'valueField' &&
         type == 'option' &&
         condition.operator !== 'oneOf'
       ) {
         //close the current popover if the field is valueField and  is a single select dropdown. For all other inputs ,popover need to be open on value changes.
-        setOpen(false);
+        closePopover();
       }
       if (condition.popoverToOpen == currentField) {
         //current popover need to be opened
-        setOpen(true);
+        openPopOver();
       }
     } else {
       // when we change any statement(if/ excl.if) which is not part of condition state, label change is triggered.
       //close popOver when statement is changed.
-      setOpen(false);
+      closePopover();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [condition, label]);
@@ -91,22 +101,23 @@ export const ConditionBuilderItem = ({
     }
   }, [contentRef, open]);
 
+  const closePopover = () => setOpen(false);
+  const openPopOver = () => setOpen(true);
+  const togglePopover = () => setOpen(!open);
+
   return (
     <Popover
       open={open}
       isTabTip
       role="gridcell"
       className={popOverClassName}
-      onRequestClose={() => {
-        setOpen(false);
-      }}
+      ref={popoverRef}
+      onRequestClose={closePopover}
     >
       <ConditionBuilderButton
         label={propertyLabel ?? addConditionText}
         hideLabel={!label ? true : false}
-        onClick={() => {
-          children ? setOpen(!open) : null;
-        }}
+        onClick={togglePopover}
         className={className}
         aria-haspopup
         aria-expanded={open}
@@ -126,7 +137,7 @@ export const ConditionBuilderItem = ({
           <Layer>
             <h1 className={`${blockClass}__item__title`}>{title}</h1>
             <div ref={contentRef} className={`${blockClass}__popover-content`}>
-              {children}
+              {renderChildren ? renderChildren(popoverRef) : children}
             </div>
           </Layer>
         </PopoverContent>
@@ -169,6 +180,11 @@ ConditionBuilderItem.propTypes = {
    */
   popOverClassName: PropTypes.string,
 
+  /**
+   * callback prop that returns the jsx for children
+   */
+  renderChildren: PropTypes.func,
+
   /**
    * Optional prop to allow overriding the icon rendering.
    */

diff --git a/...onditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js b/...onditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js
@@ -8,21 +8,31 @@ import { useTranslations } from '../../utils/useTranslations';
 
 const blockClass = `${pkg.prefix}--condition-builder`;
 
-export const ConditionBuilderItemDate = ({ conditionState, onChange }) => {
+export const ConditionBuilderItemDate = ({
+  conditionState,
+  onChange,
+  parentRef,
+}) => {
   const DatePickerInputRef = useRef();
   const [startText, endText] = useTranslations(['startText', 'endText']);
   const datePickerType =
     conditionState.operator == 'between' ? 'range' : 'single';
 
+  const onCloseHandler = (selectedDate) => {
+    onChange(
+      selectedDate && selectedDate.length > 0 ? selectedDate : 'INVALID_DATE'
+    );
+  };
   return (
     <div className={`${blockClass}__item-date `}>
       {datePickerType == 'single' && (
         <DatePicker
           ref={DatePickerInputRef}
           dateFormat="d/m/Y"
           datePickerType="single"
-          onClose={onChange}
           value={conditionState.value}
+          onClose={onCloseHandler}
+          appendTo={parentRef?.current}
         >
           <DatePickerInput
             id="datePicker"
@@ -37,8 +47,9 @@ export const ConditionBuilderItemDate = ({ conditionState, onChange }) => {
           ref={DatePickerInputRef}
           dateFormat="d/m/Y"
           datePickerType={datePickerType}
-          onClose={onChange}
+          onClose={onCloseHandler}
           value={conditionState.value}
+          appendTo={parentRef?.current}
         >
           <DatePickerInput
             id="datePickerStart"
@@ -65,4 +76,9 @@ ConditionBuilderItemDate.propTypes = {
    * callback to update state oin date change
    */
   onChange: PropTypes.func,
+
+  /**
+   * reference to the popover node
+   */
+  parentRef: PropTypes.object,
 };
diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx
@@ -561,8 +561,8 @@ TearsheetShell.displayName = componentName;
 export const portalType =
   typeof Element === 'undefined'
     ? PropTypes.object
-    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-    : PropTypes.instanceOf(Element);
+    : // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+      PropTypes.instanceOf(Element);
 
 export const deprecatedProps = {
   /**