internal: sidebar: apis: cleaner tabs

2024-03-23 23:37:25 +07:00
parent 59cb7c2b08
commit 842159da5a
9 changed files with 92 additions and 67 deletions
@@ -92,3 +92,71 @@ export const TabContainer = ({ icons, names, children, className = '', setup = (

    return mainBox;
 }
+
+
+export const IconTabContainer = ({ iconWidgets, names, children, className = '', setup = () => { }, tabsHpack = 'center', ...rest }) => {
+    const shownIndex = Variable(0);
+    let previousShownIndex = 0;
+    const count = Math.min(iconWidgets.length, names.length, children.length);
+    const tabs = Box({
+        homogeneous: true,
+        hpack: tabsHpack,
+        className: 'spacing-h-5',
+        children: iconWidgets.map((icon, i) => Button({
+            className: 'tab-icon',
+            child: icon,
+            setup: setupCursorHover,
+            onClicked: () => shownIndex.value = i,
+        })),
+        setup: (self) => self.hook(shownIndex, (self) => {
+            self.children[previousShownIndex].toggleClassName('tab-icon-active', false);
+            self.children[shownIndex.value].toggleClassName('tab-icon-active', true);
+            previousShownIndex = shownIndex.value;
+        }),
+    });
+    const tabSection = Box({
+        homogeneous: true,
+        children: [EventBox({
+            onScrollUp: () => mainBox.prevTab(),
+            onScrollDown: () => mainBox.nextTab(),
+            child: Box({
+                vertical: true,
+                hexpand: true,
+                children: [
+                    tabs,
+                ]
+            })
+        })]
+    });
+    const contentStack = Stack({
+        transition: 'slide_left_right',
+        children: children.reduce((acc, currentValue, index) => {
+            acc[index] = currentValue;
+            return acc;
+        }, {}),
+        setup: (self) => self.hook(shownIndex, (self) => {
+            self.shown = `${shownIndex.value}`;
+        }),
+    });
+    const mainBox = Box({
+        attribute: {
+            children: children,
+            shown: shownIndex,
+            names: names,
+        },
+        vertical: true,
+        className: `spacing-v-5 ${className}`,
+        setup: (self) => {
+            self.pack_start(tabSection, false, false, 0);
+            self.pack_end(contentStack, true, true, 0);
+            setup(self);
+        },
+        ...rest,
+    });
+    mainBox.nextTab = () => shownIndex.value = Math.min(shownIndex.value + 1, count - 1);
+    mainBox.prevTab = () => shownIndex.value = Math.max(shownIndex.value - 1, 0);
+    mainBox.cycleTab = () => shownIndex.value = (shownIndex.value + 1) % count;
+    mainBox.shown = shownIndex;
+
+    return mainBox;
+}