From 9e7f902a56e0416c4ae76d1893ff425fda74f354 Mon Sep 17 00:00:00 2001 From: Mattias Andersson Date: Fri, 13 Oct 2023 13:18:23 +0200 Subject: [PATCH] Update StandardTable to allow easy ways to reduce text size (#621) Co-authored-by: Johan Lindskogen --- .../components/StandardTableCell.tsx | 37 +++++++++------- .../standard-table/components/TextCell.tsx | 8 +++- .../config/StandardTableColumnConfig.ts | 12 +++++- .../config/StandardTableConfig.ts | 16 +++++++ .../editable-text-cell/EditableTextCell.tsx | 10 +++-- .../stories/StandardTable.stories.tsx | 42 +++++++++++++++++++ 6 files changed, 104 insertions(+), 21 deletions(-) diff --git a/packages/grid/src/features/standard-table/components/StandardTableCell.tsx b/packages/grid/src/features/standard-table/components/StandardTableCell.tsx index 77a9a83b0..6f6489076 100644 --- a/packages/grid/src/features/standard-table/components/StandardTableCell.tsx +++ b/packages/grid/src/features/standard-table/components/StandardTableCell.tsx @@ -20,6 +20,7 @@ import { getCellBorder } from "../util/CellBorderCalculator"; import { formatValueLabel } from "../util/LabelFormatter"; import { StandardTableCellUi } from "./StandardTableCellUi"; import { TextCell } from "./TextCell"; +import { DefaultStandardTableCellRenderer } from "../config/StandardTableColumnConfig"; export interface StandardTableCellProps { columnId: string; @@ -31,6 +32,11 @@ export interface StandardTableCellProps { disableBorderLeft?: boolean; } +const fallbackCellRenderer: DefaultStandardTableCellRenderer = ({ + label, + textSize, +}) => ; + export const StandardTableCell = React.memo(function StandardTableCell({ columnId, item, @@ -58,6 +64,9 @@ export const StandardTableCell = React.memo(function StandardTableCell({ return selectedIds.indexOf(itemKey) >= 0; }, [itemKey, selectedIds]); + const { defaultCellRenderer = fallbackCellRenderer, defaultTextSize } = + useStandardTableConfig(); + const { itemValueResolver, itemLabelFormatter, @@ -65,7 +74,7 @@ export const StandardTableCell = React.memo(function StandardTableCell({ minWidth, justifyContentCell = "flex-start", borderLeft, - renderCell, + renderCell = defaultCellRenderer, gridCellOptions: gridCellOptionsForColumn, isEditable, onChange, @@ -132,20 +141,17 @@ export const StandardTableCell = React.memo(function StandardTableCell({ const content = useMemo( () => - renderCell ? ( - renderCell({ - label, - value: itemValue, - item, - gridCell, - isEditable: editable, - isSelected, - zIndex: currentZIndex, - itemKey, - }) - ) : ( - - ), + renderCell({ + label, + value: itemValue, + item, + gridCell, + isEditable: editable, + isSelected, + zIndex: currentZIndex, + textSize: defaultTextSize, + itemKey, + }), [ renderCell, label, @@ -156,6 +162,7 @@ export const StandardTableCell = React.memo(function StandardTableCell({ isSelected, currentZIndex, itemKey, + defaultTextSize, ] ); diff --git a/packages/grid/src/features/standard-table/components/TextCell.tsx b/packages/grid/src/features/standard-table/components/TextCell.tsx index 1a9bbe7a7..e50d45d47 100644 --- a/packages/grid/src/features/standard-table/components/TextCell.tsx +++ b/packages/grid/src/features/standard-table/components/TextCell.tsx @@ -1,17 +1,21 @@ -import { Indent, Text } from "@stenajs-webui/core"; +import { Indent, Text, TextSize } from "@stenajs-webui/core"; import * as React from "react"; import styles from "./TextCell.module.css"; interface Props { label?: string; + size?: TextSize; + color?: string; } export const TextCell: React.FC = React.memo(function TextCell({ label, + size, + color, }) { return ( - + {label} diff --git a/packages/grid/src/features/standard-table/config/StandardTableColumnConfig.ts b/packages/grid/src/features/standard-table/config/StandardTableColumnConfig.ts index 20ef6dbf5..101bf9ad1 100644 --- a/packages/grid/src/features/standard-table/config/StandardTableColumnConfig.ts +++ b/packages/grid/src/features/standard-table/config/StandardTableColumnConfig.ts @@ -1,3 +1,4 @@ +import * as React from "react"; import { ReactNode } from "react"; import { UseGridCellOptions, @@ -5,7 +6,7 @@ import { } from "../../grid-cell/hooks/UseGridCell"; import { SortOrderIconVariant } from "../../table-ui/components/table/SortOrderIcon"; import { StandardTableOnKeyDownArgs } from "./StandardTableConfig"; -import * as React from "react"; +import { TextSize } from "@stenajs-webui/core"; export type StandardTableColumnConfig< TItem, @@ -211,12 +212,21 @@ export interface StandardTableCellRendererArgObject { gridCell: UseGridCellResult; isEditable?: boolean; isSelected: boolean; + textSize?: TextSize; /** * The z-index used for that cell. Usable if the cell has a popover which should get same z-index for example. */ zIndex?: number | string; } +/** + * Default renderer. This is defined in config, not for a specific column. + * Therefor, it can not know "value: TItemValue", since it has not been defined yet. + */ +export type DefaultStandardTableCellRenderer = ( + arg: StandardTableCellRendererArgObject +) => ReactNode; + export type BackgroundResolver = (item: TItem) => string | undefined; export interface ItemValueResolver { diff --git a/packages/grid/src/features/standard-table/config/StandardTableConfig.ts b/packages/grid/src/features/standard-table/config/StandardTableConfig.ts index 3fef4081c..b17509e52 100644 --- a/packages/grid/src/features/standard-table/config/StandardTableConfig.ts +++ b/packages/grid/src/features/standard-table/config/StandardTableConfig.ts @@ -2,10 +2,12 @@ import { ReactNode } from "react"; import { UseGridCellOptions } from "../../grid-cell/hooks/UseGridCell"; import { SortOrderIconVariant } from "../../table-ui/components/table/SortOrderIcon"; import { + DefaultStandardTableCellRenderer, StandardTableColumnConfig, StandardTableColumnConfigWithGroups, } from "./StandardTableColumnConfig"; import { StandardTableColumnGroupConfig } from "./StandardTableColumnGroupConfig"; +import { TextSize } from "@stenajs-webui/core"; export interface RowExpansionArgs { onRequestCollapse?: () => void; @@ -220,6 +222,20 @@ export interface StandardTableConfigBase { * @default amount */ sortOrderIconVariant?: SortOrderIconVariant; + + /** + * This can be used to override default text renderer for the whole table. + * Column cellRenderer will still override this. Since this is global for the table, and not local to a column, + * the type of itemValue can not be known. It should use `label` as source of text instead. + * If omitted, TextCell is used as usual. + */ + defaultCellRenderer?: DefaultStandardTableCellRenderer; + + /** + * This config specifies the text size to be used by the default TextCell component. + * If omitted, "normal" is used. + */ + defaultTextSize?: TextSize; } export interface RowBackgroundResolverColorCombination { diff --git a/packages/grid/src/features/standard-table/helpers/cell-renderers/editable-text-cell/EditableTextCell.tsx b/packages/grid/src/features/standard-table/helpers/cell-renderers/editable-text-cell/EditableTextCell.tsx index b6995c730..c7af9295b 100644 --- a/packages/grid/src/features/standard-table/helpers/cell-renderers/editable-text-cell/EditableTextCell.tsx +++ b/packages/grid/src/features/standard-table/helpers/cell-renderers/editable-text-cell/EditableTextCell.tsx @@ -1,10 +1,12 @@ -import { Indent, Text } from "@stenajs-webui/core"; +import { Indent, Text, TextSize } from "@stenajs-webui/core"; import { TextInput } from "@stenajs-webui/forms"; import * as React from "react"; import { StandardTableCellRenderer } from "../../../config/StandardTableColumnConfig"; export const createStandardEditableTextCell = - (): StandardTableCellRenderer => + ( + textSize?: TextSize + ): StandardTableCellRenderer => ({ label, gridCell: { @@ -29,6 +31,8 @@ export const createStandardEditableTextCell = /> ) : ( - {label} + + {label} + ); diff --git a/packages/grid/src/features/standard-table/stories/StandardTable.stories.tsx b/packages/grid/src/features/standard-table/stories/StandardTable.stories.tsx index a1d2240ed..3ee0cf831 100644 --- a/packages/grid/src/features/standard-table/stories/StandardTable.stories.tsx +++ b/packages/grid/src/features/standard-table/stories/StandardTable.stories.tsx @@ -50,6 +50,48 @@ export const Overview = () => { return ; }; +export const DefaultTextSize = () => { + const { items, onChangeNumPassengers } = useListState(mockedItems); + + const config: StandardTableConfig = { + ...standardTableConfigForStories, + defaultTextSize: "smaller", + checkboxDisabledResolver: (item) => item.id === "125", + columns: { + ...standardTableConfigForStories.columns, + numPassengers: { + ...standardTableConfigForStories.columns.numPassengers, + onChange: onChangeNumPassengers, + }, + }, + }; + + return ; +}; + +export const DefaultCellRenderer = () => { + const { items, onChangeNumPassengers } = useListState(mockedItems); + + const config: StandardTableConfig = { + ...standardTableConfigForStories, + defaultCellRenderer: ({ label }) => ( + + + + ), + checkboxDisabledResolver: (item) => item.id === "125", + columns: { + ...standardTableConfigForStories.columns, + numPassengers: { + ...standardTableConfigForStories.columns.numPassengers, + onChange: onChangeNumPassengers, + }, + }, + }; + + return ; +}; + export const Variants = () => { const { items } = useListState(mockedItems);