Skip to content

Commit 75213b1

Browse files
yordan-styordan-st
committed
chore: fix lint and test errors
1 parent 56295da commit 75213b1

File tree

4 files changed

+225
-6
lines changed

4 files changed

+225
-6
lines changed

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

Lines changed: 4 additions & 3 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, useColumnHeaderVM, useColumnsStore, useDatagridConfig } from "../model/hooks/injection-hooks";
55
import { ColumnResizerProps } from "./ColumnResizer";
66
import { observer } from "mobx-react-lite";
77

@@ -13,7 +13,8 @@ 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();
16+
const column = useColumn();
17+
const { canSort, columnId, columnIndex, canResize, sortDir, header } = useColumn();
1718
const { draggableProps, dropTarget, dragging } = useColumnHeaderVM();
1819

1920
const caption = header.trim();
@@ -29,7 +30,7 @@ export const ColumnContainer = observer(function ColumnContainer(props: ColumnCo
2930
role="columnheader"
3031
style={!canSort ? { cursor: "unset" } : undefined}
3132
title={caption}
32-
ref={ref => setHeaderElementRef(ref)}
33+
ref={ref => column.setHeaderElementRef(ref)}
3334
data-column-id={columnId}
3435
onDrop={draggableProps.onDrop}
3536
onDragEnter={draggableProps.onDragEnter}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
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";
@@ -14,9 +14,10 @@ interface DragHandleProps {
1414

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

2122
return (
2223
<div

‎packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Header.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+
`;

‎packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { creteCheckboxEventsController } from "../../features/row-interaction/Ch
2323
import { SelectAllModule } from "../../features/select-all/SelectAllModule.container";
2424
import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
2525
import { HeaderDragnDropViewModel } from "../../features/column/HeaderDragnDrop.viewModel";
26+
import { HeaderDragnDropStore } from "../../features/column/HeaderDragnDrop.store";
2627
import { GridBasicData } from "../../helpers/state/GridBasicData";
2728
import { GridPersonalizationStore } from "../../helpers/state/GridPersonalizationStore";
2829
import { DatagridConfig } from "../configs/Datagrid.config";
@@ -99,6 +100,8 @@ export class DatagridContainer extends Container {
99100
// Columns store
100101
this.bind(CORE.columnsStore).toInstance(ColumnGroupStore).inSingletonScope();
101102
// Drag and Drop store
103+
this.bind(DG.headerDragDrop).toInstance(HeaderDragnDropStore).inSingletonScope();
104+
// Drag and Drop view model
102105
this.bind(DG.columnHeaderVM).toInstance(HeaderDragnDropViewModel).inSingletonScope();
103106
// Query service
104107
this.bind(DG.query).toInstance(DatasourceService).inSingletonScope();

0 commit comments

Comments
 (0)