init

src/App.jsx

@@ -0,0 +1,193 @@
+import React, { useState } from 'react';
+import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import { Menu } from 'antd';
+import { Radio, Tabs } from 'antd';
+const items = [
+  {
+    key: '1',
+    icon: <MailOutlined />,
+    label: 'Navigation One',
+    children: [
+      { key: '11', label: 'Option 1' },
+      { key: '12', label: 'Option 2' },
+      { key: '13', label: 'Option 3' },
+      { key: '14', label: 'Option 4' },
+    ],
+  },
+  {
+    key: '2',
+    icon: <AppstoreOutlined />,
+    label: 'Navigation Two',
+    children: [
+      { key: '21', label: 'Option 1' },
+      { key: '22', label: 'Option 2' },
+      {
+        key: '23',
+        label: 'Submenu',
+        children: [
+          { key: '231', label: 'Option 1' },
+          { key: '232', label: 'Option 2' },
+          { key: '233', label: 'Option 3' },
+        ],
+      },
+      {
+        key: '24',
+        label: 'Submenu 2',
+        children: [
+          { key: '241', label: 'Option 1' },
+          { key: '242', label: 'Option 2' },
+          { key: '243', label: 'Option 3' },
+        ],
+      },
+    ],
+  },
+  // {
+  //   key: '3',
+  //   icon: <SettingOutlined />,
+  //   label: 'Navigation Three',
+  //   children: [
+  //     { key: '31', label: 'Option 1' },
+  //     { key: '32', label: 'Option 2' },
+  //     { key: '33', label: 'Option 3' },
+  //     { key: '34', label: 'Option 4' },
+  //   ],
+  // },
+];
+const getLevelKeys = items1 => {
+  const key = {};
+  const func = (items2, level = 1) => {
+    items2.forEach(item => {
+      if (item.key) {
+        key[item.key] = level;
+      }
+      if (item.children) {
+        func(item.children, level + 1);
+      }
+    });
+  };
+  func(items1);
+  return key;
+};
+const levelKeys = getLevelKeys(items);
+const TheChild = () => {return(<div>Hahalo</div>)}
+const App = () => {
+  // const [stateOpenKeys, setStateOpenKeys] = useState(['2', '23']);
+  const [stateOpenKeys, setStateOpenKeys] = useState(['1']);
+
+  const [itemsTab, setItemsTab] = useState([
+    {
+      label: 'Tab 1',
+      key: '1',
+      children: 'Content of editable tab 1',
+    },
+    {
+      label: 'Tab 2',
+      key: '2',
+      children: 'Content of editable tab 2',
+    },
+    {
+      label: 'Tab 3',
+      key: '3',
+      // children: 'Content of editable tab 3',
+      children: <TheChild />,
+    },
+  ]);
+  const [size, setSize] = useState('small');
+  const [activeKey, setActiveKey] = useState('1');
+
+  const onOpenChange = openKeys => {
+    const currentOpenKey = openKeys.find(key => stateOpenKeys.indexOf(key) === -1);
+    // open
+    if (currentOpenKey !== undefined) {
+      const repeatIndex = openKeys
+        .filter(key => key !== currentOpenKey)
+        .findIndex(key => levelKeys[key] === levelKeys[currentOpenKey]);
+      setStateOpenKeys(
+        openKeys
+          // remove repeat key
+          .filter((_, index) => index !== repeatIndex)
+          // remove current level all child
+          .filter(key => levelKeys[key] <= levelKeys[currentOpenKey]),
+      );
+    } else {
+      // close
+      setStateOpenKeys(openKeys);
+    }
+  };
+
+  const remove = targetKey => {
+    // console.log("remove targetKey", targetKey)
+    if (!itemsTab) return;
+    const targetIndex = itemsTab.findIndex(item => item.key === targetKey);
+    const newItems = itemsTab.filter(item => item.key !== targetKey);
+    if (newItems.length && targetKey === activeKey) {
+      const newActiveKey =
+        newItems[targetIndex === newItems.length ? targetIndex - 1 : targetIndex].key;
+      setActiveKey(newActiveKey);
+    }
+    setItemsTab(newItems);
+  };
+  const add = () => {
+    // const newKey = String((items || []).length + 1);
+    const newKey = String((itemsTab || []).length + 1);
+    console.log("newKey", newKey)
+    // console.log("items", items)
+    console.log("itemsTab", itemsTab)
+    setItemsTab([
+      ...(itemsTab || []),
+      {
+        label: `Tab ${newKey}`,
+        key: newKey,
+        children: `Content of editable tab ${newKey}`,
+      },
+    ]);
+    setActiveKey(newKey);
+  };
+  const onEdit = (targetKey, action) => {
+    if (action === 'add') {
+      add();
+    } else {
+      // console.log("targetKey", targetKey)
+      remove(targetKey);
+    }
+  };
+  // const onChange = e => {
+  //   setSize(e.target.value);
+  // };
+  return (
+    <React.Fragment>
+      <div
+        style={{
+          display: "flex"
+        }}
+      >
+        <Menu
+          mode="inline"
+          defaultSelectedKeys={['231']}
+          openKeys={stateOpenKeys}
+          onOpenChange={onOpenChange}
+          style={{ width: 256 }}
+          items={items}
+          // onClick={(e) => {console.log(e.key)}}
+          onClick={(e) => add()}
+        />
+        <div
+          style={{
+            marginLeft: "10px",
+            marginTop: "20px"
+          }}
+        >
+          <Tabs
+            type="editable-card"
+            size={size}
+            activeKey={activeKey}
+            onChange={setActiveKey}
+            onEdit={onEdit}
+            items={itemsTab}
+          />
+        </div>
+      </div>
+    </React.Fragment>
+  );
+};
+export default App;