rewrite Tab, Pane and DragAndDrop modules with mobx

app/commands/commandBindings/file.js

@@ -1,10 +1,11 @@
 /* @flow weak */
 import { bindActionCreators } from 'redux'
 import store, { getState, dispatch } from '../../store'
+import mobxStore from '../../mobxStore'
 import { path as pathUtil } from '../../utils'
 import api from '../../backendAPI'
 import * as _Modal from '../../components/Modal/actions'
-import * as Tab from '../../components/Tab'
+import * as TabActions from 'commons/Tab/actions'
 import { notify } from '../../components/Notification/actions'
 
 const Modal = bindActionCreators(_Modal, dispatch)
@@ -74,9 +75,9 @@ export default {
     }).then(createFolderAtPath)
   },
   'file:save': (c) => {
-    const { TabState } = getState()
-    const activeTab = Tab.selectors.getActiveTab(TabState)
-    const content = activeTab ? ide.editors[activeTab.id].getValue() : ''
+    const { EditorTabState } = mobxStore
+    const activeTab = EditorTabState.activeTab
+    const content = activeTab ? activeTab.editor.getValue() : ''
 
     if (!activeTab.path) {
       const createFile = createFileWithContent(content)
@@ -86,17 +87,17 @@ export default {
         selectionRange: [1, '/untitled'.length]
       })
         .then(createFile)
-        .then(path => dispatch(Tab.actions.updateTab({
+        .then(path => dispatch(TabActions.updateTab({
           id: activeTab.id,
           path,
           title: path.replace(/^.*\/([^\/]+$)/, '$1')
         })))
-        .then(() => dispatch(Tab.actions.updateTabFlags(activeTab.id, 'modified', false)))
+        .then(() => dispatch(TabActions.updateTabFlags(activeTab.id, 'modified', false)))
     } else {
       api.writeFile(activeTab.path, content)
         .then(() => {
-          dispatch(Tab.actions.updateTabFlags(activeTab.id, 'modified', false))
-          dispatch(Tab.actions.updateTab({
+          dispatch(TabActions.updateTabFlags(activeTab.id, 'modified', false))
+          dispatch(TabActions.updateTab({
             id: activeTab.id, content: { body: content }
           }))
         })

app/commands/commandBindings/tab.js

@@ -1,24 +1,25 @@
 /* @flow weak */
-import store, { dispatch as $d } from '../../store'
-import * as Tab from '../../components/Tab/actions'
-import * as PaneActions from '../../components/Pane/actions'
+import { dispatch as $d } from '../../store'
+import store from 'app/mobxStore'
+import * as Tab from 'commons/Tab/actions'
+import * as PaneActions from 'components/Pane/actions'
 
 export default {
   'tab:close': c => {
-    $d(Tab.removeTab(c.context.id))
+    Tab.removeTab(c.context.id)
   },
 
   'tab:close_other': c => {
-    $d(Tab.removeOtherTab(c.context.id))
+    Tab.removeOtherTab(c.context.id)
   },
 
   'tab:close_all': c => {
-    $d(Tab.removeAllTab(c.context.id))
+    Tab.removeAllTab(c.context.id)
   },
 
   'tab:split_v': c => {
-    const panes = store.getState().PaneState.panes
-    const pane = Object.values(panes).find((pane) => (
+    const panes = store.PaneState.panes
+    const pane = panes.values().find(pane => (
       pane.content && pane.content.type === 'tabGroup' && pane.content.id === c.context.tabGroupId
     ))
     $d(PaneActions.splitTo(pane.id, 'bottom'))

app/commons/Tab/TabBar.jsx

@@ -0,0 +1,118 @@
+import React, { Component, PropTypes } from 'react'
+import cx from 'classnames'
+import { observer } from 'mobx-react'
+import { dnd } from 'utils'
+import { defaultProps } from 'utils/decorators'
+import TabLabel from './TabLabel'
+import Menu from 'components/Menu'
+import ContextMenu from 'components/ContextMenu'
+
+@defaultProps(props => ({
+  addTab: () => props.tabGroup.addTab(),
+}))
+@observer
+class TabBar extends Component {
+  static propTypes = {
+    tabGroup: PropTypes.object.isRequired,
+    contextMenuItems: PropTypes.array.isRequired,
+    addTab: PropTypes.func,
+    closePane: PropTypes.func,
+  };
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      showDropdownMenu: false,
+      showContextMenu: false,
+      contextMenuPos: {},
+      contextMenuContext: null,
+    }
+  }
+
+  render () {
+    const {
+      tabGroup,
+      addTab,
+      contextMenuItems,
+    } = this.props
+
+    const tabBarId = `tab_bar_${tabGroup.id}`
+    return (
+      <div id={tabBarId}
+        className='tab-bar'
+        data-droppable='TABBAR'
+        onDoubleClick={addTab}
+      >
+        <ul className='tab-labels'>
+          {tabGroup.tabs.map(tab =>
+            <TabLabel tab={tab} key={tab.id} openContextMenu={this.openContextMenu} />
+          )}
+        </ul>
+        {dnd.target.id === tabBarId ? <div className='tab-label-insert-pos'></div>: null}
+        <div className='tab-add-btn' onClick={addTab} >
+          <svg viewBox='0 0 12 16' version='1.1' aria-hidden='true'>
+            <path fillRule='evenodd' d='M12 9H7v5H5V9H0V7h5V2h2v5h5z'></path>
+          </svg>
+        </div>
+        <div className='tab-show-list'
+          onClick={e => { e.stopPropagation(); this.setState({ showDropdownMenu: true }) }}
+        >
+          <i className='fa fa-sort-desc' />
+          {this.renderDropdownMenu()}
+        </div>
+        <ContextMenu
+          items={contextMenuItems}
+          isActive={this.state.showContextMenu}
+          pos={this.state.contextMenuPos}
+          context={this.state.contextMenuContext}
+          deactivate={() => this.setState({ showContextMenu: false })}
+        />
+      </div>
+    )
+  }
+
+  openContextMenu = (e, context) => {
+    e.stopPropagation()
+    e.preventDefault()
+
+    this.setState({
+      showContextMenu: true,
+      contextMenuPos: { x: e.clientX, y: e.clientY },
+      contextMenuContext: context,
+    })
+  }
+
+  renderDropdownMenu () {
+    if (!this.state.showDropdownMenu) return null
+    const dropdownMenuItems = this.makeDropdownMenuItems()
+    if (!dropdownMenuItems.length) return null
+    return <Menu className='top-down to-left'
+      items={dropdownMenuItems}
+      style={{ right: '2px' }}
+      deactivate={e=>this.setState({ showDropdownMenu: false })}
+    />
+
+  }
+
+  makeDropdownMenuItems = () => {
+    let baseItems = this.props.tabGroup.siblings.length === 0 ? []
+      : [{
+        name: 'Close Pane',
+        command: this.props.closePane,
+      }]
+    const tabs = this.props.tabGroup.tabs
+    const tabLabelsItem = tabs && tabs.map(tab => ({
+      name: tab.title || 'untitled',
+      command: e => tab.activate(),
+    }))
+
+    if (tabLabelsItem.length) {
+      if (!baseItems.length) return tabLabelsItem
+      return baseItems.concat({ name: '-' }, tabLabelsItem)
+    } else {
+      return baseItems
+    }
+  }
+}
+
+export default TabBar

app/commons/Tab/TabContent.jsx

@@ -0,0 +1,20 @@
+import React, { PropTypes } from 'react'
+import cx from 'classnames'
+import { observer } from 'mobx-react'
+
+export const TabContent = ({ children }) => (
+  <div className='tab-content'>
+    <div className='tab-content-container'>{children}</div>
+  </div>
+)
+
+export const TabContentItem = observer(({ tab, children }) => (
+  <div className={cx('tab-content-item', { active: tab.isActive })}>
+    {children}
+  </div>
+))
+
+TabContentItem.propTypes = {
+  tab: PropTypes.object.isRequired,
+}
+

app/commons/Tab/TabLabel.jsx

@@ -0,0 +1,49 @@
+import React, { Component, PropTypes } from 'react'
+import cx from 'classnames'
+import { observer } from 'mobx-react'
+import { dnd } from 'utils'
+import { defaultProps } from 'utils/decorators'
+import { dispatch } from '../../store'
+
+let TabLabel = observer(({tab, removeTab, activateTab, openContextMenu}) => {
+  const tabLabelId = `tab_label_${tab.id}`
+  return (
+    <li className={cx('tab-label', {
+      active: tab.isActive,
+      modified: tab.flags.modified
+    })}
+      id={tabLabelId}
+      data-droppable='TABLABEL'
+      draggable='true'
+      onClick={e => activateTab(tab.id)}
+      onDragStart={e => dnd.dragStart({ type: 'TAB', id: tab.id }) }
+      onContextMenu={e => openContextMenu(e, tab)}
+    >
+      {dnd.target.id === tabLabelId ? <div className='tab-label-insert-pos'></div>: null}
+      {tab.icon ? <div className={tab.icon}></div>: null}
+      <div className='title'>{tab.title}</div>
+      <div className='control'>
+        <i className='close' onClick={e => { e.stopPropagation(); removeTab(tab.id) }}>×</i>
+        <i className='dot'></i>
+      </div>
+    </li>
+  )
+})
+
+TabLabel.propTypes = {
+  tab: PropTypes.object.isRequired,
+  removeTab: PropTypes.func.isRequired,
+  activateTab: PropTypes.func.isRequired,
+  openContextMenu: PropTypes.func.isRequired,
+}
+
+TabLabel = defaultProps(props => ({
+  activateTab: function () {
+    props.tab.activate()
+  },
+  removeTab: function () {
+    props.tab.destroy()
+  },
+}))(TabLabel)
+
+export default TabLabel

app/components/Tab/actions.js → app/commons/Tab/actions.js

@@ -1,5 +1,5 @@
 /* @flow weak */
-import { createAction } from 'redux-actions'
+import { createAction } from 'utils/actions'
 
 export const TAB_DISSOLVE_GROUP = 'TAB_DISSOLVE_GROUP'
 

app/commons/Tab/index.js

@@ -0,0 +1,5 @@
+import TabStateScope from './state'
+import TabBar from './TabBar'
+import { TabContent, TabContentItem } from './TabContent'
+
+export { TabBar, TabContent, TabContentItem, TabStateScope }