MultipleFilterの入力ステップをスキップしたい (#1646)

voyagegroup · Jul 19, 2024 · e5eb4f0 · e5eb4f0
1 parent 26f7a23
commit e5eb4f0
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 41 deletions.
diff --git a/.changeset/red-peas-prove.md b/.changeset/red-peas-prove.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": minor
+---
+
+Fix MultipleFilter bug and MultipleFilter options can be skipped.
diff --git a/src/components/MultipleFilter/MultipleFilter.stories.tsx b/src/components/MultipleFilter/MultipleFilter.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { StoryObj } from "@storybook/react";
 import MultipleFilter, { MultipleFilterProps } from "./MultipleFilter";
+import Spacer from "../Spacer";
 import { FilterPackType, ReferredFilterType } from "./types";
 
 export default {
@@ -99,6 +100,44 @@ const filterPacksExample: FilterPackType[] = [
   },
 ];
 
+const skipFilterPacksExample: FilterPackType[] = [
+  {
+    categoryName: "Row name",
+    filters: [
+      {
+        filterName: "",
+        conditionTitle: "Arbitrary text input",
+        control: {
+          type: "text",
+        },
+      },
+    ],
+  },
+  {
+    categoryName: "Status",
+    filters: [
+      {
+        filterName: "",
+        control: {
+          type: "select",
+          options: ["valid", "invalid"],
+        },
+      },
+    ],
+  },
+  {
+    categoryName: "Condition",
+    filters: [
+      {
+        filterName: "",
+        control: {
+          type: "boolean",
+        },
+      },
+    ],
+  },
+];
+
 export const Example: StoryObj<MultipleFilterProps> = {
   render: (args) => {
     const [, setFilters] = React.useState<ReferredFilterType[]>([]);
@@ -107,13 +146,38 @@ export const Example: StoryObj<MultipleFilterProps> = {
     };
 
     return (
-      <MultipleFilter
-        {...args}
-        filterPacks={filterPacksExample}
-        inputErrorText={"Input error text can be customized"}
-        formPlaceholder={"Placeholder can be customized"}
-        onChange={handleChange}
-      />
+      <>
+        <MultipleFilter
+          {...args}
+          filterPacks={filterPacksExample}
+          inputErrorText={"Input error text can be customized"}
+          formPlaceholder={"Placeholder can be customized"}
+          onChange={handleChange}
+        />
+        <Spacer mb={24} />
+      </>
+    );
+  },
+};
+
+export const SkipExample: StoryObj<MultipleFilterProps> = {
+  render: (args) => {
+    const [, setFilters] = React.useState<ReferredFilterType[]>([]);
+    const handleChange = (referredFilters: ReferredFilterType[]) => {
+      setFilters(referredFilters);
+    };
+
+    return (
+      <>
+        <MultipleFilter
+          {...args}
+          filterPacks={skipFilterPacksExample}
+          inputErrorText={"Input error text can be customized"}
+          formPlaceholder={"Placeholder can be customized"}
+          onChange={handleChange}
+        />
+        <Spacer mb={24} />
+      </>
     );
   },
 };
diff --git a/src/components/MultipleFilter/MultipleFilter.tsx b/src/components/MultipleFilter/MultipleFilter.tsx
@@ -53,7 +53,7 @@ const MultipleFilter = React.forwardRef<HTMLDivElement, MultipleFilterProps>(
       width,
     } = props;
 
-    const [isFocus, setIsFocus] = React.useState<boolean>(false);
+    const [isClick, setIsClick] = React.useState<boolean>(false);
     const [selectedFilterPack, setSelectedFilterPack] =
       React.useState<FilterPackType | null>(null);
     const theme = useTheme();
@@ -65,16 +65,16 @@ const MultipleFilter = React.forwardRef<HTMLDivElement, MultipleFilterProps>(
     const [willEditFilter, setWillEditFilter] =
       React.useState<ReferredFilterType | null>(null);
     const currentStatus = getCurrentStatus(
-      isFocus,
+      isClick,
       selectedFilterPack,
       willEditFilter,
     );
     const [currentReferredFilters, setCurrentReferredFilters] = React.useState<
       ReferredFilterType[]
     >([]);
 
-    const handleOnFocus = () => {
-      setIsFocus(true);
+    const handleOnClick = () => {
+      setIsClick(true);
     };
 
     const handleSelect = (elem: FilterPackType) => () => {
@@ -83,7 +83,7 @@ const MultipleFilter = React.forwardRef<HTMLDivElement, MultipleFilterProps>(
 
     const handleClose = () => {
       setSelectedFilterPack(null);
-      setIsFocus(false);
+      setIsClick(false);
       setWillEditFilter(null);
     };
 
@@ -92,7 +92,7 @@ const MultipleFilter = React.forwardRef<HTMLDivElement, MultipleFilterProps>(
       reason: "backdropClick" | "clickMenuList",
     ) => {
       if (reason === "backdropClick") {
-        setIsFocus(false);
+        setIsClick(false);
       }
     };
 
@@ -106,7 +106,7 @@ const MultipleFilter = React.forwardRef<HTMLDivElement, MultipleFilterProps>(
       }
 
       setSelectedFilterPack(null);
-      setIsFocus(false);
+      setIsClick(false);
     };
 
     const handleRemove = (removedFilter: ReferredFilterType) => {
@@ -139,8 +139,12 @@ const MultipleFilter = React.forwardRef<HTMLDivElement, MultipleFilterProps>(
         (filterPack) => filterPack.categoryName === referredFilter.categoryName,
       );
       if (willEditFilterPack) {
+        if (willEditFilterPack.filters.length === 1) {
+          willEditFilterPack.filters[0].filterName =
+            willEditFilterPack.categoryName;
+        }
         setEditingLabelElement(event.currentTarget);
-        setIsFocus(true);
+        setIsClick(true);
         setSelectedFilterPack(willEditFilterPack);
         setWillEditFilter(referredFilter);
       }
@@ -164,7 +168,7 @@ const MultipleFilter = React.forwardRef<HTMLDivElement, MultipleFilterProps>(
         }
       }
 
-      setIsFocus(false);
+      setIsClick(false);
       setSelectedFilterPack(null);
       setWillEditFilter(null);
     };
@@ -210,7 +214,7 @@ const MultipleFilter = React.forwardRef<HTMLDivElement, MultipleFilterProps>(
                 readOnly
                 type="text"
                 placeholder={placeholder}
-                onFocus={handleOnFocus}
+                onClick={handleOnClick}
               />
             </Styled.InputContainer>
             {currentStatus === Status.FilterSelecting && (

diff --git a/src/components/MultipleFilter/internal/EditFilterCard/EditFilterCard.tsx b/src/components/MultipleFilter/internal/EditFilterCard/EditFilterCard.tsx
@@ -44,7 +44,7 @@ export const EditFilterCard: React.FunctionComponent<EditFilterCardProps> = (
     inputErrorText = "Please input",
     formPlaceholder = "search",
     sectionTitle = "Section",
-    conditionTitle = "Condition",
+    conditionTitle = "",
     width,
   } = props;
   const theme = useTheme();
@@ -154,12 +154,16 @@ export const EditFilterCard: React.FunctionComponent<EditFilterCardProps> = (
         </Styled.CloseIconContainer>
       </Styled.FilterCardHeader>
       <Styled.FilterContent>
-        <Typography weight="bold" size="lg">
-          {selectedFilterPack?.sectionTitle || sectionTitle}
-        </Typography>
-        <Spacer py={0.5} />
-        <TextField readOnly value={willEditFilter?.filterName} />
-        <Spacer py={1} />
+        {(selectedFilterPack?.filters?.length ?? 0) > 1 && (
+          <>
+            <Typography weight="bold" size="lg">
+              {selectedFilterPack?.sectionTitle || sectionTitle}
+            </Typography>
+            <Spacer py={0.5} />
+            <TextField readOnly value={willEditFilter?.filterName} />
+            <Spacer py={1} />
+          </>
+        )}
         <Typography weight="bold" size="lg">
           {filter?.conditionTitle || conditionTitle}
         </Typography>

diff --git a/src/components/MultipleFilter/internal/FilterCard/FilterCard.tsx b/src/components/MultipleFilter/internal/FilterCard/FilterCard.tsx
@@ -44,13 +44,16 @@ export const FilterCard: React.FunctionComponent<FilterCardProps> = (
     width,
     currentReferredFilters,
     sectionTitle = "Section",
-    conditionTitle = "Condition",
+    conditionTitle = "",
   } = props;
 
   const theme = useTheme();
+  const isMultipleFilters = (selectedFilterPack?.filters?.length ?? 0) > 1;
   const [section, setSection] = React.useState<string | undefined>();
   const [condition, setCondition] = React.useState<string | undefined>();
-  const [selectedFilter, setSelectedFilter] = React.useState<FilterType>();
+  const [selectedFilter, setSelectedFilter] = React.useState<
+    FilterType | undefined
+  >(isMultipleFilters ? undefined : selectedFilterPack?.filters[0]);
   const [textFieldErrorText, setTextFieldErrorText] =
     React.useState<string>("");
 
@@ -134,7 +137,9 @@ export const FilterCard: React.FunctionComponent<FilterCardProps> = (
   const handleSubmit = () => {
     const newFilter = {
       categoryName: selectedFilterPack?.categoryName as string,
-      filterName: selectedFilter?.filterName as string,
+      filterName: isMultipleFilters
+        ? (selectedFilter?.filterName as string)
+        : (selectedFilterPack?.categoryName as string),
       filterType: selectedFilter?.control.type as Types,
       filterCondition: condition,
     };
@@ -181,17 +186,21 @@ export const FilterCard: React.FunctionComponent<FilterCardProps> = (
         </Styled.CloseIconContainer>
       </Styled.FilterCardHeader>
       <Styled.FilterContent>
-        <Typography weight="bold" size="lg">
-          {selectedFilterPack?.sectionTitle || sectionTitle}
-        </Typography>
-        <Spacer py={0.5} />
-        <Select
-          maxMenuHeight={250}
-          options={getUnSelectedOption(options)}
-          autoFocus={true}
-          onChange={handleFilterChange}
-        />
-        <Spacer py={1} />
+        {isMultipleFilters && (
+          <>
+            <Typography weight="bold" size="lg">
+              {selectedFilterPack?.sectionTitle || sectionTitle}
+            </Typography>
+            <Spacer py={0.5} />
+            <Select
+              maxMenuHeight={250}
+              options={getUnSelectedOption(options)}
+              autoFocus={true}
+              onChange={handleFilterChange}
+            />
+            <Spacer py={1} />
+          </>
+        )}
         {selectedFilter && (
           <div>
             <Typography weight="bold" size="lg">
@@ -212,7 +221,7 @@ export const FilterCard: React.FunctionComponent<FilterCardProps> = (
           <Button
             size="small"
             inline={true}
-            disabled={!section || !condition}
+            disabled={(isMultipleFilters && !section) || !condition}
             onClick={handleSubmit}
           >
             {applyButtonTitle}

diff --git a/src/components/MultipleFilter/internal/Label/Label.tsx b/src/components/MultipleFilter/internal/Label/Label.tsx
@@ -38,8 +38,9 @@ export const Label: React.FunctionComponent<Props> = ({
     <Styled.Container>
       <Styled.LeftContainer onClick={handleClick}>
         <Typography size="sm" component="span">
-          {filter.filterName}
-          &nbsp;
+          {filter.filterName}: &nbsp;
+        </Typography>
+        <Typography size="sm" component="span" weight="bold">
           {boolToString(filter.filterCondition)}
         </Typography>
       </Styled.LeftContainer>