chore(Conditionbuilder): typescript migration (carbon-design-system#5841

) * feat(conditionbuilder): design review changes 2 * feat(conditionBuilder): test case fix for delete conditions * fix(ConditionBuilder): incomplete state icon and text order * chore(ConditionBuilder): add typescript for condition builder files * chore(ConditionBuilder): add typescript for condition builder files2 * chore(conditionbuilder): type correction * feat(Conditionbuilder): review comments1
amal-k-joy · Aug 20, 2024 · 4d2e6e8 · 4d2e6e8
1 parent 93489fa
commit 4d2e6e8
Show file tree

Hide file tree

Showing 20 changed files with 701 additions and 217 deletions.
diff --git a/...ges/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss b/...ges/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss
@@ -263,25 +263,27 @@ $colors: (
   align-self: center;
   margin-left: auto;
 }
-.#{$block-class}__add-button-wrapper > :nth-child(1) {
-  @include actions-animation(-100%);
-}
-.#{$block-class}__add-button-wrapper > :nth-child(2) {
-  @include actions-animation(-200%);
-}
-
-.#{$block-class}__condition-block:focus-within:first-child
-  .#{$block-class}__add-button-wrapper
-  > span,
-.#{$block-class}__condition--interacting
-  .#{$block-class}__add-button-wrapper
-  > span {
-  z-index: 0;
-  opacity: 1;
-  pointer-events: all;
-  transform: translateX(0);
-  /* stylelint-disable-next-line carbon/motion-easing-use */
-  transition: transform motion(exit, productive) $duration-fast-02;
+.#{$block-class}__content-container {
+  .#{$block-class}__add-button-wrapper > :nth-child(1) {
+    @include actions-animation(-100%);
+  }
+  .#{$block-class}__add-button-wrapper > :nth-child(2) {
+    @include actions-animation(-200%);
+  }
+
+  .#{$block-class}__condition-block:focus-within:first-child
+    .#{$block-class}__add-button-wrapper
+    > span,
+  .#{$block-class}__condition--interacting
+    .#{$block-class}__add-button-wrapper
+    > span {
+    z-index: 0;
+    opacity: 1;
+    pointer-events: all;
+    transform: translateX(0);
+    /* stylelint-disable-next-line carbon/motion-easing-use */
+    transition: transform motion(exit, productive) $duration-fast-02;
+  }
 }
 
 .#{$block-class}__invalid-input {

