menu/docs/examples/ssr-off.tsx at 9143b72870d5397e2835a2c1e2afe42417ffa7ff · react-component/menu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React from 'react';
import '../../assets/index.less';
import Menu, { Divider, Item as MenuItem, SubMenu } from '../../src';

const nestSubMenu = (
  <SubMenu
    title={<span className="submenu-title-wrapper">offset sub menu 2</span>}
    key="4"
    popupOffset={[10, 15]}
  >
    <MenuItem key="4-1">inner inner</MenuItem>
    <Divider />
    <SubMenu
      key="4-2"
      title={<span className="submenu-title-wrapper">sub menu 1</span>}
    >
      <SubMenu
        title={<span className="submenu-title-wrapper">sub 4-2-0</span>}
        key="4-2-0"
      >
        <MenuItem key="4-2-0-1">inner inner</MenuItem>
        <MenuItem key="4-2-0-2">inner inner2</MenuItem>
      </SubMenu>
      <MenuItem key="4-2-1">inn</MenuItem>
      <SubMenu
        title={<span className="submenu-title-wrapper">sub menu 4</span>}
        key="4-2-2"
      >
        <MenuItem key="4-2-2-1">inner inner</MenuItem>
        <MenuItem key="4-2-2-2">inner inner2</MenuItem>
      </SubMenu>
      <SubMenu
        title={<span className="submenu-title-wrapper">sub menu 3</span>}
        key="4-2-3"
      >
        <MenuItem key="4-2-3-1">inner inner</MenuItem>
        <MenuItem key="4-2-3-2">inner inner2</MenuItem>
      </SubMenu>
    </SubMenu>
  </SubMenu>
);

function handleClick(info) {
  console.log(`clicked ${info.key}`);
  console.log(info);
}

function Demo() {
  return (
    <>
      <Menu mode="horizontal" onClick={handleClick} ssr="off">
        <SubMenu
          title={<span className="submenu-title-wrapper">sub menu</span>}
          key="1"
        >
          <MenuItem key="1-1">0-1</MenuItem>
          <MenuItem key="1-2">0-2</MenuItem>
        </SubMenu>
        {nestSubMenu}
        <MenuItem key="2">1</MenuItem>
        <MenuItem key="3">outer</MenuItem>
        <MenuItem key="5" disabled>
          disabled
        </MenuItem>
        <MenuItem key="6">outer3</MenuItem>
      </Menu>
    </>
  );
}

export default Demo;