docs: add ssr-off demo

react-component · Sep 26, 2023 · 15d60f4 · 15d60f4
1 parent 89c09ad
commit 15d60f4
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 0 deletions.
diff --git a/docs/demo/ssr-off.md b/docs/demo/ssr-off.md
@@ -0,0 +1,3 @@
+## ssr off
+
+<code src="../examples/ssr-off.tsx"></code>
diff --git a/docs/examples/ssr-off.tsx b/docs/examples/ssr-off.tsx
@@ -0,0 +1,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;