kui-complex 0.0.72 → 0.0.74

package/cjs/index.js

@@ -22,6 +22,7 @@ var reactRouterDom = require('react-router-dom');
 var reactRouter = require('react-router');
 var Swiper = require('react-id-swiper');
 var ReactDOM = require('react-dom');
+var jsApiLoader = require('@googlemaps/js-api-loader');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -90,6 +91,44 @@ function __rest(s, e) {
     return t;
 }
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
 function __spreadArray(to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -1652,6 +1691,150 @@ var StyledCheckbox = styled__default["default"](CheckboxWithController)(template
 var StyledWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 3px 16px;\n  border: 1px solid ", ";\n  border-radius: 66px;\n  height: 40px;\n"], ["\n  padding: 3px 16px;\n  border: 1px solid ", ";\n  border-radius: 66px;\n  height: 40px;\n"])), kuiBasic.theme.palette.grey.fifteenB);
 var templateObject_1, templateObject_2;
 
+var render = function (status) {
+    if (status === "LOADING")
+        return jsxRuntime.jsx(Loading, { height: "100%" });
+    if (status === "FAILURE")
+        return jsxRuntime.jsx("h3", { children: status });
+    return jsxRuntime.jsx("div", {});
+};
+function MapWrapper(_a) {
+    var children = _a.children;
+    var _b = React.useState(false), isUnMounted = _b[0], setIsUnMounted = _b[1];
+    var _c = React.useState("LOADING"), status = _c[0], setStatus = _c[1];
+    React.useEffect(function () {
+        if (!isUnMounted && process.env.REACT_APP_MAP_KEY) {
+            var loader = new jsApiLoader.Loader({
+                apiKey: process.env.REACT_APP_MAP_KEY,
+                libraries: ["places"],
+            });
+            var setStatusAndExecuteCallback_1 = function (newStatus) {
+                setStatus(newStatus);
+            };
+            setStatusAndExecuteCallback_1("LOADING");
+            loader.load().then(function () { return setStatusAndExecuteCallback_1("SUCCESS"); }, function () { return setStatusAndExecuteCallback_1("FAILURE"); });
+        }
+        return function () { return setIsUnMounted(true); };
+    }, []);
+    if (!process.env.REACT_APP_MAP_KEY) {
+        return jsxRuntime.jsx("h2", { children: "Add google key" });
+    }
+    if (status === "SUCCESS" && children)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    render(status);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+}
+
+var useAddressAutocomplete = function (form, name, handlePlaceSelectProp) {
+    var _a = React.useState(null), place = _a[0], setPlace = _a[1];
+    var inputRef = React.useRef(null);
+    function handlePlaceSelect(newPlace) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return __awaiter(this, void 0, void 0, function () {
+            var toCoords, lat, lng, street, houseNumber, zipCode, formattedAddress;
+            return __generator(this, function (_h) {
+                toCoords = ((_a = newPlace.geometry) === null || _a === void 0 ? void 0 : _a.location)
+                    ? {
+                        lat: newPlace.geometry.location.lat(),
+                        lng: newPlace.geometry.location.lng(),
+                    }
+                    : null;
+                lat = toCoords === null || toCoords === void 0 ? void 0 : toCoords.lat;
+                lng = toCoords === null || toCoords === void 0 ? void 0 : toCoords.lng;
+                if (handlePlaceSelectProp) {
+                    handlePlaceSelectProp(lat && lng ? { lat: lat, lng: lng } : null, newPlace);
+                }
+                form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".location.lat"), lat, { shouldValidate: true });
+                form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".location.lon"), lng, { shouldValidate: true });
+                form.setValue("".concat(name, ".addressAutoComplete"), newPlace, {
+                    shouldValidate: true,
+                });
+                street = (_c = (_b = newPlace.address_components) === null || _b === void 0 ? void 0 : _b.find(function (elem) {
+                    return elem.types.includes("route");
+                })) === null || _c === void 0 ? void 0 : _c.short_name;
+                houseNumber = (_e = (_d = newPlace.address_components) === null || _d === void 0 ? void 0 : _d.find(function (elem) {
+                    return elem.types.includes("street_number");
+                })) === null || _e === void 0 ? void 0 : _e.short_name;
+                zipCode = (_g = (_f = newPlace.address_components) === null || _f === void 0 ? void 0 : _f.find(function (elem) {
+                    return elem.types.includes("postal_code");
+                })) === null || _g === void 0 ? void 0 : _g.short_name;
+                formattedAddress = newPlace.formatted_address;
+                if (street && houseNumber) {
+                    formattedAddress = "".concat(street, ", ").concat(houseNumber);
+                }
+                form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".address"), formattedAddress, {
+                    shouldValidate: true,
+                });
+                form.setValue("zipCode", zipCode);
+                setPlace(newPlace);
+                return [2 /*return*/];
+            });
+        });
+    }
+    var addAutocomplete = function () {
+        if (inputRef.current) {
+            var autoComplete_1 = new window.google.maps.places.Autocomplete(inputRef.current);
+            autoComplete_1.addListener("place_changed", function () {
+                var newPlace = autoComplete_1.getPlace();
+                handlePlaceSelect(newPlace);
+            });
+        }
+    };
+    var cleanLocation = function () {
+        setPlace(null);
+        form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".location.lat"), null, { shouldValidate: true });
+        form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".location.lon"), null, { shouldValidate: true });
+        form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".addressAutoComplete"), null, {
+            shouldValidate: true,
+        });
+        form === null || form === void 0 ? void 0 : form.setValue("".concat(name, ".address"), "", { shouldValidate: true });
+    };
+    var checkMapLoaded = function () {
+        if (!window.google || !inputRef.current) {
+            setTimeout(checkMapLoaded, 1);
+        }
+        else
+            addAutocomplete();
+    };
+    var setDefaultPlace = function () {
+        var address = form.getValues("".concat(name, ".address"));
+        var lat = form.getValues("".concat(name, ".location.lat"));
+        var lng = form.getValues("".concat(name, ".location.lon"));
+        var defaultPlace = {
+            formatted_address: address,
+            geometry: {
+                location: { lat: lat, lng: lng },
+            },
+        };
+        if (address && lat && lng)
+            setPlace(defaultPlace);
+    };
+    React.useEffect(function () {
+        checkMapLoaded();
+        setDefaultPlace();
+    }, []);
+    return { inputRef: inputRef, handlePlaceSelect: handlePlaceSelect, place: place, cleanLocation: cleanLocation };
+};
+
+function InputWithAddressAutocomplete(_a) {
+    var form = _a.form, name = _a.name, handlePlaceSelect = _a.handlePlaceSelect, inputProps = __rest(_a, ["form", "name", "handlePlaceSelect"]);
+    var inputRef = useAddressAutocomplete(form, name, handlePlaceSelect).inputRef;
+    return (jsxRuntime.jsx(MapWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({ name: "".concat(name, ".address"), form: form, ref: inputRef, placeholder: "" }, inputProps)) }));
+}
+InputWithAddressAutocomplete.defaultProps = {
+    label: "Address",
+};
+
+var DependentInput = function (props) {
+    var dependentInputName = props.dependentInputName, form = props.form, disabled = props.disabled, Input = props.Input, other = __rest(props, ["dependentInputName", "form", "disabled", "Input"]);
+    var dependentInputValue = reactHookForm.useWatch({
+        control: form.control,
+        name: dependentInputName,
+    });
+    var inputProps = __assign({ form: form, disabled: disabled || !dependentInputValue }, other);
+    return Input ? (jsxRuntime.jsx(Input, __assign({}, inputProps))) : (jsxRuntime.jsx(InputWithController, __assign({}, inputProps)));
+};
+
 exports.AutocompleteOption = AutocompleteOption;
 exports.Avatar = Avatar;
 exports.ButtonSelect = ButtonSelect;
