Skip to content

Commit 3831723

Browse files
yordan-styordan-st
committed
refactor: ensure consistent naming, prop destructuring, update tests
1 parent 1f9246d commit 3831723

File tree

7 files changed

+246
-115
lines changed

7 files changed

+246
-115
lines changed

‎packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,9 @@ $root: ".widget-datagrid";
147147
background-color: var(--brand-primary-50, $brand-light);
148148
color: var(--brand-primary, $brand-primary);
149149
}
150+
:active {
151+
cursor: grabbing;
152+
}
150153
}
151154

152155
.drag-handle + .column-caption {

‎packages/pluggableWidgets/datagrid-web/src/components/ColumnContainer.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import classNames from "classnames";
22
import { ReactElement } from "react";
33
import { ColumnHeader } from "./ColumnHeader";
4-
import { useColumn, useColumnsStore, useDatagridConfig, useColumnHeaderVM } from "../model/hooks/injection-hooks";
4+
import { useColumn, useColumnsStore, useDatagridConfig, useHeaderDragnDropVM } from "../model/hooks/injection-hooks";
55
import { ColumnResizerProps } from "./ColumnResizer";
66
import { observer } from "mobx-react-lite";
77

@@ -13,8 +13,9 @@ export interface ColumnContainerProps {
1313
export const ColumnContainer = observer(function ColumnContainer(props: ColumnContainerProps): ReactElement {
1414
const { columnsFilterable, id: gridId } = useDatagridConfig();
1515
const { columnFilters } = useColumnsStore();
16-
const { canSort, columnId, setHeaderElementRef, columnIndex, canResize, sortDir, header } = useColumn();
17-
const vm = useColumnHeaderVM();
16+
const column = useColumn();
17+
const { canSort, columnId, columnIndex, canResize, sortDir, header } = column;
18+
const vm = useHeaderDragnDropVM();
1819
const caption = header.trim();
1920

2021
return (
@@ -28,7 +29,7 @@ export const ColumnContainer = observer(function ColumnContainer(props: ColumnCo
2829
role="columnheader"
2930
style={!canSort ? { cursor: "unset" } : undefined}
3031
title={caption}
31-
ref={ref => setHeaderElementRef(ref)}
32+
ref={ref => column.setHeaderElementRef(ref)}
3233
data-column-id={columnId}
3334
onDrop={vm.handleOnDrop}
3435
onDragEnter={vm.handleDragEnter}

‎packages/pluggableWidgets/datagrid-web/src/components/ColumnHeader.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import classNames from "classnames";
2-
import { DragEventHandler, DragEvent, HTMLAttributes, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
2+
import { DragEvent, DragEventHandler, HTMLAttributes, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from "react";
33
import { FaArrowsAltV } from "./icons/FaArrowsAltV";
44
import { FaLongArrowAltDown } from "./icons/FaLongArrowAltDown";
55
import { FaLongArrowAltUp } from "./icons/FaLongArrowAltUp";
6-
import { useColumn, useColumnHeaderVM } from "../model/hooks/injection-hooks";
6+
import { useColumn, useHeaderDragnDropVM } from "../model/hooks/injection-hooks";
77
import { observer } from "mobx-react-lite";
88

99
interface DragHandleProps {
@@ -13,10 +13,11 @@ interface DragHandleProps {
1313
}
1414

1515
export const ColumnHeader = observer(function ColumnHeader(): ReactElement {
16-
const { header, canSort, alignment, toggleSort } = useColumn();
16+
const column = useColumn();
17+
const { header, canSort, alignment } = column;
1718
const caption = header.trim();
18-
const sortProps = canSort ? getSortProps(toggleSort) : null;
19-
const vm = useColumnHeaderVM();
19+
const sortProps = canSort ? getSortProps(() => column.toggleSort()) : null;
20+
const vm = useHeaderDragnDropVM();
2021

2122
return (
2223
<div

‎packages/pluggableWidgets/datagrid-web/src/components/__tests__/Header.spec.tsx‎ renamed to ‎packages/pluggableWidgets/datagrid-web/src/components/__tests__/ColumnContainer.spec.tsx‎

File renamed without changes.

‎packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/ColumnContainer.spec.tsx.snap‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`ColumnContainer renders the structure correctly 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="th"
7+
data-column-id="0"
8+
role="columnheader"
9+
style="cursor: unset;"
10+
title="Column 1"
11+
>
12+
<div
13+
class="column-container"
14+
id="datagrid2_1:Datagrid@2-column0"
15+
>
16+
<div
17+
aria-label="Column 1"
18+
class="column-header align-column-left"
19+
>
20+
<span
21+
class="column-caption"
22+
>
23+
Column 1
24+
</span>
25+
</div>
26+
<div
27+
class="filter"
28+
/>
29+
</div>
30+
</div>
31+
</DocumentFragment>
32+
`;
33+
34+
exports[`ColumnContainer renders the structure correctly when draggable 1`] = `
35+
<DocumentFragment>
36+
<div
37+
class="th"
38+
data-column-id="0"
39+
role="columnheader"
40+
style="cursor: unset;"
41+
title="Column 1"
42+
>
43+
<div
44+
class="column-container"
45+
id="datagrid2_1:Datagrid@14-column0"
46+
>
47+
<div
48+
aria-label="Column 1"
49+
class="column-header align-column-left"
50+
>
51+
<span
52+
class="drag-handle"
53+
draggable="true"
54+
>
55+
⠿
56+
</span>
57+
<span
58+
class="column-caption"
59+
>
60+
Column 1
61+
</span>
62+
</div>
63+
<div
64+
class="filter"
65+
/>
66+
</div>
67+
</div>
68+
</DocumentFragment>
69+
`;
70+
71+
exports[`ColumnContainer renders the structure correctly when filterable with custom filter 1`] = `
72+
<DocumentFragment>
73+
<div
74+
class="th"
75+
data-column-id="0"
76+
role="columnheader"
77+
style="cursor: unset;"
78+
title="Column 1"
79+
>
80+
<div
81+
class="column-container"
82+
id="datagrid2_1:Datagrid@18-column0"
83+
>
84+
<div
85+
aria-label="Column 1"
86+
class="column-header align-column-left"
87+
>
88+
<span
89+
class="column-caption"
90+
>
91+
Column 1
92+
</span>
93+
</div>
94+
<div
95+
class="filter"
96+
>
97+
<div>
98+
Custom filter
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
</DocumentFragment>
104+
`;
105+
106+
exports[`ColumnContainer renders the structure correctly when resizable 1`] = `
107+
<DocumentFragment>
108+
<div
109+
class="th"
110+
data-column-id="0"
111+
role="columnheader"
112+
style="cursor: unset;"
113+
title="Column 1"
114+
>
115+
<div
116+
class="column-container"
117+
id="datagrid2_1:Datagrid@10-column0"
118+
>
119+
<div
120+
aria-label="Column 1"
121+
class="column-header align-column-left"
122+
>
123+
<span
124+
class="column-caption"
125+
>
126+
Column 1
127+
</span>
128+
</div>
129+
<div
130+
class="filter"
131+
/>
132+
</div>
133+
</div>
134+
</DocumentFragment>
135+
`;
136+
137+
exports[`ColumnContainer renders the structure correctly when sortable 1`] = `
138+
<DocumentFragment>
139+
<div
140+
aria-sort="none"
141+
class="th"
142+
data-column-id="0"
143+
role="columnheader"
144+
title="Column 1"
145+
>
146+
<div
147+
class="column-container"
148+
id="datagrid2_1:Datagrid@6-column0"
149+
>
150+
<div
151+
aria-label="sort Column 1"
152+
class="column-header clickable align-column-left"
153+
role="button"
154+
tabindex="0"
155+
>
156+
<span
157+
class="column-caption"
158+
>
159+
Column 1
160+
</span>
161+
<svg
162+
aria-hidden="true"
163+
class="svg-inline--fa fa-arrows-alt-v fa-w-8"
164+
data-icon="arrows-alt-v"
165+
data-prefix="fas"
166+
focusable="false"
167+
role="img"
168+
viewBox="0 0 256 512"
169+
xmlns="http://www.w3.org/2000/svg"
170+
>
171+
<path
172+
d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
173+
fill="currentColor"
174+
/>
175+
</svg>
176+
</div>
177+
<div
178+
class="filter"
179+
/>
180+
</div>
181+
</div>
182+
</DocumentFragment>
183+
`;
184+
185+
exports[`ColumnContainer renders the structure correctly when value is empty 1`] = `
186+
<DocumentFragment>
187+
<div
188+
class="th"
189+
data-column-id="0"
190+
role="columnheader"
191+
style="cursor: unset;"
192+
title=""
193+
>
194+
<div
195+
class="column-container"
196+
id="datagrid2_1:Datagrid@26-column0"
197+
>
198+
<div
199+
aria-label=""
200+
class="column-header align-column-left"
201+
>
202+
<span
203+
class="column-caption"
204+
>
205+
 
206+
</span>
207+
</div>
208+
<div
209+
class="filter"
210+
/>
211+
</div>
212+
</div>
213+
</DocumentFragment>
214+
`;

0 commit comments

Comments
 (0)