lecodes-cli 0.6.4 → 0.7.0

package/runtime/sdk/kit/UITabs.ts

@@ -0,0 +1,105 @@
+// UITabs — a self-contained tab component: a swipe-disabled UIScreenHost of tab screens + a bar of
+// tap-to-switch buttons. Pure TS over UIScreenHost, no native work. It's just an element — you place
+// it inside your own UIScreen and own the routing; UITabs only switches the visible tab.
+//
+//   Router.push(UIScreen([
+//     UITabs([
+//       { icon: homeSvg, label: "Home",    content: HomeScreen() },
+//       { icon: userSvg, label: "Profile", content: ProfileScreen() },
+//     ]),
+//   ]))
+//
+// A tab's content is a full UIScreen (screens are the only page kind UIScreenHost accepts): it gets
+// onOpen/onClose from the host's settle lifecycle, plus makeScrollable/onRefresh. All tabs stay
+// mounted, so switching is instant and per-tab state survives.
+
+import { UIScreenHost, type HostedScreen } from "../ui/UIScreenHost"
+import { UIRow, UIColumn, type UIColumn as UIColumnType } from "../ui/UIContainer"
+import { UIButton } from "../ui/UIButton"
+import { UIText } from "../ui/UIText"
+import { UIImage, type ImageSource } from "../ui/UIImage"
+import type { UINodeChild } from "../ui/UINode"
+
+export interface UITabItem {
+  /** Icon image source (SvgSource / url / File / Canvas). Optional. */
+  icon?: ImageSource
+  /** Label under the icon. Optional. */
+  label?: string
+  /** Tab content — a full UIScreen (wrap a plain element: `UIScreen([el])`). */
+  content: HostedScreen
+}
+
+/** The tabs element (a UIColumn) plus a small control surface. Embed it like any element. */
+export interface UITabs extends UIColumnType {
+  /** Switch the visible tab. */
+  select(index: number): this
+  onChange(callback: (index: number) => void): this
+  /** Active tab index. */
+  readonly index: number
+  /** The bar row — style it or its item buttons directly. */
+  readonly bar: UIRow
+}
+
+const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v))
+
+function tabButton(item: UITabItem, i: number, onSelect: (i: number) => void): ReturnType<typeof UIButton> {
+  const parts: UINodeChild[] = []
+  if (item.icon) parts.push(UIImage({ width: 24, height: 24 }, item.icon))
+  if (item.label) parts.push(UIText({ fontSize: 11, lineHeight: 14, textAlign: "center" }, item.label))
+
+  // Chained .style() (not the legacy first-arg object) — required for the `$active` class block.
+  const btn = UIButton(parts).style({
+    flexGrow: 1,
+    flexBase: 0,
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3,
+    paddingVertical: 4,
+    opacity: 0.55,
+    $active: { opacity: 1, duration: 150 },
+  })
+  btn.onClick(() => onSelect(i))
+  return btn
+}
+
+export function UITabs(items: UITabItem[]): UITabs {
+  let index = 0
+  const listeners: ((index: number) => void)[] = []
+
+  const host = UIScreenHost(items.map(it => it.content))
+    .style({ swipeEnabled: false, flexGrow: 1, flexShrink: 1 })
+
+  const barItems = items.map((it, i) => tabButton(it, i, select))
+  const bar = UIRow({
+    flexShrink: 0,
+    paddingTop: 8,
+    paddingBottom: "safe-bottom",
+    borderTopWidth: 1,
+    borderTopColor: "#00000022",
+  }, barItems)
+
+  const applyActive = (i: number) => {
+    for (let k = 0; k < barItems.length; k++) barItems[k].setClass("active", k === i)
+  }
+
+  function select(i: number): UITabs {
+    i = clamp(i, 0, Math.max(0, items.length - 1))
+    if (i !== index) {
+      index = i
+      host.setPage(i, false)
+      applyActive(i)
+      for (const cb of listeners) cb(i)
+    }
+    return view
+  }
+
+  applyActive(0)
+
+  const view = UIColumn([ host, bar ]) as unknown as UITabs
+  ;(view as any).select = select
+  ;(view as any).onChange = (cb: (index: number) => void) => { listeners.push(cb); return view }
+  ;(view as any).bar = bar
+  Object.defineProperty(view, "index", { get: () => index })
+  return view
+}