djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1287 from mirumee/SALEOR-3617-variant-creator-multiselect-fix

Browse source 
variant creator multiselect fix
This commit is contained in:
SektorDV 2021-08-12 12:05:32 +02:00 committed by GitHub
commit 82e7b58bbf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 141 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Attributes/AttributeRow.tsx
View file

@ -73,6 +73,7 @@ interface AttributeRowProps extends AttributeRowHandlers {
error: ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment;
loading: boolean;
entityId: string;
onAttributeSelectBlur?: () => void;
}
const AttributeRow: React.FC<AttributeRowProps> = ({
@ -89,7 +90,8 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
onChange,
fetchAttributeValues,
fetchMoreAttributeValues,
entityId
entityId,
onAttributeSelectBlur
}) => {
const intl = useIntl();
const classes = useStyles({});
@ -156,6 +158,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
allowCustomValues={true}
fetchOnFocus={true}
fetchChoices={value => fetchAttributeValues(value, attribute.id)}
onBlur={onAttributeSelectBlur}
{...fetchMoreAttributeValues}
/>
</BasicAttributeRow>
@ -268,6 +271,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
allowCustomValues={true}
fetchOnFocus={true}
fetchChoices={value => fetchAttributeValues(value, attribute.id)}
onBlur={onAttributeSelectBlur}
{...fetchMoreAttributeValues}
/>
</BasicAttributeRow>

3
src/components/Attributes/Attributes.stories.tsx
View file

@ -19,7 +19,8 @@ const props: AttributesProps = {
onReferencesRemove: () => undefined,
onReferencesReorder: () => undefined,
fetchAttributeValues: () => undefined,
fetchMoreAttributeValues: fetchMoreProps
fetchMoreAttributeValues: fetchMoreProps,
onAttributeSelectBlur: () => undefined
};
storiesOf("Attributes / Attributes", module)

3
src/components/Attributes/Attributes.tsx
View file

@ -38,6 +38,7 @@ export interface AttributesProps extends AttributeRowHandlers {
attributeValues: AttributeValueFragment[];
fetchAttributeValues: (query: string, attributeId: string) => void;
fetchMoreAttributeValues: FetchMoreProps;
onAttributeSelectBlur: () => void;
disabled: boolean;
loading: boolean;
errors: Array<
@ -117,6 +118,7 @@ const Attributes: React.FC<AttributesProps> = ({
attributeValues,
errors,
title,
onAttributeSelectBlur,
entityId = "_defaultId",
...props
}) => {
@ -168,6 +170,7 @@ const Attributes: React.FC<AttributesProps> = ({
attribute={attribute}
attributeValues={attributeValues}
error={error}
onAttributeSelectBlur={onAttributeSelectBlur}
{...props}
/>
</React.Fragment>

11
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
View file

@ -89,6 +89,7 @@ export interface MultiAutocompleteSelectFieldProps
testId?: string;
fetchChoices?: (value: string) => void;
onChange: (event: React.ChangeEvent<any>) => void;
onBlur?: () => void;
fetchOnFocus?: boolean;
endAdornment?: React.ReactNode;
}
@ -115,6 +116,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
testId,
fetchChoices,
onChange,
onBlur,
onFetchMore,
fetchOnFocus,
endAdornment,
@ -142,6 +144,14 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
onInputValueChange={value => debounceFn(value)}
onSelect={handleSelect}
itemToString={() => ""}
// this is to prevent unwanted state updates when the dropdown is closed with an empty value,
// which downshift interprets as the value being updated with an empty string, causing side-effects
stateReducer={(state, changes) => {
if (changes.isOpen === false && state.inputValue === "") {
delete changes.inputValue;
}
return changes;
}}
>
{({
closeMenu,
@ -175,6 +185,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
</div>
),
id: undefined,
onBlur,
onClick: toggleMenu,
onFocus: () => {
if (fetchOnFocus) {

12
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -49,6 +49,7 @@ export interface SingleAutocompleteSelectFieldProps
fetchOnFocus?: boolean;
FormHelperTextProps?: ExtendedFormHelperTextProps;
nakedInput?: boolean;
onBlur?: () => void;
}
const DebounceAutocomplete: React.ComponentType<DebounceProps<
@ -79,6 +80,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
fetchOnFocus,
FormHelperTextProps,
nakedInput = false,
onBlur,
...rest
} = props;
const classes = useStyles(props);
@ -101,6 +103,14 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
onInputValueChange={value => debounceFn(value)}
onSelect={handleChange}
selectedItem={value || ""}
// this is to prevent unwanted state updates when the dropdown is closed with an empty value,
// which downshift interprets as the value being updated with an empty string, causing side-effects
stateReducer={(_, changes) => {
if (changes.isOpen === false) {
delete changes.inputValue;
}
return changes;
}}
>
{({
getInputProps,
@ -150,6 +160,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
const handleBlur = () => {
ensureProperValues(true);
onBlur();
closeMenu();
};
@ -199,6 +210,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
FormHelperTextProps={FormHelperTextProps}
label={label}
fullWidth={true}
onBlur={onBlur}
/>
{isOpen && (!!inputValue || !!choices.length) && (
<SingleAutocompleteSelectFieldContent

5
src/pages/components/PageDetailsPage/PageDetailsPage.tsx
View file

@ -59,6 +59,7 @@ export interface PageDetailsPageProps {
fetchMoreAttributeValues?: FetchMoreProps;
onCloseDialog: () => void;
onSelectPageType?: (pageTypeId: string) => void;
onAttributeSelectBlur: () => void;
}
const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
@ -85,7 +86,8 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
fetchAttributeValues,
fetchMoreAttributeValues,
onCloseDialog,
onSelectPageType
onSelectPageType,
onAttributeSelectBlur
}) => {
const intl = useIntl();
const localizeDate = useDateLocalize();
@ -189,6 +191,7 @@ const PageDetailsPage: React.FC<PageDetailsPageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
)}
<CardSpacer />

8
src/pages/views/PageCreate.tsx
View file

@ -15,7 +15,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
import usePageSearch from "@saleor/searches/usePageSearch";
import usePageTypeSearch from "@saleor/searches/usePageTypeSearch";
import useProductSearch from "@saleor/searches/useProductSearch";
import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
import { mapEdgesToItems } from "@saleor/utils/maps";
import {
@ -76,8 +76,9 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
result: searchAttributeValuesOpts
} = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
result: searchAttributeValuesOpts,
reset: searchAttributeReset
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const { data: selectedPageType } = usePageTypeQuery({
variables: {
@ -218,6 +219,7 @@ export const PageCreate: React.FC<PageCreateProps> = ({ params }) => {
onCloseDialog={() => navigate(pageCreateUrl())}
selectedPageType={selectedPageType?.pageType}
onSelectPageType={id => setSelectedPageTypeId(id)}
onAttributeSelectBlur={searchAttributeReset}
/>
</>
);

8
src/pages/views/PageDetails.tsx
View file

@ -26,7 +26,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
import { commonMessages } from "@saleor/intl";
import usePageSearch from "@saleor/searches/usePageSearch";
import useProductSearch from "@saleor/searches/useProductSearch";
import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
import { mapEdgesToItems } from "@saleor/utils/maps";
import {
@ -176,8 +176,9 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
result: searchAttributeValuesOpts
} = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
result: searchAttributeValuesOpts,
reset: searchAttributeReset
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const attributeValues =
mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) || [];
@ -237,6 +238,7 @@ export const PageDetails: React.FC<PageDetailsProps> = ({ id, params }) => {
fetchAttributeValues={searchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onCloseDialog={() => navigate(pageUrl(id))}
onAttributeSelectBlur={searchAttributeReset}
/>
<ActionDialog
open={params.action === "remove"}

5
src/products/components/ProductCreatePage/ProductCreatePage.tsx
View file

@ -84,6 +84,7 @@ interface ProductCreatePageProps {
fetchReferenceProducts?: (data: string) => void;
fetchMoreReferencePages?: FetchMoreProps;
fetchMoreReferenceProducts?: FetchMoreProps;
onAttributeSelectBlur: () => void;
onCloseDialog: () => void;
onSelectProductType: (productTypeId: string) => void;
onBack?();
@ -129,7 +130,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
fetchAttributeValues,
fetchMoreAttributeValues,
onCloseDialog,
onSelectProductType
onSelectProductType,
onAttributeSelectBlur
}: ProductCreatePageProps) => {
const intl = useIntl();
@ -240,6 +242,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
)}
<CardSpacer />

1
src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
View file

@ -37,6 +37,7 @@ const props: ProductUpdatePageProps = {
fetchCategories: () => undefined,
fetchCollections: () => undefined,
fetchAttributeValues: () => undefined,
onAttributeSelectBlur: () => undefined,
fetchMoreCategories: fetchMoreProps,
fetchMoreCollections: fetchMoreProps,
fetchMoreAttributeValues: fetchMoreProps,

5
src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
View file

@ -110,6 +110,7 @@ export interface ProductUpdatePageProps extends ListActions, ChannelProps {
onImageDelete: (id: string) => () => void;
onSubmit: (data: ProductUpdatePageSubmitData) => SubmitPromise;
openChannelsModal: () => void;
onAttributeSelectBlur: () => void;
onBack?();
onDelete();
onImageEdit?(id: string);
@ -194,7 +195,8 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
fetchMoreAttributeValues,
onCloseDialog,
channelsWithVariantsData,
onChannelsChange
onChannelsChange,
onAttributeSelectBlur
}) => {
const intl = useIntl();
@ -317,6 +319,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
)}
<CardSpacer />

6
src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
View file

@ -85,6 +85,7 @@ interface ProductVariantCreatePageProps {
fetchMoreReferenceProducts?: FetchMoreProps;
fetchMoreAttributeValues?: FetchMoreProps;
onCloseDialog: () => void;
onAttributeSelectBlur: () => void;
}
const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
@ -112,7 +113,8 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
fetchMoreReferencePages,
fetchMoreReferenceProducts,
fetchMoreAttributeValues,
onCloseDialog
onCloseDialog,
onAttributeSelectBlur
}) => {
const intl = useIntl();
@ -192,6 +194,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
<CardSpacer />
<Attributes
@ -213,6 +216,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
<CardSpacer />
<ProductShipping

3
src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx
View file

@ -109,7 +109,8 @@ const props: ProductVariantCreatorContentProps = {
errors: [],
variantsLeft: 6,
step: ProductVariantCreatorStep.values,
warehouses: warehouseList
warehouses: warehouseList,
onAttributeSelectBlur: () => undefined
};
storiesOf("Views / Products / Create multiple variants", module)

5
src/products/components/ProductVariantCreatorPage/ProductVariantCreatorContent.tsx
View file

@ -29,6 +29,7 @@ export interface ProductVariantCreatorContentProps {
warehouses: WarehouseFragment[];
fetchAttributeValues: (query: string, attributeId: string) => void;
fetchMoreAttributeValues?: FetchMoreProps;
onAttributeSelectBlur: () => void;
}
const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps> = ({
@ -42,7 +43,8 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
errors,
step,
variantsLeft,
warehouses
warehouses,
onAttributeSelectBlur
}) => {
const selectedAttributes = attributes.filter(attribute =>
isSelected(
@ -71,6 +73,7 @@ const ProductVariantCreatorContent: React.FC<ProductVariantCreatorContentProps>
type: ProductVariantCreateReducerActionType.selectValue
})
}
onValueBlur={onAttributeSelectBlur}
/>
)}
{step === ProductVariantCreatorStep.prices && (

5
src/products/components/ProductVariantCreatorPage/ProductVariantCreatorValues.tsx
View file

@ -102,6 +102,7 @@ export interface ProductVariantCreatorValuesProps {
attributeId: string,
value: AttributeValue<Partial<AttributeValueFragment>>
) => void;
onValueBlur: () => void;
}
const ProductVariantCreatorValues: React.FC<ProductVariantCreatorValuesProps> = props => {
@ -112,7 +113,8 @@ const ProductVariantCreatorValues: React.FC<ProductVariantCreatorValuesProps> =
fetchMoreAttributeValues,
data,
variantsLeft,
onValueClick
onValueClick,
onValueBlur
} = props;
const intl = useIntl();
const variantsNumber = getVariantsNumber(data);
@ -208,6 +210,7 @@ const ProductVariantCreatorValues: React.FC<ProductVariantCreatorValuesProps> =
fetchChoices={value =>
fetchAttributeValues(value, attribute.id)
}
onBlur={onValueBlur}
{...fetchMoreAttributeValues}
/>
)}

6
src/products/components/ProductVariantPage/ProductVariantPage.tsx
View file

@ -98,6 +98,7 @@ interface ProductVariantPageProps {
onAssignReferencesClick: (attribute: AttributeInput) => void;
onCloseDialog: () => void;
onVariantReorder: ReorderAction;
onAttributeSelectBlur: () => void;
onAdd();
onBack();
onDelete();
@ -140,7 +141,8 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
fetchMoreReferencePages,
fetchMoreReferenceProducts,
fetchMoreAttributeValues,
onCloseDialog
onCloseDialog,
onAttributeSelectBlur
}) => {
const intl = useIntl();
@ -246,6 +248,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
<CardSpacer />
<Attributes
@ -270,6 +273,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
onReferencesReorder={handlers.reorderAttributeValue}
fetchAttributeValues={fetchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onAttributeSelectBlur={onAttributeSelectBlur}
/>
<CardSpacer />
<ProductVariantMedia

8
src/products/views/ProductCreate/ProductCreate.tsx
View file

@ -35,7 +35,7 @@ import useProductSearch from "@saleor/searches/useProductSearch";
import useProductTypeSearch from "@saleor/searches/useProductTypeSearch";
import { useTaxTypeList } from "@saleor/taxes/queries";
import { getProductErrorMessage } from "@saleor/utils/errors";
import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
import { mapEdgesToItems } from "@saleor/utils/maps";
@ -109,8 +109,9 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
result: searchAttributeValuesOpts
} = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
result: searchAttributeValuesOpts,
reset: searchAttributeReset
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const warehouses = useWarehouseList({
displayLoader: true,
variables: {
@ -348,6 +349,7 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
onCloseDialog={() => navigate(productAddUrl())}
selectedProductType={selectedProductType?.productType}
onSelectProductType={id => setSelectedProductTypeId(id)}
onAttributeSelectBlur={searchAttributeReset}
/>
</>
);

8
src/products/views/ProductUpdate/ProductUpdate.tsx
View file

@ -47,7 +47,7 @@ import useCollectionSearch from "@saleor/searches/useCollectionSearch";
import usePageSearch from "@saleor/searches/usePageSearch";
import useProductSearch from "@saleor/searches/useProductSearch";
import { getProductErrorMessage } from "@saleor/utils/errors";
import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
import { mapEdgesToItems } from "@saleor/utils/maps";
@ -148,8 +148,9 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
result: searchAttributeValuesOpts
} = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
result: searchAttributeValuesOpts,
reset: searchAttributeReset
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const warehouses = useWarehouseList({
displayLoader: true,
variables: {
@ -606,6 +607,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
fetchMoreReferenceProducts={fetchMoreReferenceProducts}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onCloseDialog={() => navigate(productUrl(id))}
onAttributeSelectBlur={searchAttributeReset}
/>
<ActionDialog
open={params.action === "remove"}

8
src/products/views/ProductVariant.tsx
View file

@ -25,7 +25,7 @@ import { useProductVariantChannelListingUpdate } from "@saleor/products/mutation
import { ProductVariantDetails_productVariant } from "@saleor/products/types/ProductVariantDetails";
import usePageSearch from "@saleor/searches/usePageSearch";
import useProductSearch from "@saleor/searches/useProductSearch";
import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
import { mapEdgesToItems } from "@saleor/utils/maps";
@ -303,8 +303,9 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
result: searchAttributeValuesOpts
} = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
result: searchAttributeValuesOpts,
reset: searchAttributeReset
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const fetchMoreReferencePages = {
hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage,
@ -376,6 +377,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
onCloseDialog={() =>
navigate(productVariantEditUrl(productId, variantId))
}
onAttributeSelectBlur={searchAttributeReset}
/>
<ProductVariantDeleteDialog
confirmButtonState={deleteVariantOpts.status}

8
src/products/views/ProductVariantCreate.tsx
View file

@ -13,7 +13,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useShop from "@saleor/hooks/useShop";
import usePageSearch from "@saleor/searches/usePageSearch";
import useProductSearch from "@saleor/searches/useProductSearch";
import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
import { mapEdgesToItems } from "@saleor/utils/maps";
import {
@ -171,8 +171,9 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
result: searchAttributeValuesOpts
} = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
result: searchAttributeValuesOpts,
reset: searchAttributeReset
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const fetchMoreReferencePages = {
hasMore: searchPagesOpts.data?.search?.pageInfo?.hasNextPage,
@ -241,6 +242,7 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
fetchAttributeValues={searchAttributeValues}
fetchMoreAttributeValues={fetchMoreAttributeValues}
onCloseDialog={() => navigate(productVariantAddUrl(productId))}
onAttributeSelectBlur={searchAttributeReset}
/>
</>
);

6
src/products/views/ProductVariantCreator/ProductVariantCreator.tsx
View file

@ -6,7 +6,7 @@ import useNotifier from "@saleor/hooks/useNotifier";
import { useProductVariantBulkCreateMutation } from "@saleor/products/mutations";
import { useCreateMultipleVariantsData } from "@saleor/products/queries";
import { productUrl } from "@saleor/products/urls";
import createAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import useAttributeValueSearchHandler from "@saleor/utils/handlers/attributeValueSearchHandler";
import { mapEdgesToItems } from "@saleor/utils/maps";
import React from "react";
import { useIntl } from "react-intl";
@ -56,8 +56,9 @@ const ProductVariantCreator: React.FC<ProductVariantCreatorProps> = ({
const {
loadMore: loadMoreAttributeValues,
search: searchAttributeValues,
reset: searchAttributeReset,
result: searchAttributeValuesOpts
} = createAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
} = useAttributeValueSearchHandler(DEFAULT_INITIAL_SEARCH_DATA);
const fetchMoreAttributeValues = {
hasMore: !!searchAttributeValuesOpts.data?.attribute?.choices?.pageInfo
@ -98,6 +99,7 @@ const ProductVariantCreator: React.FC<ProductVariantCreatorProps> = ({
variables: { id, inputs }
})
}
onAttributeSelectBlur={searchAttributeReset}
warehouses={mapEdgesToItems(data?.warehouses) || []}
/>
</>

1
src/storybook/stories/pages/PageDetailsPage.tsx
View file

@ -24,6 +24,7 @@ const props: PageDetailsPageProps = {
attributeValues: [],
saveButtonBarState: "default",
fetchAttributeValues: () => undefined,
onAttributeSelectBlur: () => undefined,
fetchMoreAttributeValues: fetchMoreProps
};

3
src/storybook/stories/products/ProductCreatePage.tsx
View file

@ -56,6 +56,7 @@ storiesOf("Views / Products / Create product", module)
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onSelectProductType={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("When loading", () => (
@ -92,6 +93,7 @@ storiesOf("Views / Products / Create product", module)
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onSelectProductType={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("form errors", () => (
@ -143,5 +145,6 @@ storiesOf("Views / Products / Create product", module)
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onSelectProductType={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
));

1
src/storybook/stories/products/ProductUpdatePage.tsx
View file

@ -48,6 +48,7 @@ const props: ProductUpdatePageProps = {
fetchCategories: () => undefined,
fetchCollections: () => undefined,
fetchAttributeValues: () => undefined,
onAttributeSelectBlur: () => undefined,
fetchMoreCategories: fetchMoreProps,
fetchMoreCollections: fetchMoreProps,
fetchMoreAttributeValues: fetchMoreProps,

5
src/storybook/stories/products/ProductVariantCreatePage.tsx
View file

@ -40,6 +40,7 @@ storiesOf("Views / Products / Create product variant", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("with errors", () => (
@ -82,6 +83,7 @@ storiesOf("Views / Products / Create product variant", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("when loading data", () => (
@ -105,6 +107,7 @@ storiesOf("Views / Products / Create product variant", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("add first variant", () => (
@ -131,6 +134,7 @@ storiesOf("Views / Products / Create product variant", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("no warehouses", () => (
@ -154,5 +158,6 @@ storiesOf("Views / Products / Create product variant", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
));

4
src/storybook/stories/products/ProductVariantPage.tsx
View file

@ -39,6 +39,7 @@ storiesOf("Views / Products / Product variant details", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("when loading data", () => (
@ -67,6 +68,7 @@ storiesOf("Views / Products / Product variant details", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("no warehouses", () => (
@ -94,6 +96,7 @@ storiesOf("Views / Products / Product variant details", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
))
.add("attribute errors", () => (
@ -149,5 +152,6 @@ storiesOf("Views / Products / Product variant details", module)
fetchAttributeValues={() => undefined}
onAssignReferencesClick={() => undefined}
onCloseDialog={() => undefined}
onAttributeSelectBlur={() => undefined}
/>
));

32
src/utils/handlers/attributeValueSearchHandler.ts
View file

@ -1,4 +1,8 @@
import { SearchAttributeValuesVariables } from "@saleor/searches/types/SearchAttributeValues";
import { UseSearchResult } from "@saleor/hooks/makeSearch";
import {
SearchAttributeValues,
SearchAttributeValuesVariables
} from "@saleor/searches/types/SearchAttributeValues";
import useAttributeValueSearch from "@saleor/searches/useAttributeValueSearch";
import { useEffect, useState } from "react";
@ -7,9 +11,18 @@ interface AttributeValueSearchHandlerState {
query: string;
}
function createAttributeValueSearchHandler(
export interface UseAttributeValueSearchHandler
extends Omit<
UseSearchResult<SearchAttributeValues, SearchAttributeValuesVariables>,
"search"
> {
reset: () => void;
search: (query: string, id: string | null) => void;
}
function useAttributeValueSearchHandler(
variables: SearchAttributeValuesVariables
) {
): UseAttributeValueSearchHandler {
const [state, setState] = useState<AttributeValueSearchHandlerState>({
id: null,
query: variables.query
@ -35,16 +48,25 @@ function createAttributeValueSearchHandler(
}
};
const reset = () => setState(prevState => ({ ...prevState, id: null }));
useEffect(() => {
if (state.id) {
search("");
}
}, [state.id]);
return {
loadMore,
search: handleSearch,
result
reset,
result: state.id
? result
: {
...result,
data: undefined
}
};
}
export default createAttributeValueSearchHandler;
export default useAttributeValueSearchHandler;