packages/tree/examples/TreeCustomCheckDisabled.tsx - develop - kaws/ui-kit-ce

packages/tree/examples/TreeCustomCheckDisabled.tsx

120 строк2 KB

Pavel Uryadyshev

fix(tree): оптимизирована работа компонента Tree

11 окт 2024, 11:54

11 окт 2024, 11:548afbdcb

import * as React from 'react'
import {
  Tree,
  TreeNodeItem,
  createUseStyles,
  isEqualKeyboardKeys,
} from '@v-uik/base'

const dataSource = [
  {
    key: 'node-0',
    label: 'node-0',
    children: [
      {
        key: 'node-0-0',
        label: 'node-0-0',
        checkDisabled: true,
        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',
            checkDisabled: true,
          },
        ],
      },
    ],
  },
  {
    key: 'node-1',
    label: 'node-1',
    checkDisabled: true,
    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) => ({
  itemCheckDisabled: {
    '& > $node $nodeContent': {
      color: theme.comp.tree.colorTextDisabled,
    },
  },
  node: {},
  nodeContent: {},
}))

export const TreeCustomCheckDisabled: React.FC = () => {
  return (
    <Tree
      checkable
      selectable
      disableExpandOnClick
      disableSelectOnClick={(_, node: TreeNodeItem) => {
        return !!node.checkDisabled
      }}
      dataSource={dataSource}
      defaultExpandedKeys={['node-0', 'node-0-0', 'node-0-1']}
      classes={useStyles()}
      onTreeKeyDown={(event, node: TreeNodeItem) => {
        if (isEqualKeyboardKeys(event.key, ' ') && !!node.checkDisabled) {
          return true
        }

        if (
          isEqualKeyboardKeys(event.key, 'Enter') &&
          !!node.checkDisabled &&
          !node.children
        ) {
          return true
        }
      }}
    />
  )
}