@@ -1662,6 +1845,7 @@ exports.CalendarStandardContainer = CalendarStandardContainer;
 exports.CalendarStandardHeader = CalendarStandardHeader;
 exports.CheckboxGroupWithTitle = CheckboxGroupWithTitle;
 exports.CheckboxWithController = CheckboxWithController;
+exports.DependentInput = DependentInput;
 exports.DesktopInputWithMonthPicker = DesktopInputWithMonthPicker;
 exports.DesktopMenuPanel = DesktopMenuPanel;
 exports.InputDropdown = InputDropdown;
@@ -1674,11 +1858,13 @@ exports.InputSelect = InputSelect;
 exports.InputSelectDropdown = InputSelectDropdown;
 exports.InputSelectWithController = InputSelectWithController;
 exports.InputTextAreaMobile = InputTextAreaMobile;
+exports.InputWithAddressAutocomplete = InputWithAddressAutocomplete;
 exports.InputWithAutocomplete = InputWithAutocomplete;
 exports.InputWithController = InputWithController;
 exports.InputWithDatePicker = InputWithDatePicker;
 exports.InputWithMask = InputWithMask;
 exports.InputWithMonthPicker = InputWithMonthPicker;
+exports.MapWrapper = MapWrapper;
 exports.MenuItem = MenuItem;
 exports.MenuPanel = MenuPanel;
 exports.MobileInputWithMonthPicker = MobileInputWithMonthPicker;