saepenatus/docs/src/kit-docs/tabs/tabsRegistry.ts

Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, mul

import { getContext } from 'svelte'
import type { Writable } from 'svelte/store'
import { writable } from 'svelte/store'

import { isString } from './utils'

export const TABS_REGISTRY_CTX_KEY = Symbol(import.meta.env.DEV ? 'TABS_REGISTRY' : '')

export type TabsRegistryItem = string | { value: string; label: string }

export type TabsRegistry = {
  currentValue: Writable<string | null>
  addTab: (item: TabsRegistryItem) => void
  selectTab: (item: TabsRegistryItem) => void
  getValue: (item: TabsRegistryItem) => string
  hasTab: (item: TabsRegistryItem) => boolean
  indexOf: (item: TabsRegistryItem) => number
  removeTab: (item: TabsRegistryItem) => void
}

export type TabsRegistryOptions = {
  defaultValue?: string | null
  groupId?: string | null
  onMount: (callback: () => void) => void
  onDestroy: (callback: () => void) => void
}

export function useTabsRegistry(): TabsRegistry {
  return getContext(TABS_REGISTRY_CTX_KEY)
}

const groups: { [id: string]: Writable<string | null> } = {}

const getGroupStorageKey = (id: string) => `@vitebook/tabs/group::${id}`

export function createTabsRegistry(
  values: TabsRegistryItem[],
  { defaultValue, groupId, onMount, onDestroy }: TabsRegistryOptions
): TabsRegistry {
  let currentValue = writable<string | null>(null)

  const initialValue = () => {
    const item = defaultValue ?? values[0]
    return isString(item) ? item : item?.value
  }

  if (groupId) {
    const storageKey = getGroupStorageKey(groupId)
    const groupStore = (groups[groupId] ??= writable(null))

    currentValue = groupStore

    // Avoid SSR mismatch.
    let hasInit = false
    onMount(() => {
      if (hasInit) return
      hasInit = true

      currentValue.set(window.localStorage.getItem(storageKey) ?? initialValue())

      return currentValue.subscribe((value) => {
        window.localStorage.setItem(storageKey, value ?? '')
      })
    })
  } else {
    onMount(() => {
      currentValue.set(initialValue())
    })
  }

  const registry: TabsRegistry = {
    currentValue,
    addTab: (item) => {
      if (registry.hasTab(item)) return
      const value = isString(item) ? item : item.value
      values.push(value)
      onDestroy(() => {
        registry.removeTab(item)
      })
    },
    selectTab: (item) => {
      currentValue.set(isString(item) ? item : item.value)
    },
    hasTab: (item) => {
      return registry.indexOf(item) >= 0
    },
    indexOf: (item) => {
      return isString(item) ? values.indexOf(item) : values.findIndex((v) => v === item.value)
    },
    getValue: (item) => {
      return isString(item) ? item : item?.value
    },
    removeTab: (item) => {
      const i = registry.indexOf(item)
      if (i >= 0) {
        values.splice(i, 1)
        currentValue.update((current) =>
          current === item
            ? registry.getValue(values[i]) ?? registry.getValue(values[values.length - 1])
            : current
        )
      }
    }
  }

  return registry
}