Skip to content

Commit b6f7693

Browse files
rwieruchrwieruch
committed
feat(resize) with callbacks
1 parent a85ffd5 commit b6f7693

File tree

6 files changed

+108
-5
lines changed

6 files changed

+108
-5
lines changed

‎.storybook/stories/Features/resize.story.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,92 @@ storiesOf('Features/Resize', module)
187187
</Table>
188188
);
189189
})
190+
.add('onDragMove', () => {
191+
const data = { nodes };
192+
193+
const resize = {
194+
onDragMove: (widths) => console.log(widths),
195+
};
196+
197+
return (
198+
<Table data={data}>
199+
{(tableList) => (
200+
<>
201+
<Header>
202+
<HeaderRow>
203+
<HeaderCell resize={resize}>Task</HeaderCell>
204+
<HeaderCell resize={resize}>Deadline</HeaderCell>
205+
<HeaderCell resize={resize}>Type</HeaderCell>
206+
<HeaderCell resize={resize}>Complete</HeaderCell>
207+
<HeaderCell resize={resize}>Tasks</HeaderCell>
208+
</HeaderRow>
209+
</Header>
210+
211+
<Body>
212+
{tableList.map((item) => (
213+
<Row key={item.id} item={item}>
214+
<Cell>{item.name}</Cell>
215+
<Cell>
216+
{item.deadline.toLocaleDateString('en-US', {
217+
year: 'numeric',
218+
month: '2-digit',
219+
day: '2-digit',
220+
})}
221+
</Cell>
222+
<Cell>{item.type}</Cell>
223+
<Cell>{item.isComplete.toString()}</Cell>
224+
<Cell>{item.nodes?.length}</Cell>
225+
</Row>
226+
))}
227+
</Body>
228+
</>
229+
)}
230+
</Table>
231+
);
232+
})
233+
.add('onDragEnd', () => {
234+
const data = { nodes };
235+
236+
const resize = {
237+
onDragEnd: (widths) => console.log(widths),
238+
};
239+
240+
return (
241+
<Table data={data}>
242+
{(tableList) => (
243+
<>
244+
<Header>
245+
<HeaderRow>
246+
<HeaderCell resize={resize}>Task</HeaderCell>
247+
<HeaderCell resize={resize}>Deadline</HeaderCell>
248+
<HeaderCell resize={resize}>Type</HeaderCell>
249+
<HeaderCell resize={resize}>Complete</HeaderCell>
250+
<HeaderCell resize={resize}>Tasks</HeaderCell>
251+
</HeaderRow>
252+
</Header>
253+
254+
<Body>
255+
{tableList.map((item) => (
256+
<Row key={item.id} item={item}>
257+
<Cell>{item.name}</Cell>
258+
<Cell>
259+
{item.deadline.toLocaleDateString('en-US', {
260+
year: 'numeric',
261+
month: '2-digit',
262+
day: '2-digit',
263+
})}
264+
</Cell>
265+
<Cell>{item.type}</Cell>
266+
<Cell>{item.isComplete.toString()}</Cell>
267+
<Cell>{item.nodes?.length}</Cell>
268+
</Row>
269+
))}
270+
</Body>
271+
</>
272+
)}
273+
</Table>
274+
);
275+
})
190276
.add('documentation', () => (
191277
<ul>
192278
<li>

‎.storybook/stories/Types/resize.story.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ type ColumnResizePropsObject = {
99
minWidth?: number;
1010
resizerWidth?: number;
1111
resizerHighlight?: string;
12+
onDragMove?: (widths: string[]) => void;
13+
onDragEnd?: (widths: string[]) => void;
1214
};
1315

1416
export type ColumnResizeProps = ColumnResizePropsObject | boolean;

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@table-library/react-table-library",
3-
"version": "2.0.14",
3+
"version": "2.0.15",
44
"description": "react-table-library",
55
"type": "module",
66
"main": "main.js",

‎src/resize/useResize.ts

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99

1010
import { Nullish } from '@table-library/react-table-library/types/common';
1111
import { TableElementRef, Layout } from '@table-library/react-table-library/types/layout';
12+
import { ColumnResizeProps } from '@table-library/react-table-library/types/resize';
1213

1314
type DataColumn = {
1415
index: number;
@@ -115,7 +116,11 @@ const applyResize = (
115116
return newColumnWidths;
116117
};
117118

118-
export const useResize = (cellRef: React.RefObject<HTMLDivElement>, index: number) => {
119+
export const useResize = (
120+
cellRef: React.RefObject<HTMLDivElement>,
121+
index: number,
122+
resize: ColumnResizeProps | Nullish,
123+
) => {
119124
const context = React.useContext(LayoutContext);
120125

121126
if (!context) {
@@ -152,14 +157,22 @@ export const useResize = (cellRef: React.RefObject<HTMLDivElement>, index: numbe
152157
layout,
153158
resizeWidth,
154159
);
160+
161+
if (typeof resize !== 'boolean' && resize?.onDragMove) {
162+
resize?.onDragMove(tableMemoryRef.current!.resizedLayout as string[]);
163+
}
155164
}
156165
},
157-
[index, layout, tableElementRef, tableMemoryRef],
166+
[index, layout, resize, tableElementRef, tableMemoryRef],
158167
);
159168

160169
const onMouseUp = React.useCallback(() => {
161170
isMouseDown.current = false;
162-
}, []);
171+
172+
if (typeof resize !== 'boolean' && resize?.onDragEnd) {
173+
resize?.onDragEnd(tableMemoryRef.current!.resizedLayout as string[]);
174+
}
175+
}, [resize, tableMemoryRef]);
163176

164177
React.useEffect(() => {
165178
const { current } = resizeRef;

‎src/table/Cell/HeaderCell.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const HeaderCell: React.FC<HeaderCellProps> = ({
2727
const theme = React.useContext(ThemeContext);
2828

2929
const cellRef = React.useRef<HTMLDivElement>(null);
30-
const { resizeRef } = useResize(cellRef, index!);
30+
const { resizeRef } = useResize(cellRef, index!, resize);
3131

3232
return (
3333
<HeaderCellContainer

‎src/types/resize.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ type ColumnResizePropsObject = {
22
minWidth?: number;
33
resizerWidth?: number;
44
resizerHighlight?: string;
5+
onDragMove?: (widths: string[]) => void;
6+
onDragEnd?: (widths: string[]) => void;
57
};
68

79
export type ColumnResizeProps = ColumnResizePropsObject | boolean;

0 commit comments

Comments
 (0)