packages/tree/examples/TreeDisableFocusOnClick.tsx - develop - bearury/ui-kit-ce

packages/tree/examples/TreeDisableFocusOnClick.tsx

102 строки2 KB

Denis Svyatovets

feat: добавлены токены толщины обводки

02 июл 2025, 10:08

02 июл 2025, 10:08f23965f

import * as React from 'react'
import { Tree, Input, Grid, GridItem } from '@v-uik/base'
import { createUseStyles } from '@v-uik/theme'

const dataSource = [
  {
    key: 'node-0',
    label: 'node-0',
    children: [
      {
        key: 'node-0-0',
        label: 'node-0-0',
        children: [
          {
            key: 'node-0-0-0',
            label: 'node-0-0-0',
          },
          {
            key: 'node-0-0-1',
            label: 'node-0-0-1',
          },
        ],
      },
      {
        key: 'node-0-1',
        label: 'node-0-1',
        children: [
          {
            key: 'node-0-1-0',
            label: 'node-0-1-0',
          },
          {
            key: 'node-0-1-1',
            label: 'node-0-1-1',
          },
        ],
      },
    ],
  },
  {
    key: 'node-1',
    label: 'node-1',
    children: [
      {
        key: 'node-1-0',
        label: 'node-1-0',
        children: [
          {
            key: 'node-1-0-0',
            label: 'node-1-0-0',
          },
          {
            key: 'node-1-0-1',
            label: 'node-1-0-1',
          },
        ],
      },
      {
        key: 'node-1-1',
        label: 'node-1-1',
        children: [
          {
            key: 'node-1-1-0',
            label: 'node-1-1-0',
          },
          {
            key: 'node-1-1-1',
            label: 'node-1-1-1',
          },
        ],
      },
    ],
  },
]

const useStyles = createUseStyles((theme) => ({
  item: {
    maxWidth: '100%',
  },
  root: {
    '&:focus-visible': {
      boxShadow: `0 0 0 ${theme.comp.tree.widthShadowFocus}px ${theme.comp.tree.colorShadowFocus}`,
    },
  },
}))

export const TreeDisableFocusOnClick: React.FC = () => {
  return (
    <Grid spacing={2}>
      <GridItem xs={8}>
        <Input />
      </GridItem>
      <GridItem xs={8}>
        <Tree
          disableFocusTreeOnItemClick
          classes={useStyles()}
          dataSource={dataSource}
        />
      </GridItem>
    </Grid>
  )
}