diff --git a/CHANGELOG.md b/CHANGELOG.md index 5467352ed..825fa50b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ All notable, unreleased changes to this project will be documented in this file. - Update to newest schema - #638 by @dominik-zeglen - Fix missing save button - #636 by @dominik-zeglen - Fix user avatars - #639 by @dominik-zeglen +- Reset modal state after closing - #644 by @dominik-zeglen ## 2.10.1 diff --git a/src/products/components/ProductExportDialog/ProductExportDialog.tsx b/src/products/components/ProductExportDialog/ProductExportDialog.tsx index 32a1d218b..e5d5c043d 100644 --- a/src/products/components/ProductExportDialog/ProductExportDialog.tsx +++ b/src/products/components/ProductExportDialog/ProductExportDialog.tsx @@ -8,11 +8,11 @@ import ConfirmButton, { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import makeCreatorSteps, { Step } from "@saleor/components/CreatorSteps"; -import Form from "@saleor/components/Form"; import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField"; import { ExportErrorFragment } from "@saleor/fragments/types/ExportErrorFragment"; -import { FormChange } from "@saleor/hooks/useForm"; +import useForm, { FormChange } from "@saleor/hooks/useForm"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; +import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen"; import useWizard from "@saleor/hooks/useWizard"; import { buttonMessages } from "@saleor/intl"; import { SearchAttributes_search_edges_node } from "@saleor/searches/types/SearchAttributes"; @@ -104,121 +104,120 @@ const ProductExportDialog: React.FC = ({ const [selectedAttributes, setSelectedAttributes] = React.useState< MultiAutocompleteChoiceType[] >([]); + const { change, data, reset, submit } = useForm(initialForm, onSubmit); + + useModalDialogOpen(open, { + onClose: () => { + reset(); + setStep(ProductExportStep.INFO); + } + }); const attributeChoices = mapNodeToChoice(attributes); + const handleAttributeSelect: FormChange = event => { + const id = event.target.name.substr(attributeNamePrefix.length); + + change({ + target: { + name: "exportInfo", + value: { + ...data.exportInfo, + attributes: toggle(id, data.exportInfo.attributes, (a, b) => a === b) + } + } + }); + + const choice = attributeChoices.find(choice => choice.value === id); + + setSelectedAttributes( + toggle(choice, selectedAttributes, (a, b) => a.value === b.value) + ); + }; + return ( -
- {({ change, data }) => { - const handleAttributeSelect: FormChange = event => { - const id = event.target.name.substr(attributeNamePrefix.length); + <> + + + + + + {step === ProductExportStep.INFO && ( + + )} + {step === ProductExportStep.SETTINGS && ( + + )} + - change({ - target: { - name: "exportInfo", - value: { - ...data.exportInfo, - attributes: toggle( - id, - data.exportInfo.attributes, - (a, b) => a === b - ) - } - } - }); + {notFormErrors.length > 0 && ( + + {notFormErrors.map(err => ( + + {getExportErrorMessage(err, intl)} + + ))} + + )} - const choice = attributeChoices.find(choice => choice.value === id); - - setSelectedAttributes( - toggle(choice, selectedAttributes, (a, b) => a.value === b.value) - ); - }; - - return ( - <> - - - - - - {step === ProductExportStep.INFO && ( - - )} - {step === ProductExportStep.SETTINGS && ( - - )} - - - {notFormErrors.length > 0 && ( - - {notFormErrors.map(err => ( - - {getExportErrorMessage(err, intl)} - - ))} - - )} - - - {step === ProductExportStep.INFO && ( - - )} - {step === ProductExportStep.SETTINGS && ( - - )} - {step === ProductExportStep.INFO && ( - - )} - {step === ProductExportStep.SETTINGS && ( - - - - )} - - - ); - }} -
+ + {step === ProductExportStep.INFO && ( + + )} + {step === ProductExportStep.SETTINGS && ( + + )} + {step === ProductExportStep.INFO && ( + + )} + {step === ProductExportStep.SETTINGS && ( + + + + )} + +
); }; diff --git a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx index 991137265..23e60815e 100644 --- a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx +++ b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx @@ -190,6 +190,7 @@ const FieldAccordion: React.FC ))} {selectedFields.length > maxChips && ( @@ -331,6 +332,7 @@ const ProductExportDialogInfo: React.FC = ({ } }) } + key={attribute.value} /> ))} {selectedAttributes.length > maxChips && (