♻️ DualListBox のネストしたアイテムもチェックボックスを非表示にできるようにする (#1602)

voyagegroup · Apr 23, 2024 · ba081c1 · ba081c1
1 parent a97fa33
commit ba081c1
Show file tree

Hide file tree

Showing 5 changed files with 194 additions and 33 deletions.
diff --git a/.changeset/long-teachers-applaud.md b/.changeset/long-teachers-applaud.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+Hide checkbox in nested candidate items of DualListBox
diff --git a/src/components/DualListBox/DualListBox.stories.tsx b/src/components/DualListBox/DualListBox.stories.tsx
@@ -190,6 +190,16 @@ export const WithoutCheckbox: StoryObj<DualListBoxProps> = {
         {
           id: "2",
           content: "bar",
+          items: [
+            {
+              id: "21",
+              content: "bar1",
+            },
+            {
+              id: "22",
+              content: "bar2",
+            },
+          ],
         },
         {
           id: "3",
@@ -235,42 +245,100 @@ export const WithoutCheckbox: StoryObj<DualListBoxProps> = {
         items
           .filter(
             (item) =>
-              !allowedIds.includes(item.id) && !disallowedIds.includes(item.id),
+              (!item.items &&
+                !allowedIds.includes(item.id) &&
+                !disallowedIds.includes(item.id)) ||
+              item.items?.some(
+                (nestedItem) =>
+                  !allowedIds.includes(nestedItem.id) &&
+                  !disallowedIds.includes(nestedItem.id),
+              ),
           )
-          .map((item) => ({
-            id: item.id,
-            content: (
-              <Flex alignItems="center" display="flex" flex={1} gap={1}>
-                <Typography>{item.content}</Typography>
-                <Flex
-                  alignItems="center"
-                  display="flex"
-                  flex={1}
-                  justifyContent="flex-end"
-                  gap={1}
-                >
-                  <ActionButton
-                    color="primary"
-                    onClick={() => handleAllow(item.id)}
-                  >
-                    <Icon color="active" name="check_thin" />
-                  </ActionButton>
-                  <ActionButton
-                    color="warning"
-                    onClick={() => handleDisallow(item.id)}
-                  >
-                    <Icon color={theme.palette.danger.main} name="forbid" />
-                  </ActionButton>
-                </Flex>
-              </Flex>
-            ),
-          })),
+          .map((item) => {
+            if (item.items) {
+              return {
+                id: item.id,
+                content: item.content,
+                items: item.items
+                  .filter(
+                    (nestedItem) =>
+                      !allowedIds.includes(nestedItem.id) &&
+                      !disallowedIds.includes(nestedItem.id),
+                  )
+                  .map((nestedItem) => ({
+                    id: nestedItem.id,
+                    content: (
+                      <Flex alignItems="center" display="flex" flex={1} gap={1}>
+                        <Typography>{nestedItem.content}</Typography>
+                        <Flex
+                          alignItems="center"
+                          display="flex"
+                          flex={1}
+                          justifyContent="flex-end"
+                          gap={1}
+                        >
+                          <ActionButton
+                            color="primary"
+                            onClick={() => handleAllow(nestedItem.id)}
+                          >
+                            <Icon color="active" name="check_thin" />
+                          </ActionButton>
+                          <ActionButton
+                            color="warning"
+                            onClick={() => handleDisallow(nestedItem.id)}
+                          >
+                            <Icon
+                              color={theme.palette.danger.main}
+                              name="forbid"
+                            />
+                          </ActionButton>
+                        </Flex>
+                      </Flex>
+                    ),
+                  })),
+              };
+            } else {
+              return {
+                id: item.id,
+                content: (
+                  <Flex alignItems="center" display="flex" flex={1} gap={1}>
+                    <Typography>{item.content}</Typography>
+                    <Flex
+                      alignItems="center"
+                      display="flex"
+                      flex={1}
+                      justifyContent="flex-end"
+                      gap={1}
+                    >
+                      <ActionButton
+                        color="primary"
+                        onClick={() => handleAllow(item.id)}
+                      >
+                        <Icon color="active" name="check_thin" />
+                      </ActionButton>
+                      <ActionButton
+                        color="warning"
+                        onClick={() => handleDisallow(item.id)}
+                      >
+                        <Icon color={theme.palette.danger.main} name="forbid" />
+                      </ActionButton>
+                    </Flex>
+                  </Flex>
+                ),
+              };
+            }
+          }),
       [allowedIds, disallowedIds, items, theme.palette.danger.main],
     );
 
     const selectedItems = React.useMemo(
       () =>
         items
+          .reduce(
+            (prev: DualListBoxItem[], item) =>
+              item.items ? [...prev, ...item.items] : [...prev, item],
+            [],
+          )
           .filter(
             (item) =>
               allowedIds.includes(item.id) || disallowedIds.includes(item.id),

diff --git a/src/components/DualListBox/__tests__/DualListBox.test.tsx b/src/components/DualListBox/__tests__/DualListBox.test.tsx
@@ -125,6 +125,16 @@ describe("DualListBox component testing", () => {
           {
             id: "2",
             content: "bar",
+            items: [
+              {
+                id: "21",
+                content: "bar1",
+              },
+              {
+                id: "22",
+                content: "bar2",
+              },
+            ],
           },
           {
             id: "3",

diff --git a/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap b/src/components/DualListBox/__tests__/__snapshots__/DualListBox.test.tsx.snap
@@ -438,13 +438,90 @@ exports[`DualListBox component testing DualListBox candidateItems and selectedIt
       class="sc-jqUVSM bBFcLq"
     >
       <li
-        class="sc-kDDrLX sc-iqcoie kxcdly dcUJGp"
+        class="sc-kDDrLX sc-crXcEl kxcdly ijUaIR"
       >
         <div
-          class="sc-dkzDqf cyQQCs"
-          display="flex"
+          class="sc-hKMtZM iUXxdT sc-evZas eErWgj"
         >
-          bar
+          <div
+            aria-controls="accordion-content-[object Object]"
+            aria-expanded="false"
+            class="sc-dkzDqf sc-eCYdqJ bURUGj dPPTsR"
+            display="flex"
+            role="button"
+            tabindex="0"
+          >
+            <div
+              class="sc-jSMfEi kusyTI"
+            >
+              <div
+                class="sc-breuTD dBXdmY"
+              >
+                <div
+                  class="sc-dkzDqf cyQQCs"
+                  display="flex"
+                >
+                  bar
+                </div>
+              </div>
+            </div>
+            <div
+              class="sc-ftvSup ecProy"
+            >
+              <div
+                class="sc-iBkjds ixDsgp"
+              >
+                <span
+                  class="sc-gsnTZi ezZeqd"
+                  size="18"
+                >
+                  <svg
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M0,0H24V24H0Z"
+                      fill="none"
+                    />
+                    <path
+                      d="M13.414,16.886,7.757,11.228,9.644,9.343l3.771,3.772,3.771-3.772,1.887,1.885Z"
+                      fill="black"
+                      transform="translate(-1.414 -1.114)"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="sc-papXJ NpijN"
+            height="0"
+          >
+            <ul
+              class="sc-jqUVSM bBFcLq"
+            >
+              <li
+                class="sc-kDDrLX sc-iqcoie kxcdly dcUJGp"
+              >
+                <div
+                  class="sc-dkzDqf hmerDF"
+                  display="flex"
+                >
+                  bar1
+                </div>
+              </li>
+              <li
+                class="sc-kDDrLX sc-iqcoie hlbDuP dcUJGp"
+              >
+                <div
+                  class="sc-dkzDqf crcYbC"
+                  display="flex"
+                >
+                  bar2
+                </div>
+              </li>
+            </ul>
+          </div>
         </div>
       </li>
       <li

diff --git a/src/components/DualListBox/internal/CandidateRenderer/CandidateRenderer.tsx b/src/components/DualListBox/internal/CandidateRenderer/CandidateRenderer.tsx
@@ -29,6 +29,7 @@ export const CandidateRenderer: React.FunctionComponent<{
                 }
               >
                 <CandidateRenderer
+                  disableCheckbox={disableCheckbox}
                   items={item.items}
                   onAdd={onAdd}
                   onRemove={onRemove}