cjd-parkball/src/components/crumbTab/index.js

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

import React from 'react'
import { Tabs, Breadcrumb, Popover, Icon } from 'antd'
import './index.scss'

const { TabPane } = Tabs

class CrumbTab extends React.Component {
  constructor (props) {
    super(props)

    this.add = this.add.bind(this)
    this.closeOtherTabs = this.closeOtherTabs.bind(this)
    this.closeAllTabs = this.closeAllTabs.bind(this)
    this.newTabIndex = 0
    const { category } = props
    this.state = {
      activeKey: category[0].key,
      panes: [],
      activeTabName: category[0].title,
    }
  }

  onChange = (activeKey) => {
    let activeTabName
    const { category } = this.props
    category.concat(this.state.panes).forEach((i) => {
      if (i.key === activeKey) {
        activeTabName = i.title
        this.setState({ activeKey, activeTabName })
        return 1
      }
      return 0
    })
  }

  onEdit = (targetKey, action) => {
    this[action](targetKey)
  }

  add = (et, tabName = 'default', tpl = <div>no tpl provided</div>) => {
    const { panes } = this.state
    /* eslint-disable no-plusplus */
    const activeKey = `newTab${this.newTabIndex++}`
    panes.push({
      title: tabName,
      content: () => {
        return (tpl)
      },
      key: activeKey,
    })
    this.setState({ panes, activeKey, activeTabName: tabName })
  }

  remove = (targetKey) => {
    const { category } = this.props
    let { activeKey } = this.state
    let lastIndex
    let activeItem
    let activeTabName
    this.state.panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1
      }
    })
    const panes = this.state.panes.filter(pane => pane.key !== targetKey)
    if (lastIndex >= 0 && activeKey === targetKey) {
      activeItem = panes[lastIndex]
      activeKey = activeItem.key
      activeTabName = activeItem.title
    } else if (panes.length === 0) {
      const lastItemInCategory = category[category.length - 1]
      activeTabName = lastItemInCategory.title
      activeKey = lastItemInCategory.key
    } else {
      this.setState({ panes, activeKey })
      return
    }
    this.setState({ panes, activeKey, activeTabName })
  }
  closeOtherTabs () {
    const panes = this.state.panes.filter(pane => pane.key === this.state.activeKey)
    this.setState({ panes, activeKey: this.state.activeKey })
  }

  closeAllTabs () {
    const { category } = this.props
    const lastItemInCategory = category[category.length - 1]
    const activeTabName = lastItemInCategory.title
    const activeKey = lastItemInCategory.key
    this.setState({ panes: [], activeKey, activeTabName })
  }

  toolList () {
    return (<div>
      <div className="popup__list" onClick={this.closeAllTabs}>close all tabs</div>
      <div className="popup__list" onClick={this.closeOtherTabs}>close other tabs</div>
    </div>)
  }

  tabBarExtraContent () {
    return (<Popover placement="bottomRight" content={this.toolList()} trigger="click">
      <Icon type="ellipsis" theme="outlined" />
    </Popover>)
  }

  render () {
    const { category, crumbs } = this.props
    return (
      <div>
        <Breadcrumb className="crumbs__tabs">
          {crumbs && crumbs.map((i) => {
            return <Breadcrumb.Item key={i}>{i}</Breadcrumb.Item>
          })}
          <Breadcrumb.Item>{this.state.activeTabName}</Breadcrumb.Item>
        </Breadcrumb>
        <Tabs
          hideAdd
          onChange={this.onChange}
          type="editable-card"
          tabBarExtraContent={this.tabBarExtraContent()}
          activeKey={this.state.activeKey}
          onEdit={this.onEdit}
        >
          {category.concat(this.state.panes).map(pane => <TabPane closable={pane.closable} tab={pane.title} key={pane.key}>{pane.content(this.add)}</TabPane>)}
        </Tabs>
      </div>
    )
  }
}

export default CrumbTab