diff --git a/src/pivot-table/components/cells/ColumnAdjuster.tsx b/src/pivot-table/components/cells/ColumnAdjuster.tsx index d65d0658..40bb21be 100644 --- a/src/pivot-table/components/cells/ColumnAdjuster.tsx +++ b/src/pivot-table/components/cells/ColumnAdjuster.tsx @@ -3,6 +3,7 @@ import React, { useMemo, useState } from "react"; import { ColumnWidthType } from "../../../types/QIX"; import type { AdjusterCellInfo, DataModel } from "../../../types/types"; import { GRID_BORDER } from "../../constants"; +import { useBaseContext } from "../../contexts/BaseProvider"; import { useSelectionsContext } from "../../contexts/SelectionsProvider"; import { ColumnWidthValues } from "../../hooks/use-column-width"; import { CELL_PADDING } from "../shared-styles"; @@ -20,10 +21,11 @@ interface AdjusterProps { * While dragging this components follows the pointer, and on mouse up all column widths are updated. */ const ColumnAdjuster = ({ cellInfo, columnWidth, dataModel, isLastColumn }: AdjusterProps) => { + const { interactions } = useBaseContext(); const { isActive } = useSelectionsContext(); const [, forceRerender] = useState({}); const positionAdjustment = isLastColumn ? CELL_PADDING : CELL_PADDING + GRID_BORDER; - const shouldRender = !isActive && cellInfo.canBeResized; + const shouldRender = cellInfo.canBeResized && !!interactions.active && !isActive; const tempWidth = useMemo(() => ({ initWidth: columnWidth, columnWidth, initX: 0 }), [columnWidth]); diff --git a/src/pivot-table/components/cells/__tests__/ColumnAdjuster.test.tsx b/src/pivot-table/components/cells/__tests__/ColumnAdjuster.test.tsx index 063daae6..a9eff537 100644 --- a/src/pivot-table/components/cells/__tests__/ColumnAdjuster.test.tsx +++ b/src/pivot-table/components/cells/__tests__/ColumnAdjuster.test.tsx @@ -1,3 +1,4 @@ +import type { stardust } from "@nebula.js/stardust"; import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import React from "react"; import { ColumnWidthType } from "../../../../types/QIX"; @@ -9,6 +10,8 @@ describe("", () => { let cellInfo: AdjusterCellInfo; let columnWidth: number; let dataModel: DataModel | undefined; + let selections: ExtendedSelections; + let interactions: stardust.Interactions; beforeEach(() => { columnWidth = 100; @@ -16,14 +19,16 @@ describe("", () => { applyColumnWidth: jest.fn(), } as unknown as DataModel; cellInfo = { canBeResized: true } as AdjusterCellInfo; + interactions = { active: true }; + selections = { isActive: () => false } as ExtendedSelections; }); - const renderAdjuster = (isActive = false) => + const renderAdjuster = () => render( , { wrapper: ({ children }) => ( - isActive } as unknown as ExtendedSelections}> + {children} ), @@ -37,15 +42,24 @@ describe("", () => { expect(screen.queryByTestId("sn-pivot-table-column-adjuster")).toBeInTheDocument(); }); - test("should not render ColumnAdjuster when isActive is true", () => { - renderAdjuster(true); + test("should not render ColumnAdjuster when canBeResized is false", () => { + cellInfo = { canBeResized: false } as AdjusterCellInfo; + renderAdjuster(); + expect(screen.queryByTestId("sn-pivot-table-column-adjuster")).not.toBeInTheDocument(); }); - test("should not render ColumnAdjuster when canBeResized is false", () => { - cellInfo = { canBeResized: false } as AdjusterCellInfo; + test("should not render ColumnAdjuster when isActive is true", () => { + selections.isActive = () => true; + renderAdjuster(); + + expect(screen.queryByTestId("sn-pivot-table-column-adjuster")).not.toBeInTheDocument(); + }); + test("should not render ColumnAdjuster when interactions.active is false", () => { + interactions.active = false; renderAdjuster(); + expect(screen.queryByTestId("sn-pivot-table-column-adjuster")).not.toBeInTheDocument(); });