packages/hooks/examples/DataGridNavigationExample.tsx - develop - kaws/ui-kit-ce

packages/hooks/examples/DataGridNavigationExample.tsx

112 строк2 KB

Pavel Uryadyshev

docs: фикс документации по хукам

20 ноя 2024, 15:28

20 ноя 2024, 15:285eff7c9

import * as React from 'react'
import { useDataGridNavigation, Button } from '@v-uik/base'

type CellProps = React.PropsWithChildren<{
  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void
  focused?: boolean
}>

const Cell = ({ focused, children, onKeyDown }: CellProps) => {
  const innerRef = React.useRef<HTMLButtonElement>(null)

  React.useEffect(() => {
    if (focused) {
      innerRef.current?.focus()
    }
  }, [focused])

  return (
    <Button ref={innerRef} kind="ghost" role="grid" onKeyDown={onKeyDown}>
      {children}
    </Button>
  )
}

export const DataGridNavigationExample = (): JSX.Element => {
  const [focused, setFocused] = React.useState(1)

  const onKeyDown = useDataGridNavigation((dir) => {
    switch (dir) {
      case 'right': {
        setFocused((x) => {
          if (x === 9) {
            return 1
          }

          return x + 1
        })
        break
      }
      case 'left': {
        setFocused((x) => {
          if (x === 1) {
            return 9
          }

          return x - 1
        })
        break
      }
      case 'bottom': {
        setFocused((x) => {
          if (x > 6) {
            return x - 6
          }

          return x + 3
        })
        break
      }
      default: {
        setFocused((x) => {
          if (x < 4) {
            return x + 6
          }

          return x - 3
        })
        break
      }
    }
  })

  return (
    <div>
      <div
        style={{
          display: 'grid',
          gap: 8,
          gridTemplateColumns: '64px 64px 64px',
        }}
      >
        <Cell focused={focused === 1} onKeyDown={onKeyDown}>
          1
        </Cell>
        <Cell focused={focused === 2} onKeyDown={onKeyDown}>
          2
        </Cell>
        <Cell focused={focused === 3} onKeyDown={onKeyDown}>
          3
        </Cell>
        <Cell focused={focused === 4} onKeyDown={onKeyDown}>
          4
        </Cell>
        <Cell focused={focused === 5} onKeyDown={onKeyDown}>
          5
        </Cell>
        <Cell focused={focused === 6} onKeyDown={onKeyDown}>
          6
        </Cell>
        <Cell focused={focused === 7} onKeyDown={onKeyDown}>
          7
        </Cell>
        <Cell focused={focused === 8} onKeyDown={onKeyDown}>
          8
        </Cell>
        <Cell focused={focused === 9} onKeyDown={onKeyDown}>
          9
        </Cell>
      </div>
    </div>
  )
}