utopia-ui 3.0.0-alpha.241 → 3.0.0-alpha.243

package/dist/Components/Profile/Templates/TabsForm.d.ts

@@ -1,4 +1,4 @@
-export declare const TabsForm: ({ item, state, setState, updatePermission, linkItem, unlinkItem, loading }: {
+export declare const TabsForm: ({ item, state, setState, updatePermission, linkItem, unlinkItem, loading, setUrlParams }: {
     item: any;
     state: any;
     setState: any;
@@ -6,4 +6,5 @@ export declare const TabsForm: ({ item, state, setState, updatePermission, linkI
     linkItem: any;
     unlinkItem: any;
     loading: any;
+    setUrlParams: any;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Profile/Templates/TabsView.d.ts

@@ -1,5 +1,5 @@
 import { Item, Tag } from 'utopia-ui/dist/types';
-export declare const TabsView: ({ item, offers, needs, relations, updatePermission, loading, linkItem, unlinkItem }: {
+export declare const TabsView: ({ item, offers, needs, relations, updatePermission, loading, linkItem, unlinkItem, setUrlParams }: {
     item: Item;
     offers: Array<Tag>;
     needs: Array<Tag>;
@@ -8,4 +8,5 @@ export declare const TabsView: ({ item, offers, needs, relations, updatePermissi
     loading: boolean;
     linkItem: (id: string) => Promise<void>;
     unlinkItem: (id: string) => Promise<void>;
+    setUrlParams: any;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -4132,9 +4132,9 @@ function ActionButton(_a) {
 
 var TabsView = function (_a) {
     var _b, _c, _d;
-    var item = _a.item, offers = _a.offers, needs = _a.needs, relations = _a.relations, updatePermission = _a.updatePermission, loading = _a.loading, linkItem = _a.linkItem, unlinkItem = _a.unlinkItem;
+    var item = _a.item, offers = _a.offers, needs = _a.needs, relations = _a.relations, updatePermission = _a.updatePermission, loading = _a.loading, linkItem = _a.linkItem, unlinkItem = _a.unlinkItem, setUrlParams = _a.setUrlParams;
     var addFilterTag = useAddFilterTag();
-    var _e = useState(1), activeTab = _e[0], setActiveTab = _e[1];
+    var _e = useState(), activeTab = _e[0], setActiveTab = _e[1];
     var navigate = useNavigate();
     var _f = useState(""), addItemPopupType = _f[0]; _f[1];
     useEffect(function () {
@@ -4145,19 +4145,19 @@ var TabsView = function (_a) {
         (_a = tabRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
     }
     var tabRef = useRef(null);
-    var updateActiveTab = function (id) {
+    var updateActiveTab = useCallback(function (id) {
         setActiveTab(id);
         var params = new URLSearchParams(window.location.search);
-        var urlTab = params.get("tab");
-        if (!(urlTab === null || urlTab === void 0 ? void 0 : urlTab.includes(id.toString())))
-            params.set("tab", "".concat(id ? id : ""));
-        // navigate(location.pathname+ "?" + params.toString());
-    };
+        params.set("tab", "".concat(id));
+        var newUrl = location.pathname + "?" + params.toString();
+        window.history.pushState({}, '', newUrl);
+        setUrlParams(params);
+    }, [location.pathname]);
     useEffect(function () {
         var params = new URLSearchParams(location.search);
         var urlTab = params.get("tab");
-        urlTab ? setActiveTab(Number(urlTab)) : setActiveTab(1);
-    }, [location]);
+        setActiveTab(urlTab ? Number(urlTab) : 1);
+    }, [location.search]);
     return (jsxs("div", __assign({ role: "tablist", className: "tw-tabs tw-tabs-lifted tw-mt-2 tw-mb-2 tw-px-6" }, { children: [jsx("input", { type: "radio", name: "my_tabs_2", role: "tab", className: "tw-tab  [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]", "aria-label": "Info", checked: activeTab == 1 && true, onChange: function () { return updateActiveTab(1); } }), jsxs("div", __assign({ role: "tabpanel", className: "tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto fade tw-pt-2 tw-pb-4 tw-mb-4 tw-overflow-x-hidden" }, { children: [((_b = item.layer) === null || _b === void 0 ? void 0 : _b.itemType.show_start_end) &&
                         jsx("div", __assign({ className: 'tw-max-w-xs' }, { children: jsx(StartEndView, { item: item }) })), jsx(TextView, { item: item }), jsx("div", { className: 'tw-h-4' }), jsx(TextView, { item: item, itemTextField: 'contact' })] })), ((_c = item.layer) === null || _c === void 0 ? void 0 : _c.itemType.offers_and_needs) &&
                 jsxs(Fragment, { children: [jsx("input", { type: "radio", name: "my_tabs_2", role: "tab", className: "tw-tab tw-min-w-[10em] [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]", "aria-label": "Offers & Needs", checked: activeTab == 3 && true, onChange: function () { return updateActiveTab(3); } }), jsx("div", __assign({ role: "tabpanel", className: "tw-tab-content tw-bg-base-100  tw-rounded-box tw-h-[calc(100dvh-268px)] tw-overflow-y-auto fade tw-pt-4 tw-pb-1" }, { children: jsx("div", __assign({ className: 'tw-h-full' }, { children: jsxs("div", __assign({ className: 'tw-grid tw-grid-cols-1' }, { children: [offers.length > 0 ?
@@ -4560,11 +4560,12 @@ function ProfileView(_a) {
         var _a;
         setTemplate(((_a = 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 &&
             jsx(MapOverlayPage, __assign({ className: "!tw-p-0 tw-mx-4 tw-mt-4 tw-mb-4 md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-min-w-80 tw-max-w-3xl !tw-left-0 sm:!tw-left-auto tw-top-0 tw-bottom-0 tw-transition-opacity tw-duration-500 ".concat(!selectPosition ? 'tw-opacity-100 tw-pointer-events-auto' : 'tw-opacity-0 tw-pointer-events-none') }, { children: jsxs(Fragment, { children: [jsx("div", __assign({ className: "tw-px-6 tw-pt-6" }, { children: jsx(HeaderView, { api: (_b = item.layer) === null || _b === void 0 ? void 0 : _b.api, item: item, deleteCallback: function (e) { return handleDelete(e, item, setLoading, removeItem, map, navigate); }, editCallback: function () { return navigate("/edit-item/" + item.id); }, setPositionCallback: function () { map.closePopup(); setSelectPosition(item); navigate("/"); }, big: true, truncateSubname: false }) })), template == "onepager" &&
                             jsx(OnepagerView, { item: item, userType: userType }), template == "simple" &&
                             jsx(SimpleView, { item: item }), template == "tabs" &&
-                            jsx(TabsView, { item: item, loading: loading, offers: offers, needs: needs, relations: relations, updatePermission: updatePermission, linkItem: function (id) { return linkItem(id, item, updateItem); }, unlinkItem: function (id) { return unlinkItem(id, item, updateItem); } })] }) }), item.id) }));
+                            jsx(TabsView, { setUrlParams: setUrlParams, item: item, loading: loading, offers: offers, needs: needs, relations: relations, updatePermission: updatePermission, linkItem: function (id) { return linkItem(id, item, updateItem); }, unlinkItem: function (id) { return unlinkItem(id, item, updateItem); } })] }) }), item.id) }));
 }
 
 var ComboBoxInput = function (_a) {
@@ -4736,23 +4737,23 @@ var TagsWidget = function (_a) {
 
 var TabsForm = function (_a) {
     var _b, _c;
-    var item = _a.item, state = _a.state, setState = _a.setState, updatePermission = _a.updatePermission, linkItem = _a.linkItem, unlinkItem = _a.unlinkItem, loading = _a.loading;
+    var item = _a.item, state = _a.state, setState = _a.setState, updatePermission = _a.updatePermission, linkItem = _a.linkItem, unlinkItem = _a.unlinkItem, loading = _a.loading, setUrlParams = _a.setUrlParams;
     var _d = useState(1), activeTab = _d[0], setActiveTab = _d[1];
     var navigate = useNavigate();
     var updateItem = useUpdateItem();
-    var updateActiveTab = function (id) {
+    var updateActiveTab = useCallback(function (id) {
         setActiveTab(id);
         var params = new URLSearchParams(window.location.search);
-        var urlTab = params.get("tab");
-        if (!(urlTab === null || urlTab === void 0 ? void 0 : urlTab.includes(id.toString())))
-            params.set("tab", "".concat(id ? id : ""));
-        navigate(location.pathname + "?" + params.toString());
-    };
+        params.set("tab", "".concat(id));
+        var newUrl = location.pathname + "?" + params.toString();
+        window.history.pushState({}, '', newUrl);
+        setUrlParams(params);
+    }, [location.pathname]);
     useEffect(function () {
         var params = new URLSearchParams(location.search);
         var urlTab = params.get("tab");
-        urlTab ? setActiveTab(Number(urlTab)) : setActiveTab(1);
-    }, [location]);
+        setActiveTab(urlTab ? Number(urlTab) : 1);
+    }, [location.search]);
     return (jsxs("div", __assign({ role: "tablist", className: "tw-tabs tw-tabs-lifted tw-mt-3" }, { children: [jsx("input", { type: "radio", name: "my_tabs_2", role: "tab", className: "tw-tab  [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]", "aria-label": "Info", checked: activeTab == 1 && true, onChange: function () { return updateActiveTab(1); } }), jsx("div", __assign({ role: "tabpanel", className: "tw-tab-content tw-bg-base-100 tw-border-[var(--fallback-bc,oklch(var(--bc)/0.2))] tw-rounded-box tw-h-[calc(100dvh-332px)] tw-min-h-56 tw-border-none" }, { children: jsxs("div", __assign({ className: "tw-flex tw-flex-col tw-h-full ".concat(item.layer.itemType.show_start_end_input && "tw-pt-4") }, { children: [item.layer.itemType.show_start_end_input &&
                             jsx(PopupStartEndInput, { item: item, showLabels: false, updateEndValue: function (e) { return setState(function (prevState) { return (__assign(__assign({}, prevState), { end: e })); }); }, updateStartValue: function (s) { return setState(function (prevState) { return (__assign(__assign({}, prevState), { start: s })); }); } }), jsx(TextAreaInput, { placeholder: "about ...", defaultValue: (item === null || item === void 0 ? void 0 : item.text) ? item.text : "", updateFormValue: function (v) { return setState(function (prevState) { return (__assign(__assign({}, prevState), { text: v })); }); }, containerStyle: 'tw-grow', inputStyle: "tw-h-full  ".concat(!item.layer.itemType.show_start_end_input && "tw-border-t-0 tw-rounded-tl-none") }), jsx("div", { children: jsx(TextAreaInput, { placeholder: "contact info ...", defaultValue: state.contact || "", updateFormValue: function (c) { return setState(function (prevState) { return (__assign(__assign({}, prevState), { contact: c })); }); }, inputStyle: "tw-h-24", containerStyle: "tw-pt-4" }) })] })) })), ((_b = item.layer) === null || _b === void 0 ? void 0 : _b.itemType.offers_and_needs) &&
                 jsxs(Fragment, { children: [jsx("input", { type: "radio", name: "my_tabs_2", role: "tab", className: "tw-tab tw-min-w-[10em]  [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]", "aria-label": "Offers & Needs", checked: activeTab == 3 && true, onChange: function () { return updateActiveTab(3); } }), jsx("div", __assign({ role: "tabpanel", className: "tw-tab-content tw-bg-base-100 tw-border-[var(--fallback-bc,oklch(var(--bc)/0.2))] tw-rounded-box tw-h-[calc(100dvh-332px)] tw-min-h-56 tw-border-none" }, { children: jsxs("div", __assign({ className: 'tw-h-full' }, { children: [jsx("div", __assign({ className: 'tw-w-full tw-h-[calc(50%-0.75em)] tw-mb-4' }, { children: jsx(TagsWidget, { defaultTags: state.offers, onUpdate: function (v) { return setState(function (prevState) { return (__assign(__assign({}, prevState), { offers: v })); }); }, placeholder: "enter your offers", containerStyle: 'tw-bg-transparent tw-w-full tw-h-full tw-mt-3 tw-text-xs tw-h-[calc(100%-1rem)] tw-min-h-[5em] tw-pb-2 tw-overflow-auto' }) })), jsx("div", __assign({ className: 'tw-w-full tw-h-[calc(50%-1.5em)]' }, { children: jsx(TagsWidget, { defaultTags: state.needs, onUpdate: function (v) { return setState(function (prevState) { return (__assign(__assign({}, prevState), { needs: v })); }); }, placeholder: "enter your needs", containerStyle: 'tw-bg-transparent tw-w-full tw-h-full tw-mt-3 tw-text-xs tw-h-[calc(100%-1rem)] tw-min-h-[5em] tw-pb-2 tw-overflow-auto' }) }))] })) }))] }), ((_c = item.layer) === null || _c === void 0 ? void 0 : _c.itemType.relations) &&
@@ -4958,6 +4959,7 @@ function ProfileForm(_a) {
     var hasUserPermission = useHasUserPermission();
     var getItemTags = useGetItemTags();
     var items = useItems();
+    var _k = useState(new URLSearchParams(location.search)), urlParams = _k[0], setUrlParams = _k[1];
     useEffect(function () {
         item && hasUserPermission("items", "update", item) && setUpdatePermission(true);
     }, [item]);
@@ -5013,15 +5015,14 @@ function ProfileForm(_a) {
             end: (_w = item === null || item === void 0 ? void 0 : item.end) !== null && _w !== void 0 ? _w : ""
         });
     }, [item, tags, items]);
-    var _k = useState(""), template = _k[0], setTemplate = _k[1];
+    var _l = useState(""), template = _l[0], setTemplate = _l[1];
     useEffect(function () {
         var _a;
         setTemplate(((_a = item.layer) === null || _a === void 0 ? void 0 : _a.itemType.template) || userType);
     }, [userType, item]);
-    var params = new URLSearchParams(window.location.search);
     return (jsx(Fragment, { children: jsx(MapOverlayPage, __assign({ backdrop: true, className: 'tw-mx-4 tw-mt-4 tw-mb-4 tw-overflow-x-hidden tw-w-[calc(100%-32px)]  md:tw-w-[calc(50%-32px)] tw-max-w-3xl !tw-left-auto tw-top-0 tw-bottom-0' }, { children: jsxs("div", __assign({ className: 'tw-flex tw-flex-col tw-h-full' }, { children: [jsx(FormHeader, { item: item, state: state, setState: setState }), template == "onepager" && (jsx(OnepagerForm, { item: item, state: state, setState: setState })), template == "simple" &&
                         jsx(SimpleForm, { state: state, setState: setState }), template == "tabs" &&
-                        jsx(TabsForm, { loading: loading, item: item, state: state, setState: setState, updatePermission: updatePermission, linkItem: function (id) { return linkItem(id, item, updateItem); }, unlinkItem: function (id) { return unlinkItem(id, item, updateItem); } }), jsx("div", __assign({ className: "tw-mt-4 tw-mb-4" }, { children: jsx("button", __assign({ className: loading ? " tw-loading tw-btn tw-float-right" : "tw-btn tw-float-right", onClick: function () { return onUpdateItem(state, item, tags, addTag, setLoading, navigate, updateItem, addItem, user, params); }, style: { backgroundColor: "".concat(((_b = item.layer) === null || _b === void 0 ? void 0 : _b.itemColorField) && getValue(item, (_c = item.layer) === null || _c === void 0 ? void 0 : _c.itemColorField) ? getValue(item, (_d = item.layer) === null || _d === void 0 ? void 0 : _d.itemColorField) : (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : (_e = item === null || item === void 0 ? void 0 : item.layer) === null || _e === void 0 ? void 0 : _e.markerDefaultColor)), color: "#fff" }  }, { children: "Update" })) }))] })) })) }));
+                        jsx(TabsForm, { loading: loading, item: item, state: state, setState: setState, updatePermission: updatePermission, linkItem: function (id) { return linkItem(id, item, updateItem); }, unlinkItem: function (id) { return unlinkItem(id, item, updateItem); }, setUrlParams: setUrlParams }), jsx("div", __assign({ className: "tw-mt-4 tw-mb-4" }, { children: jsx("button", __assign({ className: loading ? " tw-loading tw-btn tw-float-right" : "tw-btn tw-float-right", onClick: function () { return onUpdateItem(state, item, tags, addTag, setLoading, navigate, updateItem, addItem, user, urlParams); }, style: { backgroundColor: "".concat(((_b = item.layer) === null || _b === void 0 ? void 0 : _b.itemColorField) && getValue(item, (_c = item.layer) === null || _c === void 0 ? void 0 : _c.itemColorField) ? getValue(item, (_d = item.layer) === null || _d === void 0 ? void 0 : _d.itemColorField) : (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : (_e = item === null || item === void 0 ? void 0 : item.layer) === null || _e === void 0 ? void 0 : _e.markerDefaultColor)), color: "#fff" }  }, { children: "Update" })) }))] })) })) }));
 }
 
 function Modal(_a) {