Skip to content

Commit 25099a9

Browse files
JialeclJialecl
committed
Changes to be included in new minor version
1 parent 9ff8a89 commit 25099a9

File tree

22 files changed

+722
-428
lines changed

22 files changed

+722
-428
lines changed

‎apps/website/screens/components/data-grid/code/DataGridCodePage.tsx‎

Lines changed: 104 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ const columnsTypeString = `{
2121
label: string;
2222
resizable?: boolean;
2323
sortable?: boolean;
24-
sortFn?: (a: ReactNode, b: ReactNode) => number;
24+
sortFn?: (a: ReactNode, b: ReactNode) =>
25+
number;
2526
draggable?: boolean;
2627
textEditable?: boolean;
2728
summaryKey?: string;
@@ -34,6 +35,11 @@ const GridRowTypeString = `{
3435

3536
const HierarchyGridRowTypeString = `GridRow & {
3637
childRows?: HierarchyGridRow[] | GridRow[];
38+
childrenTrigger?: (
39+
open: boolean,
40+
triggerRow: HierarchyGridRow
41+
) => (HierarchyGridRow[] | GridRow[])
42+
| Promise<HierarchyGridRow[] | GridRow[]>;
3743
}`;
3844

3945
const ExpandableGridRowTypeString = `GridRow & {
@@ -42,7 +48,7 @@ const ExpandableGridRowTypeString = `GridRow & {
4248
contentIsExpanded?: boolean;
4349
}`;
4450

45-
const actionsType = `{
51+
const actionsTypeString = `{
4652
icon: string | SVG;
4753
title: string;
4854
onClick: () => void;
@@ -56,6 +62,10 @@ const actionsType = `{
5662
options: Option[];
5763
}[]`;
5864

65+
const childrenTriggerTypeString = `(open: boolean, triggerRow: HierarchyGridRow) =>
66+
(HierarchyGridRow[] | GridRow[])
67+
| Promise<HierarchyGridRow[] | GridRow[]>`;
68+
5969
const sections = [
6070
{
6171
title: "Props",
@@ -117,26 +127,11 @@ const sections = [
117127
<td>-</td>
118128
</tr>
119129
<tr>
130+
<td>defaultPage</td>
120131
<td>
121-
<StatusBadge status="required" />
122-
rows
123-
</td>
124-
<td>
125-
<TableCode>GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]</TableCode>
126-
<p>Each one of them being in order:</p>
127-
<p>
128-
<ExtendedTableCode>{GridRowTypeString}</ExtendedTableCode>
129-
</p>
130-
<p>
131-
<ExtendedTableCode>{HierarchyGridRowTypeString}</ExtendedTableCode>
132-
</p>
133-
<p>
134-
<ExtendedTableCode>{ExpandableGridRowTypeString}</ExtendedTableCode>
135-
</p>
136-
</td>
137-
<td>
138-
List of rows that will be rendered in each cell based on the <Code>key</Code> in each column.
132+
<TableCode>number</TableCode>
139133
</td>
134+
<td>Default page in which the datagrid is rendered.</td>
140135
<td>-</td>
141136
</tr>
142137
<tr>
@@ -148,32 +143,46 @@ const sections = [
148143
<td>-</td>
149144
</tr>
150145
<tr>
151-
<td>selectable</td>
146+
<td>itemsPerPage</td>
152147
<td>
153-
<TableCode>boolean</TableCode>
148+
<TableCode>number</TableCode>
154149
</td>
155-
<td>Whether the rows are selectable or not.</td>
156-
<td>-</td>
150+
<td>Number of items per page.</td>
151+
<td>5</td>
157152
</tr>
158153
<tr>
159-
<td>selectedRows</td>
154+
<td>itemsPerPageFunction</td>
160155
<td>
161-
<TableCode>{`Set<string | number>`}</TableCode>
156+
<TableCode>{`(value: number) => void`}</TableCode>
162157
</td>
163158
<td>
164-
Set of selected rows. This prop is mandatory if <Code>selectable</Code> is set to true. The{" "}
165-
<Code>uniqueRowId</Code> key will be used to identify the each row.
159+
This function will be called when the user selects an item per page option. The value selected will be
160+
passed as a parameter.
166161
</td>
167162
<td>-</td>
168163
</tr>
169164
<tr>
170-
<td>onSelectRows</td>
165+
<td>itemsPerPageOptions</td>
171166
<td>
172-
<TableCode>{`(selectedRows: Set<number | string>) => void`}</TableCode>
167+
<TableCode>number[]</TableCode>
173168
</td>
169+
<td>An array of numbers representing the items per page options.</td>
170+
<td>-</td>
171+
</tr>
172+
<tr>
174173
<td>
175-
Function called whenever the selected values changes. This prop is mandatory if <Code>selectable</Code> is
176-
set to true.The <Code>uniqueRowId</Code> key will be used to identify the rows.
174+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
175+
<StatusBadge status="new" />
176+
childrenTrigger
177+
</DxcFlex>
178+
</td>
179+
<td>
180+
<ExtendedTableCode>{childrenTriggerTypeString}</ExtendedTableCode>
181+
</td>
182+
<td>
183+
Function called whenever a cell with children (<Code>HierarchyGridRow</Code>) is expanded or collapsed
184+
(based on the value of <Code>open</Code>). Returns (or resolves to) the array of child rows nested under
185+
this row to display when expanded.
177186
</td>
178187
<td>-</td>
179188
</tr>
@@ -185,6 +194,25 @@ const sections = [
185194
<td>Function called whenever a cell is edited.</td>
186195
<td>-</td>
187196
</tr>
197+
<tr>
198+
<td>onPageChange</td>
199+
<td>
200+
<TableCode>{`(page: number) => void`}</TableCode>
201+
</td>
202+
<td>Function called whenever the current page is changed.</td>
203+
<td>-</td>
204+
</tr>
205+
<tr>
206+
<td>onSelectRows</td>
207+
<td>
208+
<TableCode>{`(selectedRows: Set<number | string>) => void`}</TableCode>
209+
</td>
210+
<td>
211+
Function called whenever the selected values changes. This prop is mandatory if <Code>selectable</Code> is
212+
set to true.The <Code>uniqueRowId</Code> key will be used to identify the rows.
213+
</td>
214+
<td>-</td>
215+
</tr>
188216
<tr>
189217
<td>onSort</td>
190218
<td>
@@ -197,90 +225,89 @@ const sections = [
197225
<td>-</td>
198226
</tr>
199227
<tr>
200-
<td>uniqueRowId</td>
201228
<td>
202-
<TableCode>string</TableCode>
229+
<StatusBadge status="required" />
230+
rows
203231
</td>
204232
<td>
205-
This prop indicates the unique key that can be used to identify each row. The value of that key can be
206-
either a number or a string. This prop is mandatory if <Code>selectable</Code> is set to true,{" "}
207-
<Code>expandable</Code> is set to true or <Code>rows</Code> is of type <Code>HierarchyGridRow[]</Code>.
233+
<TableCode>GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]</TableCode>
234+
<p>Each one of them being in order:</p>
235+
<p>
236+
<ExtendedTableCode>{GridRowTypeString}</ExtendedTableCode>
237+
</p>
238+
<p>
239+
<ExtendedTableCode>{HierarchyGridRowTypeString}</ExtendedTableCode>
240+
</p>
241+
<p>
242+
<ExtendedTableCode>{ExpandableGridRowTypeString}</ExtendedTableCode>
243+
</p>
208244
</td>
209-
<td>-</td>
210-
</tr>
211-
<tr>
212-
<td>summaryRow</td>
213245
<td>
214-
<TableCode>GridRow</TableCode>
246+
List of rows that will be rendered in each cell based on the <Code>key</Code> in each column.
215247
</td>
216-
<td>Extra row that will be always visible.</td>
217248
<td>-</td>
218249
</tr>
219250
<tr>
220-
<td>showPaginator</td>
251+
<td>selectable</td>
221252
<td>
222253
<TableCode>boolean</TableCode>
223254
</td>
224-
<td>If true, paginator will be displayed.</td>
225-
<td>false</td>
255+
<td>Whether the rows are selectable or not.</td>
256+
<td>-</td>
226257
</tr>
227258
<tr>
228-
<td>defaultPage</td>
259+
<td>selectedRows</td>
229260
<td>
230-
<TableCode>number</TableCode>
261+
<TableCode>{`Set<string | number>`}</TableCode>
262+
</td>
263+
<td>
264+
Set of selected rows. This prop is mandatory if <Code>selectable</Code> is set to true. The{" "}
265+
<Code>uniqueRowId</Code> key will be used to identify the each row.
231266
</td>
232-
<td>Default page in which the datagrid is rendered.</td>
233267
<td>-</td>
234268
</tr>
235269
<tr>
236-
<td>itemsPerPage</td>
270+
<td>showGoToPage</td>
237271
<td>
238-
<TableCode>number</TableCode>
272+
<TableCode>boolean</TableCode>
239273
</td>
240-
<td>Number of items per page.</td>
241-
<td>5</td>
274+
<td>If true, a select component for navigation between pages will be displayed.</td>
275+
<td>true</td>
242276
</tr>
243277
<tr>
244-
<td>itemsPerPageOptions</td>
278+
<td>showPaginator</td>
245279
<td>
246-
<TableCode>number[]</TableCode>
280+
<TableCode>boolean</TableCode>
247281
</td>
248-
<td>An array of numbers representing the items per page options.</td>
249-
<td>-</td>
282+
<td>If true, paginator will be displayed.</td>
283+
<td>false</td>
250284
</tr>
251285
<tr>
252-
<td>itemsPerPageFunction</td>
253-
<td>
254-
<TableCode>{`(value: number) => void`}</TableCode>
255-
</td>
286+
<td>summaryRow</td>
256287
<td>
257-
This function will be called when the user selects an item per page option. The value selected will be
258-
passed as a parameter.
288+
<TableCode>GridRow</TableCode>
259289
</td>
290+
<td>Extra row that will be always visible.</td>
260291
<td>-</td>
261292
</tr>
262293
<tr>
263-
<td>onPageChange</td>
294+
<td>totalItems</td>
264295
<td>
265-
<TableCode>{`(page: number) => void`}</TableCode>
296+
<TableCode>number</TableCode>
266297
</td>
267-
<td>Function called whenever the current page is changed.</td>
298+
<td>Number of total items.</td>
268299
<td>-</td>
269300
</tr>
270301
<tr>
271-
<td>showGoToPage</td>
302+
<td>uniqueRowId</td>
272303
<td>
273-
<TableCode>boolean</TableCode>
304+
<TableCode>string</TableCode>
274305
</td>
275-
<td>If true, a select component for navigation between pages will be displayed.</td>
276-
<td>true</td>
277-
</tr>
278-
<tr>
279-
<td>totalItems</td>
280306
<td>
281-
<TableCode>number</TableCode>
307+
This prop indicates the unique key that can be used to identify each row. The value of that key can be
308+
either a number or a string. This prop is mandatory if <Code>selectable</Code> is set to true,{" "}
309+
<Code>expandable</Code> is set to true or <Code>rows</Code> is of type <Code>HierarchyGridRow[]</Code>.
282310
</td>
283-
<td>Number of total items.</td>
284311
<td>-</td>
285312
</tr>
286313
</tbody>
@@ -310,13 +337,13 @@ const sections = [
310337
<tbody>
311338
<tr>
312339
<td>
313-
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
340+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
314341
<StatusBadge status="required" />
315342
actions
316343
</DxcFlex>
317344
</td>
318345
<td>
319-
<ExtendedTableCode>{actionsType}</ExtendedTableCode>
346+
<ExtendedTableCode>{actionsTypeString}</ExtendedTableCode>
320347
</td>
321348
<td>
322349
<p>

‎apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
22
import { useState } from "react";
33

44
const code = `() => {
5-
const columns = [
5+
const [columns] = useState([
66
{
77
key: "name",
88
label: "Label",
@@ -14,9 +14,9 @@ const code = `() => {
1414
alignment: "right",
1515
summaryKey: "total"
1616
},
17-
];
17+
]);
1818
19-
const rows = [
19+
const [rows] = useState([
2020
{
2121
name: "Root Node 1",
2222
value: "1",
@@ -75,7 +75,7 @@ const code = `() => {
7575
},
7676
],
7777
},
78-
];
78+
]);
7979
8080
const [selectedRows, setSelectedRows] = useState(new Set());
8181
return (

‎apps/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,19 @@ const sections = [
127127
</td>
128128
<td>-</td>
129129
</tr>
130+
<tr>
131+
<td>
132+
<DxcFlex direction="column" gap="0.5rem" alignItems="baseline">
133+
<StatusBadge status="new" />
134+
onClick
135+
</DxcFlex>
136+
</td>
137+
<td>
138+
<TableCode>{"() => void"}</TableCode>
139+
</td>
140+
<td>This function will be called when the user clicks on this tab.</td>
141+
<td>-</td>
142+
</tr>
130143
<tr>
131144
<td>notificationNumber</td>
132145
<td>
@@ -210,20 +223,21 @@ const sections = [
210223
),
211224
},
212225
{
213-
title: "React router v6",
226+
title: "React router v6+",
214227
content: (
215228
<>
216229
<DxcParagraph>
217230
In{" "}
218231
<DxcLink
219-
href="https://github.com/remix-run/react-router/blob/main/docs/upgrading/v5.md#remove-link-component-prop"
232+
href="https://github.com/remix-run/react-router/blob/v6.0.0/docs/upgrading/v5.md#remove-link-component-prop"
220233
newWindow
221234
>
222235
React Router v6
223236
</DxcLink>{" "}
224-
the prop <Code>component</Code> is no longer available so it is necessary to use hooks provided by{" "}
225-
<DxcLink href="https://reactrouter.com/en/main/hooks/use-href" newWindow>
226-
React Router v6
237+
and higher, the prop <Code>component</Code> is no longer available so it is necessary to use hooks
238+
provided by the newer versions of{" "}
239+
<DxcLink href="https://reactrouter.com/api/hooks/useNavigate" newWindow>
240+
React Router
227241
</DxcLink>
228242
.
229243
</DxcParagraph>

0 commit comments

Comments
 (0)