feat(conditionBuilder): add option for formatting values in custom an…

…d date input type (#6735) * feat(conditionBuilder): add support for formatting values * feat(conditionBuilder): add test * fix: update proptype and test
carbon-design-system · Jan 30, 2025 · 9add0eb · 9add0eb
1 parent 62b33ce
commit 9add0eb
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 40 deletions.
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js
@@ -267,6 +267,7 @@ const inputData = {
       config: {
         component: CustomInput,
         operators: customOperators,
+        valueFormatter: (value) => value?.toUpperCase(),
       },
     },
   ],
@@ -396,7 +397,7 @@ const defaultProps = {
   getConditionState: () => {},
   variant: NON_HIERARCHICAL_VARIANT,
 };
-
+const testInputText = 'testID123';
 const inputConfigOptionType = {
   properties: [
     {
@@ -786,12 +787,12 @@ describe(componentName, () => {
     );
 
     const inputText = document.querySelector('#id');
-    fireEvent.change(inputText, { target: { value: 'testID123' } });
+    fireEvent.change(inputText, { target: { value: testInputText } });
 
     const container = document.querySelector(`.${blockClass}`);
     await act(() => userEvent.click(container));
 
-    const selectedItem = screen.getByRole('button', { name: 'testID123' });
+    const selectedItem = screen.getByRole('button', { name: testInputText });
 
     expect(selectedItem);
   });
@@ -815,12 +816,12 @@ describe(componentName, () => {
     await act(() => userEvent.click(isOperator));
 
     const inputText = document.querySelector('#id_long');
-    fireEvent.change(inputText, { target: { value: 'testID123' } });
+    fireEvent.change(inputText, { target: { value: testInputText } });
 
     const container = document.querySelector(`.${blockClass}`);
     await act(() => userEvent.click(container));
 
-    const selectedItem = screen.getByRole('button', { name: 'testID123' });
+    const selectedItem = screen.getByRole('button', { name: testInputText });
 
     expect(selectedItem);
   });
@@ -1612,12 +1613,15 @@ describe(componentName, () => {
     );
 
     const inputText = document.querySelector('#customInput');
-    fireEvent.change(inputText, { target: { value: 'testID123' } });
+    fireEvent.change(inputText, { target: { value: testInputText } });
 
     const container = document.querySelector(`.${blockClass}`);
     await act(() => userEvent.click(container));
-
-    const selectedItem = screen.getByRole('button', { name: 'testID123' });
+    // the value formatter will format to uppercase
+    // cspell: disable
+    const selectedItem = screen.getByRole('button', {
+      name: testInputText.toUpperCase(),
+    });
 
     expect(selectedItem);
   });

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx
@@ -255,6 +255,7 @@ ConditionBuilder.propTypes = {
               label: PropTypes.string.isRequired,
             })
           ),
+          valueFormatter: PropTypes.func,
         }),
       })
     ),

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts
@@ -90,7 +90,9 @@ export interface PropertyConfigNumber {
 
 export type PropertyConfigDate = {
   type: 'date';
-  config: object;
+  config: {
+    valueFormatter?: (value: string) => string;
+  };
 };
 
 export type PropertyConfigTime = {
@@ -108,6 +110,7 @@ export type PropertyConfigCustom = {
       label: string;
       id: string;
     }[];
+    valueFormatter?: (value: string) => string;
   };
 };
 

diff --git a/...bm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx b/...bm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx
@@ -120,7 +120,7 @@ export const ConditionBuilderItem = ({
     }
     const propertyId =
       rest['data-name'] == 'valueField' && type
-        ? getValue[type](label, config)
+        ? getValue(type, label, config)
         : labelText;
 
     return {

diff --git a/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js b/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js
@@ -661,6 +661,10 @@ export const inputData = {
       config: {
         component: CustomInput,
         operators: customOperators,
+        valueFormatter: (value) => {
+          // add any customization to the value to be populated
+          return value;
+        },
       },
     },
   ],

diff --git a/packages/ibm-products/src/components/ConditionBuilder/utils/util.js b/packages/ibm-products/src/components/ConditionBuilder/utils/util.js
@@ -112,35 +112,42 @@ const formatDate = (date) => {
   return `${day}/${month}/${year}`;
 };
 
-export const getValue = {
-  text: (value) => value,
-  textarea: (value) => value,
-  time: (value) => value,
-  number: (value) => value,
-  option: (value) => {
-    if (value && typeof value !== 'string') {
-      const selectedValues = Array.isArray(value) ? value : [value];
-      return selectedValues.map((option) => option.label).join(', ');
-    }
+export const getValue = (type, value, config) => {
+  if (config?.valueFormatter && ['date', 'custom'].includes(type)) {
+    return config.valueFormatter(value);
+  } else {
+    const formatters = {
+      text: (value) => value,
+      textarea: (value) => value,
+      time: (value) => value,
+      number: (value) => value,
+      option: (value) => {
+        if (value && typeof value !== 'string') {
+          const selectedValues = Array.isArray(value) ? value : [value];
+          return selectedValues.map((option) => option.label).join(', ');
+        }
 
-    return value;
-  },
-  date: (value) => {
-    if (Array.isArray(value) && value.length > 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;
-    }
-  },
-  custom: (value) => value,
+        return value;
+      },
+      date: (value) => {
+        if (Array.isArray(value) && value.length > 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;
+        }
+      },
+      custom: (value) => value,
+    };
+    return formatters[type](value, config);
+  }
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -255,6 +255,7 @@ ConditionBuilder.propTypes = { @@
                   label: PropTypes.string.isRequired,
                 })
               ),
+              valueFormatter: PropTypes.func,
             }),
           })
         ),
@@ Expand Down @@