From ecc6a9680525277a15d9b7c1baed6b401d470294 Mon Sep 17 00:00:00 2001 From: heswell Date: Tue, 1 Oct 2024 17:26:50 +0100 Subject: [PATCH] fix table fixed size rendering --- .../vuu-data-react/src/data-editing/index.ts | 1 + .../src/server-proxy/viewport.ts | 1 - vuu-ui/packages/vuu-table/src/Row.css | 6 +- vuu-ui/packages/vuu-table/src/Table.tsx | 4 ++ .../useMeasuredContainer.ts | 62 ++++++++++--------- .../src/examples/Table/SIMUL.examples.tsx | 33 +++++----- 6 files changed, 59 insertions(+), 48 deletions(-) diff --git a/vuu-ui/packages/vuu-data-react/src/data-editing/index.ts b/vuu-ui/packages/vuu-data-react/src/data-editing/index.ts index fdec645cc..4480e5109 100644 --- a/vuu-ui/packages/vuu-data-react/src/data-editing/index.ts +++ b/vuu-ui/packages/vuu-data-react/src/data-editing/index.ts @@ -2,3 +2,4 @@ export * from "./get-data-item-edit-control"; export * from "./EditForm"; export * from "./edit-rule-validation-checker"; export * from "./UnsavedChangesReport"; +export * from "./useEditForm"; diff --git a/vuu-ui/packages/vuu-data-remote/src/server-proxy/viewport.ts b/vuu-ui/packages/vuu-data-remote/src/server-proxy/viewport.ts index 6990ac395..ae7816428 100644 --- a/vuu-ui/packages/vuu-data-remote/src/server-proxy/viewport.ts +++ b/vuu-ui/packages/vuu-data-remote/src/server-proxy/viewport.ts @@ -233,7 +233,6 @@ export class Viewport { this.aggregations = aggregations; this.bufferSize = bufferSize; this.#clientRange = range; - console.log(`Viewport clientRange initialised to ${JSON.stringify(range)}`); this.clientViewportId = viewport; this.columns = columns; this.filter = filter; diff --git a/vuu-ui/packages/vuu-table/src/Row.css b/vuu-ui/packages/vuu-table/src/Row.css index 2c8d51469..943c77a46 100644 --- a/vuu-ui/packages/vuu-table/src/Row.css +++ b/vuu-ui/packages/vuu-table/src/Row.css @@ -1,13 +1,17 @@ .vuuTableRow { background: var(--row-background, var(--table-background)); - color: var(--salt-content-secondary-foreground); border-bottom: 1px solid var(--row-borderColor, var(--table-background)); box-sizing: border-box; + color: var(--salt-content-secondary-foreground); + contain: strict; + contain-intrinsic-height: var(--row-height); + content-visibility: auto; height: var(--row-height); line-height: var(--row-height); position: absolute; top: 0; white-space: nowrap; + width: 100%; } .vuuTableRow-proxy { diff --git a/vuu-ui/packages/vuu-table/src/Table.tsx b/vuu-ui/packages/vuu-table/src/Table.tsx index 3626e4ab2..b184b5132 100644 --- a/vuu-ui/packages/vuu-table/src/Table.tsx +++ b/vuu-ui/packages/vuu-table/src/Table.tsx @@ -338,6 +338,7 @@ export const Table = forwardRef(function Table( customHeader, dataSource, disableFocus, + height, highlightedIndex, id, navigationStyle, @@ -357,6 +358,7 @@ export const Table = forwardRef(function Table( showColumnHeaderMenus, showPaginationControls, style: styleProp, + width, ...htmlAttributes }: TableProps, forwardedRef: ForwardedRef, @@ -397,6 +399,7 @@ export const Table = forwardRef(function Table( className={cx(classBase, classNameProp, { [`${classBase}-pagination`]: showPaginationControls, })} + height={height} id={id} onResize={setSize} ref={useForkRef(containerRef, forwardedRef)} @@ -405,6 +408,7 @@ export const Table = forwardRef(function Table( "--row-height-prop": rowHeight > 0 ? `${rowHeight}px` : undefined, } as CSSProperties } + width={width} > {size && rowHeight && (footerHeight || showColumnHeaders !== true) ? ( diff --git a/vuu-ui/packages/vuu-ui-controls/src/measured-container/useMeasuredContainer.ts b/vuu-ui/packages/vuu-ui-controls/src/measured-container/useMeasuredContainer.ts index 12d52e79d..efb2955d2 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/measured-container/useMeasuredContainer.ts +++ b/vuu-ui/packages/vuu-ui-controls/src/measured-container/useMeasuredContainer.ts @@ -6,7 +6,7 @@ import { useEffect, useMemo, useRef, - useState + useState, } from "react"; import { MeasuredContainerProps } from "./MeasuredContainer"; import { useResizeObserver, ResizeHandler } from "./useResizeObserver"; @@ -42,8 +42,6 @@ interface MeasuredState { const isNumber = (val: unknown): val is number => Number.isFinite(val); -const FULL_SIZE: CssSize = { height: "100%", width: "auto" }; - export interface MeasuredContainerHookResult { containerRef: RefObject; cssSize: CssSize; @@ -53,18 +51,31 @@ export interface MeasuredContainerHookResult { export const reduceSizeHeight = ( size: MeasuredSize, - value: number + value: number, ): MeasuredSize => { if (value === 0) { return size; } else { return { height: size.height - value, - width: size.width + width: size.width, }; } }; +const getInitialValue = ( + value: number | string | undefined, + defaultValue: "auto" | "100%", +) => { + if (isValidNumber(value)) { + return `${value}px`; + } else if (typeof value === "string") { + return value; + } else { + return defaultValue; + } +}; + // If (outer) height and width are known at initialisation (i.e. they // were passed as props), use as initial values for inner size. If there // is no border on Table, these values will not change. If there is a border, @@ -73,19 +84,10 @@ const getInitialCssSize = ( height?: number | string, width?: number | string, ): CssSize => { - if (isValidNumber(height) && isValidNumber(width)) { - return { - height: `${height}px`, - width: `${width}px` - }; - } else if (typeof height === "string" || typeof width === "string") { - return { - height: height ?? "100%", - width: width ?? "auto" - }; - } else { - return FULL_SIZE; - } + return { + height: getInitialValue(height, "100%"), + width: getInitialValue(width, "auto"), + }; }; const getInitialInnerSize = ( @@ -95,7 +97,7 @@ const getInitialInnerSize = ( if (isValidNumber(height) && isValidNumber(width)) { return { height, - width + width, }; } }; @@ -105,7 +107,7 @@ export const useMeasuredContainer = ({ defaultWidth = 0, height, onResize: onResizeProp, - width + width, }: MeasuredProps): MeasuredContainerHookResult => { const containerRef = useRef(null); const [size, setSize] = useState({ @@ -113,8 +115,8 @@ export const useMeasuredContainer = ({ inner: getInitialInnerSize(height, width), outer: { height: height ?? "100%", - width: width ?? "auto" - } + width: width ?? "auto", + }, }); const fixedHeight = typeof height === "number"; const fixedWidth = typeof width === "number"; @@ -148,7 +150,7 @@ export const useMeasuredContainer = ({ return { ...currentSize, outer: { height, width }, - inner: { height: height - heightDiff, width: width - widthDiff } + inner: { height: height - heightDiff, width: width - widthDiff }, }; } } @@ -171,8 +173,8 @@ export const useMeasuredContainer = ({ outer, inner: { width: Math.floor(clientWidth) || defaultWidth, - height - } + height, + }, }; } else if ( fixedWidth && @@ -184,8 +186,8 @@ export const useMeasuredContainer = ({ outer, inner: { height: Math.floor(clientHeight) || defaultHeight, - width - } + width, + }, }; } else if ( isNumber(clientHeight) && @@ -197,8 +199,8 @@ export const useMeasuredContainer = ({ outer, inner: { width: Math.floor(clientWidth) || defaultWidth, - height: Math.floor(clientHeight) || defaultHeight - } + height: Math.floor(clientHeight) || defaultHeight, + }, }; } @@ -221,6 +223,6 @@ export const useMeasuredContainer = ({ containerRef, cssSize: size.css, outerSize: size.outer, - innerSize: size.inner + innerSize: size.inner, }; }; diff --git a/vuu-ui/showcase/src/examples/Table/SIMUL.examples.tsx b/vuu-ui/showcase/src/examples/Table/SIMUL.examples.tsx index bc19040e1..faf82519f 100644 --- a/vuu-ui/showcase/src/examples/Table/SIMUL.examples.tsx +++ b/vuu-ui/showcase/src/examples/Table/SIMUL.examples.tsx @@ -5,7 +5,7 @@ import { Table, TableProps } from "@finos/vuu-table"; import type { ColumnDescriptor, ColumnLayout, - DefaultColumnConfiguration + DefaultColumnConfiguration, } from "@finos/vuu-table-types"; import { applyDefaultColumnConfig } from "@finos/vuu-utils"; import { useCallback, useMemo } from "react"; @@ -18,7 +18,7 @@ let displaySequence = 1; const getDefaultColumnConfig = ( tableName: string, - columnName: string + columnName: string, ): Partial | undefined => { switch (columnName) { case "ask": @@ -28,10 +28,10 @@ const getDefaultColumnConfig = ( name: "number", renderer: { name: "vuu.price-move-background", - flashStyle: "arrow-bg" + flashStyle: "arrow-bg", }, - formatting: { decimals: 2, zeroPad: true } - } + formatting: { decimals: 2, zeroPad: true }, + }, }; case "askSize": case "bidSize": @@ -40,10 +40,10 @@ const getDefaultColumnConfig = ( name: "number", renderer: { name: "vuu.price-move-background", - flashStyle: "bg-only" + flashStyle: "bg-only", }, - formatting: { decimals: 0 } - } + formatting: { decimals: 0 }, + }, }; case "last": @@ -52,8 +52,8 @@ const getDefaultColumnConfig = ( return { type: { name: "number", - formatting: { decimals: 2, zeroPad: true } - } + formatting: { decimals: 2, zeroPad: true }, + }, }; case "wishlist": return { editable: true }; @@ -64,7 +64,7 @@ export const SimulTable = ({ columnLayout, getDefaultColumnConfig, height = 625, - renderBufferSize = 0, + renderBufferSize = 10, rowClassNameGenerators, tableName = "instruments", ...props @@ -83,17 +83,18 @@ export const SimulTable = ({ columns: applyDefaultColumnConfig(schema, getDefaultColumnConfig), rowClassNameGenerators, rowSeparators: true, - zebraStripes: true + zebraStripes: true, }, - dataSource: vuuModule("SIMUL").createDataSource(tableName) + dataSource: + vuuModule("SIMUL").createDataSource(tableName), }), [ columnLayout, getDefaultColumnConfig, rowClassNameGenerators, schema, - tableName - ] + tableName, + ], ); const handleConfigChange = useCallback(() => { @@ -101,7 +102,7 @@ export const SimulTable = ({ }, []); const { buildViewserverMenuOptions, handleMenuAction } = useVuuMenuActions({ - dataSource: tableProps.dataSource + dataSource: tableProps.dataSource, }); return (