allaw-ui 4.8.3 → 4.8.4

package/dist/components/atoms/inputs/SearchBar.d.ts

@@ -10,6 +10,9 @@ export interface SearchBarProps {
     showClear?: boolean;
     size?: "normal" | "big";
     style?: "classic" | "form";
+    disableAutofill?: boolean;
+    showLocate?: boolean;
+    resolveCityFromCoords?: (lat: number, lon: number) => Promise<string | undefined>;
 }
 declare const SearchBar: React.FC<SearchBarProps>;
 export default SearchBar;

package/dist/components/atoms/inputs/SearchBar.js

@@ -1,10 +1,57 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (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());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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 (g && (g = 0, op[0] && (_ = 0)), _) 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 };
+    }
+};
 import React, { useState } from "react";
 import styles from "./searchBar.module.css";
 import "../../../styles/global.css";
 import "../../../styles/icons.css";
 var SearchBar = function (_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Faites une recherche" : _b, endIcon = _a.endIcon, startIcon = _a.startIcon, _c = _a.value, controlledValue = _c === void 0 ? "" : _c, onChange = _a.onChange, _d = _a.showClear, showClear = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "normal" : _e, _f = _a.style, styleProp = _f === void 0 ? "classic" : _f;
-    var _g = useState(controlledValue), value = _g[0], setValue = _g[1];
+    var _b = _a.placeholder, placeholder = _b === void 0 ? "Faites une recherche" : _b, endIcon = _a.endIcon, startIcon = _a.startIcon, _c = _a.value, controlledValue = _c === void 0 ? "" : _c, onChange = _a.onChange, _d = _a.showClear, showClear = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "normal" : _e, _f = _a.style, styleProp = _f === void 0 ? "classic" : _f, _g = _a.disableAutofill, disableAutofill = _g === void 0 ? false : _g, _h = _a.showLocate, showLocate = _h === void 0 ? false : _h, resolveCityFromCoords = _a.resolveCityFromCoords;
+    var _j = useState(controlledValue), value = _j[0], setValue = _j[1];
     var handleChange = function (event) {
         var newValue = event.target.value;
         setValue(newValue);
@@ -18,6 +65,67 @@ var SearchBar = function (_a) {
             onChange("");
         }
     };
+    var defaultResolveCityFromCoords = function (lat, lon) { return __awaiter(void 0, void 0, void 0, function () {
+        var url, response, data, address, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 3, , 4]);
+                    url = "https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=".concat(lat, "&lon=").concat(lon);
+                    return [4 /*yield*/, fetch(url, {
+                            headers: { Accept: "application/json" },
+                        })];
+                case 1:
+                    response = _a.sent();
+                    if (!response.ok)
+                        return [2 /*return*/, undefined];
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    data = _a.sent();
+                    address = (data === null || data === void 0 ? void 0 : data.address) || {};
+                    return [2 /*return*/, (address.city ||
+                            address.town ||
+                            address.village ||
+                            address.municipality ||
+                            address.state ||
+                            undefined)];
+                case 3:
+                    error_1 = _a.sent();
+                    // eslint-disable-next-line no-console
+                    console.warn("reverse geocoding failed", error_1);
+                    return [2 /*return*/, undefined];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleLocate = function () {
+        if (!(navigator === null || navigator === void 0 ? void 0 : navigator.geolocation)) {
+            // eslint-disable-next-line no-console
+            console.warn("Geolocation not supported by this browser");
+            return;
+        }
+        navigator.geolocation.getCurrentPosition(function (pos) { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, latitude, longitude, resolver, city;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = pos.coords, latitude = _a.latitude, longitude = _a.longitude;
+                        resolver = resolveCityFromCoords || defaultResolveCityFromCoords;
+                        return [4 /*yield*/, resolver(latitude, longitude)];
+                    case 1:
+                        city = _b.sent();
+                        if (city) {
+                            setValue(city);
+                            onChange === null || onChange === void 0 ? void 0 : onChange(city);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); }, function (err) {
+            // eslint-disable-next-line no-console
+            console.warn("Geolocation error", err);
+        }, { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 });
+    };
     var wrapperClassName = [
         styles.searchBar,
         styleProp === "form" ? styles.styleForm : "",
@@ -28,10 +136,16 @@ var SearchBar = function (_a) {
     return (React.createElement("div", { className: wrapperClassName },
         startIcon && (React.createElement("span", { className: styles.searchBarStartIcon, "aria-hidden": "true" },
             React.createElement("i", { className: startIcon }))),
-        React.createElement("input", { type: "text", placeholder: placeholder, className: styles.searchBarPlaceholder, value: controlledValue || value, onChange: handleChange }),
+        React.createElement("input", __assign({ type: "text", placeholder: placeholder, className: styles.searchBarPlaceholder, value: controlledValue || value, onChange: handleChange }, (disableAutofill && {
+            autoComplete: "off",
+            "data-form-type": "other",
+            "data-lpignore": "true",
+            "data-1p-ignore": true,
+        }))),
         showClear && (controlledValue || value) && (React.createElement("button", { type: "button", className: styles.searchBarClearButton, onClick: handleClear, "aria-label": "Effacer la recherche" },
             React.createElement("i", { className: "allaw-icon-x-small" }))),
         endIcon && (React.createElement("button", { className: styles.searchBarIconButton, tabIndex: -1, "aria-label": "Rechercher" },
-            React.createElement("i", { className: endIcon })))));
+            React.createElement("i", { className: endIcon }))),
+        showLocate && (React.createElement("button", { type: "button", className: styles.searchBarLocateButton, onClick: handleLocate, "aria-label": "Me localiser", title: "Me localiser" }, "Me localiser"))));
 };
 export default SearchBar;

