utopia-ui 3.0.0-alpha.242 → 3.0.0-alpha.244
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) {
|
|
@@ -4655,6 +4655,7 @@ var Autocomplete = function (_a) {
|
|
|
4655
4655
|
heighlightedSuggestion > 0 && setHeighlightedSuggestion(function (current) { return current - 1; });
|
|
4656
4656
|
break;
|
|
4657
4657
|
case 'Enter':
|
|
4658
|
+
event.preventDefault();
|
|
4658
4659
|
if (filteredSuggestions.length > 0) {
|
|
4659
4660
|
onSelected(filteredSuggestions[heighlightedSuggestion]);
|
|
4660
4661
|
setHeighlightedSuggestion(0);
|
|
@@ -4737,23 +4738,23 @@ var TagsWidget = function (_a) {
|
|
|
4737
4738
|
|
|
4738
4739
|
var TabsForm = function (_a) {
|
|
4739
4740
|
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;
|
|
4741
|
+
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
4742
|
var _d = useState(1), activeTab = _d[0], setActiveTab = _d[1];
|
|
4742
4743
|
var navigate = useNavigate();
|
|
4743
4744
|
var updateItem = useUpdateItem();
|
|
4744
|
-
var updateActiveTab = function (id) {
|
|
4745
|
+
var updateActiveTab = useCallback(function (id) {
|
|
4745
4746
|
setActiveTab(id);
|
|
4746
4747
|
var params = new URLSearchParams(window.location.search);
|
|
4747
|
-
|
|
4748
|
-
|
|
4749
|
-
|
|
4750
|
-
|
|
4751
|
-
};
|
|
4748
|
+
params.set("tab", "".concat(id));
|
|
4749
|
+
var newUrl = location.pathname + "?" + params.toString();
|
|
4750
|
+
window.history.pushState({}, '', newUrl);
|
|
4751
|
+
setUrlParams(params);
|
|
4752
|
+
}, [location.pathname]);
|
|
4752
4753
|
useEffect(function () {
|
|
4753
4754
|
var params = new URLSearchParams(location.search);
|
|
4754
4755
|
var urlTab = params.get("tab");
|
|
4755
|
-
urlTab ?
|
|
4756
|
-
}, [location]);
|
|
4756
|
+
setActiveTab(urlTab ? Number(urlTab) : 1);
|
|
4757
|
+
}, [location.search]);
|
|
4757
4758
|
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
4759
|
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
4760
|
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 +4960,7 @@ function ProfileForm(_a) {
|
|
|
4959
4960
|
var hasUserPermission = useHasUserPermission();
|
|
4960
4961
|
var getItemTags = useGetItemTags();
|
|
4961
4962
|
var items = useItems();
|
|
4963
|
+
var _k = useState(new URLSearchParams(location.search)), urlParams = _k[0], setUrlParams = _k[1];
|
|
4962
4964
|
useEffect(function () {
|
|
4963
4965
|
item && hasUserPermission("items", "update", item) && setUpdatePermission(true);
|
|
4964
4966
|
}, [item]);
|
|
@@ -5014,15 +5016,14 @@ function ProfileForm(_a) {
|
|
|
5014
5016
|
end: (_w = item === null || item === void 0 ? void 0 : item.end) !== null && _w !== void 0 ? _w : ""
|
|
5015
5017
|
});
|
|
5016
5018
|
}, [item, tags, items]);
|
|
5017
|
-
var
|
|
5019
|
+
var _l = useState(""), template = _l[0], setTemplate = _l[1];
|
|
5018
5020
|
useEffect(function () {
|
|
5019
5021
|
var _a;
|
|
5020
5022
|
setTemplate(((_a = item.layer) === null || _a === void 0 ? void 0 : _a.itemType.template) || userType);
|
|
5021
5023
|
}, [userType, item]);
|
|
5022
|
-
var params = new URLSearchParams(window.location.search);
|
|
5023
5024
|
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
5025
|
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,
|
|
5026
|
+
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
5027
|
}
|
|
5027
5028
|
|
|
5028
5029
|
function Modal(_a) {
|