`;
+exports[`Storyshots Generics / Multiple select with autocomplete can load more 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Generics / Multiple select with autocomplete default 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Generics / Multiple select with autocomplete interactive 1`] = `
+
+
+
+
+
+
+
+
+ Afghanistan
+
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Generics / Multiple select with autocomplete interactive with custom option 1`] = `
+
+
+
+
+
+
+
+
+ Afghanistan
+
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Generics / Multiple select with autocomplete interactive with load more 1`] = `
+
+
+
+
+
+
+
+
+ Afghanistan
+
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Generics / Multiple select with autocomplete no data 1`] = `
+
+`;
+
exports[`Storyshots Generics / PageHeader with title 1`] = `
`;
-exports[`Storyshots Generics / SingleAutocompleteSelectField with custom option 1`] = `
+exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Generics / Select with autocomplete default 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Generics / Select with autocomplete interactive 1`] = `
+
+
- Value: afghanistan
+ Value: AF
@@ -3811,13 +4729,13 @@ exports[`Storyshots Generics / SingleAutocompleteSelectField with custom option
`;
-exports[`Storyshots Generics / SingleAutocompleteSelectField with loaded data 1`] = `
+exports[`Storyshots Generics / Select with autocomplete interactive with custom option 1`] = `
- Value: afghanistan
+ Value: AF
@@ -3894,13 +4812,13 @@ exports[`Storyshots Generics / SingleAutocompleteSelectField with loaded data 1`
`;
-exports[`Storyshots Generics / SingleAutocompleteSelectField with loading data 1`] = `
+exports[`Storyshots Generics / Select with autocomplete interactive with empty option 1`] = `
- Value: afghanistan
+ Value: AF
@@ -3981,13 +4895,139 @@ exports[`Storyshots Generics / SingleAutocompleteSelectField with loading data 1
`;
+exports[`Storyshots Generics / Select with autocomplete interactive with load more 1`] = `
+
+`;
+
+exports[`Storyshots Generics / Select with autocomplete no data 1`] = `
+
+`;
+
exports[`Storyshots Generics / SingleSelectField with error hint 1`] = `
`;
-exports[`Storyshots Orders / OrderCustomerEditDialog default 1`] = `
-
-`;
-
exports[`Storyshots Orders / OrderDraftCancelDialog default 1`] = `
;
- loading: boolean;
- fetchChoices(value: string);
- }
- ) => React.ReactElement
);
- choices: Array<{
- label: string;
- value: string;
- }>;
+ children: (props: {
+ choices: SingleAutocompleteChoiceType[];
+ hasMore: boolean;
+ loading: boolean;
+ fetchChoices: (value: string) => void;
+ fetchMore: () => void;
+ }) => React.ReactElement;
+ choices: SingleAutocompleteChoiceType[];
}
interface ChoiceProviderState {
- choices: Array<{
- label: string;
- value: string;
- }>;
+ choices: SingleAutocompleteChoiceType[];
+ filteredChoices: SingleAutocompleteChoiceType[];
+ first: number;
loading: boolean;
timeout: any;
}
+const step = 5;
+
export class ChoiceProvider extends React.Component<
ChoiceProviderProps,
ChoiceProviderState
> {
- state = { choices: [], loading: false, timeout: null };
+ state = {
+ choices: [],
+ filteredChoices: [],
+ first: step,
+ loading: false,
+ timeout: null
+ };
- handleChange = inputValue => {
- if (this.state.loading) {
+ handleChange = (inputValue: string) => {
+ if (!!this.state.timeout) {
clearTimeout(this.state.timeout);
}
const timeout = setTimeout(() => this.fetchChoices(inputValue), 500);
@@ -42,22 +45,35 @@ export class ChoiceProvider extends React.Component<
});
};
- fetchChoices = inputValue => {
- let count = 0;
+ handleFetchMore = () => {
+ if (!!this.state.timeout) {
+ clearTimeout(this.state.timeout);
+ }
+ const timeout = setTimeout(this.fetchMore, 500);
this.setState({
- choices: this.props.choices.filter(suggestion => {
- const keep =
- (!inputValue ||
- suggestion.label.toLowerCase().indexOf(inputValue.toLowerCase()) !==
- -1) &&
- count < 5;
+ loading: true,
+ timeout
+ });
+ };
- if (keep) {
- count += 1;
- }
+ fetchMore = () =>
+ this.setState(prevState => ({
+ filteredChoices: prevState.choices.slice(0, prevState.first + step),
+ first: prevState.first + step,
+ loading: false,
+ timeout: null
+ }));
- return keep;
- }),
+ fetchChoices = (inputValue: string) => {
+ const choices = this.props.choices.filter(
+ suggestion =>
+ !inputValue ||
+ suggestion.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1
+ );
+ this.setState({
+ choices,
+ filteredChoices: choices.slice(0, step),
+ first: step,
loading: false,
timeout: null
});
@@ -65,8 +81,10 @@ export class ChoiceProvider extends React.Component<
render() {
return this.props.children({
- choices: this.state.choices,
+ choices: this.state.filteredChoices,
fetchChoices: this.handleChange,
+ fetchMore: this.handleFetchMore,
+ hasMore: this.state.choices.length > this.state.filteredChoices.length,
loading: this.state.loading
});
}
diff --git a/src/storybook/stories/components/MultiAutocompleteSelectField.tsx b/src/storybook/stories/components/MultiAutocompleteSelectField.tsx
deleted file mode 100644
index 0582992cc..000000000
--- a/src/storybook/stories/components/MultiAutocompleteSelectField.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import MultiAutocompleteSelectField, {
- MultiAutocompleteSelectFieldProps
-} from "@saleor/components/MultiAutocompleteSelectField";
-import useMultiAutocomplete from "@saleor/hooks/useMultiAutocomplete";
-import CardDecorator from "../../CardDecorator";
-import Decorator from "../../Decorator";
-import { ChoiceProvider } from "../../mock";
-
-const suggestions = [
- "Afghanistan",
- "Burundi",
- "Comoros",
- "Egypt",
- "Equatorial Guinea",
- "Greenland",
- "Isle of Man",
- "Israel",
- "Italy",
- "United States",
- "Wallis and Futuna",
- "Zimbabwe"
-].map(c => ({ label: c, value: c.toLocaleLowerCase().replace(/\s+/, "_") }));
-
-const props: MultiAutocompleteSelectFieldProps = {
- choices: undefined,
- displayValues: [],
- label: "Country",
- loading: false,
- name: "country",
- onChange: () => undefined,
- placeholder: "Select country",
- value: undefined
-};
-
-const Story: React.FC<
- Partial
-> = storyProps => {
- const { change, data: countries } = useMultiAutocomplete([suggestions[0]]);
-
- return (
-
- {({ choices, loading, fetchChoices }) => (
- country.label)
- .join(", ")}`}
- onChange={event => change(event, choices)}
- value={countries.map(country => country.value)}
- loading={loading}
- {...storyProps}
- />
- )}
-
- );
-};
-
-storiesOf("Generics / MultiAutocompleteSelectField", module)
- .addDecorator(CardDecorator)
- .addDecorator(Decorator)
- .add("with loaded data", () => )
- .add("with loading data", () => )
- .add("with custom option", () => );
diff --git a/src/storybook/stories/components/SingleAutocompleteSelectField.tsx b/src/storybook/stories/components/SingleAutocompleteSelectField.tsx
deleted file mode 100644
index 0827f0b70..000000000
--- a/src/storybook/stories/components/SingleAutocompleteSelectField.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import Form from "@saleor/components/Form";
-import SingleAutocompleteSelectField, {
- SingleAutocompleteSelectFieldProps
-} from "@saleor/components/SingleAutocompleteSelectField";
-import { maybe } from "@saleor/misc";
-import CardDecorator from "../../CardDecorator";
-import Decorator from "../../Decorator";
-import { ChoiceProvider } from "../../mock";
-
-const suggestions = [
- "Afghanistan",
- "Burundi",
- "Comoros",
- "Egypt",
- "Equatorial Guinea",
- "Greenland",
- "Isle of Man",
- "Israel",
- "Italy",
- "United States",
- "Wallis and Futuna",
- "Zimbabwe"
-].map(c => ({ label: c, value: c.toLocaleLowerCase().replace(/\s+/, "_") }));
-
-const props: SingleAutocompleteSelectFieldProps = {
- choices: undefined,
- displayValue: undefined,
- label: "Country",
- loading: false,
- name: "country",
- onChange: () => undefined,
- placeholder: "Select country"
-};
-
-const Story: React.FC<
- Partial
-> = storyProps => {
- const [displayValue, setDisplayValue] = React.useState(suggestions[0].label);
-
- return (
-
- );
-};
-
-storiesOf("Generics / SingleAutocompleteSelectField", module)
- .addDecorator(CardDecorator)
- .addDecorator(Decorator)
- .add("with loaded data", () => )
- .add("with loading data", () => )
- .add("with custom option", () => );
diff --git a/src/storybook/stories/customers/CustomerAddressDialog.tsx b/src/storybook/stories/customers/CustomerAddressDialog.tsx
index 73ce77a43..369448178 100644
--- a/src/storybook/stories/customers/CustomerAddressDialog.tsx
+++ b/src/storybook/stories/customers/CustomerAddressDialog.tsx
@@ -11,7 +11,10 @@ import Decorator from "../../Decorator";
const props: CustomerAddressDialogProps = {
address: customer.addresses[0],
confirmButtonState: "default",
- countries,
+ countries: countries.map(c => ({
+ code: c.code,
+ label: c.name
+ })),
errors: [],
onClose: () => undefined,
onConfirm: () => undefined,
diff --git a/src/storybook/stories/orders/OrderCustomerEditDialog.tsx b/src/storybook/stories/orders/OrderCustomerEditDialog.tsx
deleted file mode 100644
index 698292ebe..000000000
--- a/src/storybook/stories/orders/OrderCustomerEditDialog.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { storiesOf } from "@storybook/react";
-import React from "react";
-
-import OrderCustomerEditDialog from "../../../orders/components/OrderCustomerEditDialog";
-import { clients as users } from "../../../orders/fixtures";
-import Decorator from "../../Decorator";
-
-const user = users[0];
-
-storiesOf("Orders / OrderCustomerEditDialog", module)
- .addDecorator(Decorator)
- .add("default", () => (
-
- ));
diff --git a/src/storybook/stories/orders/OrderDraftPage.tsx b/src/storybook/stories/orders/OrderDraftPage.tsx
index db70be0a4..382a3b94e 100644
--- a/src/storybook/stories/orders/OrderDraftPage.tsx
+++ b/src/storybook/stories/orders/OrderDraftPage.tsx
@@ -3,6 +3,7 @@ import { storiesOf } from "@storybook/react";
import React from "react";
import placeholderImage from "@assets/images/placeholder60x60.png";
+import { fetchMoreProps } from "@saleor/fixtures";
import OrderDraftPage, {
OrderDraftPageProps
} from "../../../orders/components/OrderDraftPage";
@@ -12,6 +13,7 @@ import Decorator from "../../Decorator";
const order = draftOrder(placeholderImage);
const props: Omit = {
+ ...fetchMoreProps,
countries,
disabled: false,
fetchUsers: () => undefined,
diff --git a/src/storybook/stories/products/ProductCreatePage.tsx b/src/storybook/stories/products/ProductCreatePage.tsx
index 09a70dda9..1c968c390 100644
--- a/src/storybook/stories/products/ProductCreatePage.tsx
+++ b/src/storybook/stories/products/ProductCreatePage.tsx
@@ -1,15 +1,14 @@
import { storiesOf } from "@storybook/react";
import React from "react";
+import { fetchMoreProps } from "@saleor/fixtures";
import ProductCreatePage, {
ProductCreatePageSubmitData
} from "../../../products/components/ProductCreatePage";
-
-import { formError } from "../../misc";
-
import { product as productFixture } from "../../../products/fixtures";
import { productTypes } from "../../../productTypes/fixtures";
import Decorator from "../../Decorator";
+import { formError } from "../../misc";
const product = productFixture("");
@@ -25,6 +24,9 @@ storiesOf("Views / Products / Create product", module)
fetchCategories={() => undefined}
fetchCollections={() => undefined}
fetchProductTypes={() => undefined}
+ fetchMoreCategories={fetchMoreProps}
+ fetchMoreCollections={fetchMoreProps}
+ fetchMoreProductTypes={fetchMoreProps}
productTypes={productTypes}
categories={[product.category]}
onBack={() => undefined}
@@ -42,6 +44,9 @@ storiesOf("Views / Products / Create product", module)
fetchCategories={() => undefined}
fetchCollections={() => undefined}
fetchProductTypes={() => undefined}
+ fetchMoreCategories={fetchMoreProps}
+ fetchMoreCollections={fetchMoreProps}
+ fetchMoreProductTypes={fetchMoreProps}
productTypes={productTypes}
categories={[product.category]}
onBack={() => undefined}
@@ -61,6 +66,9 @@ storiesOf("Views / Products / Create product", module)
fetchCategories={() => undefined}
fetchCollections={() => undefined}
fetchProductTypes={() => undefined}
+ fetchMoreCategories={fetchMoreProps}
+ fetchMoreCollections={fetchMoreProps}
+ fetchMoreProductTypes={fetchMoreProps}
productTypes={productTypes}
categories={[product.category]}
onBack={() => undefined}
diff --git a/src/storybook/stories/products/ProductUpdatePage.tsx b/src/storybook/stories/products/ProductUpdatePage.tsx
index a0d34b83c..84c5b0952 100644
--- a/src/storybook/stories/products/ProductUpdatePage.tsx
+++ b/src/storybook/stories/products/ProductUpdatePage.tsx
@@ -3,7 +3,7 @@ import React from "react";
import placeholderImage from "@assets/images/placeholder255x255.png";
import { collections } from "@saleor/collections/fixtures";
-import { listActionsProps } from "@saleor/fixtures";
+import { fetchMoreProps, listActionsProps } from "@saleor/fixtures";
import ProductUpdatePage, {
ProductUpdatePageProps
} from "@saleor/products/components/ProductUpdatePage";
@@ -20,6 +20,8 @@ const props: ProductUpdatePageProps = {
errors: [],
fetchCategories: () => undefined,
fetchCollections: () => undefined,
+ fetchMoreCategories: fetchMoreProps,
+ fetchMoreCollections: fetchMoreProps,
header: product.name,
images: product.images,
onBack: () => undefined,
diff --git a/src/utils/handlers/singleAutocompleteSelectChangeHandler.ts b/src/utils/handlers/singleAutocompleteSelectChangeHandler.ts
index ee2265185..1f95c8a54 100644
--- a/src/utils/handlers/singleAutocompleteSelectChangeHandler.ts
+++ b/src/utils/handlers/singleAutocompleteSelectChangeHandler.ts
@@ -10,7 +10,8 @@ function createSingleAutocompleteSelectHandler(
change(event);
const value = event.target.value;
- setSelected(choices.find(category => category.value === value).label);
+ const choice = choices.find(category => category.value === value)
+ setSelected(choice ? choice.label : value);
};
}