diff --git a/...nBuilder/ConditionBlock/ConditionBlock.js → ...Builder/ConditionBlock/ConditionBlock.tsx b/...nBuilder/ConditionBlock/ConditionBlock.js → ...Builder/ConditionBlock/ConditionBlock.tsx
@@ -27,17 +27,50 @@ import ConditionBuilderAdd from '../ConditionBuilderAdd/ConditionBuilderAdd';
 import { ItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption';
 import { ItemOptionForValueField } from '../ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField';
 import { useTranslations } from '../utils/useTranslations';
+import {
+  Condition,
+  ConditionGroup,
+  LogicalOperator,
+  Property,
+  PropertyConfig,
+  PropertyConfigCustom,
+} from '../ConditionBuilder.types';
 
 /**
  * This component build each block of condition consisting of property, operator value and close button.
  */
 
-const ConditionBlock = (props) => {
-  const { property, value, operator } = props.condition;
+interface ConditionBlockProps {
+  condition?: Condition;
+  onRemove: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onChange: (condition: Condition) => void;
+  onConnectorOperatorChange?: (op: string) => void;
+  onStatementChange?: (v: string) => void;
+  addConditionHandler?: (conditionIndex: number) => void;
+  addConditionSubGroupHandler?: (conditionIndex: number) => void;
+  hideConditionSubGroupPreviewHandler?: () => void;
+  showConditionSubGroupPreviewHandler?: () => void;
+  hideConditionPreviewHandler?: () => void;
+  showConditionPreviewHandler?: () => void;
+  conjunction?: LogicalOperator;
+  isStatement?: boolean;
+  group: ConditionGroup;
+  conditionIndex: number;
+  aria: {
+    level: number;
+    posinset: number;
+    setsize?: number;
+  };
+  isLastCondition: (
+    index: number,
+    conditions: (ConditionGroup | Condition)[]
+  ) => void;
+}
+const ConditionBlock = (props: ConditionBlockProps) => {
   const {
     onRemove,
     onChange,
-    condition,
+    condition = {},
     conjunction,
     onConnectorOperatorChange,
     isStatement,
@@ -53,6 +86,7 @@ const ConditionBlock = (props) => {
     showConditionPreviewHandler,
     isLastCondition,
   } = props;
+  const { property, value, operator } = condition;
   const { inputConfig, variant, conditionBuilderRef } = useContext(
     ConditionBuilderContext
   );
@@ -77,13 +111,15 @@ const ConditionBlock = (props) => {
   //filtering the current property to access its properties and config options
   const getCurrentConfig = (property) => {
     return (
-      inputConfig.properties?.find(
+      inputConfig?.properties?.find(
         (eachProperty) => eachProperty.id == property
       ) ?? {}
     );
   };
 
-  const { icon, type, config, label } = getCurrentConfig(property);
+  const { icon, type, config, label }: Property = getCurrentConfig(
+    property
+  ) as Property;
 
   //Below possible input types expected for value field.
   const itemComponents = {
@@ -92,10 +128,10 @@ const ConditionBlock = (props) => {
     date: ConditionBuilderItemDate,
     time: ConditionBuilderItemTime,
     option: ItemOptionForValueField,
-    custom: config?.component,
+    custom: (config as PropertyConfigCustom['config'])?.component,
     textarea: ConditionBuilderItemText,
   };
-  const ItemComponent = property ? itemComponents[type] : null;
+  const ItemComponent = itemComponents[type];
 
   const showAllActionsHandler = () => {
     setShowAllActions(true);
@@ -105,7 +141,7 @@ const ConditionBlock = (props) => {
   };
   const onStatementChangeHandler = (v, evt) => {
     focusThisField(evt, conditionBuilderRef);
-    onStatementChange(v);
+    onStatementChange?.(v);
   };
 
   const onPropertyChangeHandler = (newProperty) => {
@@ -147,8 +183,8 @@ const ConditionBlock = (props) => {
     return isLastCondition(conditionIndex, conditions);
   };
   const getOperators = () => {
-    if (config?.operators) {
-      return config.operators;
+    if ((config as PropertyConfigCustom['config'])?.operators) {
+      return (config as PropertyConfigCustom['config']).operators;
     }
     return operatorConfig.filter(
       (operator) => operator.type.indexOf(type) != -1 || operator.type == 'all'
@@ -210,7 +246,7 @@ const ConditionBlock = (props) => {
         <ConditionConnector
           className={`${blockClass}__gap`}
           operator={conjunction}
-          onChange={(op) => onConnectorOperatorChange(op)}
+          onChange={(op) => onConnectorOperatorChange?.(op)}
         />
       ) : (
         <div role="gridcell" />
@@ -241,7 +277,7 @@ const ConditionBlock = (props) => {
       <ConditionBuilderItem
         label={label ?? condition?.property}
         title={propertyText}
-        renderIcon={icon ?? null}
+        renderIcon={icon ?? undefined}
         className={`${blockClass}__property-field`}
         data-name="propertyField"
         condition={condition}
@@ -254,7 +290,7 @@ const ConditionBlock = (props) => {
             label: propertyText,
           }}
           onChange={onPropertyChangeHandler}
-          config={{ options: inputConfig.properties }}
+          config={{ options: inputConfig?.properties }}
         />
       </ConditionBuilderItem>
       {checkIsValid(property) && (
@@ -286,7 +322,7 @@ const ConditionBlock = (props) => {
           showToolTip={true}
           data-name="valueField"
           condition={condition}
-          config={config}
+          config={config as PropertyConfig}
           onChange={onValueChangeHandler}
           renderChildren={renderChildren}
         />
@@ -309,10 +345,10 @@ const ConditionBlock = (props) => {
       {manageActionButtons(conditionIndex, group.conditions) && (
         <ConditionBuilderAdd
           onClick={() => {
-            addConditionHandler(conditionIndex);
+            addConditionHandler?.(conditionIndex);
           }}
           addConditionSubGroupHandler={() => {
-            addConditionSubGroupHandler(conditionIndex);
+            addConditionSubGroupHandler?.(conditionIndex);
           }}
           showConditionSubGroupPreviewHandler={
             showConditionSubGroupPreviewHandler

diff --git a/...ents/ConditionBuilder/ConditionBuilder.js → ...nts/ConditionBuilder/ConditionBuilder.tsx b/...ents/ConditionBuilder/ConditionBuilder.js → ...nts/ConditionBuilder/ConditionBuilder.tsx
@@ -6,8 +6,9 @@
  */
 
 // Import portions of React that are needed.
-import React, { useRef } from 'react';
+import React, { ForwardedRef, useRef } from 'react';
 
+/**@ts-ignore */
 import { VStack } from '@carbon/react';
 
 // Other standard imports.
@@ -22,6 +23,8 @@ import { pkg } from '../../settings';
 import { blockClass } from './ConditionBuilderContext/DataConfigs';
 import { handleKeyDown } from './utils/handleKeyboardEvents';
 
+import { ConditionBuilderProps } from './ConditionBuilder.types';
+
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -50,9 +53,6 @@ const componentName = 'ConditionBuilder';
 export let ConditionBuilder = React.forwardRef(
   (
     {
-      // The component props, in alphabetical order (for consistency).
-
-      // children /* TODO: remove if not needed. */,
       className,
       inputConfig,
       startConditionLabel,
@@ -65,10 +65,10 @@ export let ConditionBuilder = React.forwardRef(
       actions,
       translateWithId,
       ...rest
-    },
-    ref
+    }: ConditionBuilderProps,
+    ref: ForwardedRef<HTMLDivElement>
   ) => {
-    const localRef = useRef();
+    const localRef = useRef(null);
     const conditionBuilderRef = ref || localRef;
 
     const handleKeyDownHandler = (evt) => {
@@ -134,6 +134,7 @@ ConditionBuilder.propTypes = {
   /**
    * optional array of actions
    */
+  /**@ts-ignore */
   actions: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
@@ -177,16 +178,17 @@ ConditionBuilder.propTypes = {
    * Optional prop if you want to pass a saved condition state.
    *  This object should respect the structure of condition state that is available in getConditionState callback
    */
+  /**@ts-ignore */
   initialState: PropTypes.shape({
     groups: PropTypes.arrayOf(
       PropTypes.shape({
-        groupOperator: PropTypes.string.isRequired,
-        statement: PropTypes.string.isRequired,
+        groupOperator: PropTypes.string,
+        statement: PropTypes.string,
         conditions: PropTypes.arrayOf(
           PropTypes.oneOfType([
             PropTypes.shape({
-              property: PropTypes.string.isRequired,
-              operator: PropTypes.string.isRequired,
+              property: PropTypes.string,
+              operator: PropTypes.string,
               value: PropTypes.oneOfType([
                 PropTypes.string,
                 PropTypes.arrayOf(
@@ -213,6 +215,7 @@ ConditionBuilder.propTypes = {
    * This is a mandatory prop that defines the input to the condition builder.
    
    */
+  /**@ts-ignore */
   inputConfig: PropTypes.shape({
     properties: PropTypes.arrayOf(
       PropTypes.shape({
@@ -263,6 +266,7 @@ ConditionBuilder.propTypes = {
    * The message id will be one of [   "ifText","addConditionText",   "addConditionGroupText",   "addSubgroupText",   "conditionText",   "propertyText",   "operatorText",   "valueText",   "connectorText",   "conditionRowText","conditionRowGroupText","conditionBuilderText","actionSectionText",   "removeConditionText",   "addConditionRowText",   "startText",   "endText",   "clearSearchText",   "actionsText",   "then",   "removeActionText",   "addActionText",   "invalidText",  "invalidNumberWarnText"]
 ]
    */
+  /**@ts-ignore */
   translateWithId: PropTypes.func,
   /* TODO: add types and DocGen for all props. */
   /**