[Tabs] refactor Tabs and ToolBar

[Kimi-Gao]

Related components

• ToolBar
• Tabs

Issue

<TabList newTab={{name: `My New Tab`, closeable: true}}>
    <Tab key="A" closeable>Closeable One</Tab>
    <Tab key="B" closeable>Closeable Two</Tab>
</TabList>

this pattern will break the control of react state. Use external function instead, such as:

import { Tabs, TabList, Tab } from 'earth-ui'

class TabsDynamic extends Component {
    super()
    this.state = {
        tabs: [{
            key: 'A',
            name: 'Tab A'
        }, {
            key: 'B',
            name: 'Tab B'
        }]
    }
    handleClose = index => {
        const tabs = this.state.tabs
        tabs.splice(index, 1)
        this.setState({ tabs, activeIndex: tabs.length - 1 })
    }

    handleAdd = e => {
        e.preventDefault()
        const tabs = this.state.tabs
        const key = Math.random().toString(16).slice(2, 6)
        tabs.push({
            key,
            name: `New Tab ${key}`
        })
        this.setState({ tabs, activeIndex: tabs.length - 1 })
    }
    render() {
        const { activeIndex, tabs } = this.state
        return (
            <Tabs
                dynamic
                activeIndex={activeIndex}
                handleClose={this.handleClose}
                onChange={activeIndex => this.setState({ activeIndex })}
            >
                <TabList>
                    {tabs.map(item => (
                        <Tab key={item.key}>{item.name}</Tab>)
                    )}
                    <Button transparent icon="add" onClick={this.handleAdd} />
                </TabList>
                {tabs.map(item => (
                    <TabPanel key={item.key}>{`This is ${item.name}`}</TabPanel>
                ))}
            </Tabs>
        )
    }
}

Choice 2: remove TabList

<Tabs 
    activeIndex={activeIndex}
    onAdd={this.onAdd}
    onChange={activeIndex => this.setState({ activeIndex })}
>
    <TabPanel
        key="1"
        tab={<span><Icon type="apple" />Tab 1</span>}
        onClose={this.onClose}
    >
        This is Tab 1
    </TabPanel>
    <TabPanel
        key="2"
        tab={<span><Icon type="android" />Tab 2</span>}
        onClose={this.onClose}
    >
        This is Tab 2
    </TabPanel>
</Tabs>

Design drawing for docs