Merge pull request #138 from Coding/zhengxinqi/refractor_sidebar

重构 SideBar 模块

Author: hackape

.eslintrc

@@ -13,6 +13,8 @@
     "no-plusplus": 0,
     "no-return-assign": 0,
     "no-underscore-dangle": 0,
+    "react/require-default-props": 0,
+    "no-multi-assign": 0,
     "semi": ["error", "never"],
     "one-var": 0,
     "one-var-declaration-per-line": 0,

app/CodingSDK.js

@@ -1,10 +1,10 @@
+import { CreateI18n } from 'utils/createI18n'
 import { request } from './utils'
 import store from './store'
 import config from './config'
 import * as Modal from './components/Modal/actions'
 import { notify, NOTIFY_TYPE } from './components/Notification/actions'
-import { addComToSideBar } from './components/Panel/actions'
-import { CreateI18n } from 'utils/createI18n'
+import { addComToSideBar } from './components/Panel/SideBar/actions'
 
 
 export default class {

app/commands/commandBindings/misc.js

@@ -1,5 +1,7 @@
 import * as Modal from 'components/Modal/actions'
 import * as Panel from 'components/Panel/actions'
+import * as SideBar from 'components/Panel/SideBar/actions'
+
 
 const getComponentByName = name => window.refs[name].getWrappedInstance()
 export default {
@@ -31,7 +33,7 @@ export default {
   // 'tools:terminal:clear_scrollback_buffer':
   // 'tools:terminal:reset':
   'tools:terminal:new_terminal': (c) => {
-    Panel.activateSidePanelView('bottom_0')
+    SideBar.activateSidePanelView('bottom_0')
     // $d(Tab.createTabInGroup('tab_group_terminal'))
   }
 }

app/components/Panel/PanelContent.jsx

@@ -5,8 +5,8 @@ import StatusBar from '../StatusBar'
 import PanesContainer from '../Pane'
 import FileTree from '../FileTree'
 import TerminalContainer from '../Terminal'
-import SideBar from './SideBar'
-import { SidePanelContainer, SidePanelView } from './SidePanel'
+import SideBar from './SideBar/SideBar'
+import { SidePanelContainer, SidePanelView } from './SideBar/SidePanel'
 import GitGraph from 'components/Git/GitGraph'
 
 
@@ -38,7 +38,7 @@ const PanelContent = ({ panel }) => {
     case 'PANEL_LEFT':
       return (
         <SidePanelContainer side='left'>
-          <SidePanelView label={{ text: i18n`panel.left.project`, icon: 'octicon octicon-code' }} active >
+          <SidePanelView key='project' label={{ text: i18n`panel.left.project`, icon: 'octicon octicon-code' }} active >
             <FileTree />
           </SidePanelView>
         </SidePanelContainer>
@@ -51,14 +51,13 @@ const PanelContent = ({ panel }) => {
       }
       return (
         <SidePanelContainer side='bottom'>
-          <SidePanelView label={labels.terminal} >
+          <SidePanelView key='terminal' label={labels.terminal} >
             <TerminalContainer />
           </SidePanelView>
 
-          <SidePanelView label={labels.gitGraph} >
+          <SidePanelView key='gitGraph' label={labels.gitGraph} >
             <GitGraph />
           </SidePanelView>
-
         </SidePanelContainer>
       )
     default:

app/components/Panel/SideBar.jsx

@@ -0,0 +1,74 @@
+import React, { PropTypes } from 'react'
+import cx from 'classnames'
+
+import { inject, observer } from 'mobx-react'
+import { toggleSidePanelView } from './actions'
+import state, { labelShape, labelsShape } from './state'
+
+/* shape of label
+label = {
+  text: String,
+  icon: String,
+  viewId: String,
+}
+*/
+
+
+const SideBarLabel = ({ label, isActive, onClick }) => (
+  <div className={
+      cx('side-bar-label', {
+        active: isActive
+      })}
+    onClick={onClick}
+  >
+    <div className='side-bar-label-container'>
+      <div className='side-bar-label-content'>
+        <i className={cx('icon', label.icon)} />
+        <span>{label.text}</span>
+      </div>
+    </div>
+  </div>
+  )
+
+SideBarLabel.propTypes = {
+  label: labelShape,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func
+}
+
+const _SideBar = observer(({ labels, side, activeViewId, activateView }) => {
+  return (
+    <div className={`bar side-bar ${side}`}>
+      {
+      labels
+      .map(label =>
+        <SideBarLabel
+          key={label.viewId}
+          label={label}
+          onClick={() => activateView(label.viewId)}
+          isActive={activeViewId === label.viewId}
+        />
+    )}
+    </div>)
+})
+
+_SideBar.propTypes = {
+  labels: labelsShape,
+  side: PropTypes,
+  activeViewId: PropTypes.string,
+  activateView: PropTypes.func
+}
+
+const SideBar = inject((__, { side }) => {
+  const labels = state.labels.values().filter(label => label.side === side)
+
+  const activeViewId = state.activeStatus.get(side)
+  return {
+    side,
+    labels,
+    activeViewId,
+    activateView: toggleSidePanelView // toggle action
+  }
+})(_SideBar)
+
+export default SideBar

app/components/Panel/SideBar/SideBar.jsx

@@ -0,0 +1,78 @@
+import React, { Component, PropTypes } from 'react'
+import { inject } from 'mobx-react'
+import _ from 'lodash'
+
+import {
+  registerSideBarView
+} from './actions'
+import state, { labelsShape } from './state'
+
+
+@inject((__, { side }) => {
+  const labels = state.labels.values().filter(label => label.side === side)
+  const activeViewId = state.activeStatus.get(side)
+  return { activeViewId, labels, side }
+})
+class SidePanelContainer extends Component {
+  componentWillMount () {
+    const children = this.getChildren()
+    const { side } = this.props
+    const mapChildrenToSidebar = children.map((child, idx) => ({
+      side,
+      key: child.key || `${side}_${idx}`,
+      isActive: child.props.active || false,
+      label: child.props.label,
+      view: child
+    }))
+    registerSideBarView(mapChildrenToSidebar)
+  }
+  getChildren () {
+    if (!this.props.children) return []
+    return Array.isArray(this.props.children) ? this.props.children : [this.props.children]
+  }
+  render () {
+    const { labels = {}, activeViewId } = this.props
+    return (<div style={{ height: '100%' }}>
+      {labels
+      .sort((a, b) => a.weight || 1 - b.weight || 1)
+      .map(label =>
+        <SidePanelViewContent key={label.viewId}
+          view={state.views[label.viewId]}
+          isActive={activeViewId === label.viewId}
+        />
+      )}
+    </div>)
+  }
+}
+SidePanelContainer.propTypes = {
+  labels: labelsShape,
+  children: PropTypes.node,
+  activeViewId: PropTypes.string,
+  side: PropTypes.string
+}
+
+const SidePanelViewContent = ({ isActive, view }) =>
+  <div style={{ height: '100%', display: isActive ? 'block' : 'none' }}>
+    {view}
+  </div>
+
+SidePanelViewContent.propTypes = {
+  isActive: PropTypes.bool,
+  view: PropTypes.node
+}
+
+class SidePanelView extends Component {
+  constructor (props) {
+    super(props)
+  }
+
+  render () {
+    return this.props.children
+  }
+}
+SidePanelView.propTypes = {
+  children: PropTypes.node
+}
+
+
+export { SidePanelContainer, SidePanelView }