packages/bar/examples/BarMenuItemExample.tsx - develop - kaws/ui-kit-ce

packages/bar/examples/BarMenuItemExample.tsx

70 строк2 KB

Строганов Федор Юрьевич

docs: доработана документация Storybook

04 мар 2025, 16:28

04 мар 2025, 16:2828abce0

import * as React from 'react'
import { Bar, BarMenuItem, BarDropdown, BarDropdownItem } from '@v-uik/base'

export const BarMenuItemExample = (): JSX.Element => {
  const [selected, setSelected] = React.useState(1)

  const subDropdownProps = React.useMemo(() => {
    return {
      content: (
        <>
          <BarDropdownItem>Option 5</BarDropdownItem>
          <BarDropdownItem>Option 6</BarDropdownItem>
          <BarDropdownItem disabled>Option 7</BarDropdownItem>
        </>
      ),
    }
  }, [])

  const dropdownMenuProps = React.useMemo(() => {
    return {
      content: (
        <>
          <BarDropdownItem>Option 1</BarDropdownItem>
          <BarDropdownItem>Option 2</BarDropdownItem>
          <BarDropdownItem disabled dropdownProps={subDropdownProps}>
            Option 3
          </BarDropdownItem>
          <BarDropdownItem dropdownProps={subDropdownProps}>
            Option 4
          </BarDropdownItem>
        </>
      ),
    }
  }, [subDropdownProps])

  return (
    <div
      style={{
        height: 24,
      }}
    >
      <div
        style={{
          position: 'absolute',
          inset: '10px 6px',
        }}
      >
        <Bar style={{ position: 'absolute' }}>
          <BarMenuItem selected={selected === 1} onClick={() => setSelected(1)}>
            Menu 1
          </BarMenuItem>
          <BarMenuItem selected={selected === 2} onClick={() => setSelected(2)}>
            Menu 2
          </BarMenuItem>
          <BarMenuItem
            disabled
            selected={selected === 3}
            onClick={() => setSelected(3)}
          >
            Menu 3
          </BarMenuItem>

          <BarDropdown dropdownMenuProps={dropdownMenuProps}>
            Menu 4
          </BarDropdown>
        </Bar>
      </div>
    </div>
  )
}