utopia-ui 3.0.0-alpha.255 → 3.0.0-alpha.257

package/dist/Components/Profile/Subcomponents/AvatarWidget.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import 'react-image-crop/dist/ReactCrop.css';
-export declare const AvatarWidget: ({ avatar, setAvatar }: {
+interface AvatarWidgetProps {
     avatar: string;
     setAvatar: React.Dispatch<React.SetStateAction<any>>;
-}) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const AvatarWidget: React.FC<AvatarWidgetProps>;
+export {};

package/dist/index.js

@@ -2520,7 +2520,7 @@ var SearchControl = function () {
                                         } }, { children: [jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "tw-text-current tw-mr-2 tw-mt-0 tw-w-4" }, { children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" }) })), jsxs("div", { children: [jsx("div", __assign({ className: 'tw-text-sm tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]' }, { children: (geo === null || geo === void 0 ? void 0 : geo.properties.name) ? geo === null || geo === void 0 ? void 0 : geo.properties.name : value })), jsxs("div", __assign({ className: 'tw-text-xs tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]' }, { children: [((_a = geo === null || geo === void 0 ? void 0 : geo.properties) === null || _a === void 0 ? void 0 : _a.city) && "".concat(capitalizeFirstLetter((_b = geo === null || geo === void 0 ? void 0 : geo.properties) === null || _b === void 0 ? void 0 : _b.city), ", "), " ", ((_c = geo === null || geo === void 0 ? void 0 : geo.properties) === null || _c === void 0 ? void 0 : _c.osm_value) && ((_d = geo === null || geo === void 0 ? void 0 : geo.properties) === null || _d === void 0 ? void 0 : _d.osm_value) !== "yes" && ((_e = geo === null || geo === void 0 ? void 0 : geo.properties) === null || _e === void 0 ? void 0 : _e.osm_value) !== "primary" && ((_f = geo === null || geo === void 0 ? void 0 : geo.properties) === null || _f === void 0 ? void 0 : _f.osm_value) !== "path" && ((_g = geo === null || geo === void 0 ? void 0 : geo.properties) === null || _g === void 0 ? void 0 : _g.osm_value) !== "secondary" && ((_h = geo === null || geo === void 0 ? void 0 : geo.properties) === null || _h === void 0 ? void 0 : _h.osm_value) !== "residential" && ((_j = geo === null || geo === void 0 ? void 0 : geo.properties) === null || _j === void 0 ? void 0 : _j.osm_value) !== "unclassified" && "".concat(capitalizeFirstLetter((_k = geo === null || geo === void 0 ? void 0 : geo.properties) === null || _k === void 0 ? void 0 : _k.osm_value), ", "), " ", geo.properties.state && "".concat(geo.properties.state, ", "), " ", geo.properties.country && geo.properties.country] }))] })] }), Math.random()));
                                 }), isGeoCoordinate(value) &&
                                     jsxs("div", __assign({ className: 'tw-flex tw-flex-row hover:tw-font-bold tw-cursor-pointer', onClick: function () {
-                                            L$1.marker(new LatLng(extractCoordinates(value)[0], extractCoordinates(value)[1]), { icon: MarkerIconFactory("circle", "#777", "RGBA(35, 31, 32, 0.2)", "circle-solid") }).addTo(map).bindPopup("<h3 class=\"tw-text-base tw-font-bold\">".concat(extractCoordinates(value)[0], ", ").concat(extractCoordinates(value)[1], "</h3>")).openPopup().addEventListener("popupclose", function (e) { console.log(e.target.remove()); });
+                                            L$1.marker(new LatLng(extractCoordinates(value)[0], extractCoordinates(value)[1]), { icon: MarkerIconFactory("circle", "#777", "RGBA(35, 31, 32, 0.2)", "point") }).addTo(map).bindPopup("<h3 class=\"tw-text-base tw-font-bold\">".concat(extractCoordinates(value)[0], ", ").concat(extractCoordinates(value)[1], "</h3>")).openPopup().addEventListener("popupclose", function (e) { console.log(e.target.remove()); });
                                             map.setView(new LatLng(extractCoordinates(value)[0], extractCoordinates(value)[1]), 15, { duration: 1 });
                                         } }, { children: [jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "tw-text-current tw-mr-2 tw-mt-0 tw-w-4" }, { children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5" }) })), jsxs("div", { children: [jsx("div", __assign({ className: 'tw-text-sm tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]' }, { children: value })), jsx("div", __assign({ className: 'tw-text-xs tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]' }, { children: "Coordiante" }))] })] }))] }))] })) }));
 };
@@ -2987,7 +2987,7 @@ function useSelectPositionManager() {
     var updateItem = useUpdateItem();
     var hasUserPermission = useHasUserPermission();
     useEffect(function () {
-        if (selectPosition && markerClicked && 'text' in selectPosition) {
+        if (selectPosition && markerClicked && 'text' in selectPosition && markerClicked.id !== selectPosition.id) {
             itemUpdateParent(__assign(__assign({}, selectPosition), { parent: markerClicked.id }));
         }
     }, [markerClicked]);
@@ -4485,7 +4485,7 @@ function ProfileView(_a) {
     var _this = this;
     var _b;
     var userType = _a.userType;
-    var _c = useState({}), item = _c[0], setItem = _c[1];
+    var _c = useState(), item = _c[0], setItem = _c[1];
     var _d = useState(false), updatePermission = _d[0], setUpdatePermission = _d[1];
     var _e = useState([]), relations = _e[0], setRelations = _e[1];
     var _f = useState([]), offers = _f[0], setOffers = _f[1];
@@ -4514,15 +4514,15 @@ function ProfileView(_a) {
         setOffers([]);
         setNeeds([]);
         setRelations([]);
-        ((_a = item.layer) === null || _a === void 0 ? void 0 : _a.itemOffersField) && ((_b = getValue(item, item.layer.itemOffersField)) === null || _b === void 0 ? void 0 : _b.map(function (o) {
+        ((_a = item === null || item === void 0 ? void 0 : item.layer) === null || _a === void 0 ? void 0 : _a.itemOffersField) && ((_b = getValue(item, item.layer.itemOffersField)) === null || _b === void 0 ? void 0 : _b.map(function (o) {
             var tag = tags.find(function (t) { return t.id === o.tags_id; });
             tag && setOffers(function (current) { return __spreadArray(__spreadArray([], current, true), [tag], false); });
         }));
-        ((_c = item.layer) === null || _c === void 0 ? void 0 : _c.itemNeedsField) && ((_d = getValue(item, item.layer.itemNeedsField)) === null || _d === void 0 ? void 0 : _d.map(function (n) {
+        ((_c = item === null || item === void 0 ? void 0 : item.layer) === null || _c === void 0 ? void 0 : _c.itemNeedsField) && ((_d = getValue(item, item.layer.itemNeedsField)) === null || _d === void 0 ? void 0 : _d.map(function (n) {
             var tag = tags.find(function (t) { return t.id === n.tags_id; });
             tag && setNeeds(function (current) { return __spreadArray(__spreadArray([], current, true), [tag], false); });
         }));
-        (_e = item.relations) === null || _e === void 0 ? void 0 : _e.map(function (r) {
+        (_e = item === null || item === void 0 ? void 0 : item.relations) === null || _e === void 0 ? void 0 : _e.map(function (r) {
             var item = items.find(function (i) { return i.id == r.related_items_id; });
             item && setRelations(function (current) { return __spreadArray(__spreadArray([], current, true), [item], false); });
         });
@@ -4580,7 +4580,7 @@ function ProfileView(_a) {
     }, [selectPosition]);
     useEffect(function () {
         var _a;
-        setTemplate(((_a = item.layer) === null || _a === void 0 ? void 0 : _a.itemType.template) || userType);
+        setTemplate(((_a = item === null || item === void 0 ? void 0 : item.layer) === null || _a === void 0 ? void 0 : _a.itemType.template) || userType);
     }, [userType, item]);
     var _k = useState(new URLSearchParams(location.search)); _k[0]; var setUrlParams = _k[1];
     return (jsx(Fragment, { children: item &&
@@ -4791,84 +4791,129 @@ var AvatarWidget = function (_a) {
     var _d = useState(false), cropModalOpen = _d[0], setCropModalOpen = _d[1];
     var _e = useState(false), cropping = _e[0], setCropping = _e[1];
     var assetsApi = useAssetApi();
-    var imgRef = React.useRef(null);
-    var onImageChange = function (event) {
-        if (event.target.files && event.target.files[0]) {
-            setImage(URL.createObjectURL(event.target.files[0]));
+    var imgRef = useRef(null);
+    var onImageChange = useCallback(function (event) {
+        var file = event.target.files && event.target.files[0];
+        if (file) {
+            var validFormats = ["image/jpeg", "image/png"];
+            var maxSizeMB = 10;
+            var maxSizeBytes = maxSizeMB * 1024 * 1024;
+            if (!validFormats.includes(file.type)) {
+                alert("Unsupported file format. Please upload a JPEG or PNG image.");
+                return;
+            }
+            if (file.size > maxSizeBytes) {
+                alert("File size exceeds ".concat(maxSizeMB, "MB. Please upload a smaller image."));
+                return;
+            }
+            setImage(URL.createObjectURL(file));
+            setCropModalOpen(true);
         }
-        setCropModalOpen(true);
-    };
-    function onImageLoad(e) {
+        else {
+            alert("No file selected or an error occurred while selecting the file.");
+        }
+    }, []);
+    var onImageLoad = useCallback(function (e) {
         var _a = e.currentTarget, width = _a.width, height = _a.height;
         setCrop(centerAspectCrop(width, height, 1));
-    }
-    // This is to demonstate how to make and center a % aspect crop
-    // which is a bit trickier so we use some helper functions.
-    function centerAspectCrop(mediaWidth, mediaHeight, aspect) {
+    }, []);
+    var centerAspectCrop = function (mediaWidth, mediaHeight, aspect) {
         return centerCrop(makeAspectCrop({
             unit: 'px',
             width: mediaWidth / 2,
         }, aspect, mediaWidth, mediaHeight), mediaWidth, mediaHeight);
-    }
-    function renderCrop() {
+    };
+    function resizeImage(image, maxWidth, maxHeight) {
         return __awaiter(this, void 0, void 0, function () {
-            var image, scaleX, scaleY, canvas, ctx, pixelRatio, blob;
+            var canvas, ctx, width, height, resizedImage;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        image = imgRef.current;
-                        if (!(crop && image)) return [3 /*break*/, 3];
-                        scaleX = image.naturalWidth / image.width;
-                        scaleY = image.naturalHeight / image.height;
-                        canvas = new OffscreenCanvas(crop.width * scaleX, crop.height * scaleY);
-                        ctx = canvas.getContext("2d");
-                        pixelRatio = window.devicePixelRatio;
-                        canvas.width = crop.width * pixelRatio * scaleX;
-                        canvas.height = crop.height * pixelRatio * scaleY;
+                        canvas = document.createElement('canvas');
+                        ctx = canvas.getContext('2d');
+                        width = image.width;
+                        height = image.height;
+                        if (width > maxWidth) {
+                            height *= maxWidth / width;
+                            width = maxWidth;
+                        }
+                        if (height > maxHeight) {
+                            width *= maxHeight / height;
+                            height = maxHeight;
+                        }
+                        canvas.width = width;
+                        canvas.height = height;
                         if (ctx) {
-                            ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-                            ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width * scaleX, crop.height * scaleY);
+                            ctx.drawImage(image, 0, 0, width, height);
                         }
-                        return [4 /*yield*/, canvas.convertToBlob()];
+                        resizedImage = new Image();
+                        resizedImage.src = canvas.toDataURL();
+                        return [4 /*yield*/, resizedImage.decode()];
                     case 1:
-                        blob = _a.sent();
-                        return [4 /*yield*/, resizeBlob(blob)];
-                    case 2:
                         _a.sent();
-                        setCropping(false);
-                        setImage("");
-                        _a.label = 3;
-                    case 3: return [2 /*return*/];
+                        return [2 /*return*/, resizedImage];
                 }
             });
         });
     }
-    function resizeBlob(blob) {
-        return __awaiter(this, void 0, void 0, function () {
-            var img, canvas, ctx, resizedBlob, asset;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        img = new Image();
-                        img.src = URL.createObjectURL(blob);
-                        return [4 /*yield*/, img.decode()];
-                    case 1:
-                        _a.sent();
-                        canvas = new OffscreenCanvas(400, 400);
-                        ctx = canvas.getContext("2d");
-                        ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0, 400, 400);
-                        return [4 /*yield*/, canvas.convertToBlob()];
-                    case 2:
-                        resizedBlob = _a.sent();
-                        return [4 /*yield*/, assetsApi.upload(resizedBlob, "test")];
-                    case 3:
-                        asset = _a.sent();
-                        setAvatar(asset.id);
-                        return [2 /*return*/];
-                }
-            });
+    var renderCrop = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var image, resizedImage, scaleX, scaleY, canvas, ctx, pixelRatio, blob;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    image = imgRef.current;
+                    if (!(crop && image)) return [3 /*break*/, 4];
+                    return [4 /*yield*/, resizeImage(image, 1024, 1024)];
+                case 1:
+                    resizedImage = _a.sent();
+                    scaleX = resizedImage.naturalWidth / resizedImage.width;
+                    scaleY = resizedImage.naturalHeight / resizedImage.height;
+                    canvas = new OffscreenCanvas(crop.width * scaleX, crop.height * scaleY);
+                    ctx = canvas.getContext("2d");
+                    pixelRatio = window.devicePixelRatio;
+                    canvas.width = crop.width * pixelRatio * scaleX;
+                    canvas.height = crop.height * pixelRatio * scaleY;
+                    if (ctx) {
+                        ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+                        ctx.drawImage(resizedImage, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width * scaleX, crop.height * scaleY);
+                    }
+                    return [4 /*yield*/, canvas.convertToBlob()];
+                case 2:
+                    blob = _a.sent();
+                    return [4 /*yield*/, resizeBlob(blob)];
+                case 3:
+                    _a.sent();
+                    setCropping(false);
+                    setImage("");
+                    _a.label = 4;
+                case 4: return [2 /*return*/];
+            }
         });
-    }
+    }); }, [crop]);
+    var resizeBlob = useCallback(function (blob) { return __awaiter(void 0, void 0, void 0, function () {
+        var img, canvas, ctx, resizedBlob, asset;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    img = new Image();
+                    img.src = URL.createObjectURL(blob);
+                    return [4 /*yield*/, img.decode()];
+                case 1:
+                    _a.sent();
+                    canvas = new OffscreenCanvas(400, 400);
+                    ctx = canvas.getContext("2d");
+                    ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0, 400, 400);
+                    return [4 /*yield*/, canvas.convertToBlob()];
+                case 2:
+                    resizedBlob = _a.sent();
+                    return [4 /*yield*/, assetsApi.upload(resizedBlob, "avatar")];
+                case 3:
+                    asset = _a.sent();
+                    setAvatar(asset.id);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [assetsApi, setAvatar]);
     return (jsxs(Fragment, { children: [!cropping ?
                 jsxs("label", __assign({ className: "custom-file-upload" }, { children: [jsx("input", { type: "file", accept: "image/*", className: "tw-file-input tw-w-full tw-max-w-xs", onChange: onImageChange }), jsx("div", __assign({ className: 'button tw-btn tw-btn-lg tw-btn-circle tw-animate-none' }, { children: jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "tw-w-6 tw-h-6" }, { children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) })) })), avatar ?
                             jsx("div", __assign({ className: 'tw-h-20 tw-w-20' }, { children: jsx("img", { src: assetsApi.url + avatar, className: 'tw-h-20 tw-w-20 tw-rounded-full' }) }))