diff --git a/src/pivot-table/__tests__/test-with-providers.tsx b/src/pivot-table/__tests__/test-with-providers.tsx index d37019f1..2fe126e7 100644 --- a/src/pivot-table/__tests__/test-with-providers.tsx +++ b/src/pivot-table/__tests__/test-with-providers.tsx @@ -4,7 +4,7 @@ import React from "react"; import type { App, Model } from "../../types/QIX"; import type { ExtendedSelections } from "../../types/types"; import type { RootProps } from "../Root"; -import { DEFAULT_CELL_HEIGHT } from "../constants"; +import { CELL_PADDING_HEIGHT, DEFAULT_CELL_HEIGHT } from "../constants"; import BaseProvider from "../contexts/BaseProvider"; import SelectionsProvider from "../contexts/SelectionsProvider"; import StyleProvider from "../contexts/StyleProvider"; @@ -77,6 +77,8 @@ const TestWithProvider = (props: Props) => { }, headerCellHeight: DEFAULT_CELL_HEIGHT, contentCellHeight: DEFAULT_CELL_HEIGHT, + contentRowHeight: DEFAULT_CELL_HEIGHT, + contentTextHeight: DEFAULT_CELL_HEIGHT - CELL_PADDING_HEIGHT, }, app = { getField: () => Promise.resolve() } as unknown as App, model = { applyPatches: () => Promise.resolve(), getLayout: () => Promise.resolve({}) } as unknown as Model, diff --git a/src/pivot-table/components/cells/DimensionValue/ExpandOrCollapseIcon.tsx b/src/pivot-table/components/cells/DimensionValue/ExpandOrCollapseIcon.tsx index da4c2917..8616e124 100644 --- a/src/pivot-table/components/cells/DimensionValue/ExpandOrCollapseIcon.tsx +++ b/src/pivot-table/components/cells/DimensionValue/ExpandOrCollapseIcon.tsx @@ -45,7 +45,7 @@ const ExpandOrCollapseIcon = ({ cell, dataModel, isLeftColumn, isCellSelected }: const disableOnClickHandler = !interactions.active || isActive || !dataModel; const color = getColor({ cell, styleService, isCellSelected }); const opacity = isActive ? 0.4 : 1.0; - const halfCellHeight = styleService.contentCellHeight / 2; + const halfCellHeight = styleService.contentRowHeight / 2; const Icon = cell.ref.qCanExpand ? PlusOutlineIcon : MinusOutlineIcon; let expandOrCollapse: ExpandOrCollapser | undefined; diff --git a/src/pivot-table/components/cells/DimensionValue/Text.tsx b/src/pivot-table/components/cells/DimensionValue/Text.tsx index 16905681..b691edc0 100644 --- a/src/pivot-table/components/cells/DimensionValue/Text.tsx +++ b/src/pivot-table/components/cells/DimensionValue/Text.tsx @@ -1,6 +1,6 @@ import React, { type ReactNode } from "react"; import type { Cell, StyleService } from "../../../../types/types"; -import { DEFAULT_LINE_CLAMP, LINE_HEIGHT_COEFFICIENT } from "../../../constants"; +import { DEFAULT_LINE_CLAMP } from "../../../constants"; import { CELL_PADDING, getLineClampStyle, textStyle } from "../../shared-styles"; import { getColor, getFontStyle, getFontWeight, getTextDecoration } from "./utils/get-style"; @@ -12,11 +12,8 @@ type Props = { children: ReactNode; }; -const getMarginTop = (styleService: StyleService) => { - const textHeight = parseInt(styleService.dimensionValues.fontSize, 10) * LINE_HEIGHT_COEFFICIENT; - - return styleService.contentCellHeight / 2 - textHeight / 2; -}; +const getMarginTop = (styleService: StyleService) => + styleService.contentRowHeight / 2 - styleService.contentTextHeight / 2; const Text = ({ children, cell, styleService, isCellSelected, isLeftColumn }: Props): JSX.Element => ( ({ }, headerCellHeight: 24, contentCellHeight: 24, + contentRowHeight: 24, + contentTextHeight: 16, }); const StyleProvider = (): JSX.Element =>
; diff --git a/src/services/__tests__/style-service.test.ts b/src/services/__tests__/style-service.test.ts index 314f6542..62b921af 100644 --- a/src/services/__tests__/style-service.test.ts +++ b/src/services/__tests__/style-service.test.ts @@ -141,6 +141,8 @@ describe("style-service", () => { }, headerCellHeight: 32, contentCellHeight: 48, + contentRowHeight: 24, + contentTextHeight: 16, } as StyleService); }); @@ -207,6 +209,8 @@ describe("style-service", () => { }, headerCellHeight: 32, contentCellHeight: 56, + contentRowHeight: 28, + contentTextHeight: 20, } as StyleService); }); @@ -274,6 +278,8 @@ describe("style-service", () => { }, headerCellHeight: 32, contentCellHeight: 24, + contentRowHeight: 24, + contentTextHeight: 16, } as StyleService); }); }); diff --git a/src/services/style-service.ts b/src/services/style-service.ts index 8ef5e324..ebbd6cbb 100644 --- a/src/services/style-service.ts +++ b/src/services/style-service.ts @@ -238,6 +238,10 @@ const createStyleService = (theme: ExtendedTheme, layoutService: LayoutService): DEFAULT_CELL_HEIGHT, ); + styleService.contentRowHeight = styleService.contentCellHeight / lineClamp; + + styleService.contentTextHeight = styleService.contentRowHeight - CELL_PADDING_HEIGHT; + return styleService; }; diff --git a/src/types/types.ts b/src/types/types.ts index a1d43446..179d83a3 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -243,6 +243,8 @@ export type StyleService = ThemeStyling & { header: CellStyling & { hoverBackground: string; activeBackground: string }; headerCellHeight: number; contentCellHeight: number; + contentRowHeight: number; + contentTextHeight: number; }; export type ActivelySortedColumn = {