infinity-forge 0.46.2 → 0.46.3
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.
|
@@ -32,23 +32,22 @@ function Tab(_a) {
|
|
|
32
32
|
var tabs = _a.tabs;
|
|
33
33
|
var firstTabKey = tabs[0].key;
|
|
34
34
|
var _b = (0, react_1.useState)({ key: firstTabKey, width: undefined, translate: 0 }), tab = _b[0], setTab = _b[1];
|
|
35
|
-
var
|
|
35
|
+
var firstTabElement = (0, ui_1.useElementId)({ id: firstTabKey });
|
|
36
36
|
var TabSelected = tabs.find(function (tb) { return tb.key === tab.key; }).content;
|
|
37
|
+
function changeTab(tabKey) {
|
|
38
|
+
var elementTo = document.getElementById(tabKey);
|
|
39
|
+
var boudingId = elementTo.parentElement.getBoundingClientRect();
|
|
40
|
+
var elementToBounding = elementTo.getBoundingClientRect();
|
|
41
|
+
var translate = (elementToBounding === null || elementToBounding === void 0 ? void 0 : elementToBounding.left) - (boudingId === null || boudingId === void 0 ? void 0 : boudingId.left);
|
|
42
|
+
setTab({ key: tabKey, width: elementTo.offsetWidth, translate: translate });
|
|
43
|
+
}
|
|
37
44
|
return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'Tab', children: (0, jsx_runtime_1.jsxs)(S.Tab, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'tabs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'background', style: {
|
|
38
|
-
width: (tab === null || tab === void 0 ? void 0 : tab.width) ? (tab === null || tab === void 0 ? void 0 : tab.width) + 'px' :
|
|
45
|
+
width: (tab === null || tab === void 0 ? void 0 : tab.width) ? (tab === null || tab === void 0 ? void 0 : tab.width) + 'px' : firstTabElement === null || firstTabElement === void 0 ? void 0 : firstTabElement.offsetWidth,
|
|
39
46
|
left: tab.translate ? 0 : undefined,
|
|
40
47
|
transform: "translateX(".concat(tab.translate, "px)"),
|
|
41
|
-
} }), tabs.map(function (
|
|
42
|
-
return ((0, jsx_runtime_1.jsx)("button", { type: 'button', id:
|
|
43
|
-
|
|
44
|
-
var container = button.parentElement;
|
|
45
|
-
var activeTab = container.querySelector("#".concat(tab.key));
|
|
46
|
-
var buttonRect = button.getBoundingClientRect();
|
|
47
|
-
var containerRect = container.getBoundingClientRect();
|
|
48
|
-
var translate = buttonRect.left - containerRect.left;
|
|
49
|
-
setTab({ key: item.key, width: button.offsetWidth, translate: translate });
|
|
50
|
-
}, children: (0, jsx_runtime_1.jsx)("span", { children: item.title }) }, item.key));
|
|
51
|
-
})] }), (0, jsx_runtime_1.jsx)("div", { className: 'tab_selected', children: TabSelected })] }) }));
|
|
48
|
+
} }), tabs.map(function (tabItem) {
|
|
49
|
+
return ((0, jsx_runtime_1.jsx)("button", { type: 'button', id: tabItem.key, onClick: function () { return changeTab(tabItem.key); }, children: (0, jsx_runtime_1.jsx)("span", { children: tabItem.title }) }, tabItem.key));
|
|
50
|
+
})] }), (0, jsx_runtime_1.jsx)("div", { className: 'tab_selected', children: (0, jsx_runtime_1.jsx)(TabSelected, { changeTab: changeTab }) })] }) }));
|
|
52
51
|
}
|
|
53
52
|
exports.Tab = Tab;
|
|
54
53
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../../../src/system/presentation/components/data/tab/component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAgC;AAChC,2BAA0C;AAI1C,0CAA6B;AAE7B,SAAgB,GAAG,CAAC,EAAmB;QAAjB,IAAI,UAAA;IACxB,IAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IAEzB,IAAA,KAAgB,IAAA,gBAAQ,
|
|
1
|
+
{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../../../src/system/presentation/components/data/tab/component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAgC;AAChC,2BAA0C;AAI1C,0CAA6B;AAE7B,SAAgB,GAAG,CAAC,EAAmB;QAAjB,IAAI,UAAA;IACxB,IAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IAEzB,IAAA,KAAgB,IAAA,gBAAQ,EAAc,EAAE,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,EAA1F,GAAG,QAAA,EAAE,MAAM,QAA+E,CAAA;IAEjG,IAAM,eAAe,GAAG,IAAA,iBAAY,EAAC,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,CAAA;IAEzD,IAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAC,EAAE,IAAK,OAAA,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,EAAlB,CAAkB,CAAC,CAAC,OAAO,CAAA;IAEjE,SAAS,SAAS,CAAC,MAAc;QAE/B,IAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;QAEjD,IAAM,SAAS,GAAG,SAAS,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC;QAElE,IAAM,iBAAiB,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;QAE5D,IAAM,SAAS,GAAG,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,KAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,CAAA,CAAA;QAE3D,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,WAAW,EAAE,SAAS,WAAA,EAAE,CAAC,CAAA;IAClE,CAAC;IAED,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,KAAK,YACf,wBAAC,CAAC,CAAC,GAAG,eACJ,iCAAK,SAAS,EAAC,MAAM,aACnB,iCACE,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE;gCACL,KAAK,EAAE,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,EAAC,CAAC,CAAC,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,IAAG,IAAI,CAAC,CAAC,CAAC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,WAAW;gCACpE,IAAI,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;gCACnC,SAAS,EAAE,qBAAc,GAAG,CAAC,SAAS,QAAK;6BAC5C,GACK,EAEP,IAAI,CAAC,GAAG,CAAC,UAAC,OAAO;4BAChB,OAAO,CACL,mCAA0B,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,EAAE,cAAM,OAAA,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,EAAtB,CAAsB,YAC5F,2CAAO,OAAO,CAAC,KAAK,GAAQ,IADjB,OAAO,CAAC,GAAG,CAEf,CACV,CAAA;wBACH,CAAC,CAAC,IACE,EAEN,gCAAK,SAAS,EAAC,cAAc,YAC3B,uBAAC,WAAW,IAAC,SAAS,EAAE,SAAS,GAAG,GAChC,IACA,GACF,CACT,CAAA;AACH,CAAC;AAlDD,kBAkDC"}
|
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
export type TabSelected = {
|
|
3
|
+
key: string;
|
|
4
|
+
width?: number;
|
|
5
|
+
translate?: number;
|
|
6
|
+
};
|
|
7
|
+
export type TabContentProps = {
|
|
8
|
+
changeTab(tabKey: string): void;
|
|
9
|
+
};
|
|
2
10
|
export type TabItem = {
|
|
3
11
|
key: string;
|
|
4
12
|
title: string;
|
|
5
|
-
content: JSX.Element;
|
|
13
|
+
content: (props: any) => JSX.Element;
|
|
6
14
|
};
|
|
7
15
|
export interface ITabProps {
|
|
8
16
|
tabs: TabItem[];
|