diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx index b48793371..395e9905f 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx @@ -117,6 +117,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, { } const displayCustomValue = + inputValue && inputValue.length > 0 && allowCustomValues && !choices.find( diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx index d1f6da571..399839ca2 100644 --- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx +++ b/src/products/components/ProductCreatePage/ProductCreatePage.tsx @@ -27,7 +27,7 @@ import { } from "@saleor/products/utils/data"; import createMultiAutocompleteSelectHandler from "@saleor/utils/handlers/multiAutocompleteSelectChangeHandler"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; -import { UserError } from "../../../types"; +import { FetchMoreProps, UserError } from "../../../types"; import { createAttributeChangeHandler, createAttributeMultiChangeHandler, @@ -67,6 +67,9 @@ interface ProductCreatePageProps { categories: SearchCategories_search_edges_node[]; currency: string; disabled: boolean; + fetchMoreCategories: FetchMoreProps; + fetchMoreCollections: FetchMoreProps; + fetchMoreProductTypes: FetchMoreProps; productTypes?: Array<{ id: string; name: string; @@ -92,6 +95,9 @@ export const ProductCreatePage: React.StatelessComponent< errors: userErrors, fetchCategories, fetchCollections, + fetchMoreCategories, + fetchMoreCollections, + fetchMoreProductTypes, header, productTypes: productTypeChoiceList, saveButtonBarState, @@ -271,6 +277,9 @@ export const ProductCreatePage: React.StatelessComponent< errors={errors} fetchCategories={fetchCategories} fetchCollections={fetchCollections} + fetchMoreCategories={fetchMoreCategories} + fetchMoreCollections={fetchMoreCollections} + fetchMoreProductTypes={fetchMoreProductTypes} fetchProductTypes={fetchProductTypes} productType={productType} productTypeInputDisplayValue={productType.name} diff --git a/src/products/components/ProductOrganization/ProductOrganization.tsx b/src/products/components/ProductOrganization/ProductOrganization.tsx index 21b3932b9..705ec8af7 100644 --- a/src/products/components/ProductOrganization/ProductOrganization.tsx +++ b/src/products/components/ProductOrganization/ProductOrganization.tsx @@ -22,7 +22,7 @@ import SingleAutocompleteSelectField, { } from "@saleor/components/SingleAutocompleteSelectField"; import { ChangeEvent } from "@saleor/hooks/useForm"; import { maybe } from "@saleor/misc"; -import { FormErrors } from "@saleor/types"; +import { FetchMoreProps, FormErrors } from "@saleor/types"; interface ProductType { hasVariants: boolean; @@ -62,6 +62,9 @@ interface ProductOrganizationProps extends WithStyles { productTypes?: SingleAutocompleteChoiceType[]; fetchCategories: (query: string) => void; fetchCollections: (query: string) => void; + fetchMoreCategories: FetchMoreProps; + fetchMoreCollections: FetchMoreProps; + fetchMoreProductTypes?: FetchMoreProps; fetchProductTypes?: (data: string) => void; onCategoryChange: (event: ChangeEvent) => void; onCollectionChange: (event: ChangeEvent) => void; @@ -81,6 +84,9 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })( errors, fetchCategories, fetchCollections, + fetchMoreCategories, + fetchMoreCollections, + fetchMoreProductTypes, fetchProductTypes, productType, productTypeInputDisplayValue, @@ -115,6 +121,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })( onChange={onProductTypeChange} fetchChoices={fetchProductTypes} data-tc="product-type" + {...fetchMoreProductTypes} /> ) : ( <> @@ -160,6 +167,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })( onChange={onCategoryChange} fetchChoices={fetchCategories} data-tc="category" + {...fetchMoreCategories} />
diff --git a/src/products/views/ProductCreate.tsx b/src/products/views/ProductCreate.tsx index 2a2e97fdb..8023ac60a 100644 --- a/src/products/views/ProductCreate.tsx +++ b/src/products/views/ProductCreate.tsx @@ -33,11 +33,20 @@ export const ProductUpdate: React.StatelessComponent< return ( - {({ search: searchCategory, result: searchCategoryOpts }) => ( + {({ + loadMore: loadMoreCategories, + search: searchCategory, + result: searchCategoryOpts + }) => ( - {({ search: searchCollection, result: searchCollectionOpts }) => ( + {({ + loadMore: loadMoreCollections, + search: searchCollection, + result: searchCollectionOpts + }) => ( {({ + loadMore: loadMoreProductTypes, search: searchProductTypes, result: searchProductTypesOpts }) => { @@ -148,6 +157,33 @@ export const ProductUpdate: React.StatelessComponent< onBack={handleBack} onSubmit={handleSubmit} saveButtonBarState={formTransitionState} + fetchMoreCategories={{ + hasMore: maybe( + () => + searchCategoryOpts.data.search.pageInfo + .hasNextPage + ), + loading: searchCategoryOpts.loading, + onFetchMore: loadMoreCategories + }} + fetchMoreCollections={{ + hasMore: maybe( + () => + searchCollectionOpts.data.search.pageInfo + .hasNextPage + ), + loading: searchCollectionOpts.loading, + onFetchMore: loadMoreCollections + }} + fetchMoreProductTypes={{ + hasMore: maybe( + () => + searchProductTypesOpts.data.search.pageInfo + .hasNextPage + ), + loading: searchProductTypesOpts.loading, + onFetchMore: loadMoreProductTypes + }} /> );