react-new-tabs/src/App.jsx

import React, { useState } from 'react';
import { AppstoreOutlined, MailOutlined, SettingOutlined, CloseOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import { Radio, Tabs } from 'antd';
const items = [
  {
    key: 'Dashboard',
    icon: <MailOutlined />,
    label: 'Dashboard'
  },
  {
    key: '1',
    icon: <MailOutlined />,
    label: 'Master',
    children: [
      { key: 'Users', label: 'Users' },
      { key: 'Devices', label: 'Devices' },
      { key: 'Tags', label: 'Tags' },
      { key: 'Products', label: 'Products' },
    ],
  },
  {
    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(['0']);

  const [itemsTab, setItemsTab] = useState([
    {
      label: 'Dashboard',
      key: 'Dashboard',
      children: <TheChild />,
    },
    // {
    //   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('Dashboard');

  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 = (key) => {
    // const newKey = String((items || []).length + 1);
    // const newKey = String((itemsTab || []).length + 1);
    // console.log("newKey", newKey)
    // console.log("items", items)
    // console.log("itemsTab before", itemsTab)
    let newtab = {
      // label: `Tab ${newKey}`,
      label: `${key[0]}`,
      key: key[0],
      children: `Content of editable tab ${key[0]}`,
    }

    if (!itemsTab.find(item => item.key === newtab.key)) {
      setItemsTab([
        ...(itemsTab || []),
        newtab,
      ]);
    } else {
      // Do nothing
      console.log("Do nothing")
    }

    setActiveKey(key[0]);
  };
  const onAddTab = (targetKey, action) => {
    if (action === 'add') {
      add(key);
      // console.log("Plus plus")
    } else {
      // console.log("targetKey", targetKey)
      remove(targetKey);
    }
  };
  // const onChange = e => {
  //   setSize(e.target.value);
  // };

  const renderTabBar = (props, DefaultTabBar) => {
    return (
      <DefaultTabBar {...props}>
        {(node) => {
          // Filter out the add button node
          if (node.key && node.key.toString().startsWith('rc-tabs-add')) {
            return null;
          }
          return node;
        }}
      </DefaultTabBar>
    );
  };

  return (
    <React.Fragment>
      <div
        style={{
          display: "flex",
          height: "100vh"
        }}
      >
        <Menu
          mode="inline"
          // defaultSelectedKeys={['231']}
          defaultSelectedKeys={['Dashboard']}
          openKeys={stateOpenKeys}
          onOpenChange={onOpenChange}
          style={{ width: 256 }}
          items={items}
          // onClick={(e) => {console.log(e)}}
          onClick={(e) => add(e.keyPath)}
        />
        <div
          style={{
            marginLeft: "10px",
            marginTop: "10px"
          }}
        >
          <Tabs
            type="editable-card"
            // type="card"
            size={size}
            activeKey={activeKey}
            onChange={setActiveKey}
            onEdit={onAddTab}
            items={itemsTab}
            hideAdd
            // removeIcon={<CloseOutlined />}
            // renderTabBar={renderTabBar}
          />
        </div>
      </div>
    </React.Fragment>
  );
};
export default App;