💄 Add disable checkbox to props and modify flex property

deatiger · deatiger · commit 7078736ae1cb · 2024-04-11T12:14:57.000+09:00
diff --git a/src/components/DualListBox/DualListBox.stories.tsx b/src/components/DualListBox/DualListBox.stories.tsx
@@ -5,7 +5,7 @@ import DualListBox, {
   DualListBoxItem,
   DualListBoxProps,
 } from "./DualListBox";
-import { ActionButton, Flex, Icon, Typography } from "..";
+import { ActionButton, Flex, Icon, Spacer, Typography } from "..";
 import { useTheme } from "../../themes";
 
 export default {
@@ -174,9 +174,8 @@ export const Nested: StoryObj<DualListBoxProps> = {
 };
 
 /**
- * props に onAdd / onRemove を渡さない
  * 規定の Checkbox による選択・選択解除ではなく
- * DualListBoxItem に Button を配置して選択・選択解除を行う
+ * DualListBoxItem に配置した Button による選択・選択解除を行う
  */
 export const WithoutCheckbox: StoryObj<DualListBoxProps> = {
   render: () => {
@@ -200,71 +199,115 @@ export const WithoutCheckbox: StoryObj<DualListBoxProps> = {
       [],
     );
 
-    const [selectedIds, setSelectedIds] = React.useState<string[]>([
-      items[2].id,
-    ]);
+    const [allowedIds, setAllowedIds] = React.useState<string[]>([items[2].id]);
 
-    const handleAdd = (id: string) => {
-      setSelectedIds((prevState) => {
+    const [disallowedIds, setDisallowedIds] = React.useState<string[]>([]);
+
+    const handleAllow = (id: string) => {
+      setAllowedIds((prevState) => {
         if (prevState.includes(id)) {
           return prevState;
         }
         return [...prevState, id];
       });
     };
 
-    const handleRemove = (id: string) => {
-      setSelectedIds((prevState) =>
-        prevState.filter((selectedId) => selectedId !== 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) => !selectedIds.includes(item.id))
+          .filter(
+            (item) =>
+              !allowedIds.includes(item.id) && !disallowedIds.includes(item.id),
+          )
           .map((item) => ({
             id: item.id,
             content: (
-              <Flex alignItems="center" display="flex" gap={1}>
+              <Flex alignItems="center" display="flex" flex={1} gap={1}>
                 <Typography>{item.content}</Typography>
-                <ActionButton
-                  color="primary"
-                  onClick={() => handleAdd(item.id)}
+                <Flex
+                  alignItems="center"
+                  display="flex"
+                  flex={1}
+                  justifyContent="flex-end"
+                  gap={1}
                 >
-                  <Icon color="active" name="check_thin" />
-                </ActionButton>
+                  <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>
             ),
           })),
-      [items, selectedIds],
+      [allowedIds, disallowedIds, items, theme.palette.danger.main],
     );
 
     const selectedItems = React.useMemo(
       () =>
         items
-          .filter((item) => selectedIds.includes(item.id))
+          .filter(
+            (item) =>
+              allowedIds.includes(item.id) || disallowedIds.includes(item.id),
+          )
           .map((item) => ({
             id: item.id,
             content: (
-              <Flex alignItems="center" display="flex" gap={1}>
+              <Flex alignItems="center" display="flex" flex={1} gap={1}>
                 <Typography>{item.content}</Typography>
-                <ActionButton
-                  color="warning"
-                  onClick={() => handleRemove(item.id)}
+                <Flex
+                  alignItems="center"
+                  display="flex"
+                  flex={1}
+                  justifyContent="flex-end"
+                  gap={1}
                 >
-                  <Icon color={theme.palette.danger.main} name="delete_bin" />
-                </ActionButton>
+                  <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>
             ),
           })),
-      [items, selectedIds, theme.palette.danger.main],
+      [allowedIds, disallowedIds, items, theme.palette.danger.main],
     );
 
     return (
       <DualListBox
         candidateItems={candidateItems}
+        disableCheckbox={true}
         selectedItems={selectedItems}
+        onRemove={handleRemove}
       />
     );
   },
diff --git a/src/components/DualListBox/DualListBox.tsx b/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,6 +37,7 @@ const DualListBox = React.forwardRef<HTMLDivElement, DualListBoxProps>(
       candidateItems: candidateItemsProp,
       selectedItems,
       selectedItemTitle,
+      disableCheckbox,
       onAdd: handleAdd,
       onRemove: handleRemove,
     } = useLocaleProps({ props: inProps, name: "DualListBox" });
@@ -50,6 +52,7 @@ const DualListBox = React.forwardRef<HTMLDivElement, DualListBoxProps>(
     return (
       <Styled.Container>
         <CandidateRenderer
+          disableCheckbox={disableCheckbox}
           items={candidateItems}
           onAdd={handleAdd}
           onRemove={handleRemove}
diff --git a/src/components/DualListBox/internal/CandidateRenderer/CandidateRenderer.tsx b/src/components/DualListBox/internal/CandidateRenderer/CandidateRenderer.tsx
@@ -8,9 +8,10 @@ import { DualListBoxCandidateItem, DualListBoxItem } from "../../DualListBox";
  */
 export const CandidateRenderer: React.FunctionComponent<{
   items: DualListBoxCandidateItem[];
+  disableCheckbox?: boolean;
   onAdd?: (item: DualListBoxItem) => void;
   onRemove?: (item: DualListBoxItem) => void;
-}> = ({ items, onAdd, onRemove }) => {
+}> = ({ disableCheckbox, items, onAdd, onRemove }) => {
   return (
     <Styled.Container>
       {items.map((item, i) => (
@@ -39,7 +40,12 @@ export const CandidateRenderer: React.FunctionComponent<{
               key={item.id}
               isLastIndex={i + 1 === items.length}
             >
-              <SelectLabel item={item} onAdd={onAdd} onRemove={onRemove}>
+              <SelectLabel
+                disableCheckbox={disableCheckbox}
+                item={item}
+                onAdd={onAdd}
+                onRemove={onRemove}
+              >
                 {item.content}
               </SelectLabel>
             </Styled.UnselectedItem>
diff --git a/src/components/DualListBox/internal/CandidateRenderer/internal/SelectLabel/SelectLabel.tsx b/src/components/DualListBox/internal/CandidateRenderer/internal/SelectLabel/SelectLabel.tsx
@@ -2,18 +2,18 @@ import React from "react";
 import Flex from "../../../../../Flex/Flex";
 import { CandidateItem, DualListBoxItem } from "../../../../DualListBox";
 import Checkbox from "../../../../../Checkbox/Checkbox";
-import Typography from "../../../../../Typography/Typography";
 
 export const SelectLabel: React.FunctionComponent<{
   item: CandidateItem;
+  disableCheckbox?: boolean;
   onAdd?: (item: DualListBoxItem) => void;
   onRemove?: (item: DualListBoxItem) => void;
   children: React.ReactNode;
-}> = ({ children, item, onAdd, onRemove }) => {
+}> = ({ children, disableCheckbox = false, item, onAdd, onRemove }) => {
   return (
     <Flex display="flex" justifyContent="space-between">
-      {item.items || !onAdd ? (
-        <Typography>{children}</Typography>
+      {item.items || disableCheckbox ? (
+        children
       ) : (
         <Checkbox
           checked={item?.selected ?? false}
@@ -26,7 +26,7 @@ export const SelectLabel: React.FunctionComponent<{
             onAdd?.(item);
           }}
         >
-          <Typography>{children}</Typography>
+          {children}
         </Checkbox>
       )}
     </Flex>
