@roomstay/frontend 1.6.1 → 2.0.0-2

package/dist/src/components/steps/confirmation/StepConfirmationCountrySelector.js

@@ -1,65 +1,93 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const core_1 = require("@material-ui/core");
-const lab_1 = require("@material-ui/lab");
-const Icon_1 = require("../../generic/Icon");
 const classNames = require("classnames");
-const RoomstayThemeEngine_1 = require("../../../providers/RoomstayThemeEngine");
+const React = require("react");
+const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
-const Translation_1 = require("../../../translations/Translation");
-const CountryCodesAndNumbers_1 = require("../../../models/CountryCodesAndNumbers");
-function StepConfirmationCountrySelector(props) {
-    const { validationStatus: validationFields } = props, rest = __rest(props, ["validationStatus"]);
-    const classes = classNames('textbox c-input h-100', {
-        '--success': validationFields === 'success',
-        '--error': validationFields === 'error',
+const CountryCodesAndNumbers_1 = require("models/CountryCodesAndNumbers");
+const Translation_1 = require("translations/Translation");
+const Icon_1 = require("components/generic/Icon/Icon");
+require("./StepConfirmationCountrySelector.global.scss");
+const AutoFocusOnSelect_1 = require("../../../hooks/AutoFocusOnSelect");
+const Select_1 = require("../../generic/Select/Select");
+const StepConfirmationCountrySelector = (0, react_1.forwardRef)(function InnerStepConfirmationCountrySelector(props, ref) {
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
+    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = (0, AutoFocusOnSelect_1.useAutoFocusOnSelect)({
+        ref: inputRef.current,
+        focusOnSelected: false,
     });
-    const { t } = react_i18next_1.useTranslation();
-    const popperComponentHandler = (propsForPopperComponent) => {
-        return (React.createElement(core_1.Popper, Object.assign({ container: RoomstayThemeEngine_1.default.EngineContainer, placement: "bottom", disablePortal: false, modifiers: {
-                flip: {
-                    enabled: true,
-                },
-                preventOverflow: {
-                    enabled: false,
-                    boundariesElement: 'scrollParent',
-                },
-            } }, propsForPopperComponent)));
+    const { validationStatus, name, onChange, value = '' } = props;
+    const [inputValue, setInputValue] = (0, react_1.useState)(value);
+    (0, react_1.useEffect)(() => {
+        setInputValue(value);
+    }, [value]);
+    const organizedCountries = (0, react_1.useMemo)(() => {
+        return CountryCodesAndNumbers_1.ListOfCountriesAndCodes.sort((a, b) => {
+            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);
+        });
+    }, [CountryCodesAndNumbers_1.ListOfCountriesAndCodes]);
+    const filterCountries = (0, react_1.useCallback)((inputValue) => {
+        return organizedCountries.filter(({ label }) => label.toUpperCase().includes(inputValue.toUpperCase()));
+    }, [organizedCountries]);
+    const [options, setOptions] = (0, react_1.useState)(filterCountries(value));
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const container = (0, react_1.useRef)(null);
+    const emptyValue = () => {
+        onChange === null || onChange === void 0 ? void 0 : onChange({ target: { name, value: '' } });
+        setInputValue('');
+        setOptions(organizedCountries);
+    };
+    const onInputChanged = (e) => {
+        var _a;
+        if ((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim()) {
+            setOptions(filterCountries(e.target.value));
+        }
+        else {
+            setOptions(organizedCountries);
+        }
+        setInputValue(e.target.value);
     };
-    const getOptionLabelHandler = (option) => {
-        return option.label;
+    const fieldClasses = classNames('rs-enhanced-country-field', {
+        [`--${validationStatus}`]: !!validationStatus,
+        '--focused': isFocused,
+        '--disabled': props.disabled,
+    });
+    const onCountryClick = (country) => {
+        setInputValue(country.label);
+        onItemSelected();
+        onChange === null || onChange === void 0 ? void 0 : onChange({ target: { name, value: country.label } });
     };
-    const renderOptionHandler = (option) => {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("span", null, CountryCodesAndNumbers_1.convertCountryCodeToFlag(option.code)),
-            React.createElement("span", { className: "u-marg-left" },
-                option.label,
-                " (",
-                option.code,
-                ")")));
+    const getOption = (key) => {
+        return options.find(({ label }) => label === key);
     };
-    const renderInputHandler = (params) => {
-        var _a;
-        const placeholder = (_a = props.inputPlaceholder) !== null && _a !== void 0 ? _a : t(Translation_1.Translation.Step.Confirmation.Inputs.Country) + ' *';
-        return (React.createElement(core_1.TextField, Object.assign({}, params, { placeholder: placeholder, inputProps: Object.assign(Object.assign({}, params.inputProps), { autoComplete: 'new-password' }) })));
+    const onClose = (e) => {
+        onDropdownClosed(e);
+        if (organizedCountries.every(({ label }) => { var _a; return label !== ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value); })) {
+            emptyValue();
+        }
     };
-    if (typeof rest.value === 'undefined') {
-        rest.value = null;
-    }
-    return (React.createElement("div", { className: classes },
-        React.createElement(lab_1.Autocomplete, Object.assign({ options: CountryCodesAndNumbers_1.ListOfCountriesAndCodes, style: { width: '100%' }, autoHighlight: true, getOptionLabel: getOptionLabelHandler, closeIcon: React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close }), popupIcon: React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown }), PopperComponent: popperComponentHandler, renderOption: renderOptionHandler, renderInput: renderInputHandler }, rest, { onChange: (a, b, c) => rest.onChange({ target: { name: rest.name, value: b !== null && b !== void 0 ? b : undefined } }) }))));
-}
+    return (React.createElement("div", { className: fieldClasses },
+        React.createElement("div", { className: "rs-enhanced-country-field--anchor", ref: container }),
+        React.createElement("div", { className: "rs-enhanced-country-field--search" },
+            React.createElement("input", { disabled: props.disabled, ref: inputRef, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Country) + ' *', onChange: onInputChanged, value: inputValue }),
+            React.createElement("div", { onClick: () => {
+                    var _a;
+                    emptyValue();
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, className: classNames('rs-enhanced-country-field--close', {
+                    '--hide': !inputValue,
+                }) },
+                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close })),
+            React.createElement("div", { className: "rs-enhanced-country-field--country", onClick: onTriggerClicked },
+                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown }))),
+        React.createElement(Select_1.Select, { offset: [0, 21], open: isDropdownOpen, onClose: onClose, target: container.current, options: options, value: value, onChange: (value) => onCountryClick(getOption(value)), keyName: "label", renderOption: (country) => (React.createElement("div", { className: "rs-enhanced-country-field--suggest-list-country" },
+                React.createElement("div", { className: "rs-enhanced-country-field--suggest-list-country-icon" }, (0, CountryCodesAndNumbers_1.convertCountryCodeToFlag)(country.code)),
+                React.createElement("div", { className: "rs-enhanced-country-field--suggest-list-country-name" },
+                    country.label,
+                    " (",
+                    country.code,
+                    ")"))) })));
+});
 exports.default = StepConfirmationCountrySelector;
 //# sourceMappingURL=StepConfirmationCountrySelector.js.map

