{
)}
role="row"
aria-label={conditionRowText}
- tabIndex={-1}
{...getAriaAttributes()}
>
{conjunction ? (
@@ -240,19 +255,8 @@ const ConditionBlock = (props) => {
data-name="valueField"
condition={condition}
config={config}
- >
-
-
+ renderChildren={renderChildren}
+ />
)}
{
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/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContext/translationObject.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContext/translationObject.js
index 88bd0b9a6e..9301b1a608 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderContext/translationObject.js
+++ b/packages/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/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js
index 48fa71c7ae..bc29ff41b5 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.js
+++ b/packages/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 (
{
- setOpen(false);
- }}
+ ref={popoverRef}
+ onRequestClose={closePopover}
>
{
- children ? setOpen(!open) : null;
- }}
+ onClick={togglePopover}
className={className}
aria-haspopup
aria-expanded={open}
@@ -126,7 +137,7 @@ export const ConditionBuilderItem = ({
{title}
- {children}
+ {renderChildren ? renderChildren(popoverRef) : children}
@@ -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/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js
index 9561414336..d3549af20e 100644
--- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js
+++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemDate/ConditionBuilderItemDate.js
@@ -8,12 +8,21 @@ 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 (
{datePickerType == 'single' && (
@@ -21,8 +30,9 @@ export const ConditionBuilderItemDate = ({ conditionState, onChange }) => {
ref={DatePickerInputRef}
dateFormat="d/m/Y"
datePickerType="single"
- onClose={onChange}
value={conditionState.value}
+ onClose={onCloseHandler}
+ appendTo={parentRef?.current}
>
{
ref={DatePickerInputRef}
dateFormat="d/m/Y"
datePickerType={datePickerType}
- onClose={onChange}
+ onClose={onCloseHandler}
value={conditionState.value}
+ appendTo={parentRef?.current}
>