utopia-ui 3.0.0-alpha.242 → 3.0.0-alpha.243
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const TabsForm: ({ item, state, setState, updatePermission, linkItem, unlinkItem, loading }: {
|
|
1
|
+
export declare const TabsForm: ({ item, state, setState, updatePermission, linkItem, unlinkItem, loading, setUrlParams }: {
|
|
2
2
|
item: any;
|
|
3
3
|
state: any;
|
|
4
4
|
setState: any;
|
|
@@ -6,4 +6,5 @@ export declare const TabsForm: ({ item, state, setState, updatePermission, linkI
|
|
|
6
6
|
linkItem: any;
|
|
7
7
|
unlinkItem: any;
|
|
8
8
|
loading: any;
|
|
9
|
+
setUrlParams: any;
|
|
9
10
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Item, Tag } from 'utopia-ui/dist/types';
|
|
2
|
-
export declare const TabsView: ({ item, offers, needs, relations, updatePermission, loading, linkItem, unlinkItem }: {
|
|
2
|
+
export declare const TabsView: ({ item, offers, needs, relations, updatePermission, loading, linkItem, unlinkItem, setUrlParams }: {
|
|
3
3
|
item: Item;
|
|
4
4
|
offers: Array<Tag>;
|
|
5
5
|
needs: Array<Tag>;
|
|
@@ -8,4 +8,5 @@ export declare const TabsView: ({ item, offers, needs, relations, updatePermissi
|
|
|
8
8
|
loading: boolean;
|
|
9
9
|
linkItem: (id: string) => Promise<void>;
|
|
10
10
|
unlinkItem: (id: string) => Promise<void>;
|
|
11
|
+
setUrlParams: any;
|
|
11
12
|
}) => import("react/jsx-runtime").JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -4132,41 +4132,40 @@ function ActionButton(_a) {
|
|
|
4132
4132
|
|
|
4133
4133
|
var TabsView = function (_a) {
|
|
4134
4134
|
var _b, _c, _d;
|
|
4135
|
-
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;
|
|
4135
|
+
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;
|
|
4136
4136
|
var addFilterTag = useAddFilterTag();
|
|
4137
|
-
var _e = useState(
|
|
4137
|
+
var _e = useState(), activeTab = _e[0], setActiveTab = _e[1];
|
|
4138
4138
|
var navigate = useNavigate();
|
|
4139
|
-
var location = useLocation();
|
|
4140
|
-
var tabRef = useRef(null);
|
|
4141
4139
|
var _f = useState(""), addItemPopupType = _f[0]; _f[1];
|
|
4142
4140
|
useEffect(function () {
|
|
4143
4141
|
scroll();
|
|
4144
4142
|
}, [addItemPopupType]);
|
|
4145
|
-
|
|
4143
|
+
function scroll() {
|
|
4146
4144
|
var _a;
|
|
4147
4145
|
(_a = tabRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
|
|
4148
|
-
}
|
|
4146
|
+
}
|
|
4147
|
+
var tabRef = useRef(null);
|
|
4149
4148
|
var updateActiveTab = useCallback(function (id) {
|
|
4150
4149
|
setActiveTab(id);
|
|
4151
4150
|
var params = new URLSearchParams(window.location.search);
|
|
4152
|
-
|
|
4153
|
-
|
|
4154
|
-
|
|
4155
|
-
|
|
4156
|
-
|
|
4157
|
-
}, [navigate, location.pathname]);
|
|
4151
|
+
params.set("tab", "".concat(id));
|
|
4152
|
+
var newUrl = location.pathname + "?" + params.toString();
|
|
4153
|
+
window.history.pushState({}, '', newUrl);
|
|
4154
|
+
setUrlParams(params);
|
|
4155
|
+
}, [location.pathname]);
|
|
4158
4156
|
useEffect(function () {
|
|
4159
4157
|
var params = new URLSearchParams(location.search);
|
|
4160
4158
|
var urlTab = params.get("tab");
|
|
4161
|
-
urlTab ?
|
|
4162
|
-
}, [location]);
|
|
4163
|
-
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
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
|
|
4159
|
+
setActiveTab(urlTab ? Number(urlTab) : 1);
|
|
4160
|
+
}, [location.search]);
|
|
4161
|
+
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) &&
|
|
4162
|
+
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) &&
|
|
4163
|
+
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 ?
|
|
4164
|
+
jsxs("div", __assign({ className: 'tw-col-span-1' }, { children: [jsx("h3", __assign({ className: '-tw-mb-2' }, { children: "Offers" })), jsx("div", __assign({ className: 'tw-flex tw-flex-wrap tw-mb-4' }, { children: offers.map(function (o) { return jsx(TagView, { tag: o, onClick: function () {
|
|
4165
|
+
addFilterTag(o);
|
|
4166
|
+
} }, o === null || o === void 0 ? void 0 : o.id); }) }))] })) : "", needs.length > 0 ?
|
|
4167
|
+
jsxs("div", __assign({ className: 'tw-col-span-1' }, { children: [jsx("h3", __assign({ className: '-tw-mb-2 tw-col-span-1' }, { children: "Needs" })), jsx("div", __assign({ className: 'tw-flex tw-flex-wrap tw-mb-4' }, { children: needs.map(function (n) { return jsx(TagView, { tag: n, onClick: function () { return addFilterTag(n); } }, n === null || n === void 0 ? void 0 : n.id); }) }))] })) : ""] })) })) }))] }), ((_d = item.layer) === null || _d === void 0 ? void 0 : _d.itemType.relations) &&
|
|
4168
|
+
jsxs(Fragment, { 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": "Relations", checked: activeTab == 7 && true, onChange: function () { return updateActiveTab(7); } }), jsx("div", __assign({ role: "tabpanel", className: "tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto tw-pt-4 tw-pb-1 -tw-mr-4 -tw-mb-4 tw-overflow-x-hidden" }, { children: jsx("div", __assign({ className: 'tw-h-full' }, { children: jsxs("div", __assign({ className: 'tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 md:tw-grid-cols-1 lg:tw-grid-cols-1 xl:tw-grid-cols-1 2xl:tw-grid-cols-2 tw-pb-4' }, { children: [relations && relations.map(function (i) {
|
|
4170
4169
|
return jsxs("div", __assign({ className: 'tw-cursor-pointer tw-card tw-bg-base-200 tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-text-base-content tw-p-6 tw-mr-4 tw-mb-4', onClick: function () { return navigate('/item/' + i.id); } }, { children: [jsx(LinkedItemsHeaderView, { unlinkPermission: updatePermission, item: i, unlinkCallback: unlinkItem, loading: loading }), jsx("div", __assign({ className: 'tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade' }, { children: jsx(TextView, { truncate: true, item: i }) }))] }), i.id);
|
|
4171
4170
|
}), updatePermission && jsx(ActionButton, { collection: "items", item: item, existingRelations: relations, triggerItemSelected: linkItem, colorField: item.layer.itemColorField })] })) })) }))] })] })));
|
|
4172
4171
|
};
|
|
@@ -4561,11 +4560,12 @@ function ProfileView(_a) {
|
|
|
4561
4560
|
var _a;
|
|
4562
4561
|
setTemplate(((_a = item.layer) === null || _a === void 0 ? void 0 : _a.itemType.template) || userType);
|
|
4563
4562
|
}, [userType, item]);
|
|
4563
|
+
var _k = useState(new URLSearchParams(location.search)); _k[0]; var setUrlParams = _k[1];
|
|
4564
4564
|
return (jsx(Fragment, { children: item &&
|
|
4565
4565
|
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" &&
|
|
4566
4566
|
jsx(OnepagerView, { item: item, userType: userType }), template == "simple" &&
|
|
4567
4567
|
jsx(SimpleView, { item: item }), template == "tabs" &&
|
|
4568
|
-
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) }));
|
|
4568
|
+
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) }));
|
|
4569
4569
|
}
|
|
4570
4570
|
|
|
4571
4571
|
var ComboBoxInput = function (_a) {
|
|
@@ -4737,23 +4737,23 @@ var TagsWidget = function (_a) {
|
|
|
4737
4737
|
|
|
4738
4738
|
var TabsForm = function (_a) {
|
|
4739
4739
|
var _b, _c;
|
|
4740
|
-
var item = _a.item, state = _a.state, setState = _a.setState, updatePermission = _a.updatePermission, linkItem = _a.linkItem, unlinkItem = _a.unlinkItem, loading = _a.loading;
|
|
4740
|
+
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;
|
|
4741
4741
|
var _d = useState(1), activeTab = _d[0], setActiveTab = _d[1];
|
|
4742
4742
|
var navigate = useNavigate();
|
|
4743
4743
|
var updateItem = useUpdateItem();
|
|
4744
|
-
var updateActiveTab = function (id) {
|
|
4744
|
+
var updateActiveTab = useCallback(function (id) {
|
|
4745
4745
|
setActiveTab(id);
|
|
4746
4746
|
var params = new URLSearchParams(window.location.search);
|
|
4747
|
-
|
|
4748
|
-
|
|
4749
|
-
|
|
4750
|
-
|
|
4751
|
-
};
|
|
4747
|
+
params.set("tab", "".concat(id));
|
|
4748
|
+
var newUrl = location.pathname + "?" + params.toString();
|
|
4749
|
+
window.history.pushState({}, '', newUrl);
|
|
4750
|
+
setUrlParams(params);
|
|
4751
|
+
}, [location.pathname]);
|
|
4752
4752
|
useEffect(function () {
|
|
4753
4753
|
var params = new URLSearchParams(location.search);
|
|
4754
4754
|
var urlTab = params.get("tab");
|
|
4755
|
-
urlTab ?
|
|
4756
|
-
}, [location]);
|
|
4755
|
+
setActiveTab(urlTab ? Number(urlTab) : 1);
|
|
4756
|
+
}, [location.search]);
|
|
4757
4757
|
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 &&
|
|
4758
4758
|
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) &&
|
|
4759
4759
|
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) &&
|
|
@@ -4959,6 +4959,7 @@ function ProfileForm(_a) {
|
|
|
4959
4959
|
var hasUserPermission = useHasUserPermission();
|
|
4960
4960
|
var getItemTags = useGetItemTags();
|
|
4961
4961
|
var items = useItems();
|
|
4962
|
+
var _k = useState(new URLSearchParams(location.search)), urlParams = _k[0], setUrlParams = _k[1];
|
|
4962
4963
|
useEffect(function () {
|
|
4963
4964
|
item && hasUserPermission("items", "update", item) && setUpdatePermission(true);
|
|
4964
4965
|
}, [item]);
|
|
@@ -5014,15 +5015,14 @@ function ProfileForm(_a) {
|
|
|
5014
5015
|
end: (_w = item === null || item === void 0 ? void 0 : item.end) !== null && _w !== void 0 ? _w : ""
|
|
5015
5016
|
});
|
|
5016
5017
|
}, [item, tags, items]);
|
|
5017
|
-
var
|
|
5018
|
+
var _l = useState(""), template = _l[0], setTemplate = _l[1];
|
|
5018
5019
|
useEffect(function () {
|
|
5019
5020
|
var _a;
|
|
5020
5021
|
setTemplate(((_a = item.layer) === null || _a === void 0 ? void 0 : _a.itemType.template) || userType);
|
|
5021
5022
|
}, [userType, item]);
|
|
5022
|
-
var params = new URLSearchParams(window.location.search);
|
|
5023
5023
|
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" &&
|
|
5024
5024
|
jsx(SimpleForm, { state: state, setState: setState }), template == "tabs" &&
|
|
5025
|
-
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,
|
|
5025
|
+
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" })) }))] })) })) }));
|
|
5026
5026
|
}
|
|
5027
5027
|
|
|
5028
5028
|
function Modal(_a) {
|