Skip to content

Commit b7feb37

Browse files
rwieruchrwieruch
committed
fix(Tree/idReducer): onAddByIdRecursively / onRemoveByIdRecursively uses real recursiveness on id, the previous usage was just onAddByIds / onRemoveByIds (now renamed)
1 parent 5b9a817 commit b7feb37

File tree

3 files changed

+160
-24
lines changed

3 files changed

+160
-24
lines changed

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

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -467,6 +467,110 @@ storiesOf('Features/Tree', module)
467467
console.log(action, state);
468468
}
469469

470+
return (
471+
<Table data={data} tree={tree}>
472+
{(tableList) => (
473+
<>
474+
<Header>
475+
<HeaderRow>
476+
<HeaderCell>Task</HeaderCell>
477+
<HeaderCell>Deadline</HeaderCell>
478+
<HeaderCell>Type</HeaderCell>
479+
<HeaderCell>Complete</HeaderCell>
480+
<HeaderCell>Tasks</HeaderCell>
481+
</HeaderRow>
482+
</Header>
483+
484+
<Body>
485+
{tableList.map((item) => (
486+
<Row key={item.id} item={item}>
487+
<CellTree item={item}>{item.name}</CellTree>
488+
<Cell>
489+
{item.deadline.toLocaleDateString('en-US', {
490+
year: 'numeric',
491+
month: '2-digit',
492+
day: '2-digit',
493+
})}
494+
</Cell>
495+
<Cell>{item.type}</Cell>
496+
<Cell>{item.isComplete.toString()}</Cell>
497+
<Cell>{item.nodes?.length}</Cell>
498+
</Row>
499+
))}
500+
</Body>
501+
</>
502+
)}
503+
</Table>
504+
);
505+
})
506+
.add('toggle all', () => {
507+
const data = { nodes };
508+
509+
const tree = useTree(data, {
510+
onChange: onTreeChange,
511+
});
512+
513+
function onTreeChange(action, state) {
514+
console.log(action, state);
515+
}
516+
517+
return (
518+
<>
519+
<button type="button" onClick={() => tree.fns.onToggleAll()}>
520+
Toggle All
521+
</button>
522+
523+
<Table data={data} tree={tree}>
524+
{(tableList) => (
525+
<>
526+
<Header>
527+
<HeaderRow>
528+
<HeaderCell>Task</HeaderCell>
529+
<HeaderCell>Deadline</HeaderCell>
530+
<HeaderCell>Type</HeaderCell>
531+
<HeaderCell>Complete</HeaderCell>
532+
<HeaderCell>Tasks</HeaderCell>
533+
</HeaderRow>
534+
</Header>
535+
536+
<Body>
537+
{tableList.map((item) => (
538+
<Row key={item.id} item={item}>
539+
<CellTree item={item}>{item.name}</CellTree>
540+
<Cell>
541+
{item.deadline.toLocaleDateString('en-US', {
542+
year: 'numeric',
543+
month: '2-digit',
544+
day: '2-digit',
545+
})}
546+
</Cell>
547+
<Cell>{item.type}</Cell>
548+
<Cell>{item.isComplete.toString()}</Cell>
549+
<Cell>{item.nodes?.length}</Cell>
550+
</Row>
551+
))}
552+
</Body>
553+
</>
554+
)}
555+
</Table>
556+
</>
557+
);
558+
})
559+
.add('toggle recursively', () => {
560+
const data = { nodes };
561+
562+
const tree = useTree(data, {
563+
onChange: onTreeChange,
564+
});
565+
566+
function onTreeChange(action, state) {
567+
if (action.type === 'ADD_BY_ID') {
568+
tree.fns.onAddByIdRecursively(action.payload.id);
569+
} else {
570+
tree.fns.onRemoveByIdRecursively(action.payload.id);
571+
}
572+
}
573+
470574
return (
471575
<Table data={data} tree={tree}>
472576
{(tableList) => (

‎src/common/util/useIdReducer/index.ts‎

Lines changed: 51 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,8 @@ const set = (state: State, action: Action) => ({
9090

9191
const ADD_BY_ID = 'ADD_BY_ID';
9292
const REMOVE_BY_ID = 'REMOVE_BY_ID';
93-
const ADD_BY_ID_RECURSIVELY = 'ADD_BY_ID_RECURSIVELY';
94-
const REMOVE_BY_ID_RECURSIVELY = 'REMOVE_BY_ID_RECURSIVELY';
93+
const ADD_BY_IDS = 'ADD_BY_IDS';
94+
const REMOVE_BY_IDS = 'REMOVE_BY_IDS';
9595
const ADD_BY_ID_EXCLUSIVELY = 'ADD_BY_ID_EXCLUSIVELY';
9696
const REMOVE_BY_ID_EXCLUSIVELY = 'REMOVE_BY_ID_EXCLUSIVELY';
9797
const ADD_ALL = 'ADD_ALL';
@@ -106,10 +106,10 @@ const reducer = (state: State, action: Action) => {
106106
case REMOVE_BY_ID: {
107107
return removeById(state, action);
108108
}
109-
case ADD_BY_ID_RECURSIVELY: {
109+
case ADD_BY_IDS: {
110110
return addByIdRecursively(state, action);
111111
}
112-
case REMOVE_BY_ID_RECURSIVELY: {
112+
case REMOVE_BY_IDS: {
113113
return removeByIdRecursively(state, action);
114114
}
115115
case ADD_BY_ID_EXCLUSIVELY: {
@@ -142,6 +142,12 @@ const getMergedOptions = (options: Record<string, any>) => ({
142142
...options,
143143
});
144144

145+
const getRecursiveIds = (id: string, nodes: TableNode[]) => {
146+
const node = findNodeById(nodes, id);
147+
148+
return [node, ...fromTreeToList(node?.nodes)].map((item) => item!.id);
149+
};
150+
145151
const useIdReducer = (
146152
data: Data,
147153
controlledState: State,
@@ -203,12 +209,12 @@ const useIdReducer = (
203209
[state, onAddById, onRemoveById],
204210
);
205211

206-
const onAddByIdRecursively = React.useCallback(
212+
const onAddByIds = React.useCallback(
207213
(ids, options) => {
208214
const mergedOptions = getMergedOptions(options);
209215

210216
dispatchWithMiddleware({
211-
type: ADD_BY_ID_RECURSIVELY,
217+
type: ADD_BY_IDS,
212218
payload: {
213219
ids,
214220
options: mergedOptions,
@@ -218,10 +224,10 @@ const useIdReducer = (
218224
[dispatchWithMiddleware],
219225
);
220226

221-
const onRemoveByIdRecursively = React.useCallback(
227+
const onRemoveByIds = React.useCallback(
222228
(ids) => {
223229
dispatchWithMiddleware({
224-
type: REMOVE_BY_ID_RECURSIVELY,
230+
type: REMOVE_BY_IDS,
225231
payload: { ids },
226232
});
227233
},
@@ -232,30 +238,48 @@ const useIdReducer = (
232238
(id, options) => {
233239
const mergedOptions = getMergedOptions(options);
234240

235-
const node = findNodeById(data.nodes, id);
236-
237-
const ids = [node, ...fromTreeToList(node?.nodes)].map((item) => item!.id);
241+
const ids = getRecursiveIds(id, data.nodes);
238242

239243
if (!mergedOptions.isPartialToAll) {
240244
if (includesNone(ids, state.ids)) {
241-
onAddByIdRecursively(ids, mergedOptions);
245+
onAddByIds(ids, mergedOptions);
242246
} else {
243-
onRemoveByIdRecursively(ids);
247+
onRemoveByIds(ids);
244248
}
245249
}
246250

247251
if (mergedOptions.isPartialToAll) {
248252
if (includesAll(ids, state.ids)) {
249-
onRemoveByIdRecursively(ids);
253+
onRemoveByIds(ids);
250254
} else {
251-
onAddByIdRecursively(ids, mergedOptions);
255+
onAddByIds(ids, mergedOptions);
252256
}
253257
}
254258

255259
shiftToggle.current.lastToggledId = id;
256260
shiftToggle.current.currentShiftIds = [];
257261
},
258-
[data.nodes, state.ids, onAddByIdRecursively, onRemoveByIdRecursively],
262+
[data.nodes, state.ids, onAddByIds, onRemoveByIds],
263+
);
264+
265+
const onAddByIdRecursively = React.useCallback(
266+
(id, options) => {
267+
const mergedOptions = getMergedOptions(options);
268+
269+
const ids = getRecursiveIds(id, data.nodes);
270+
271+
onAddByIds(ids, mergedOptions);
272+
},
273+
[data.nodes, onAddByIds],
274+
);
275+
276+
const onRemoveByIdRecursively = React.useCallback(
277+
(id) => {
278+
const ids = getRecursiveIds(id, data.nodes);
279+
280+
onRemoveByIds(ids);
281+
},
282+
[data.nodes, onRemoveByIds],
259283
);
260284

261285
const onAddByIdExclusively = React.useCallback(
@@ -334,7 +358,7 @@ const useIdReducer = (
334358
const mergedOptions = getMergedOptions(options);
335359

336360
if (shiftToggle.current.currentShiftIds.length) {
337-
onRemoveByIdRecursively(shiftToggle.current.currentShiftIds);
361+
onRemoveByIds(shiftToggle.current.currentShiftIds);
338362
shiftToggle.current.currentShiftIds = [];
339363
}
340364

@@ -352,10 +376,10 @@ const useIdReducer = (
352376

353377
const newShiftIds = ids.slice(originIndex, targetIndex + 1);
354378

355-
onAddByIdRecursively(newShiftIds, mergedOptions);
379+
onAddByIds(newShiftIds, mergedOptions);
356380
shiftToggle.current.currentShiftIds = newShiftIds;
357381
},
358-
[data.nodes, onAddByIdRecursively, onRemoveByIdRecursively],
382+
[data.nodes, onAddByIds, onRemoveByIds],
359383
);
360384

361385
useSyncControlledState(controlledState, state, () =>
@@ -371,9 +395,12 @@ const useIdReducer = (
371395
onRemoveById,
372396
onToggleById,
373397

398+
onAddByIds,
399+
onRemoveByIds,
400+
onToggleByIdRecursively,
401+
374402
onAddByIdRecursively,
375403
onRemoveByIdRecursively,
376-
onToggleByIdRecursively,
377404

378405
onAddByIdExclusively,
379406
onRemoveByIdExclusively,
@@ -388,17 +415,19 @@ const useIdReducer = (
388415
[
389416
onAddAll,
390417
onAddById,
391-
onAddByIdRecursively,
418+
onAddByIds,
392419
onRemoveAll,
393420
onRemoveById,
394-
onRemoveByIdRecursively,
421+
onRemoveByIds,
395422
onAddByIdExclusively,
396423
onRemoveByIdExclusively,
397424
onToggleByIdExclusively,
398425
onToggleAll,
399426
onToggleById,
400427
onToggleByIdRecursively,
401428
onToggleByIdShift,
429+
onAddByIdRecursively,
430+
onRemoveByIdRecursively,
402431
],
403432
);
404433

‎src/types/common.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,13 @@ export type IdReducerFunctions = {
3333
onRemoveById: (id: string) => void;
3434
onToggleById: (id: string) => void;
3535

36-
onAddByIdRecursively: (ids: string[], options: IdReducerFunctionsOptions) => void;
37-
onRemoveByIdRecursively: (ids: string[]) => void;
36+
onAddByIds: (ids: string[], options: IdReducerFunctionsOptions) => void;
37+
onRemoveByIds: (ids: string[]) => void;
3838
onToggleByIdRecursively: (id: string, options: IdReducerFunctionsOptions) => void;
3939

40+
onAddByIdRecursively: (id: string, options: IdReducerFunctionsOptions) => void;
41+
onRemoveByIdRecursively: (id: string) => void;
42+
4043
onAddByIdExclusively: (id: string) => void;
4144
onRemoveByIdExclusively: () => void;
4245
onToggleByIdExclusively: (id: string) => void;

0 commit comments

Comments
 (0)