Extract product update form to separate component
This commit is contained in:
dominik-zeglen
parent
d192bcac34
commit
374a072bf7
2 changed files with 454 additions and 318 deletions
|
|
@ -3,7 +3,6 @@ import AvailabilityCard from "@saleor/components/AvailabilityCard";
|
|||
import CardSpacer from "@saleor/components/CardSpacer";
|
||||
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
|
||||
import Container from "@saleor/components/Container";
|
||||
import Form from "@saleor/components/Form";
|
||||
import Grid from "@saleor/components/Grid";
|
||||
import Metadata from "@saleor/components/Metadata/Metadata";
|
||||
import PageHeader from "@saleor/components/PageHeader";
|
||||
|
|
@ -13,18 +12,13 @@ import { ProductErrorWithAttributesFragment } from "@saleor/fragments/types/Prod
|
|||
import { TaxTypeFragment } from "@saleor/fragments/types/TaxTypeFragment";
|
||||
import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment";
|
||||
import useDateLocalize from "@saleor/hooks/useDateLocalize";
|
||||
import useFormset from "@saleor/hooks/useFormset";
|
||||
import useStateFromProps from "@saleor/hooks/useStateFromProps";
|
||||
import { sectionNames } from "@saleor/intl";
|
||||
import { maybe } from "@saleor/misc";
|
||||
import { SearchCategories_search_edges_node } from "@saleor/searches/types/SearchCategories";
|
||||
import { SearchCollections_search_edges_node } from "@saleor/searches/types/SearchCollections";
|
||||
import { FetchMoreProps, ListActions, ReorderAction } from "@saleor/types";
|
||||
import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
|
||||
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
|
||||
import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
|
||||
import { convertFromRaw, RawDraftContentState } from "draft-js";
|
||||
import { diff } from "fast-array-diff";
|
||||
import React from "react";
|
||||
import { useIntl } from "react-intl";
|
||||
|
||||
|
|
@ -33,17 +27,7 @@ import {
|
|||
ProductDetails_product_images,
|
||||
ProductDetails_product_variants
|
||||
} from "../../types/ProductDetails";
|
||||
import {
|
||||
getAttributeInputFromProduct,
|
||||
getChoices,
|
||||
getProductUpdatePageFormData,
|
||||
getStockInputFromProduct,
|
||||
ProductUpdatePageFormData
|
||||
} from "../../utils/data";
|
||||
import {
|
||||
createAttributeChangeHandler,
|
||||
createAttributeMultiChangeHandler
|
||||
} from "../../utils/handlers";
|
||||
import { getChoices, ProductUpdatePageFormData } from "../../utils/data";
|
||||
import ProductAttributes, { ProductAttributeInput } from "../ProductAttributes";
|
||||
import ProductDetailsForm from "../ProductDetailsForm";
|
||||
import ProductImages from "../ProductImages";
|
||||
|
|
@ -53,6 +37,7 @@ import ProductShipping from "../ProductShipping/ProductShipping";
|
|||
import ProductStocks, { ProductStockInput } from "../ProductStocks";
|
||||
import ProductTaxes from "../ProductTaxes";
|
||||
import ProductVariants from "../ProductVariants";
|
||||
import ProductUpdateForm from "./form";
|
||||
|
||||
export interface ProductUpdatePageProps extends ListActions {
|
||||
defaultWeightUnit: string;
|
||||
|
|
@ -136,25 +121,9 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
|
|||
}) => {
|
||||
const intl = useIntl();
|
||||
const localizeDate = useDateLocalize();
|
||||
const attributeInput = React.useMemo(
|
||||
() => getAttributeInputFromProduct(product),
|
||||
[product]
|
||||
);
|
||||
const stockInput = React.useMemo(() => getStockInputFromProduct(product), [
|
||||
product
|
||||
]);
|
||||
const { change: changeAttributeData, data: attributes } = useFormset(
|
||||
attributeInput
|
||||
);
|
||||
const {
|
||||
add: addStock,
|
||||
change: changeStockData,
|
||||
data: stocks,
|
||||
remove: removeStock
|
||||
} = useFormset(stockInput);
|
||||
|
||||
const [selectedCategory, setSelectedCategory] = useStateFromProps(
|
||||
maybe(() => product.category.name, "")
|
||||
product?.category?.name || ""
|
||||
);
|
||||
|
||||
const [selectedCollections, setSelectedCollections] = useStateFromProps(
|
||||
|
|
@ -165,109 +134,34 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
|
|||
product?.taxType.description
|
||||
);
|
||||
|
||||
const {
|
||||
isMetadataModified,
|
||||
isPrivateMetadataModified,
|
||||
makeChangeHandler: makeMetadataChangeHandler
|
||||
} = useMetadataChangeTrigger();
|
||||
|
||||
const initialData = getProductUpdatePageFormData(product, variants);
|
||||
const initialDescription = maybe<RawDraftContentState>(() =>
|
||||
JSON.parse(product.descriptionJson)
|
||||
);
|
||||
|
||||
const categories = getChoices(categoryChoiceList);
|
||||
const collections = getChoices(collectionChoiceList);
|
||||
const currency =
|
||||
product?.variants?.length && product.variants[0].price.currency;
|
||||
const hasVariants = maybe(() => product.productType.hasVariants, false);
|
||||
const currency = product?.variants[0]?.price.currency;
|
||||
const hasVariants = product?.productType?.hasVariants;
|
||||
const taxTypeChoices =
|
||||
taxTypes?.map(taxType => ({
|
||||
label: taxType.description,
|
||||
value: taxType.taxCode
|
||||
})) || [];
|
||||
|
||||
const getAvailabilityData = ({
|
||||
availableForPurchase,
|
||||
isAvailableForPurchase,
|
||||
isPublished,
|
||||
publicationDate
|
||||
}: ProductUpdatePageFormData) => ({
|
||||
isAvailableForPurchase: isAvailableForPurchase || !!availableForPurchase,
|
||||
isPublished: isPublished || !!publicationDate
|
||||
});
|
||||
|
||||
const getStocksData = () => {
|
||||
if (product.productType.hasVariants) {
|
||||
return { addStocks: [], removeStocks: [], updateStocks: [] };
|
||||
}
|
||||
|
||||
const dataStocks = stocks.map(stock => stock.id);
|
||||
const variantStocks = product.variants[0]?.stocks.map(
|
||||
stock => stock.warehouse.id
|
||||
);
|
||||
const stockDiff = diff(variantStocks, dataStocks);
|
||||
|
||||
return {
|
||||
addStocks: stocks.filter(stock =>
|
||||
stockDiff.added.some(addedStock => addedStock === stock.id)
|
||||
),
|
||||
removeStocks: stockDiff.removed,
|
||||
updateStocks: stocks.filter(
|
||||
stock => !stockDiff.added.some(addedStock => addedStock === stock.id)
|
||||
)
|
||||
};
|
||||
};
|
||||
|
||||
const getMetadata = (data: ProductUpdatePageFormData) => ({
|
||||
metadata: isMetadataModified ? data.metadata : undefined,
|
||||
privateMetadata: isPrivateMetadataModified
|
||||
? data.privateMetadata
|
||||
: undefined
|
||||
});
|
||||
|
||||
const getParsedData = (data: ProductUpdatePageFormData) => ({
|
||||
...data,
|
||||
...getAvailabilityData(data),
|
||||
...getStocksData(),
|
||||
...getMetadata(data),
|
||||
attributes
|
||||
});
|
||||
|
||||
const handleSubmit = (data: ProductUpdatePageFormData) =>
|
||||
onSubmit(getParsedData(data));
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit} initial={initialData} confirmLeave>
|
||||
{({ change, data, hasChanged, submit, triggerChange, toggleValue }) => {
|
||||
const handleCollectionSelect = createMultiAutocompleteSelectHandler(
|
||||
toggleValue,
|
||||
setSelectedCollections,
|
||||
selectedCollections,
|
||||
collections
|
||||
);
|
||||
const handleCategorySelect = createSingleAutocompleteSelectHandler(
|
||||
change,
|
||||
setSelectedCategory,
|
||||
categories
|
||||
);
|
||||
const handleAttributeChange = createAttributeChangeHandler(
|
||||
changeAttributeData,
|
||||
triggerChange
|
||||
);
|
||||
const handleAttributeMultiChange = createAttributeMultiChangeHandler(
|
||||
changeAttributeData,
|
||||
attributes,
|
||||
triggerChange
|
||||
);
|
||||
const changeMetadata = makeMetadataChangeHandler(change);
|
||||
const handleTaxTypeSelect = createSingleAutocompleteSelectHandler(
|
||||
change,
|
||||
setSelectedTaxType,
|
||||
taxTypeChoices
|
||||
);
|
||||
|
||||
return (
|
||||
<ProductUpdateForm
|
||||
onSubmit={onSubmit}
|
||||
product={product}
|
||||
categories={categories}
|
||||
collections={collections}
|
||||
selectedCollections={selectedCollections}
|
||||
setSelectedCategory={setSelectedCategory}
|
||||
setSelectedCollections={setSelectedCollections}
|
||||
setSelectedTaxType={setSelectedTaxType}
|
||||
taxTypes={taxTypeChoices}
|
||||
warehouses={warehouses}
|
||||
>
|
||||
{({ change, data, handlers, hasChanged, submit }) => (
|
||||
<>
|
||||
<Container>
|
||||
<AppHeader onBack={onBack}>
|
||||
|
|
@ -293,13 +187,13 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
|
|||
onImageUpload={onImageUpload}
|
||||
/>
|
||||
<CardSpacer />
|
||||
{attributes.length > 0 && (
|
||||
{data.attributes.length > 0 && (
|
||||
<ProductAttributes
|
||||
attributes={attributes}
|
||||
attributes={data.attributes}
|
||||
errors={errors}
|
||||
disabled={disabled}
|
||||
onChange={handleAttributeChange}
|
||||
onMultiChange={handleAttributeMultiChange}
|
||||
onChange={handlers.selectAttribute}
|
||||
onMultiChange={handlers.selectAttributeMultiple}
|
||||
/>
|
||||
)}
|
||||
<CardSpacer />
|
||||
|
|
@ -351,28 +245,12 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
|
|||
disabled={disabled}
|
||||
hasVariants={false}
|
||||
errors={errors}
|
||||
stocks={stocks}
|
||||
stocks={data.stocks}
|
||||
warehouses={warehouses}
|
||||
onChange={(id, value) => {
|
||||
triggerChange();
|
||||
changeStockData(id, value);
|
||||
}}
|
||||
onChange={handlers.changeStock}
|
||||
onFormDataChange={change}
|
||||
onWarehouseStockAdd={id => {
|
||||
triggerChange();
|
||||
addStock({
|
||||
data: null,
|
||||
id,
|
||||
label: warehouses.find(
|
||||
warehouse => warehouse.id === id
|
||||
).name,
|
||||
value: "0"
|
||||
});
|
||||
}}
|
||||
onWarehouseStockDelete={id => {
|
||||
triggerChange();
|
||||
removeStock(id);
|
||||
}}
|
||||
onWarehouseStockAdd={handlers.addStock}
|
||||
onWarehouseStockDelete={handlers.deleteStock}
|
||||
onWarehouseConfigure={onWarehouseConfigure}
|
||||
/>
|
||||
</>
|
||||
|
|
@ -399,7 +277,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
|
|||
})}
|
||||
/>
|
||||
<CardSpacer />
|
||||
<Metadata data={data} onChange={changeMetadata} />
|
||||
<Metadata data={data} onChange={handlers.changeMetadata} />
|
||||
</div>
|
||||
<div>
|
||||
<ProductOrganization
|
||||
|
|
@ -415,9 +293,9 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
|
|||
fetchCollections={fetchCollections}
|
||||
fetchMoreCategories={fetchMoreCategories}
|
||||
fetchMoreCollections={fetchMoreCollections}
|
||||
productType={maybe(() => product.productType)}
|
||||
onCategoryChange={handleCategorySelect}
|
||||
onCollectionChange={handleCollectionSelect}
|
||||
productType={product?.productType}
|
||||
onCategoryChange={handlers.selectCategory}
|
||||
onCollectionChange={handlers.selectCollection}
|
||||
/>
|
||||
<CardSpacer />
|
||||
<AvailabilityCard
|
||||
|
|
@ -452,7 +330,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
|
|||
selectedTaxTypeDisplayName={selectedTaxType}
|
||||
taxTypes={taxTypes}
|
||||
onChange={change}
|
||||
onTaxTypeChange={handleTaxTypeSelect}
|
||||
onTaxTypeChange={handlers.selectTaxRate}
|
||||
/>
|
||||
</div>
|
||||
</Grid>
|
||||
|
|
@ -465,9 +343,8 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
|
|||
/>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Form>
|
||||
)}
|
||||
</ProductUpdateForm>
|
||||
);
|
||||
};
|
||||
ProductUpdatePage.displayName = "ProductUpdatePage";
|
||||
|
|
|
|||
259
src/products/components/ProductUpdatePage/form.tsx
Normal file
259
src/products/components/ProductUpdatePage/form.tsx
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
import { MetadataFormData } from "@saleor/components/Metadata";
|
||||
import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
|
||||
import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
|
||||
import useForm, { FormChange } from "@saleor/hooks/useForm";
|
||||
import useFormset, {
|
||||
FormsetChange,
|
||||
FormsetData
|
||||
} from "@saleor/hooks/useFormset";
|
||||
import { ProductDetails_product } from "@saleor/products/types/ProductDetails";
|
||||
import {
|
||||
getAttributeInputFromProduct,
|
||||
getProductUpdatePageFormData,
|
||||
getStockInputFromProduct
|
||||
} from "@saleor/products/utils/data";
|
||||
import {
|
||||
createAttributeChangeHandler,
|
||||
createAttributeMultiChangeHandler
|
||||
} from "@saleor/products/utils/handlers";
|
||||
import { SearchWarehouses_search_edges_node } from "@saleor/searches/types/SearchWarehouses";
|
||||
import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler";
|
||||
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
|
||||
import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
|
||||
import { RawDraftContentState } from "draft-js";
|
||||
import { diff } from "fast-array-diff";
|
||||
import React from "react";
|
||||
|
||||
import { ProductAttributeInput } from "../ProductAttributes";
|
||||
import { ProductStockInput } from "../ProductStocks";
|
||||
|
||||
export interface ProductUpdateFormData extends MetadataFormData {
|
||||
availableForPurchase: string;
|
||||
basePrice: number;
|
||||
category: string | null;
|
||||
changeTaxCode: boolean;
|
||||
chargeTaxes: boolean;
|
||||
collections: string[];
|
||||
description: RawDraftContentState;
|
||||
isAvailable: boolean;
|
||||
isAvailableForPurchase: boolean;
|
||||
isPublished: boolean;
|
||||
name: string;
|
||||
slug: string;
|
||||
publicationDate: string;
|
||||
seoDescription: string;
|
||||
seoTitle: string;
|
||||
sku: string;
|
||||
taxCode: string;
|
||||
trackInventory: boolean;
|
||||
visibleInListings: boolean;
|
||||
weight: string;
|
||||
}
|
||||
export interface ProductUpdateData extends ProductUpdateFormData {
|
||||
attributes: ProductAttributeInput[];
|
||||
stocks: ProductStockInput[];
|
||||
}
|
||||
export interface ProductUpdateSubmitData extends ProductUpdateFormData {
|
||||
attributes: ProductAttributeInput[];
|
||||
collections: string[];
|
||||
addStocks: ProductStockInput[];
|
||||
updateStocks: ProductStockInput[];
|
||||
removeStocks: string[];
|
||||
}
|
||||
|
||||
export interface UseProductUpdateFormResult {
|
||||
change: FormChange;
|
||||
data: ProductUpdateData;
|
||||
handlers: Record<
|
||||
"changeMetadata" | "selectCategory" | "selectCollection" | "selectTaxRate",
|
||||
FormChange
|
||||
> &
|
||||
Record<
|
||||
"changeStock" | "selectAttribute" | "selectAttributeMultiple",
|
||||
FormsetChange
|
||||
> &
|
||||
Record<"addStock" | "deleteStock", (id: string) => void>;
|
||||
hasChanged: boolean;
|
||||
submit: () => Promise<boolean>;
|
||||
}
|
||||
|
||||
export interface UseProductUpdateFormOpts
|
||||
extends Record<
|
||||
"categories" | "collections" | "taxTypes",
|
||||
SingleAutocompleteChoiceType[]
|
||||
> {
|
||||
setSelectedCategory: React.Dispatch<React.SetStateAction<string>>;
|
||||
setSelectedCollections: React.Dispatch<
|
||||
React.SetStateAction<MultiAutocompleteChoiceType[]>
|
||||
>;
|
||||
setSelectedTaxType: React.Dispatch<React.SetStateAction<string>>;
|
||||
selectedCollections: MultiAutocompleteChoiceType[];
|
||||
warehouses: SearchWarehouses_search_edges_node[];
|
||||
}
|
||||
|
||||
export interface ProductUpdateFormProps extends UseProductUpdateFormOpts {
|
||||
children: (props: UseProductUpdateFormResult) => React.ReactNode;
|
||||
product: ProductDetails_product;
|
||||
onSubmit: (data: ProductUpdateSubmitData) => Promise<boolean>;
|
||||
}
|
||||
|
||||
const getAvailabilityData = ({
|
||||
availableForPurchase,
|
||||
isAvailableForPurchase,
|
||||
isPublished,
|
||||
publicationDate
|
||||
}: ProductUpdateFormData) => ({
|
||||
isAvailableForPurchase: isAvailableForPurchase || !!availableForPurchase,
|
||||
isPublished: isPublished || !!publicationDate
|
||||
});
|
||||
|
||||
const getStocksData = (
|
||||
product: ProductDetails_product,
|
||||
stocks: FormsetData<null, string>
|
||||
) => {
|
||||
if (product.productType.hasVariants) {
|
||||
return { addStocks: [], removeStocks: [], updateStocks: [] };
|
||||
}
|
||||
|
||||
const dataStocks = stocks.map(stock => stock.id);
|
||||
const variantStocks = product.variants[0]?.stocks.map(
|
||||
stock => stock.warehouse.id
|
||||
);
|
||||
const stockDiff = diff(variantStocks, dataStocks);
|
||||
|
||||
return {
|
||||
addStocks: stocks.filter(stock =>
|
||||
stockDiff.added.some(addedStock => addedStock === stock.id)
|
||||
),
|
||||
removeStocks: stockDiff.removed,
|
||||
updateStocks: stocks.filter(
|
||||
stock => !stockDiff.added.some(addedStock => addedStock === stock.id)
|
||||
)
|
||||
};
|
||||
};
|
||||
|
||||
const getMetadata = (
|
||||
data: ProductUpdateFormData,
|
||||
isMetadataModified: boolean,
|
||||
isPrivateMetadataModified: boolean
|
||||
) => ({
|
||||
metadata: isMetadataModified ? data.metadata : undefined,
|
||||
privateMetadata: isPrivateMetadataModified ? data.privateMetadata : undefined
|
||||
});
|
||||
|
||||
function useProductUpdateForm(
|
||||
product: ProductDetails_product,
|
||||
onSubmit: (data: ProductUpdateSubmitData) => Promise<boolean>,
|
||||
opts: UseProductUpdateFormOpts
|
||||
): UseProductUpdateFormResult {
|
||||
const [changed, setChanged] = React.useState(false);
|
||||
const triggerChange = () => setChanged(true);
|
||||
|
||||
const form = useForm(
|
||||
getProductUpdatePageFormData(product, product?.variants)
|
||||
);
|
||||
const attributes = useFormset(getAttributeInputFromProduct(product));
|
||||
const stocks = useFormset(getStockInputFromProduct(product));
|
||||
|
||||
const {
|
||||
isMetadataModified,
|
||||
isPrivateMetadataModified,
|
||||
makeChangeHandler: makeMetadataChangeHandler
|
||||
} = useMetadataChangeTrigger();
|
||||
|
||||
const handleChange: FormChange = (event, cb) => {
|
||||
form.change(event, cb);
|
||||
triggerChange();
|
||||
};
|
||||
const handleCollectionSelect = createMultiAutocompleteSelectHandler(
|
||||
form.toggleValue,
|
||||
opts.setSelectedCollections,
|
||||
opts.selectedCollections,
|
||||
opts.collections
|
||||
);
|
||||
const handleCategorySelect = createSingleAutocompleteSelectHandler(
|
||||
handleChange,
|
||||
opts.setSelectedCategory,
|
||||
opts.categories
|
||||
);
|
||||
const handleAttributeChange = createAttributeChangeHandler(
|
||||
attributes.change,
|
||||
triggerChange
|
||||
);
|
||||
const handleAttributeMultiChange = createAttributeMultiChangeHandler(
|
||||
attributes.change,
|
||||
attributes.data,
|
||||
triggerChange
|
||||
);
|
||||
const handleStockChange: FormsetChange = (id, value) => {
|
||||
triggerChange();
|
||||
stocks.change(id, value);
|
||||
};
|
||||
const handleStockAdd = (id: string) => {
|
||||
triggerChange();
|
||||
stocks.add({
|
||||
data: null,
|
||||
id,
|
||||
label: opts.warehouses.find(warehouse => warehouse.id === id).name,
|
||||
value: "0"
|
||||
});
|
||||
};
|
||||
const handleStockDelete = (id: string) => {
|
||||
triggerChange();
|
||||
stocks.remove(id);
|
||||
};
|
||||
const handleTaxTypeSelect = createSingleAutocompleteSelectHandler(
|
||||
handleChange,
|
||||
opts.setSelectedTaxType,
|
||||
opts.taxTypes
|
||||
);
|
||||
const changeMetadata = makeMetadataChangeHandler(handleChange);
|
||||
|
||||
const data: ProductUpdateData = {
|
||||
...form.data,
|
||||
attributes: attributes.data,
|
||||
stocks: stocks.data
|
||||
};
|
||||
|
||||
const submit = () =>
|
||||
onSubmit({
|
||||
...data,
|
||||
...getAvailabilityData(data),
|
||||
...getStocksData(product, stocks.data),
|
||||
...getMetadata(data, isMetadataModified, isPrivateMetadataModified),
|
||||
addStocks: [],
|
||||
attributes: attributes.data
|
||||
});
|
||||
|
||||
return {
|
||||
change: handleChange,
|
||||
data,
|
||||
handlers: {
|
||||
addStock: handleStockAdd,
|
||||
changeMetadata,
|
||||
changeStock: handleStockChange,
|
||||
deleteStock: handleStockDelete,
|
||||
selectAttribute: handleAttributeChange,
|
||||
selectAttributeMultiple: handleAttributeMultiChange,
|
||||
selectCategory: handleCategorySelect,
|
||||
selectCollection: handleCollectionSelect,
|
||||
selectTaxRate: handleTaxTypeSelect
|
||||
},
|
||||
hasChanged: changed,
|
||||
submit
|
||||
};
|
||||
}
|
||||
|
||||
const ProductUpdateForm: React.FC<ProductUpdateFormProps> = ({
|
||||
children,
|
||||
product,
|
||||
onSubmit,
|
||||
...rest
|
||||
}) => {
|
||||
const props = useProductUpdateForm(product, onSubmit, rest);
|
||||
|
||||
return <form onSubmit={props.submit}>{children(props)}</form>;
|
||||
};
|
||||
|
||||
ProductUpdateForm.displayName = "ProductUpdateForm";
|
||||
export default ProductUpdateForm;
|
||||
Loading…
Reference in a new issue