From 6c44769629cfee35e6d10a19555dc03fe3cdc7ab Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Tue, 15 Oct 2019 17:23:33 +0200 Subject: [PATCH] Refactor multi autocomplete ux --- .../MultiAutocompleteSelectField.stories.tsx | 89 ++++++ .../MultiAutocompleteSelectField.tsx | 226 ++++---------- .../MultiAutocompleteSelectFieldContent.tsx | 291 ++++++++++++++++++ .../MultiAutocompleteSelectField/index.ts | 1 + .../SingleAutocompleteSelectField.stories.tsx | 2 +- .../SingleAutocompleteSelectField/fixtures.ts | 245 --------------- src/fixtures.ts | 248 ++++++++++++++- src/storybook/config.js | 1 - .../MultiAutocompleteSelectField.tsx | 69 ----- .../customers/CustomerAddressDialog.tsx | 5 +- 10 files changed, 683 insertions(+), 494 deletions(-) create mode 100644 src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.stories.tsx create mode 100644 src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx delete mode 100644 src/components/SingleAutocompleteSelectField/fixtures.ts delete mode 100644 src/storybook/stories/components/MultiAutocompleteSelectField.tsx diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.stories.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.stories.tsx new file mode 100644 index 000000000..0beab562e --- /dev/null +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.stories.tsx @@ -0,0 +1,89 @@ +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import { countries } from "@saleor/fixtures"; +import useMultiAutocomplete from "@saleor/hooks/useMultiAutocomplete"; +import CardDecorator from "@saleor/storybook/CardDecorator"; +import Decorator from "@saleor/storybook/Decorator"; +import { ChoiceProvider } from "@saleor/storybook/mock"; +import MultiAutocompleteSelectField, { + MultiAutocompleteSelectFieldProps +} from "./MultiAutocompleteSelectField"; +import MultiAutocompleteSelectFieldContent, { + MultiAutocompleteSelectFieldContentProps +} from "./MultiAutocompleteSelectFieldContent"; + +const suggestions = countries.map(c => ({ label: c.name, value: c.code })); + +const props: MultiAutocompleteSelectFieldProps = { + choices: undefined, + displayValues: [], + label: "Country", + loading: false, + name: "country", + onChange: () => undefined, + placeholder: "Select country", + value: undefined +}; + +const Story: React.FC< + Partial< + MultiAutocompleteSelectFieldProps & { + enableLoadMore: boolean; + } + > +> = storyProps => { + const { change, data: countries } = useMultiAutocomplete([suggestions[0]]); + + return ( + + {({ choices, fetchChoices, fetchMore, hasMore, loading }) => ( + country.value) + .join(", ")}`} + onChange={event => change(event, choices)} + value={countries.map(country => country.value)} + loading={loading} + hasMore={storyProps.enableLoadMore ? hasMore : false} + onFetchMore={storyProps.enableLoadMore ? fetchMore : undefined} + {...storyProps} + /> + )} + + ); +}; + +const contentProps: MultiAutocompleteSelectFieldContentProps = { + choices: suggestions.slice(0, 10), + displayCustomValue: false, + displayValues: [suggestions[0]], + getItemProps: () => undefined, + hasMore: false, + highlightedIndex: 0, + inputValue: suggestions[0].label, + loading: false, + onFetchMore: () => undefined +}; + +storiesOf("Generics / Multiple select with autocomplete", module) + .addDecorator(CardDecorator) + .addDecorator(Decorator) + .add("default", () => ( + + )) + .add("can load more", () => ( + + )) + .add("no data", () => ( + + )) + .add("interactive", () => ) + .add("interactive with custom option", () => ( + + )) + .add("interactive with load more", () => ); diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx index 46ebf6cdc..18b6607cb 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx @@ -1,7 +1,4 @@ -import CircularProgress from "@material-ui/core/CircularProgress"; import IconButton from "@material-ui/core/IconButton"; -import MenuItem from "@material-ui/core/MenuItem"; -import Paper from "@material-ui/core/Paper"; import { createStyles, Theme, @@ -13,26 +10,18 @@ import Typography from "@material-ui/core/Typography"; import CloseIcon from "@material-ui/icons/Close"; import Downshift, { ControllerStateAndHelpers } from "downshift"; import React from "react"; -import { FormattedMessage } from "react-intl"; import { compareTwoStrings } from "string-similarity"; import { fade } from "@material-ui/core/styles/colorManipulator"; -import Checkbox from "@saleor/components/Checkbox"; import Debounce, { DebounceProps } from "@saleor/components/Debounce"; import ArrowDropdownIcon from "@saleor/icons/ArrowDropdown"; -import Hr from "../Hr"; - -export interface MultiAutocompleteChoiceType { - label: string; - value: string; -} +import { FetchMoreProps } from "@saleor/types"; +import MultiAutocompleteSelectFieldContent, { + MultiAutocompleteChoiceType +} from "./MultiAutocompleteSelectFieldContent"; const styles = (theme: Theme) => createStyles({ - checkbox: { - height: 24, - width: 20 - }, chip: { width: "100%" }, @@ -66,49 +55,11 @@ const styles = (theme: Theme) => container: { flexGrow: 1, position: "relative" - }, - hr: { - margin: `${theme.spacing.unit}px 0` - }, - menuItem: { - "&:focus": { - backgroundColor: [ - theme.palette.background.default, - "!important" - ] as any, - color: theme.palette.primary.main, - fontWeight: 400 - }, - "&:hover": { - backgroundColor: [ - theme.palette.background.default, - "!important" - ] as any, - color: theme.palette.primary.main, - fontWeight: 700 - }, - borderRadius: 4, - display: "grid", - gridColumnGap: theme.spacing.unit + "px", - gridTemplateColumns: "30px 1fr", - height: "auto", - padding: 0, - whiteSpace: "normal" - }, - menuItemLabel: { - overflowWrap: "break-word" - }, - paper: { - left: 0, - marginTop: theme.spacing.unit, - padding: theme.spacing.unit, - position: "absolute", - right: 0, - zIndex: 2 } }); -export interface MultiAutocompleteSelectFieldProps { +export interface MultiAutocompleteSelectFieldProps + extends Partial { allowCustomValues?: boolean; displayValues: MultiAutocompleteChoiceType[]; name: string; @@ -134,6 +85,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, { choices, classes, displayValues, + hasMore, helperText, label, loading, @@ -142,6 +94,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, { value, fetchChoices, onChange, + onFetchMore, ...props }: MultiAutocompleteSelectFieldProps & WithStyles) => { const handleSelect = ( @@ -155,7 +108,6 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, { target: { name, value: item } } as any); }; - const suggestions = choices.filter(choice => !value.includes(choice.value)); return ( <> @@ -171,123 +123,53 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, { toggleMenu, highlightedIndex, inputValue - }) => ( -
- - {loading ? ( - - ) : ( + }) => { + const displayCustomValue = + inputValue && + inputValue.length > 0 && + allowCustomValues && + !choices.find( + choice => + choice.label.toLowerCase() === inputValue.toLowerCase() + ); + + return ( +
+ - )} -
- ), - id: undefined, - onClick: toggleMenu - }} - helperText={helperText} - label={label} - fullWidth={true} - /> - {isOpen && (!!inputValue || !!choices.length) && ( - - {choices.length > 0 || - displayValues.length > 0 || - allowCustomValues ? ( - <> - {displayValues.map(value => ( - - - - {value.label} - - - ))} - {displayValues.length > 0 && suggestions.length > 0 && ( -
- )} - {suggestions.map((suggestion, index) => ( - - - - {suggestion.label} - - - ))} - {allowCustomValues && - inputValue && - !choices.find( - choice => - choice.label.toLowerCase() === - inputValue.toLowerCase() - ) && ( - - - - - - )} - - ) : ( - !loading && ( - - - - ) - )} - - )} -
- )} + + ), + id: undefined, + onClick: toggleMenu + }} + helperText={helperText} + label={label} + fullWidth={true} + /> + {isOpen && (!!inputValue || !!choices.length) && ( + !value.includes(choice.value) + )} + displayCustomValue={displayCustomValue} + displayValues={displayValues} + getItemProps={getItemProps} + hasMore={hasMore} + highlightedIndex={highlightedIndex} + loading={loading} + inputValue={inputValue} + onFetchMore={onFetchMore} + /> + )} + + ); + }}
{displayValues.map(value => ( diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx new file mode 100644 index 000000000..2b3f1445c --- /dev/null +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx @@ -0,0 +1,291 @@ +import CircularProgress from "@material-ui/core/CircularProgress"; +import MenuItem from "@material-ui/core/MenuItem"; +import Paper from "@material-ui/core/Paper"; +import { Theme } from "@material-ui/core/styles"; +import AddIcon from "@material-ui/icons/Add"; +import { makeStyles } from "@material-ui/styles"; +import classNames from "classnames"; +import { GetItemPropsOptions } from "downshift"; +import React from "react"; +import SVG from "react-inlinesvg"; +import { FormattedMessage } from "react-intl"; + +import chevronDown from "@assets/images/ChevronDown.svg"; +import Checkbox from "@saleor/components/Checkbox"; +import useElementScroll, { + isScrolledToBottom +} from "@saleor/hooks/useElementScroll"; +import { FetchMoreProps } from "@saleor/types"; +import Hr from "../Hr"; + +const menuItemHeight = 46; +const maxMenuItems = 5; +const offset = 24; + +export interface MultiAutocompleteChoiceType { + label: string; + value: any; +} +export interface MultiAutocompleteSelectFieldContentProps + extends Partial { + choices: MultiAutocompleteChoiceType[]; + displayCustomValue: boolean; + displayValues: MultiAutocompleteChoiceType[]; + getItemProps: (options: GetItemPropsOptions) => void; + highlightedIndex: number; + inputValue: string; +} + +const useStyles = makeStyles( + (theme: Theme) => ({ + addIcon: { + height: 24, + margin: 9, + width: 20 + }, + arrowContainer: { + position: "relative" + }, + arrowInnerContainer: { + alignItems: "center", + background: theme.palette.grey[50], + bottom: 0, + display: "flex", + height: 30, + justifyContent: "center", + opacity: 1, + position: "absolute", + transition: theme.transitions.duration.short + "ms", + width: "100%" + }, + checkbox: { + height: 24, + width: 20 + }, + content: { + maxHeight: menuItemHeight * maxMenuItems + theme.spacing.unit * 2, + overflow: "scroll", + padding: 8 + }, + hide: { + opacity: 0 + }, + hr: { + margin: `${theme.spacing.unit}px 0` + }, + menuItem: { + "&:focus": { + backgroundColor: [ + theme.palette.background.default, + "!important" + ] as any, + color: theme.palette.primary.main, + fontWeight: 400 + }, + "&:hover": { + backgroundColor: [ + theme.palette.background.default, + "!important" + ] as any, + color: theme.palette.primary.main, + fontWeight: 700 + }, + borderRadius: 4, + display: "grid", + gridColumnGap: theme.spacing.unit + "px", + gridTemplateColumns: "30px 1fr", + height: "auto", + padding: 0, + whiteSpace: "normal" + }, + menuItemLabel: { + overflowWrap: "break-word" + }, + progress: {}, + progressContainer: { + display: "flex", + justifyContent: "center" + }, + root: { + borderBottomLeftRadius: 8, + borderBottomRightRadius: 8, + left: 0, + marginTop: theme.spacing.unit, + overflow: "hidden", + position: "absolute", + right: 0, + zIndex: 22 + } + }), + { + name: "MultiAutocompleteSelectFieldContent" + } +); + +function getChoiceIndex( + index: number, + displayValues: MultiAutocompleteChoiceType[], + displayCustomValue: boolean +) { + let choiceIndex = index; + if (displayCustomValue) { + choiceIndex += 2; + } + if (displayValues.length > 0) { + choiceIndex += 1 + displayValues.length; + } + + return choiceIndex; +} + +const MultiAutocompleteSelectFieldContent: React.FC< + MultiAutocompleteSelectFieldContentProps +> = props => { + const { + choices, + displayCustomValue, + displayValues, + getItemProps, + hasMore, + highlightedIndex, + loading, + inputValue, + onFetchMore + } = props; + + const classes = useStyles(props); + const anchor = React.useRef(); + const scrollPosition = useElementScroll(anchor); + const [calledForMore, setCalledForMore] = React.useState(false); + + const scrolledToBottom = isScrolledToBottom(anchor, scrollPosition, offset); + + React.useEffect(() => { + if (!calledForMore && onFetchMore && scrolledToBottom) { + onFetchMore(); + setCalledForMore(true); + } + }, [scrolledToBottom]); + + React.useEffect(() => { + if (calledForMore && !loading) { + setCalledForMore(false); + } + }, [loading]); + + return ( + +
+ {choices.length > 0 || displayCustomValue ? ( + <> + {displayCustomValue && ( + + + + + )} + {(choices.length > 0 || displayValues.length > 0) && + displayCustomValue &&
} + {displayValues.map(value => ( + + + {value.label} + + ))} + {displayValues.length > 0 && choices.length > 0 && ( +
+ )} + {choices.map((suggestion, index) => { + const choiceIndex = getChoiceIndex( + index, + displayValues, + displayCustomValue + ); + + return ( + + + + {suggestion.label} + + + ); + })} + {hasMore && ( + <> +
+
+ +
+ + )} + + ) : ( + + + + )} +
+
+
+ +
+
+ + ); +}; + +MultiAutocompleteSelectFieldContent.displayName = + "MultiAutocompleteSelectFieldContent"; +export default MultiAutocompleteSelectFieldContent; diff --git a/src/components/MultiAutocompleteSelectField/index.ts b/src/components/MultiAutocompleteSelectField/index.ts index e7e4cfd9b..8a33bf4b4 100644 --- a/src/components/MultiAutocompleteSelectField/index.ts +++ b/src/components/MultiAutocompleteSelectField/index.ts @@ -1,2 +1,3 @@ export { default } from "./MultiAutocompleteSelectField"; export * from "./MultiAutocompleteSelectField"; +export * from "./MultiAutocompleteSelectFieldContent"; diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.stories.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.stories.tsx index b8c11b685..4ce6428e8 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.stories.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.stories.tsx @@ -2,11 +2,11 @@ import { storiesOf } from "@storybook/react"; import React from "react"; import Form from "@saleor/components/Form"; +import { countries } from "@saleor/fixtures"; import CardDecorator from "@saleor/storybook/CardDecorator"; import Decorator from "@saleor/storybook/Decorator"; import { ChoiceProvider } from "@saleor/storybook/mock"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; -import { countries } from "./fixtures"; import SingleAutocompleteSelectField, { SingleAutocompleteSelectFieldProps } from "./SingleAutocompleteSelectField"; diff --git a/src/components/SingleAutocompleteSelectField/fixtures.ts b/src/components/SingleAutocompleteSelectField/fixtures.ts deleted file mode 100644 index 77eefc369..000000000 --- a/src/components/SingleAutocompleteSelectField/fixtures.ts +++ /dev/null @@ -1,245 +0,0 @@ -export const countries = [ - { name: "Afghanistan", code: "AF" }, - { name: "Åland Islands", code: "AX" }, - { name: "Albania", code: "AL" }, - { name: "Algeria", code: "DZ" }, - { name: "American Samoa", code: "AS" }, - { name: "AndorrA", code: "AD" }, - { name: "Angola", code: "AO" }, - { name: "Anguilla", code: "AI" }, - { name: "Antarctica", code: "AQ" }, - { name: "Antigua and Barbuda", code: "AG" }, - { name: "Argentina", code: "AR" }, - { name: "Armenia", code: "AM" }, - { name: "Aruba", code: "AW" }, - { name: "Australia", code: "AU" }, - { name: "Austria", code: "AT" }, - { name: "Azerbaijan", code: "AZ" }, - { name: "Bahamas", code: "BS" }, - { name: "Bahrain", code: "BH" }, - { name: "Bangladesh", code: "BD" }, - { name: "Barbados", code: "BB" }, - { name: "Belarus", code: "BY" }, - { name: "Belgium", code: "BE" }, - { name: "Belize", code: "BZ" }, - { name: "Benin", code: "BJ" }, - { name: "Bermuda", code: "BM" }, - { name: "Bhutan", code: "BT" }, - { name: "Bolivia", code: "BO" }, - { name: "Bosnia and Herzegovina", code: "BA" }, - { name: "Botswana", code: "BW" }, - { name: "Bouvet Island", code: "BV" }, - { name: "Brazil", code: "BR" }, - { name: "British Indian Ocean Territory", code: "IO" }, - { name: "Brunei Darussalam", code: "BN" }, - { name: "Bulgaria", code: "BG" }, - { name: "Burkina Faso", code: "BF" }, - { name: "Burundi", code: "BI" }, - { name: "Cambodia", code: "KH" }, - { name: "Cameroon", code: "CM" }, - { name: "Canada", code: "CA" }, - { name: "Cape Verde", code: "CV" }, - { name: "Cayman Islands", code: "KY" }, - { name: "Central African Republic", code: "CF" }, - { name: "Chad", code: "TD" }, - { name: "Chile", code: "CL" }, - { name: "China", code: "CN" }, - { name: "Christmas Island", code: "CX" }, - { name: "Cocos (Keeling) Islands", code: "CC" }, - { name: "Colombia", code: "CO" }, - { name: "Comoros", code: "KM" }, - { name: "Congo", code: "CG" }, - { name: "Congo, The Democratic Republic of the", code: "CD" }, - { name: "Cook Islands", code: "CK" }, - { name: "Costa Rica", code: "CR" }, - { name: "Cote D'Ivoire", code: "CI" }, - { name: "Croatia", code: "HR" }, - { name: "Cuba", code: "CU" }, - { name: "Cyprus", code: "CY" }, - { name: "Czech Republic", code: "CZ" }, - { name: "Denmark", code: "DK" }, - { name: "Djibouti", code: "DJ" }, - { name: "Dominica", code: "DM" }, - { name: "Dominican Republic", code: "DO" }, - { name: "Ecuador", code: "EC" }, - { name: "Egypt", code: "EG" }, - { name: "El Salvador", code: "SV" }, - { name: "Equatorial Guinea", code: "GQ" }, - { name: "Eritrea", code: "ER" }, - { name: "Estonia", code: "EE" }, - { name: "Ethiopia", code: "ET" }, - { name: "Falkland Islands (Malvinas)", code: "FK" }, - { name: "Faroe Islands", code: "FO" }, - { name: "Fiji", code: "FJ" }, - { name: "Finland", code: "FI" }, - { name: "France", code: "FR" }, - { name: "French Guiana", code: "GF" }, - { name: "French Polynesia", code: "PF" }, - { name: "French Southern Territories", code: "TF" }, - { name: "Gabon", code: "GA" }, - { name: "Gambia", code: "GM" }, - { name: "Georgia", code: "GE" }, - { name: "Germany", code: "DE" }, - { name: "Ghana", code: "GH" }, - { name: "Gibraltar", code: "GI" }, - { name: "Greece", code: "GR" }, - { name: "Greenland", code: "GL" }, - { name: "Grenada", code: "GD" }, - { name: "Guadeloupe", code: "GP" }, - { name: "Guam", code: "GU" }, - { name: "Guatemala", code: "GT" }, - { name: "Guernsey", code: "GG" }, - { name: "Guinea", code: "GN" }, - { name: "Guinea-Bissau", code: "GW" }, - { name: "Guyana", code: "GY" }, - { name: "Haiti", code: "HT" }, - { name: "Heard Island and Mcdonald Islands", code: "HM" }, - { name: "Holy See (Vatican City State)", code: "VA" }, - { name: "Honduras", code: "HN" }, - { name: "Hong Kong", code: "HK" }, - { name: "Hungary", code: "HU" }, - { name: "Iceland", code: "IS" }, - { name: "India", code: "IN" }, - { name: "Indonesia", code: "ID" }, - { name: "Iran, Islamic Republic Of", code: "IR" }, - { name: "Iraq", code: "IQ" }, - { name: "Ireland", code: "IE" }, - { name: "Isle of Man", code: "IM" }, - { name: "Israel", code: "IL" }, - { name: "Italy", code: "IT" }, - { name: "Jamaica", code: "JM" }, - { name: "Japan", code: "JP" }, - { name: "Jersey", code: "JE" }, - { name: "Jordan", code: "JO" }, - { name: "Kazakhstan", code: "KZ" }, - { name: "Kenya", code: "KE" }, - { name: "Kiribati", code: "KI" }, - { name: "Korea, Democratic People'S Republic of", code: "KP" }, - { name: "Korea, Republic of", code: "KR" }, - { name: "Kuwait", code: "KW" }, - { name: "Kyrgyzstan", code: "KG" }, - { name: "Lao People'S Democratic Republic", code: "LA" }, - { name: "Latvia", code: "LV" }, - { name: "Lebanon", code: "LB" }, - { name: "Lesotho", code: "LS" }, - { name: "Liberia", code: "LR" }, - { name: "Libyan Arab Jamahiriya", code: "LY" }, - { name: "Liechtenstein", code: "LI" }, - { name: "Lithuania", code: "LT" }, - { name: "Luxembourg", code: "LU" }, - { name: "Macao", code: "MO" }, - { name: "Macedonia, The Former Yugoslav Republic of", code: "MK" }, - { name: "Madagascar", code: "MG" }, - { name: "Malawi", code: "MW" }, - { name: "Malaysia", code: "MY" }, - { name: "Maldives", code: "MV" }, - { name: "Mali", code: "ML" }, - { name: "Malta", code: "MT" }, - { name: "Marshall Islands", code: "MH" }, - { name: "Martinique", code: "MQ" }, - { name: "Mauritania", code: "MR" }, - { name: "Mauritius", code: "MU" }, - { name: "Mayotte", code: "YT" }, - { name: "Mexico", code: "MX" }, - { name: "Micronesia, Federated States of", code: "FM" }, - { name: "Moldova, Republic of", code: "MD" }, - { name: "Monaco", code: "MC" }, - { name: "Mongolia", code: "MN" }, - { name: "Montserrat", code: "MS" }, - { name: "Morocco", code: "MA" }, - { name: "Mozambique", code: "MZ" }, - { name: "Myanmar", code: "MM" }, - { name: "Namibia", code: "NA" }, - { name: "Nauru", code: "NR" }, - { name: "Nepal", code: "NP" }, - { name: "Netherlands", code: "NL" }, - { name: "Netherlands Antilles", code: "AN" }, - { name: "New Caledonia", code: "NC" }, - { name: "New Zealand", code: "NZ" }, - { name: "Nicaragua", code: "NI" }, - { name: "Niger", code: "NE" }, - { name: "Nigeria", code: "NG" }, - { name: "Niue", code: "NU" }, - { name: "Norfolk Island", code: "NF" }, - { name: "Northern Mariana Islands", code: "MP" }, - { name: "Norway", code: "NO" }, - { name: "Oman", code: "OM" }, - { name: "Pakistan", code: "PK" }, - { name: "Palau", code: "PW" }, - { name: "Palestinian Territory, Occupied", code: "PS" }, - { name: "Panama", code: "PA" }, - { name: "Papua New Guinea", code: "PG" }, - { name: "Paraguay", code: "PY" }, - { name: "Peru", code: "PE" }, - { name: "Philippines", code: "PH" }, - { name: "Pitcairn", code: "PN" }, - { name: "Poland", code: "PL" }, - { name: "Portugal", code: "PT" }, - { name: "Puerto Rico", code: "PR" }, - { name: "Qatar", code: "QA" }, - { name: "Reunion", code: "RE" }, - { name: "Romania", code: "RO" }, - { name: "Russian Federation", code: "RU" }, - { name: "RWANDA", code: "RW" }, - { name: "Saint Helena", code: "SH" }, - { name: "Saint Kitts and Nevis", code: "KN" }, - { name: "Saint Lucia", code: "LC" }, - { name: "Saint Pierre and Miquelon", code: "PM" }, - { name: "Saint Vincent and the Grenadines", code: "VC" }, - { name: "Samoa", code: "WS" }, - { name: "San Marino", code: "SM" }, - { name: "Sao Tome and Principe", code: "ST" }, - { name: "Saudi Arabia", code: "SA" }, - { name: "Senegal", code: "SN" }, - { name: "Serbia and Montenegro", code: "CS" }, - { name: "Seychelles", code: "SC" }, - { name: "Sierra Leone", code: "SL" }, - { name: "Singapore", code: "SG" }, - { name: "Slovakia", code: "SK" }, - { name: "Slovenia", code: "SI" }, - { name: "Solomon Islands", code: "SB" }, - { name: "Somalia", code: "SO" }, - { name: "South Africa", code: "ZA" }, - { name: "South Georgia and the South Sandwich Islands", code: "GS" }, - { name: "Spain", code: "ES" }, - { name: "Sri Lanka", code: "LK" }, - { name: "Sudan", code: "SD" }, - { name: "Suriname", code: "SR" }, - { name: "Svalbard and Jan Mayen", code: "SJ" }, - { name: "Swaziland", code: "SZ" }, - { name: "Sweden", code: "SE" }, - { name: "Switzerland", code: "CH" }, - { name: "Syrian Arab Republic", code: "SY" }, - { name: "Taiwan, Province of China", code: "TW" }, - { name: "Tajikistan", code: "TJ" }, - { name: "Tanzania, United Republic of", code: "TZ" }, - { name: "Thailand", code: "TH" }, - { name: "Timor-Leste", code: "TL" }, - { name: "Togo", code: "TG" }, - { name: "Tokelau", code: "TK" }, - { name: "Tonga", code: "TO" }, - { name: "Trinidad and Tobago", code: "TT" }, - { name: "Tunisia", code: "TN" }, - { name: "Turkey", code: "TR" }, - { name: "Turkmenistan", code: "TM" }, - { name: "Turks and Caicos Islands", code: "TC" }, - { name: "Tuvalu", code: "TV" }, - { name: "Uganda", code: "UG" }, - { name: "Ukraine", code: "UA" }, - { name: "United Arab Emirates", code: "AE" }, - { name: "United Kingdom", code: "GB" }, - { name: "United States", code: "US" }, - { name: "United States Minor Outlying Islands", code: "UM" }, - { name: "Uruguay", code: "UY" }, - { name: "Uzbekistan", code: "UZ" }, - { name: "Vanuatu", code: "VU" }, - { name: "Venezuela", code: "VE" }, - { name: "Viet Nam", code: "VN" }, - { name: "Virgin Islands, British", code: "VG" }, - { name: "Virgin Islands, U.S.", code: "VI" }, - { name: "Wallis and Futuna", code: "WF" }, - { name: "Western Sahara", code: "EH" }, - { name: "Yemen", code: "YE" }, - { name: "Zambia", code: "ZM" }, - { name: "Zimbabwe", code: "ZW" } -]; diff --git a/src/fixtures.ts b/src/fixtures.ts index 2bc0090ca..9c3394411 100644 --- a/src/fixtures.ts +++ b/src/fixtures.ts @@ -44,11 +44,249 @@ export const listActionsProps: ListActions = { }; export const countries = [ - { code: "AF", label: "Afghanistan" }, - { code: "AX", label: "Åland Islands" }, - { code: "AL", label: "Albania" }, - { code: "DZ", label: "Algeria" }, - { code: "AS", label: "American Samoa" } + { name: "Afghanistan", code: "AF" }, + { name: "Åland Islands", code: "AX" }, + { name: "Albania", code: "AL" }, + { name: "Algeria", code: "DZ" }, + { name: "American Samoa", code: "AS" }, + { name: "AndorrA", code: "AD" }, + { name: "Angola", code: "AO" }, + { name: "Anguilla", code: "AI" }, + { name: "Antarctica", code: "AQ" }, + { name: "Antigua and Barbuda", code: "AG" }, + { name: "Argentina", code: "AR" }, + { name: "Armenia", code: "AM" }, + { name: "Aruba", code: "AW" }, + { name: "Australia", code: "AU" }, + { name: "Austria", code: "AT" }, + { name: "Azerbaijan", code: "AZ" }, + { name: "Bahamas", code: "BS" }, + { name: "Bahrain", code: "BH" }, + { name: "Bangladesh", code: "BD" }, + { name: "Barbados", code: "BB" }, + { name: "Belarus", code: "BY" }, + { name: "Belgium", code: "BE" }, + { name: "Belize", code: "BZ" }, + { name: "Benin", code: "BJ" }, + { name: "Bermuda", code: "BM" }, + { name: "Bhutan", code: "BT" }, + { name: "Bolivia", code: "BO" }, + { name: "Bosnia and Herzegovina", code: "BA" }, + { name: "Botswana", code: "BW" }, + { name: "Bouvet Island", code: "BV" }, + { name: "Brazil", code: "BR" }, + { name: "British Indian Ocean Territory", code: "IO" }, + { name: "Brunei Darussalam", code: "BN" }, + { name: "Bulgaria", code: "BG" }, + { name: "Burkina Faso", code: "BF" }, + { name: "Burundi", code: "BI" }, + { name: "Cambodia", code: "KH" }, + { name: "Cameroon", code: "CM" }, + { name: "Canada", code: "CA" }, + { name: "Cape Verde", code: "CV" }, + { name: "Cayman Islands", code: "KY" }, + { name: "Central African Republic", code: "CF" }, + { name: "Chad", code: "TD" }, + { name: "Chile", code: "CL" }, + { name: "China", code: "CN" }, + { name: "Christmas Island", code: "CX" }, + { name: "Cocos (Keeling) Islands", code: "CC" }, + { name: "Colombia", code: "CO" }, + { name: "Comoros", code: "KM" }, + { name: "Congo", code: "CG" }, + { name: "Congo, The Democratic Republic of the", code: "CD" }, + { name: "Cook Islands", code: "CK" }, + { name: "Costa Rica", code: "CR" }, + { name: "Cote D'Ivoire", code: "CI" }, + { name: "Croatia", code: "HR" }, + { name: "Cuba", code: "CU" }, + { name: "Cyprus", code: "CY" }, + { name: "Czech Republic", code: "CZ" }, + { name: "Denmark", code: "DK" }, + { name: "Djibouti", code: "DJ" }, + { name: "Dominica", code: "DM" }, + { name: "Dominican Republic", code: "DO" }, + { name: "Ecuador", code: "EC" }, + { name: "Egypt", code: "EG" }, + { name: "El Salvador", code: "SV" }, + { name: "Equatorial Guinea", code: "GQ" }, + { name: "Eritrea", code: "ER" }, + { name: "Estonia", code: "EE" }, + { name: "Ethiopia", code: "ET" }, + { name: "Falkland Islands (Malvinas)", code: "FK" }, + { name: "Faroe Islands", code: "FO" }, + { name: "Fiji", code: "FJ" }, + { name: "Finland", code: "FI" }, + { name: "France", code: "FR" }, + { name: "French Guiana", code: "GF" }, + { name: "French Polynesia", code: "PF" }, + { name: "French Southern Territories", code: "TF" }, + { name: "Gabon", code: "GA" }, + { name: "Gambia", code: "GM" }, + { name: "Georgia", code: "GE" }, + { name: "Germany", code: "DE" }, + { name: "Ghana", code: "GH" }, + { name: "Gibraltar", code: "GI" }, + { name: "Greece", code: "GR" }, + { name: "Greenland", code: "GL" }, + { name: "Grenada", code: "GD" }, + { name: "Guadeloupe", code: "GP" }, + { name: "Guam", code: "GU" }, + { name: "Guatemala", code: "GT" }, + { name: "Guernsey", code: "GG" }, + { name: "Guinea", code: "GN" }, + { name: "Guinea-Bissau", code: "GW" }, + { name: "Guyana", code: "GY" }, + { name: "Haiti", code: "HT" }, + { name: "Heard Island and Mcdonald Islands", code: "HM" }, + { name: "Holy See (Vatican City State)", code: "VA" }, + { name: "Honduras", code: "HN" }, + { name: "Hong Kong", code: "HK" }, + { name: "Hungary", code: "HU" }, + { name: "Iceland", code: "IS" }, + { name: "India", code: "IN" }, + { name: "Indonesia", code: "ID" }, + { name: "Iran, Islamic Republic Of", code: "IR" }, + { name: "Iraq", code: "IQ" }, + { name: "Ireland", code: "IE" }, + { name: "Isle of Man", code: "IM" }, + { name: "Israel", code: "IL" }, + { name: "Italy", code: "IT" }, + { name: "Jamaica", code: "JM" }, + { name: "Japan", code: "JP" }, + { name: "Jersey", code: "JE" }, + { name: "Jordan", code: "JO" }, + { name: "Kazakhstan", code: "KZ" }, + { name: "Kenya", code: "KE" }, + { name: "Kiribati", code: "KI" }, + { name: "Korea, Democratic People'S Republic of", code: "KP" }, + { name: "Korea, Republic of", code: "KR" }, + { name: "Kuwait", code: "KW" }, + { name: "Kyrgyzstan", code: "KG" }, + { name: "Lao People'S Democratic Republic", code: "LA" }, + { name: "Latvia", code: "LV" }, + { name: "Lebanon", code: "LB" }, + { name: "Lesotho", code: "LS" }, + { name: "Liberia", code: "LR" }, + { name: "Libyan Arab Jamahiriya", code: "LY" }, + { name: "Liechtenstein", code: "LI" }, + { name: "Lithuania", code: "LT" }, + { name: "Luxembourg", code: "LU" }, + { name: "Macao", code: "MO" }, + { name: "Macedonia, The Former Yugoslav Republic of", code: "MK" }, + { name: "Madagascar", code: "MG" }, + { name: "Malawi", code: "MW" }, + { name: "Malaysia", code: "MY" }, + { name: "Maldives", code: "MV" }, + { name: "Mali", code: "ML" }, + { name: "Malta", code: "MT" }, + { name: "Marshall Islands", code: "MH" }, + { name: "Martinique", code: "MQ" }, + { name: "Mauritania", code: "MR" }, + { name: "Mauritius", code: "MU" }, + { name: "Mayotte", code: "YT" }, + { name: "Mexico", code: "MX" }, + { name: "Micronesia, Federated States of", code: "FM" }, + { name: "Moldova, Republic of", code: "MD" }, + { name: "Monaco", code: "MC" }, + { name: "Mongolia", code: "MN" }, + { name: "Montserrat", code: "MS" }, + { name: "Morocco", code: "MA" }, + { name: "Mozambique", code: "MZ" }, + { name: "Myanmar", code: "MM" }, + { name: "Namibia", code: "NA" }, + { name: "Nauru", code: "NR" }, + { name: "Nepal", code: "NP" }, + { name: "Netherlands", code: "NL" }, + { name: "Netherlands Antilles", code: "AN" }, + { name: "New Caledonia", code: "NC" }, + { name: "New Zealand", code: "NZ" }, + { name: "Nicaragua", code: "NI" }, + { name: "Niger", code: "NE" }, + { name: "Nigeria", code: "NG" }, + { name: "Niue", code: "NU" }, + { name: "Norfolk Island", code: "NF" }, + { name: "Northern Mariana Islands", code: "MP" }, + { name: "Norway", code: "NO" }, + { name: "Oman", code: "OM" }, + { name: "Pakistan", code: "PK" }, + { name: "Palau", code: "PW" }, + { name: "Palestinian Territory, Occupied", code: "PS" }, + { name: "Panama", code: "PA" }, + { name: "Papua New Guinea", code: "PG" }, + { name: "Paraguay", code: "PY" }, + { name: "Peru", code: "PE" }, + { name: "Philippines", code: "PH" }, + { name: "Pitcairn", code: "PN" }, + { name: "Poland", code: "PL" }, + { name: "Portugal", code: "PT" }, + { name: "Puerto Rico", code: "PR" }, + { name: "Qatar", code: "QA" }, + { name: "Reunion", code: "RE" }, + { name: "Romania", code: "RO" }, + { name: "Russian Federation", code: "RU" }, + { name: "RWANDA", code: "RW" }, + { name: "Saint Helena", code: "SH" }, + { name: "Saint Kitts and Nevis", code: "KN" }, + { name: "Saint Lucia", code: "LC" }, + { name: "Saint Pierre and Miquelon", code: "PM" }, + { name: "Saint Vincent and the Grenadines", code: "VC" }, + { name: "Samoa", code: "WS" }, + { name: "San Marino", code: "SM" }, + { name: "Sao Tome and Principe", code: "ST" }, + { name: "Saudi Arabia", code: "SA" }, + { name: "Senegal", code: "SN" }, + { name: "Serbia and Montenegro", code: "CS" }, + { name: "Seychelles", code: "SC" }, + { name: "Sierra Leone", code: "SL" }, + { name: "Singapore", code: "SG" }, + { name: "Slovakia", code: "SK" }, + { name: "Slovenia", code: "SI" }, + { name: "Solomon Islands", code: "SB" }, + { name: "Somalia", code: "SO" }, + { name: "South Africa", code: "ZA" }, + { name: "South Georgia and the South Sandwich Islands", code: "GS" }, + { name: "Spain", code: "ES" }, + { name: "Sri Lanka", code: "LK" }, + { name: "Sudan", code: "SD" }, + { name: "Suriname", code: "SR" }, + { name: "Svalbard and Jan Mayen", code: "SJ" }, + { name: "Swaziland", code: "SZ" }, + { name: "Sweden", code: "SE" }, + { name: "Switzerland", code: "CH" }, + { name: "Syrian Arab Republic", code: "SY" }, + { name: "Taiwan, Province of China", code: "TW" }, + { name: "Tajikistan", code: "TJ" }, + { name: "Tanzania, United Republic of", code: "TZ" }, + { name: "Thailand", code: "TH" }, + { name: "Timor-Leste", code: "TL" }, + { name: "Togo", code: "TG" }, + { name: "Tokelau", code: "TK" }, + { name: "Tonga", code: "TO" }, + { name: "Trinidad and Tobago", code: "TT" }, + { name: "Tunisia", code: "TN" }, + { name: "Turkey", code: "TR" }, + { name: "Turkmenistan", code: "TM" }, + { name: "Turks and Caicos Islands", code: "TC" }, + { name: "Tuvalu", code: "TV" }, + { name: "Uganda", code: "UG" }, + { name: "Ukraine", code: "UA" }, + { name: "United Arab Emirates", code: "AE" }, + { name: "United Kingdom", code: "GB" }, + { name: "United States", code: "US" }, + { name: "United States Minor Outlying Islands", code: "UM" }, + { name: "Uruguay", code: "UY" }, + { name: "Uzbekistan", code: "UZ" }, + { name: "Vanuatu", code: "VU" }, + { name: "Venezuela", code: "VE" }, + { name: "Viet Nam", code: "VN" }, + { name: "Virgin Islands, British", code: "VG" }, + { name: "Virgin Islands, U.S.", code: "VI" }, + { name: "Wallis and Futuna", code: "WF" }, + { name: "Western Sahara", code: "EH" }, + { name: "Yemen", code: "YE" }, + { name: "Zambia", code: "ZM" }, + { name: "Zimbabwe", code: "ZW" } ]; export const tabPageProps: TabPageProps = { diff --git a/src/storybook/config.js b/src/storybook/config.js index 83005935a..c1d03a182 100644 --- a/src/storybook/config.js +++ b/src/storybook/config.js @@ -29,7 +29,6 @@ function loadStories() { require("./stories/components/Filter"); require("./stories/components/Money"); require("./stories/components/MoneyRange"); - require("./stories/components/MultiAutocompleteSelectField"); require("./stories/components/MultiSelectField"); require("./stories/components/NotFoundPage"); require("./stories/components/PageHeader"); 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/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,