Ant Tabs (Pro 2.0)

This article introduces some new Ant Tabs features, principles, ideas and update logs.

The principle and idea of realizing multi – TAB

Ant Tabs Is a multi-tab project based on Ant Design Pro 2.0. It is also required to modify the multi-tab project based on Antd Design. The demo on Github is not very much, and basically does not meet my needs. Therefore, I modified some documents on the basis of Antd Design in line with the idea of diy and abundant food and clothing.

However, the middle also took a lot of detours, stepped on a lot of pits, modified a number of versions finally became the current demand, but I think it is ok, just for your reference.

The introduction of ant Tabs

Major changes file react – ant/SRC/layouts/BasicLayout js introduced in Tabs component

Code parsing

constructor(props) {
    super(props);
    const {routes} = props.route,routeKey = '/home/home'; // routeKey For setting home page Settings try '/dashboard/ Analysis' or other key values
    const tabLists = this.updateTree(routes);
    let tabList=[];
    tabLists.map((v) = > {
      if(v.key === routeKey){
        if(tabList.length === 0){
          v.closable = falsetabList.push(v); }}});this.state = ({
        tabList:tabList,
        tabListKey:[routeKey],
        activeKey:routeKey,
        routeKey
    })

    this.getPageTitle = memoizeOne(this.getPageTitle);
    this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual);
  }
Copy the code
  • TabList: Used to store open multiple tabs
  • TabListKe: Used to determine whether a tabList repeatedly keeps the tabList tag unique
  • ActiveKey: key used to activate the TAB panel
  • RouteKey: Try ‘/ Dashboard/Analysis’ or other key values for setting home page Settings
updateTree = data= > {
    const treeData = data;
    const treeList = [];
    // Get the tree list recursively
    const getTreeList = data= > {
      data.forEach(node= > {
        if(! node.level){ treeList.push({tab: node.name, key: node.path,locale:node.locale,closable:true.content:node.component });
        }
        if (node.routes && node.routes.length > 0) { / /! node.hideChildrenInMenu &&getTreeList(node.routes); }}); }; getTreeList(treeData);return treeList;
  };
Copy the code
  • UpdateTree function: is recursiveroutesMultidimensional data becomes one-dimensional data
 <SiderMenu
            logo={logo}
            theme={navTheme}
            onCollapse={this.handleMenuCollapse} menuData={menuData} isMobile={isMobile} {... this.props} onHandlePage ={this.onHandlePage}
          />
Copy the code
  • OnHandlePage: Click on the function triggered on the left and inside the page
 {hidenAntTabs ?
              (<Authorized authority={routerConfig} noMatch={<Exception403 />}>
              {children}
                </Authorized>) :
              (this.state.tabList && this.state.tabList.length ? (
              <Tabs
                // className={styles.tabs}
                activeKey={activeKey}
                onChange={this.onChange}
                tabBarExtraContent={operations}
                tabBarStyle={{background:'#fff'}}
                tabPosition="top"
                tabBarGutter={1}
                hideAdd
                type="editable-card"
                onEdit={this.onEdit}
              >
                {this.state.tabList.map(item => (
                  <TabPane tab={item.tab} key={item.key} closable={item.closable}>
                    <Authorized authority={routerConfig} noMatch={<Exception403 />}>
                      {/*{item.content}*/}
                      <Route key={item.key} path={item.path} component={item.content} exact={item.exact} />
                    </Authorized>
                  </TabPane>
                ))}
              </Tabs>
            ) : null)}
Copy the code
  • HidenAntTabs: Added this field to control whether multiple labels are displayed in drawer scraps

A link to the

  • Ant Tabs source address
  • Ant Tabs document address
  • Ant Tabs Update log

Update log

2019-04-23

  • Added features: added left click start function, and conHandlePage ={this.onHandlePage}
  • Add documentation: mainly explainedAnt TabsThe principle and function of

2019-04-18

  • Added features: AntTableFinder- Multi-function Table deep wrap ant Table Table

2019-04-10

  • Added features: Tabs- Supports multiple Tabs
  • Added functions: Support – Close the current TAB, other tabs, and all tabs
  • Added feature: Drag and drop components
  • Added features: rich text compiler
  • Added features: Support – Hide or notAnt-Tabsfunction

feedback

If you find it useful or helpful, please send it to Star😊. If you are still interested in understanding and errors in this article, please submit Issues😊