🥷 DualListBox で規定の Checkbox を使わないケースを実現する (#1595)

Author: deatiger

.changeset/small-moons-crash.md

@@ -0,0 +1,5 @@
+---
+"ingred-ui": major
+---
+
+Hide Checkbox and RemoveButton in DualListBox if no handler is passed

src/components/DualListBox/DualListBox.stories.tsx

@@ -5,6 +5,8 @@ import DualListBox, {
   DualListBoxItem,
   DualListBoxProps,
 } from "./DualListBox";
+import { ActionButton, Flex, Icon, Spacer, Typography } from "..";
+import { useTheme } from "../../themes";
 
 export default {
   title: "Components/Data Display/DualListBox",
@@ -170,3 +172,143 @@ export const Nested: StoryObj<DualListBoxProps> = {
     );
   },
 };
+
+/**
+ * 規定の Checkbox による選択・選択解除ではなく
+ * DualListBoxItem に配置した Button による選択・選択解除を行う
+ */
+export const WithoutCheckbox: StoryObj<DualListBoxProps> = {
+  render: () => {
+    const theme = useTheme();
+
+    const items = React.useMemo(
+      () => [
+        {
+          id: "1",
+          content: "foo",
+        },
+        {
+          id: "2",
+          content: "bar",
+        },
+        {
+          id: "3",
+          content: "hoge",
+        },
+      ],
+      [],
+    );
+
+    const [allowedIds, setAllowedIds] = React.useState<string[]>([items[2].id]);
+
+    const [disallowedIds, setDisallowedIds] = React.useState<string[]>([]);
+
+    const handleAllow = (id: string) => {
+      setAllowedIds((prevState) => {
+        if (prevState.includes(id)) {
+          return prevState;
+        }
+        return [...prevState, id];
+      });
+    };
+
+    const handleDisallow = (id: string) => {
+      setDisallowedIds((prevState) => {
+        if (prevState.includes(id)) {
+          return prevState;
+        }
+        return [...prevState, id];
+      });
+    };
+
+    const handleRemove = (item: DualListBoxItem) => {
+      setAllowedIds((prevState) =>
+        prevState.filter((selectedId) => selectedId !== item.id),
+      );
+      setDisallowedIds((prevState) =>
+        prevState.filter((selectedId) => selectedId !== item.id),
+      );
+    };
+
+    const candidateItems = React.useMemo(
+      () =>
+        items
+          .filter(
+            (item) =>
+              !allowedIds.includes(item.id) && !disallowedIds.includes(item.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>
+            ),
+          })),
+      [allowedIds, disallowedIds, items, theme.palette.danger.main],
+    );
+
+    const selectedItems = React.useMemo(
+      () =>
+        items
+          .filter(
+            (item) =>
+              allowedIds.includes(item.id) || disallowedIds.includes(item.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}
+                >
+                  <Spacer pr={2}>
+                    {allowedIds.includes(item.id) && (
+                      <Icon color="active" name="check_thin" />
+                    )}
+                    {disallowedIds.includes(item.id) && (
+                      <Icon color={theme.palette.danger.main} name="forbid" />
+                    )}
+                  </Spacer>
+                </Flex>
+              </Flex>
+            ),
+          })),
+      [allowedIds, disallowedIds, items, theme.palette.danger.main],
+    );
+
+    return (
+      <DualListBox
+        candidateItems={candidateItems}
+        disableCheckbox={true}
+        selectedItems={selectedItems}
+        onRemove={handleRemove}
+      />
+    );
+  },
+};

src/components/DualListBox/DualListBox.tsx

@@ -19,6 +19,7 @@ export type DualListBoxCandidateItem = DualListBoxItem & {
 export type DualListBoxProps = {
   candidateItems: DualListBoxCandidateItem[];
   selectedItems: DualListBoxItem[];
+  disableCheckbox?: boolean;
   onAdd?: (item: DualListBoxItem) => void;
   onRemove?: (item: DualListBoxItem) => void;
 };
@@ -36,8 +37,9 @@ const DualListBox = React.forwardRef<HTMLDivElement, DualListBoxProps>(
       candidateItems: candidateItemsProp,
       selectedItems,
       selectedItemTitle,
-      onAdd,
-      onRemove,
+      disableCheckbox,
+      onAdd: handleAdd,
+      onRemove: handleRemove,
     } = useLocaleProps({ props: inProps, name: "DualListBox" });
 
     const theme = useTheme();
@@ -47,24 +49,13 @@ const DualListBox = React.forwardRef<HTMLDivElement, DualListBoxProps>(
       [candidateItemsProp, selectedItems],
     );
 
-    const handleAdd = (item: DualListBoxItem) => {
-      if (onAdd) {
-        onAdd(item);
-      }
-    };
-
-    const handleRemove = (item: DualListBoxItem) => {
-      if (onRemove) {
-        onRemove(item);
-      }
-    };
-
     return (
       <Styled.Container>
         <CandidateRenderer
+          disableCheckbox={disableCheckbox}
           items={candidateItems}
           onAdd={handleAdd}
-          onRemove={onRemove}
+          onRemove={handleRemove}
         />
         <Divider color={theme.palette.divider} orientation="vertical" />
         <SelectedList

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

@@ -118,14 +118,10 @@ describe("DualListBox component testing", () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test("DualListBox candidateItems and selectedItems with inverse", () => {
+  test("DualListBox candidateItems and selectedItems without checkbox", () => {
     const { asFragment } = renderWithThemeProvider(
       <DualListBox
         candidateItems={[
-          {
-            id: "1",
-            content: "foo",
-          },
           {
             id: "2",
             content: "bar",
@@ -144,20 +140,8 @@ describe("DualListBox component testing", () => {
             id: "1",
             content: "foo",
           },
-          {
-            id: "2",
-            content: "bar",
-          },
-          {
-            id: "3",
-            content: "hoge",
-          },
-          {
-            id: "4",
-            content: "fuga",
-          },
         ]}
-        onAdd={jest.fn()}
+        disableCheckbox={true}
         onRemove={jest.fn()}
       />,
     );