diff --git a/.changeset/red-peas-prove.md b/.changeset/red-peas-prove.md new file mode 100644 index 000000000..d557e99a6 --- /dev/null +++ b/.changeset/red-peas-prove.md @@ -0,0 +1,5 @@ +--- +"ingred-ui": minor +--- + +Fix MultipleFilter bug and MultipleFilter options can be skipped. \ No newline at end of file diff --git a/src/components/MultipleFilter/MultipleFilter.stories.tsx b/src/components/MultipleFilter/MultipleFilter.stories.tsx index 40e9812bb..8bb1f0028 100644 --- 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 = { render: (args) => { const [, setFilters] = React.useState([]); @@ -107,13 +146,38 @@ export const Example: StoryObj = { }; return ( - + <> + + + + ); + }, +}; + +export const SkipExample: StoryObj = { + render: (args) => { + const [, setFilters] = React.useState([]); + const handleChange = (referredFilters: ReferredFilterType[]) => { + setFilters(referredFilters); + }; + + return ( + <> + + + ); }, }; diff --git a/src/components/MultipleFilter/MultipleFilter.tsx b/src/components/MultipleFilter/MultipleFilter.tsx index 46593e364..ed530159d 100644 --- a/src/components/MultipleFilter/MultipleFilter.tsx +++ b/src/components/MultipleFilter/MultipleFilter.tsx @@ -53,7 +53,7 @@ const MultipleFilter = React.forwardRef( width, } = props; - const [isFocus, setIsFocus] = React.useState(false); + const [isClick, setIsClick] = React.useState(false); const [selectedFilterPack, setSelectedFilterPack] = React.useState(null); const theme = useTheme(); @@ -65,7 +65,7 @@ const MultipleFilter = React.forwardRef( const [willEditFilter, setWillEditFilter] = React.useState(null); const currentStatus = getCurrentStatus( - isFocus, + isClick, selectedFilterPack, willEditFilter, ); @@ -73,8 +73,8 @@ const MultipleFilter = React.forwardRef( ReferredFilterType[] >([]); - const handleOnFocus = () => { - setIsFocus(true); + const handleOnClick = () => { + setIsClick(true); }; const handleSelect = (elem: FilterPackType) => () => { @@ -83,7 +83,7 @@ const MultipleFilter = React.forwardRef( const handleClose = () => { setSelectedFilterPack(null); - setIsFocus(false); + setIsClick(false); setWillEditFilter(null); }; @@ -92,7 +92,7 @@ const MultipleFilter = React.forwardRef( reason: "backdropClick" | "clickMenuList", ) => { if (reason === "backdropClick") { - setIsFocus(false); + setIsClick(false); } }; @@ -106,7 +106,7 @@ const MultipleFilter = React.forwardRef( } setSelectedFilterPack(null); - setIsFocus(false); + setIsClick(false); }; const handleRemove = (removedFilter: ReferredFilterType) => { @@ -139,8 +139,12 @@ const MultipleFilter = React.forwardRef( (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( } } - setIsFocus(false); + setIsClick(false); setSelectedFilterPack(null); setWillEditFilter(null); }; @@ -210,7 +214,7 @@ const MultipleFilter = React.forwardRef( readOnly type="text" placeholder={placeholder} - onFocus={handleOnFocus} + onClick={handleOnClick} /> {currentStatus === Status.FilterSelecting && ( diff --git a/src/components/MultipleFilter/internal/EditFilterCard/EditFilterCard.tsx b/src/components/MultipleFilter/internal/EditFilterCard/EditFilterCard.tsx index 5175842bf..5f69f8ed3 100644 --- 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 = ( inputErrorText = "Please input", formPlaceholder = "search", sectionTitle = "Section", - conditionTitle = "Condition", + conditionTitle = "", width, } = props; const theme = useTheme(); @@ -154,12 +154,16 @@ export const EditFilterCard: React.FunctionComponent = ( - - {selectedFilterPack?.sectionTitle || sectionTitle} - - - - + {(selectedFilterPack?.filters?.length ?? 0) > 1 && ( + <> + + {selectedFilterPack?.sectionTitle || sectionTitle} + + + + + + )} {filter?.conditionTitle || conditionTitle} diff --git a/src/components/MultipleFilter/internal/FilterCard/FilterCard.tsx b/src/components/MultipleFilter/internal/FilterCard/FilterCard.tsx index 1d4d283a9..347128c85 100644 --- 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 = ( width, currentReferredFilters, sectionTitle = "Section", - conditionTitle = "Condition", + conditionTitle = "", } = props; const theme = useTheme(); + const isMultipleFilters = (selectedFilterPack?.filters?.length ?? 0) > 1; const [section, setSection] = React.useState(); const [condition, setCondition] = React.useState(); - const [selectedFilter, setSelectedFilter] = React.useState(); + const [selectedFilter, setSelectedFilter] = React.useState< + FilterType | undefined + >(isMultipleFilters ? undefined : selectedFilterPack?.filters[0]); const [textFieldErrorText, setTextFieldErrorText] = React.useState(""); @@ -134,7 +137,9 @@ export const FilterCard: React.FunctionComponent = ( 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 = ( - - {selectedFilterPack?.sectionTitle || sectionTitle} - - - + + + )} {selectedFilter && (
@@ -212,7 +221,7 @@ export const FilterCard: React.FunctionComponent = (