fix: update types and added seperate story

carbon-design-system · Jan 31, 2025 · a6e6a96 · a6e6a96
1 parent cc26f70
commit a6e6a96
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 65 deletions.
diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx
@@ -33,9 +33,9 @@ import { useDataConfigs } from '../utils/useDataConfigs';
 import {
   Condition,
   ConditionGroup,
+  ConfigType,
   LogicalOperator,
   Property,
-  PropertyConfig,
   PropertyConfigCustom,
 } from '../ConditionBuilder.types';
 
@@ -188,8 +188,8 @@ const ConditionBlock = (props: ConditionBlockProps) => {
     return isLastCondition(conditionIndex, conditions);
   };
   const getOperators = () => {
-    if ((config as PropertyConfigCustom['config'])?.operators) {
-      return (config as PropertyConfigCustom['config']).operators;
+    if ((config as ConfigType)?.operators) {
+      return (config as ConfigType).operators;
     }
     return operatorConfig.filter(
       (operator) => operator.type.indexOf(type) != -1 || operator.type == 'all'
@@ -304,7 +304,7 @@ const ConditionBlock = (props: ConditionBlockProps) => {
           data-name="operatorField"
           condition={condition}
           type={type}
-          config={config as PropertyConfig}
+          config={config as ConfigType}
           onChange={onOperatorChangeHandler}
         >
           <ItemOption
@@ -327,7 +327,7 @@ const ConditionBlock = (props: ConditionBlockProps) => {
           showToolTip={true}
           data-name="valueField"
           condition={condition}
-          config={config as PropertyConfig}
+          config={config as ConfigType}
           onChange={onValueChangeHandler}
           renderChildren={renderChildren}
         />

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.stories.jsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.stories.jsx
@@ -13,10 +13,15 @@ import { ConditionBuilder } from '.';
 import mdx from './ConditionBuilder.mdx';
 
 import styles from './_storybook-styles.scss?inline';
-import { inputData, inputDataDynamicOptions } from './assets/sampleInput';
+import {
+  inputData,
+  inputDataDynamicOptions,
+  inputDataForCustomOperator,
+} from './assets/sampleInput';
 import {
   sampleDataStructure_nonHierarchical,
   sampleDataStructure_Hierarchical,
+  initialStateWithCustomOperators,
 } from './assets/SampleData';
 import uuidv4 from '../../global/js/utils/uuidv4';
 import { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT } from './utils/util';
@@ -25,10 +30,6 @@ export default {
   component: ConditionBuilder,
   tags: ['autodocs'],
 
-  // TODO: Define argTypes for props not represented by standard JS types.
-  // argTypes: {
-  //   egProp: { control: 'color' },
-  // },
   parameters: {
     layout: 'fullscreen',
     styles,
@@ -232,6 +233,7 @@ const statementConfigCustom = [
     label: 'excl. if',
   },
 ];
+
 export const conditionBuilder = ConditionBuilderTemplate.bind({});
 conditionBuilder.storyName = 'Condition Builder';
 conditionBuilder.args = {
@@ -272,6 +274,20 @@ conditionBuilderWithCustomStatements.args = {
   statementConfigCustom: statementConfigCustom,
 };
 
+export const conditionBuilderWithCustomOperators =
+  ConditionBuilderTemplate.bind({});
+conditionBuilderWithCustomOperators.storyName =
+  'With Custom operator configuration';
+conditionBuilderWithCustomOperators.args = {
+  inputConfig: inputDataForCustomOperator,
+  initialState: {
+    state: initialStateWithCustomOperators,
+    enabledDefault: true,
+  },
+  variant: NON_HIERARCHICAL_VARIANT,
+  translateWithId: translateWithId,
+};
+
 export const conditionBuilderWithActions = ConditionBuilderTemplate.bind({});
 conditionBuilderWithActions.storyName = 'With Actions';
 conditionBuilderWithActions.args = {

diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts
@@ -56,31 +56,36 @@ export type Operators = {
   date: DateOperator;
 };
 
-export type option = {
-  id: string;
-  label: string;
+type Item = { id: string; label: string };
+
+export type option = Item & {
   icon?: CarbonIconType;
 };
+
 export type PropertyConfigOption = {
   type: 'option';
   config?: {
     options?: option[];
+    operators?: (Item & { isMultiSelect?: boolean })[];
   };
 };
 
 export interface PropertyConfigText {
   type: 'text';
   config: TextInputProps;
+  operators?: Item[];
 }
 
 export interface PropertyConfigTextArea {
   type: 'textarea';
   config: TextAreaProps;
+  operators?: Item[];
 }
 
 export interface PropertyConfigNumber {
   type: 'number';
   config: {
+    operators?: Item[];
     min?: number;
     max?: number;
     step?: number;
@@ -92,12 +97,14 @@ export type PropertyConfigDate = {
   type: 'date';
   config: {
     valueFormatter?: (value: string) => string;
+    operators?: Item[];
   };
 };
 
 export type PropertyConfigTime = {
   type: 'time';
   config: {
+    operators?: Item[];
     timeZones: string[];
   };
 };
@@ -106,46 +113,29 @@ export type PropertyConfigCustom = {
   type: 'custom';
   config: {
     component: React.ComponentType<any>;
-    operators: {
-      label: string;
-      id: string;
-    }[];
+    operators?: Item[];
     valueFormatter?: (value: string) => string;
   };
 };
 
-export type PropertyConfig = {
-  option: PropertyConfigOption;
-  text: PropertyConfigText;
-  textarea: PropertyConfigTextArea;
-  number: PropertyConfigNumber;
-  date: PropertyConfigDate;
-  time: PropertyConfigTime;
-  custom: PropertyConfigCustom;
-};
-
-export type Property = {
-  id: string;
-  label: string;
+export type ConfigType =
+  | PropertyConfigOption['config']
+  | PropertyConfigTextArea['config']
+  | PropertyConfigText['config']
+  | PropertyConfigNumber['config']
+  | PropertyConfigDate['config']
+  | PropertyConfigTime['config']
+  | PropertyConfigCustom['config'];
+export type Property = Item & {
   icon?: CarbonIconType;
   description?: string;
-} & (
-  | PropertyConfig['option']
-  | PropertyConfig['text']
-  | PropertyConfig['number']
-  | PropertyConfig['date']
-  | PropertyConfig['textarea']
-  | PropertyConfig['time']
-  | PropertyConfig['custom']
-);
+} & ConfigType;
 
 export type inputConfig = {
   properties: Property[];
 };
 
-export type Option = {
-  id: string;
-  label: string;
+export type Option = Item & {
   icon?: CarbonIconType;
 };
 export type Condition = {
@@ -175,10 +165,8 @@ export type Action = {
 
 export type variantsType = 'Non-Hierarchical' | 'Hierarchical';
 
-export type statementConfig = {
-  id: string;
+export type statementConfig = Item & {
   connector: 'and' | 'or';
-  label: string;
   secondaryLabel?: string;
 };
 

diff --git a/...bm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx b/...bm-products/src/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItem.tsx
@@ -26,9 +26,9 @@ import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBui
 import { handleKeyDownForPopover } from '../utils/handleKeyboardEvents';
 import {
   Condition,
-  PropertyConfig,
   Action,
   Option,
+  ConfigType,
 } from '../ConditionBuilder.types';
 import { blockClass, getValue } from '../utils/util';
 import { translationsObject } from '../ConditionBuilderContext/translationObject';
@@ -44,7 +44,7 @@ interface ConditionBuilderItemProps extends PropsWithChildren {
   type?: string;
   description?: string;
   condition?: Action & Condition;
-  config?: PropertyConfig;
+  config?: ConfigType;
   renderChildren?: (ref: RefObject<HTMLDivElement>) => ReactNode;
   onChange?: (val: string) => void;
   tabIndex?: number;
@@ -130,6 +130,17 @@ export const ConditionBuilderItem = ({
   };
   const { propertyLabel, isInvalid } = getPropertyDetails();
 
+  //check if the operator is configured as multiSelect in the input configuration
+  const checkForMultiSelectOperator = () => {
+    return (
+      condition?.operator === 'oneOf' ||
+      config?.operators?.find(
+        (operator) =>
+          condition?.operator === operator.id && operator.isMultiSelect
+      )
+    );
+  };
+
   useEffect(() => {
     /**
      * rest['data-name'] holds the current field name
@@ -143,9 +154,8 @@ export const ConditionBuilderItem = ({
         closePopover();
       } else if (
         currentField == 'valueField' &&
-        type == 'option' &&
-        condition?.operator !== 'oneOf' &&
-        !config.enableMultiselect
+        type === 'option' &&
+        !checkForMultiSelectOperator()
       ) {
         //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.
         closePopover();
@@ -204,15 +214,18 @@ export const ConditionBuilderItem = ({
     }
   };
 
-  const getCustomOperatorLabel = () => {
-    return config?.operators.filter((operator) => {
-      return operator.id === propertyLabel[0];
-    });
+  const getCustomOperatorLabel = (propertyLabel) => {
+    return (
+      propertyLabel &&
+      config?.operators?.find((operator) => {
+        return operator.id === propertyLabel;
+      })
+    );
   };
 
   const getLabel = () => {
-    if (config?.operators && rest['data-name'] == 'operatorField') {
-      return getCustomOperatorLabel(propertyLabel)?.[0]?.label ?? propertyLabel;
+    if (config?.operators && rest['data-name'] === 'operatorField') {
+      return getCustomOperatorLabel(propertyLabel)?.label ?? propertyLabel;
     } else if (propertyLabel) {
       return propertyLabel;
     } else if (rest['data-name'] === 'propertyField') {

diff --git a/...ditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx b/...ditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.tsx
@@ -41,10 +41,10 @@ export const ItemOptionForValueField = ({
   const checkForMultiselect = () => {
     //move this to utils
     const operator = conditionState.operator;
-    const currentCustomOperator = config.operators.find(
+    const currentCustomOperator = config?.operators?.find(
       (op) => op.id === operator
     );
-    return currentCustomOperator.enableMultiselect;
+    return currentCustomOperator?.isMultiSelect;
   };
 
   const multiSelectable =

diff --git a/packages/ibm-products/src/components/ConditionBuilder/assets/SampleData.js b/packages/ibm-products/src/components/ConditionBuilder/assets/SampleData.js
@@ -183,3 +183,37 @@ export const sampleDataStructure_nonHierarchical = {
   ],
   operator: 'or',
 };
+
+export const intialStateWithCustomOperators = {
+  operator: 'or',
+  groups: [
+    {
+      groupOperator: 'and',
+      statement: 'ifAll',
+      id: 'e1c37cb2-3e11-4eb6-937a-b9add468345b',
+      conditions: [
+        {
+          property: 'continent',
+          operator: 'hasValues',
+          value: [
+            {
+              label: 'Africa',
+              id: 'Africa',
+            },
+            {
+              label: 'Antarctica',
+              id: 'Antarctica',
+            },
+          ],
+          id: 'b7720ec9-e52a-4a7b-90c1-b4aa3c55daeb',
+        },
+        {
+          property: 'id',
+          operator: 'hasValue',
+          value: 'test',
+          id: 'eba8a891-7203-4b22-bf44-c4a9f0c80c4b',
+        },
+      ],
+    },
+  ],
+};