Scroll Area

import { ScrollArea, ScrollBar } from '@hanzo/ui'

export function Default() {
  return (
    <ScrollArea
      height={200}
      width={260}
      rounded="$3"
      borderWidth={1}
      borderColor="$borderColor"
    >
      <YStack p="$3" gap="$1">
        <Text fontSize={13} fontWeight="600" mb="$1">
          Dependencies
        </Text>
        {PACKAGES.map((name) => (
          <Text key={name} fontFamily="$mono" fontSize={13} color="$color11">
            {name}
          </Text>
        ))}
      </YStack>
    </ScrollArea>
  )
}

export function Visibility() {
  const rows = REGIONS.map((name) => (
    <Text key={name} fontSize={13}>
      {name}
    </Text>
  ))
  return (
    <XStack flexWrap="wrap" gap="$4">
      <YStack gap="$2">
        <Text fontSize={12} color="$color11">
          hover
        </Text>
        <ScrollArea
          type="hover"
          height={120}
          width={140}
          rounded="$3"
          borderWidth={1}
          borderColor="$borderColor"
        >
          <YStack p="$3" gap="$1">
            {rows}
          </YStack>
        </ScrollArea>
      </YStack>
      <YStack gap="$2">
        <Text fontSize={12} color="$color11">
          scroll, 1500 ms
        </Text>
        <ScrollArea
          type="scroll"
          scrollHideDelay={1500}
          height={120}
          width={140}
          rounded="$3"
          borderWidth={1}
          borderColor="$borderColor"
        >
          <YStack p="$3" gap="$1">
            {rows}
          </YStack>
        </ScrollArea>
      </YStack>
      <YStack gap="$2">
        <Text fontSize={12} color="$color11">
          auto
        </Text>
        <ScrollArea
          type="auto"
          height={120}
          width={140}
          rounded="$3"
          borderWidth={1}
          borderColor="$borderColor"
        >
          <YStack p="$3" gap="$1">
            {rows}
          </YStack>
        </ScrollArea>
      </YStack>
      <YStack gap="$2">
        <Text fontSize={12} color="$color11">
          always
        </Text>
        <ScrollArea
          type="always"
          height={120}
          width={140}
          rounded="$3"
          borderWidth={1}
          borderColor="$borderColor"
        >
          <YStack p="$3" gap="$1">
            {rows.slice(0, 3)}
          </YStack>
        </ScrollArea>
      </YStack>
    </XStack>
  )
}

export function Horizontal() {
  return (
    <ScrollArea
      horizontal
      width="100%"
      maxW={560}
      rounded="$3"
      borderWidth={1}
      borderColor="$borderColor"
    >
      <XStack p="$3" gap="$3">
        {SERVICES.map((s) => (
          <YStack
            key={s.name}
            width={140}
            p="$3"
            gap="$1"
            rounded="$3"
            bg="$color3"
          >
            <Text fontSize={13} fontWeight="600">
              {s.name}
            </Text>
            <Text fontSize={12} color="$color11">
              p99 {s.p99}
            </Text>
          </YStack>
        ))}
      </XStack>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

export function Direction() {
  return (
    <XStack flexWrap="wrap" gap="$4">
      <ScrollArea
        dir="ltr"
        type="always"
        height={160}
        width={200}
        rounded="$3"
        borderWidth={1}
        borderColor="$borderColor"
      >
        <YStack p="$3" gap="$1">
          {REGIONS.map((name) => (
            <Text key={name} fontSize={13}>
              {name}
            </Text>
          ))}
        </YStack>
      </ScrollArea>
      <ScrollArea
        dir="rtl"
        type="always"
        height={160}
        width={200}
        rounded="$3"
        borderWidth={1}
        borderColor="$borderColor"
      >
        <YStack p="$3" gap="$1" items="flex-end">
          {CITIES.map((name) => (
            <Text key={name} fontSize={13}>
              {name}
            </Text>
          ))}
        </YStack>
      </ScrollArea>
    </XStack>
  )
}

Types

export type ScrollAreaType = "auto" | "always" | "scroll" | "hover"

export type ScrollBarProps = Omit<YStackProps, "children"> & {
  orientation?: Axis
}

export type ScrollAreaProps = Omit<YStackProps, "children"> & {
  /** When the bar shows: on overflow, always, while scrolling, or on hover. */
  type?: ScrollAreaType
  /** ms the bar lingers after scrolling/hover stops (`scroll` and `hover`). */
  scrollHideDelay?: number
  dir?: "ltr" | "rtl"
  /** Scroll the x axis instead of the y axis (react-native ScrollView semantics). */
  horizontal?: boolean
  children?: ReactNode
}

Exports