package/dist/src/components/steps/confirmation/StepConfirmationCountrySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepConfirmationCountrySelector.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationCountrySelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { TextField, Popper } from '@material-ui/core';\nimport { Autocomplete, AutocompleteProps } from '@material-ui/lab';\nimport Icon, { IconType } from '../../generic/Icon';\n\nimport * as classNames from 'classnames';\nimport RoomstayThemeEngine from '../../../providers/RoomstayThemeEngine';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '../../../translations/Translation';\nimport { convertCountryCodeToFlag, ListOfCountriesAndCodes } from '../../../models/CountryCodesAndNumbers';\n\ninterface CountrySelectorProps extends AutocompleteProps<undefined, undefined, undefined, undefined> {\n    validationStatus?: any;\n\n    inputPlaceholder?: string;\n\n    name: string;\n    onChange?: (e: React.ChangeEvent) => void;\n}\n\nexport default function StepConfirmationCountrySelector(props: Partial<CountrySelectorProps>) {\n    const { validationStatus: validationFields, ...rest } = props;\n\n    const classes = classNames('textbox c-input h-100', {\n        '--success': validationFields === 'success',\n        '--error': validationFields === 'error',\n    });\n\n    const { t } = useTranslation();\n    const popperComponentHandler = (propsForPopperComponent: any) => {\n        return (\n            <Popper\n                container={RoomstayThemeEngine.EngineContainer}\n                placement=\"bottom\"\n                disablePortal={false}\n                modifiers={{\n                    flip: {\n                        enabled: true,\n                    },\n                    preventOverflow: {\n                        enabled: false,\n                        boundariesElement: 'scrollParent',\n                    },\n                }}\n                {...propsForPopperComponent}\n            />\n        );\n    };\n\n    const getOptionLabelHandler = (option: any) => {\n        return option.label;\n    };\n\n    const renderOptionHandler = (option: any) => {\n        return (\n            <React.Fragment>\n                <span>{convertCountryCodeToFlag(option.code)}</span>\n                <span className=\"u-marg-left\">\n                    {option.label} ({option.code})\n                </span>\n            </React.Fragment>\n        );\n    };\n\n    const renderInputHandler = (params: any) => {\n        const placeholder = props.inputPlaceholder ?? t(Translation.Step.Confirmation.Inputs.Country) + ' *';\n\n        return (\n            <TextField\n                {...params}\n                placeholder={placeholder}\n                inputProps={{\n                    ...params.inputProps,\n                    autoComplete: 'new-password', // disable autocomplete and autofill\n                }}\n            />\n        );\n    };\n\n    if (typeof rest.value === 'undefined') {\n        rest.value = null;\n    }\n\n    return (\n        <div className={classes}>\n            <Autocomplete\n                options={ListOfCountriesAndCodes}\n                style={{ width: '100%' }}\n                autoHighlight={true}\n                getOptionLabel={getOptionLabelHandler}\n                closeIcon={<Icon icon={IconType.Close} />}\n                popupIcon={<Icon icon={IconType.Dropdown} />}\n                PopperComponent={popperComponentHandler}\n                renderOption={renderOptionHandler}\n                renderInput={renderInputHandler}\n                {...rest}\n                onChange={(a, b, c) => rest.onChange({ target: { name: rest.name, value: b ?? undefined } } as any)}\n            />\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"StepConfirmationCountrySelector.js","sourceRoot":"/","sources":["src/components/steps/confirmation/StepConfirmationCountrySelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as classNames from 'classnames';\nimport * as React from 'react';\nimport { ChangeEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from 'models/CountryCodesAndNumbers';\nimport { Translation } from 'translations/Translation';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\n\nimport './StepConfirmationCountrySelector.global.scss';\nimport { useAutoFocusOnSelect } from '../../../hooks/AutoFocusOnSelect';\nimport { Select } from '../../generic/Select/Select';\n\ninterface StepConfirmationCountrySelectorProps {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string; // example: Australia\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst StepConfirmationCountrySelector = forwardRef<HTMLInputElement, StepConfirmationCountrySelectorProps>(function InnerStepConfirmationCountrySelector(props, ref) {\n    const inputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => inputRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: inputRef.current,\n        focusOnSelected: false,\n    });\n\n    const { validationStatus, name, onChange, value = '' } = props;\n    const [inputValue, setInputValue] = useState<string>(value);\n\n    useEffect(() => {\n        setInputValue(value);\n    }, [value]);\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n    const filterCountries = useCallback(\n        (inputValue: string): CountryType[] => {\n            return organizedCountries.filter(({ label }) => label.toUpperCase().includes(inputValue.toUpperCase()));\n        },\n        [organizedCountries]\n    );\n    const [options, setOptions] = useState<CountryType[]>(filterCountries(value));\n\n    const { t } = useTranslation();\n\n    const container = useRef(null);\n\n    const emptyValue = () => {\n        onChange?.({ target: { name, value: '' } } as any);\n        setInputValue('');\n        setOptions(organizedCountries);\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        if (e.target.value?.trim()) {\n            setOptions(filterCountries(e.target.value));\n        } else {\n            setOptions(organizedCountries);\n        }\n        setInputValue(e.target.value);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-country-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n\n    const onCountryClick = (country: CountryType): void => {\n        setInputValue(country.label);\n        onItemSelected();\n        onChange?.({ target: { name, value: country.label } } as any);\n    };\n\n    const getOption = (key: CountryType['label']): CountryType => {\n        return options.find(({ label }) => label === key);\n    };\n\n    const onClose = (e: MouseEvent) => {\n        onDropdownClosed(e);\n        if (organizedCountries.every(({ label }) => label !== inputRef.current?.value)) {\n            emptyValue();\n        }\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-country-field--anchor\" ref={container}></div>\n\n            <div className=\"rs-enhanced-country-field--search\">\n                <input disabled={props.disabled} ref={inputRef} placeholder={t(Translation.Step.Confirmation.Inputs.Country) + ' *'} onChange={onInputChanged} value={inputValue} />\n                <div\n                    onClick={() => {\n                        emptyValue();\n                        inputRef.current?.focus();\n                    }}\n                    className={classNames('rs-enhanced-country-field--close', {\n                        '--hide': !inputValue,\n                    })}\n                >\n                    <Icon icon={IconType.Close} />\n                </div>\n                <div className=\"rs-enhanced-country-field--country\" onClick={onTriggerClicked}>\n                    <Icon icon={IconType.Dropdown} />\n                </div>\n            </div>\n\n            <Select<CountryType, 'label'>\n                offset={[0, 21]}\n                open={isDropdownOpen}\n                onClose={onClose}\n                target={container.current}\n                options={options}\n                value={value}\n                onChange={(value) => onCountryClick(getOption(value))}\n                keyName=\"label\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-country-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-country-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country.code)}</div>\n                        <div className=\"rs-enhanced-country-field--suggest-list-country-name\">\n                            {country.label} ({country.code})\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n});\n\nexport default StepConfirmationCountrySelector;\n"]}