From 4ddd6ad1a2e96b2e420e9a624b4590f16821acf2 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 8 Apr 2025 16:58:23 +0200 Subject: [PATCH 1/3] Added the option to render in a different page by default --- .../data-grid/code/DataGridCodePage.tsx | 74 ++++++++++--------- .../lib/src/data-grid/DataGrid.stories.tsx | 2 + packages/lib/src/data-grid/DataGrid.tsx | 3 +- packages/lib/src/data-grid/types.ts | 8 ++ 4 files changed, 53 insertions(+), 34 deletions(-) diff --git a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx index 8ec6d7ce9..ff4ef1b2c 100644 --- a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx +++ b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx @@ -147,14 +147,6 @@ const sections = [ Whether the rows can expand or not. - - - summaryRow - - GridRow - - Extra row that will be always visible. - - - selectable @@ -185,18 +177,6 @@ const sections = [ - - - uniqueRowId - - string - - - This prop indicates the unique key that can be used to identify each row. The value of that key can be - either a number or a string. This prop is mandatory if selectable is set to true,{" "} - expandable is set to true or rows is of type HierarchyGridRow[]. - - - - onGridRowsChange @@ -217,11 +197,23 @@ const sections = [ - - onPageChange + uniqueRowId - {`(page: number) => void`} + string - Function called whenever the current page is changed. + + This prop indicates the unique key that can be used to identify each row. The value of that key can be + either a number or a string. This prop is mandatory if selectable is set to true,{" "} + expandable is set to true or rows is of type HierarchyGridRow[]. + + - + + + summaryRow + + GridRow + + Extra row that will be always visible. - @@ -233,21 +225,13 @@ const sections = [ false - totalItems + defaultPage number - Number of total items. + Default page in which the datagrid is rendered. - - - showGoToPage - - boolean - - If true, a select component for navigation between pages will be displayed. - true - itemsPerPage @@ -275,6 +259,30 @@ const sections = [ - + + onPageChange + + {`(page: number) => void`} + + Function called whenever the current page is changed. + - + + + showGoToPage + + boolean + + If true, a select component for navigation between pages will be displayed. + true + + + totalItems + + number + + Number of total items. + - + ), diff --git a/packages/lib/src/data-grid/DataGrid.stories.tsx b/packages/lib/src/data-grid/DataGrid.stories.tsx index 5f42b5aa4..63628a081 100644 --- a/packages/lib/src/data-grid/DataGrid.stories.tsx +++ b/packages/lib/src/data-grid/DataGrid.stories.tsx @@ -834,6 +834,7 @@ const DataGridPaginator = () => { selectable selectedRows={selectedRows} onSelectRows={setSelectedRows} + defaultPage={2} showPaginator /> @@ -852,6 +853,7 @@ const DataGridPaginator = () => { onSelectRows={setSelectedChildRows} showPaginator itemsPerPage={2} + defaultPage={2} /> diff --git a/packages/lib/src/data-grid/DataGrid.tsx b/packages/lib/src/data-grid/DataGrid.tsx index da98402e4..e8ec8ef1c 100644 --- a/packages/lib/src/data-grid/DataGrid.tsx +++ b/packages/lib/src/data-grid/DataGrid.tsx @@ -184,10 +184,11 @@ const DxcDataGrid = ({ onSort, onPageChange, totalItems, + defaultPage = 1, }: DataGridPropsType): JSX.Element => { const [rowsToRender, setRowsToRender] = useState(rows); const colorsTheme = useContext(HalstackContext); - const [page, changePage] = useState(1); + const [page, changePage] = useState(defaultPage); const goToPage = (newPage: number) => { if (onPageChange) { diff --git a/packages/lib/src/data-grid/types.ts b/packages/lib/src/data-grid/types.ts index 5b8dd4613..5a6161fc0 100644 --- a/packages/lib/src/data-grid/types.ts +++ b/packages/lib/src/data-grid/types.ts @@ -137,6 +137,10 @@ type PaginatedProps = { * Function called whenever the current page is changed. */ onPageChange?: (_page: number) => void; + /** + * Default page in which the datagrid is rendered + */ + defaultPage?: number; }; type NonPaginatedProps = { @@ -169,6 +173,10 @@ type NonPaginatedProps = { * Function called whenever the current page is changed. */ onPageChange?: never; + /** + * Default page in which the datagrid is rendered + */ + defaultPage?: never; }; export type CommonProps = { From f1600c59c33532f6c513d5dfdc74510c06e6eb33 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Wed, 9 Apr 2025 12:09:51 +0200 Subject: [PATCH 2/3] text editor transparent background --- packages/lib/src/data-grid/DataGrid.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/lib/src/data-grid/DataGrid.tsx b/packages/lib/src/data-grid/DataGrid.tsx index e8ec8ef1c..caf4add4e 100644 --- a/packages/lib/src/data-grid/DataGrid.tsx +++ b/packages/lib/src/data-grid/DataGrid.tsx @@ -99,6 +99,7 @@ const DataGridContainer = styled.div<{ outline-color: ${(props) => props.theme.focusColor} !important; .rdg-text-editor:focus { border-color: transparent; + background-color: transparent; } } .rdg-header-row { From bfc2c3e34004eddf36c1974f77c6cb0f67b06d4c Mon Sep 17 00:00:00 2001 From: Jialecl Date: Wed, 9 Apr 2025 12:18:50 +0200 Subject: [PATCH 3/3] added visual test and color --- packages/lib/src/data-grid/DataGrid.stories.tsx | 5 +++++ packages/lib/src/data-grid/DataGrid.tsx | 1 + 2 files changed, 6 insertions(+) diff --git a/packages/lib/src/data-grid/DataGrid.stories.tsx b/packages/lib/src/data-grid/DataGrid.stories.tsx index 63628a081..92e9af1cc 100644 --- a/packages/lib/src/data-grid/DataGrid.stories.tsx +++ b/packages/lib/src/data-grid/DataGrid.stories.tsx @@ -1145,4 +1145,9 @@ export const DataGridSortedExpanded: Story = { export const UnknownUniqueId: Story = { render: DataGridUnknownUniqueRowId, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const editorCell = canvas.getAllByText("Task 1")[0]; + editorCell && (await userEvent.dblClick(editorCell)); + }, }; diff --git a/packages/lib/src/data-grid/DataGrid.tsx b/packages/lib/src/data-grid/DataGrid.tsx index caf4add4e..83ee3d9cc 100644 --- a/packages/lib/src/data-grid/DataGrid.tsx +++ b/packages/lib/src/data-grid/DataGrid.tsx @@ -100,6 +100,7 @@ const DataGridContainer = styled.div<{ .rdg-text-editor:focus { border-color: transparent; background-color: transparent; + color: ${(props) => props.theme.dataFontColor}; } } .rdg-header-row {