fix: isInsideTable check

razorpay · Jul 12, 2024 · ef5a7f1 · ef5a7f1
1 parent a0a61b2
commit ef5a7f1
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 33 deletions.
diff --git a/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.web.tsx b/packages/blade/src/components/Input/BaseInput/BaseInputTagSlot.web.tsx
@@ -9,7 +9,7 @@ import { useIsomorphicLayoutEffect } from '~utils/useIsomorphicLayoutEffect';
 import { useIsMobile } from '~utils/useIsMobile';
 import { MetaConstants } from '~utils/metaAttribute';
 import { size as sizeToken } from '~tokens/global';
-import { useTableContext } from '~components/Table/TableContext';
+import { useTableEditableCell } from '~components/Table/TableEditableCellContext';
 
 const MINUMUM_INPUT_SPACE = 60;
 const PLUS_X_MORE_TEXT_WIDTH = 60;
@@ -32,11 +32,10 @@ const useVisibleTagsCount = ({
 }): number => {
   const [visibleTagsCount, setVisibleTagsCount] = React.useState(0);
   const visibleTagsCountStateRef = React.useRef<number>(0);
-  const { rowDensity } = useTableContext();
-  const isInsideTable = Boolean(rowDensity);
+  const { isInsideTableEditableCell } = useTableEditableCell();
 
   useIsomorphicLayoutEffect(() => {
-    if (!tags || labelPrefix || isInsideTable) {
+    if (!tags || labelPrefix || isInsideTableEditableCell) {
       setVisibleTagsCount(0);
       return;
     }
@@ -154,8 +153,7 @@ const BaseInputTagSlot = ({
 }: BaseInputTagSlotProps): React.ReactElement => {
   const hasTags = tags && tags.length > 0;
   const slotRef = React.useRef<HTMLDivElement>(null);
-  const { rowDensity } = useTableContext();
-  const isInsideTable = Boolean(rowDensity);
+  const { isInsideTableEditableCell } = useTableEditableCell();
   const visibleTagsCount = useVisibleTagsCount({
     slotRef,
     tags,
@@ -243,7 +241,7 @@ const BaseInputTagSlot = ({
         setShouldIgnoreBlurAnimation?.(false);
       }}
     >
-      {isInsideTable && tags && tags.length > 0 ? (
+      {isInsideTableEditableCell && tags && tags.length > 0 ? (
         <SelectedCountText isDisabled={isDisabled}>
           {getSelectedTextWithoutTags({ items: tags.length, labelPrefix })}
         </SelectedCountText>

diff --git a/packages/blade/src/components/Input/BaseInput/baseInputStyles.ts b/packages/blade/src/components/Input/BaseInput/baseInputStyles.ts
@@ -204,7 +204,7 @@ export const getBaseInputStyles = ({
 
   const isDropdownWithTags = isDropdownTrigger && hasTags;
   const isReactNative = getPlatformType() === 'react-native';
-  const shouldHaveFlexibleHeight = (isTextArea || isDropdownWithTags) && !isTableInputCell;
+  const shouldHaveFlexibleHeight = isTextArea || isDropdownWithTags;
 
   return {
     ...(valueComponentType === 'heading'

diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx b/packages/blade/src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx
@@ -17,6 +17,7 @@ import {
   tableEditableCellRowDensityToInputSizeMap,
   validationStateToInputTrailingIconMap,
 } from '~components/Table/tokens';
+import { useTableEditableCell } from '~components/Table/TableEditableCellContext';
 
 const useControlledDropdownInput = (
   props: Pick<
@@ -149,7 +150,7 @@ const _BaseDropdownInputTrigger = (
     changeCallbackTriggerer,
   } = useDropdown();
   const { rowDensity } = useTableContext();
-  const isInsideTable = Boolean(rowDensity);
+  const { isInsideTableEditableCell } = useTableEditableCell();
 
   const dropdownTriggerPlaceholder = props.placeholder ?? 'Select Option';
   const isAutoCompleteInHeader = !props.isSelectInput && hasAutoCompleteInBottomSheetHeader;
@@ -312,7 +313,8 @@ const _BaseDropdownInputTrigger = (
       onKeyDown={props.onTriggerKeydown}
       size={props.size}
       trailingInteractionElement={
-        isAutoCompleteInHeader || (isInsideTable && props.validationState !== 'none') ? null : (
+        isAutoCompleteInHeader ||
+        (isInsideTableEditableCell && props.validationState !== 'none') ? null : (
           <InputChevronIcon
             onClick={() => {
               if (!props.isDisabled) {
@@ -328,7 +330,7 @@ const _BaseDropdownInputTrigger = (
           />
         )
       }
-      {...(isInsideTable ? tableInputProps : undefined)}
+      {...(isInsideTableEditableCell ? tableInputProps : undefined)}
     />
   );
 };

diff --git a/packages/blade/src/components/Table/TableEditableCell.web.tsx b/packages/blade/src/components/Table/TableEditableCell.web.tsx
@@ -17,6 +17,7 @@ import { BaseInput } from '~components/Input/BaseInput';
 import { castWebType } from '~utils';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { Dropdown } from '~components/Dropdown';
+import { TableEditableCellContext } from './TableEditableCellContext';
 
 export const StyledEditableCell = styled(StyledCell)<{
   rowDensity: NonNullable<TableProps<unknown>['rowDensity']>;
@@ -134,32 +135,34 @@ const TableEditableDropdownCell = (
   const { rowDensity, showStripedRows, backgroundColor } = useTableContext();
 
   return (
-    <StyledEditableCell
-      role="cell"
-      $backgroundColor={backgroundColor}
-      rowDensity={rowDensity}
-      {...metaAttribute({ name: MetaConstants.TableCell })}
-    >
-      <BaseBox
-        className="cell-wrapper-base"
-        display="flex"
-        alignItems="center"
-        height="100%"
-        width="100%"
+    <TableEditableCellContext.Provider value={{ isInsideTableEditableCell: true }}>
+      <StyledEditableCell
+        role="cell"
+        $backgroundColor={backgroundColor}
+        rowDensity={rowDensity}
+        {...metaAttribute({ name: MetaConstants.TableCell })}
       >
-        <CellWrapper
-          className="cell-wrapper"
-          rowDensity={rowDensity}
-          showStripedRows={showStripedRows}
+        <BaseBox
+          className="cell-wrapper-base"
           display="flex"
           alignItems="center"
-          flex={1}
-          hasPadding={false}
+          height="100%"
+          width="100%"
         >
-          <Dropdown _width="100%" margin="spacing.2" {...dropdownProps} />
-        </CellWrapper>
-      </BaseBox>
-    </StyledEditableCell>
+          <CellWrapper
+            className="cell-wrapper"
+            rowDensity={rowDensity}
+            showStripedRows={showStripedRows}
+            display="flex"
+            alignItems="center"
+            flex={1}
+            hasPadding={false}
+          >
+            <Dropdown _width="100%" margin="spacing.2" {...dropdownProps} />
+          </CellWrapper>
+        </BaseBox>
+      </StyledEditableCell>
+    </TableEditableCellContext.Provider>
   );
 };
 

diff --git a/packages/blade/src/components/Table/TableEditableCellContext.tsx b/packages/blade/src/components/Table/TableEditableCellContext.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const TableEditableCellContext = React.createContext<{ isInsideTableEditableCell: boolean }>({
+  isInsideTableEditableCell: false,
+});
+
+const useTableEditableCell = () => {
+  const contextValue = React.useContext(TableEditableCellContext);
+  return contextValue;
+};
+
+export { TableEditableCellContext, useTableEditableCell };