Skip to content

Commit ba081c1

Browse files
deatigerdeatiger
authored
♻️ DualListBox のネストしたアイテムもチェックボックスを非表示にできるようにする (#1602)
1 parent a97fa33 commit ba081c1

File tree

5 files changed

+194
-33
lines changed

5 files changed

+194
-33
lines changed

‎.changeset/long-teachers-applaud.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"ingred-ui": patch
3+
---
4+
5+
Hide checkbox in nested candidate items of DualListBox

‎src/components/DualListBox/DualListBox.stories.tsx

+97-29
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,16 @@ export const WithoutCheckbox: StoryObj<DualListBoxProps> = {
190190
{
191191
id: "2",
192192
content: "bar",
193+
items: [
194+
{
195+
id: "21",
196+
content: "bar1",
197+
},
198+
{
199+
id: "22",
200+
content: "bar2",
201+
},
202+
],
193203
},
194204
{
195205
id: "3",
@@ -235,42 +245,100 @@ export const WithoutCheckbox: StoryObj<DualListBoxProps> = {
235245
items
236246
.filter(
237247
(item) =>
238-
!allowedIds.includes(item.id) && !disallowedIds.includes(item.id),
248+
(!item.items &&
249+
!allowedIds.includes(item.id) &&
250+
!disallowedIds.includes(item.id)) ||
251+
item.items?.some(
252+
(nestedItem) =>
253+
!allowedIds.includes(nestedItem.id) &&
254+
!disallowedIds.includes(nestedItem.id),
255+
),
239256
)
240-
.map((item) => ({
241-
id: item.id,
242-
content: (
243-
<Flex alignItems="center" display="flex" flex={1} gap={1}>
244-
<Typography>{item.content}</Typography>
245-
<Flex
246-
alignItems="center"
247-
display="flex"
248-
flex={1}
249-
justifyContent="flex-end"
250-
gap={1}
251-
>
252-
<ActionButton
253-
color="primary"
254-
onClick={() => handleAllow(item.id)}
255-
>
256-
<Icon color="active" name="check_thin" />
257-
</ActionButton>
258-
<ActionButton
259-
color="warning"
260-
onClick={() => handleDisallow(item.id)}
261-
>
262-
<Icon color={theme.palette.danger.main} name="forbid" />
263-
</ActionButton>
264-
</Flex>
265-
</Flex>
266-
),
267-
})),
257+
.map((item) => {
258+
if (item.items) {
259+
return {
260+
id: item.id,
261+
content: item.content,
262+
items: item.items
263+
.filter(
264+
(nestedItem) =>
265+
!allowedIds.includes(nestedItem.id) &&
266+
!disallowedIds.includes(nestedItem.id),
267+
)
268+
.map((nestedItem) => ({
269+
id: nestedItem.id,
270+
content: (
271+
<Flex alignItems="center" display="flex" flex={1} gap={1}>
272+
<Typography>{nestedItem.content}</Typography>
273+
<Flex
274+
alignItems="center"
275+
display="flex"
276+
flex={1}
277+
justifyContent="flex-end"
278+
gap={1}
279+
>
280+
<ActionButton
281+
color="primary"
282+
onClick={() => handleAllow(nestedItem.id)}
283+
>
284+
<Icon color="active" name="check_thin" />
285+
</ActionButton>
286+
<ActionButton
287+
color="warning"
288+
onClick={() => handleDisallow(nestedItem.id)}
289+
>
290+
<Icon
291+
color={theme.palette.danger.main}
292+
name="forbid"
293+
/>
294+
</ActionButton>
295+
</Flex>
296+
</Flex>
297+
),
298+
})),
299+
};
300+
} else {
301+
return {
302+
id: item.id,
303+
content: (
304+
<Flex alignItems="center" display="flex" flex={1} gap={1}>
305+
<Typography>{item.content}</Typography>
306+
<Flex
307+
alignItems="center"
308+
display="flex"
309+
flex={1}
310+
justifyContent="flex-end"
311+
gap={1}
312+
>
313+
<ActionButton
314+
color="primary"
315+
onClick={() => handleAllow(item.id)}
316+
>
317+
<Icon color="active" name="check_thin" />
318+
</ActionButton>
319+
<ActionButton
320+
color="warning"
321+
onClick={() => handleDisallow(item.id)}
322+
>
323+
<Icon color={theme.palette.danger.main} name="forbid" />
324+
</ActionButton>
325+
</Flex>
326+
</Flex>
327+
),
328+
};
329+
}
330+
}),
268331
[allowedIds, disallowedIds, items, theme.palette.danger.main],
269332
);
270333

271334
const selectedItems = React.useMemo(
272335
() =>
273336
items
337+
.reduce(
338+
(prev: DualListBoxItem[], item) =>
339+
item.items ? [...prev, ...item.items] : [...prev, item],
340+
[],
341+
)
274342
.filter(
275343
(item) =>
276344
allowedIds.includes(item.id) || disallowedIds.includes(item.id),

‎src/components/DualListBox/__tests__/DualListBox.test.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,16 @@ describe("DualListBox component testing", () => {
125125
{
126126
id: "2",
127127
content: "bar",
128+
items: [
129+
{
130+
id: "21",
131+
content: "bar1",
132+
},
133+
{
134+
id: "22",
135+
content: "bar2",
136+
},
137+
],
128138
},
129139
{
130140
id: "3",

‎src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap

+81-4
Original file line numberDiff line numberDiff line change
@@ -438,13 +438,90 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
438438
class="sc-jqUVSM bBFcLq"
439439
>
440440
<li
441-
class="sc-kDDrLX sc-iqcoie kxcdly dcUJGp"
441+
class="sc-kDDrLX sc-crXcEl kxcdly ijUaIR"
442442
>
443443
<div
444-
class="sc-dkzDqf cyQQCs"
445-
display="flex"
444+
class="sc-hKMtZM iUXxdT sc-evZas eErWgj"
446445
>
447-
bar
446+
<div
447+
aria-controls="accordion-content-[object Object]"
448+
aria-expanded="false"
449+
class="sc-dkzDqf sc-eCYdqJ bURUGj dPPTsR"
450+
display="flex"
451+
role="button"
452+
tabindex="0"
453+
>
454+
<div
455+
class="sc-jSMfEi kusyTI"
456+
>
457+
<div
458+
class="sc-breuTD dBXdmY"
459+
>
460+
<div
461+
class="sc-dkzDqf cyQQCs"
462+
display="flex"
463+
>
464+
bar
465+
</div>
466+
</div>
467+
</div>
468+
<div
469+
class="sc-ftvSup ecProy"
470+
>
471+
<div
472+
class="sc-iBkjds ixDsgp"
473+
>
474+
<span
475+
class="sc-gsnTZi ezZeqd"
476+
size="18"
477+
>
478+
<svg
479+
viewBox="0 0 24 24"
480+
xmlns="http://www.w3.org/2000/svg"
481+
>
482+
<path
483+
d="M0,0H24V24H0Z"
484+
fill="none"
485+
/>
486+
<path
487+
d="M13.414,16.886,7.757,11.228,9.644,9.343l3.771,3.772,3.771-3.772,1.887,1.885Z"
488+
fill="black"
489+
transform="translate(-1.414 -1.114)"
490+
/>
491+
</svg>
492+
</span>
493+
</div>
494+
</div>
495+
</div>
496+
<div
497+
class="sc-papXJ NpijN"
498+
height="0"
499+
>
500+
<ul
501+
class="sc-jqUVSM bBFcLq"
502+
>
503+
<li
504+
class="sc-kDDrLX sc-iqcoie kxcdly dcUJGp"
505+
>
506+
<div
507+
class="sc-dkzDqf hmerDF"
508+
display="flex"
509+
>
510+
bar1
511+
</div>
512+
</li>
513+
<li
514+
class="sc-kDDrLX sc-iqcoie hlbDuP dcUJGp"
515+
>
516+
<div
517+
class="sc-dkzDqf crcYbC"
518+
display="flex"
519+
>
520+
bar2
521+
</div>
522+
</li>
523+
</ul>
524+
</div>
448525
</div>
449526
</li>
450527
<li

‎src/components/DualListBox/internal/CandidateRenderer/CandidateRenderer.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const CandidateRenderer: React.FunctionComponent<{
2929
}
3030
>
3131
<CandidateRenderer
32+
disableCheckbox={disableCheckbox}
3233
items={item.items}
3334
onAdd={onAdd}
3435
onRemove={onRemove}

0 commit comments

Comments
 (0)