package/dist/components/atoms/inputs/SearchBar.stories.d.ts

@@ -14,6 +14,8 @@ declare namespace _default {
         let size: string;
         let style: string;
         let startIcon: undefined;
+        let showLocate: boolean;
+        let locateIcon: string;
     }
     export namespace argTypes {
         export namespace placeholder {
@@ -38,37 +40,54 @@ declare namespace _default {
             export let description: string;
         }
         export { startIcon_1 as startIcon };
-        export namespace size_1 {
-            export namespace control_3 {
+        export namespace showLocate_1 {
+            let control_3: string;
+            export { control_3 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        export { showLocate_1 as showLocate };
+        export namespace locateIcon_1 {
+            export namespace control_4 {
                 let type_3: string;
                 export { type_3 as type };
             }
-            export { control_3 as control };
+            export { control_4 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        export { locateIcon_1 as locateIcon };
+        export namespace size_1 {
+            export namespace control_5 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_5 as control };
             export let options: string[];
         }
         export { size_1 as size };
         export namespace style_1 {
-            export namespace control_4 {
-                let type_4: string;
-                export { type_4 as type };
+            export namespace control_6 {
+                let type_5: string;
+                export { type_5 as type };
             }
-            export { control_4 as control };
+            export { control_6 as control };
             let options_1: string[];
             export { options_1 as options };
         }
         export { style_1 as style };
         export namespace value {
-            export namespace control_5 {
-                let type_5: string;
-                export { type_5 as type };
+            export namespace control_7 {
+                let type_6: string;
+                export { type_6 as type };
             }
-            export { control_5 as control };
+            export { control_7 as control };
         }
         export namespace showClear_1 {
-            let control_6: string;
-            export { control_6 as control };
-            let description_1: string;
-            export { description_1 as description };
+            let control_8: string;
+            export { control_8 as control };
+            let description_3: string;
+            export { description_3 as description };
         }
         export { showClear_1 as showClear };
         export namespace onChange_1 {
@@ -95,4 +114,5 @@ export const Big: any;
 export const FormStyle: any;
 export const WithStartIcon: any;
 export const BigFormStartIconNoEnd: any;
+export const WithLocate: any;
 import SearchBar from "./SearchBar";

package/dist/components/atoms/inputs/SearchBar.stories.js

@@ -21,7 +21,7 @@ export default {
     component: SearchBar,
     tags: ["autodocs"],
     excludeStories: /.*Data$/,
-    args: __assign(__assign({}, ActionsData), { endIcon: "allaw-icon-search", showClear: false, size: "normal", style: "classic", startIcon: undefined }),
+    args: __assign(__assign({}, ActionsData), { endIcon: "allaw-icon-search", showClear: false, size: "normal", style: "classic", startIcon: undefined, showLocate: false, locateIcon: "allaw-icon-map-pin" }),
     argTypes: {
         placeholder: {
             control: {
@@ -39,6 +39,14 @@ export default {
             },
             description: "Icône au début du champ (ex: allaw-icon-map-pin)",
         },
+        showLocate: {
+            control: "boolean",
+            description: "Affiche un bouton 'Me localiser' en bout de champ",
+        },
+        locateIcon: {
+            control: { type: "text" },
+            description: "Classe d'icône pour le bouton de localisation",
+        },
         size: {
             control: {
                 type: "radio",
@@ -134,3 +142,14 @@ BigFormStartIconNoEnd.args = {
     size: "big",
     style: "form",
 };
+export var WithLocate = Template.bind({});
+WithLocate.args = {
+    placeholder: "Ville",
+    startIcon: "allaw-icon-map-pin",
+    endIcon: undefined,
+    showClear: false,
+    size: "normal",
+    style: "form",
+    showLocate: true,
+    locateIcon: "allaw-icon-map-pin",
+};

package/dist/components/atoms/inputs/searchBar.module.css

@@ -63,6 +63,10 @@
   cursor: pointer;
 }
 
+.searchBarIconButton:hover {
+  filter: brightness(0.95);
+}
+
 .sizeBig .searchBarIconButton {
   width: 36px;
   height: 36px;
@@ -79,6 +83,28 @@
   justify-content: center;
 }
 
+.searchBarLocateButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0 10px;
+  margin-right: 3px;
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  background: #25beeb;
+  color: #fff;
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.sizeBig .searchBarLocateButton {
+  height: 32px;
+  font-size: 13px;
+}
+
 .searchBarClearButton {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.8.3",
+  "version": "4.8.4",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",