dongxiao

package.json

@@ -99,6 +99,7 @@
     "node-sass": "^3.7.0",
     "normalize.css": "^5.0.0",
     "postcss-loader": "^1.1.0",
+    "rc-queue-anim": "^0.12.6",
     "react": "^15.0.0",
     "react-dom": "^15.0.0",
     "react-redux": "^4.4.5",

src/app.js

@@ -13,13 +13,12 @@ class App extends Component {
   }
 
   render () {
-    const { routes, routes1, store } = this.props
+    const { routes, store } = this.props
 
     return (
       <Provider store={store}>
         <div style={{ height: '100%' }}>
           <Router history={browserHistory} children={routes} />
-          <Router history={browserHistory} children={routes1} />
         </div>
       </Provider>
     )

src/containers/Sider/actions.js

@@ -0,0 +1,41 @@
+// Constants
+export const FETCH_SUCCESS = 'sider/fetchSuccess'
+// Actions
+export const fetchSuccess = (data) => ({
+  type: FETCH_SUCCESS,
+  payload: data
+})
+
+export const fetchData = () => {
+  return (dispatch, getState) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        dispatch(fetchSuccess([{
+          title: '热力图',
+          children: [{
+            title: '浏览热力图'
+          }]
+        }, {
+          title: 'NavOne',
+          children: [{
+            title: 'item1',
+            type: 'drop',
+            children: [{ title: 'option1', type: 'option' }]
+          }]
+        }, {
+          title: 'NavOne',
+          children: [{
+            title: 'item1',
+            type: 'group',
+            children: [{ title: 'option1', type: 'option' }]
+          }, {
+            title: 'item2',
+            type: 'group',
+            children: [{ title: 'option1', type: 'option' }]
+          }]
+        }]))
+        resolve()
+      }, 200)
+    })
+  }
+}

src/containers/Sider/index.js

@@ -0,0 +1,82 @@
+import { Menu, Icon } from 'antd'
+import React, { Component } from 'react'
+import { fetchData } from './actions'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import QueueAnim from 'rc-queue-anim'
+
+const SubMenu = Menu.SubMenu
+const MenuItemGroup = Menu.ItemGroup
+
+class Sider extends Component {
+  static propTypes = {
+    fetchData: React.PropTypes.func.isRequired,
+    siderData: React.PropTypes.array.isRequired
+  }
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      current: '1'
+    }
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  componentWillMount () {
+    this.props.fetchData()
+  }
+
+  handleClick (e) {
+    console.log('click ', e)
+    this.setState({
+      current: e.key
+    })
+  }
+
+  render () {
+    var subTag = 0
+    var itemTag = 0
+    var optionTag = 0
+    return (
+      <Menu onClick={this.handleClick}
+        defaultOpenKeys={['sub0', 'item0']}
+        selectedKeys={[this.state.current]}
+        mode='inline'
+        theme='dark'
+        >
+        {this.props.siderData.map((sub, index) => (
+            <SubMenu key={'sub' + subTag++} title={<span><Icon type={sub.icon || 'mail'} />
+              <span>{sub.title}</span></span>} >
+              {sub.children && sub.children.map((item, index) => {
+                if (item.type === 'group') {
+                  return (<MenuItemGroup key={'item' + itemTag++} title={item.title}>
+                    {item.children && item.children.map((option, index) => (
+                      <Menu.Item key={'option' + optionTag++}>{option.title}</Menu.Item>
+                    ))}
+                  </MenuItemGroup>)
+                } else if (item.type === 'drop') {
+                  return (<SubMenu key={'item' + itemTag++} title={item.title}>
+                    {item.children && item.children.map((option, index) => (
+                      <Menu.Item key={'option' + optionTag++}>{option.title}</Menu.Item>
+                    ))}
+                  </SubMenu>)
+                } else {
+                  return (
+                    <Menu.Item key={'option' + optionTag++}>{item.title}</Menu.Item>
+                  )
+                }
+              })}
+            </SubMenu>
+          ))}
+      </Menu>
+    )
+  }
+}
+
+export default connect(state => ({
+  siderData: state.siderData
+}), dispatch => ({
+  ...bindActionCreators({
+    fetchData
+  }, dispatch)
+}))(Sider)

src/containers/Sider/reducers.js

@@ -0,0 +1,10 @@
+import { FETCH_SUCCESS } from './actions'
+
+export default function siderReducer (state = [], action) {
+  switch (action.type) {
+    case FETCH_SUCCESS:
+      return [...action.payload]
+    default:
+      return state
+  }
+}

src/layouts/CoreLayout/CoreLayout.js

@@ -1,33 +1,37 @@
 import React from 'react'
 import './CoreLayout.scss'
 import '../../styles/core.scss'
-import 'antd/dist/antd.min.css'
+import QueueAnim from 'rc-queue-anim'
+
 import Sider from '../../containers/Sider'
 import Location from '../../containers/Location'
 
 export const CoreLayout = ({ children }) => (
   <div className='ant-layout-aside'>
-    <aside className='ant-layout-sider'>
-      <div className='ant-layout-logo' />
-      <Sider />
-    </aside>
-    <div className='ant-layout-main'>
-      <div className='ant-layout-header' />
-      <div className='ant-layout-breadcrumb'>
-        <Location />
-      </div>
-      <div className='ant-layout-container'>
-        <div className='ant-layout-content'>
-          <div style={{ height: 590 }}>
-            {children}
+    <QueueAnim delay={300} className='queue-simple'>
+      <aside key='a' className='ant-layout-sider'>
+        <div className='ant-layout-logo' />
+        <Sider />
+      </aside>
+      <div key='b' className='ant-layout-main'>
+        <div className='ant-layout-header' />
+        <div className='ant-layout-breadcrumb'>
+          <Location />
+        </div>
+        <div className='ant-layout-container'>
+          <div className='ant-layout-content'>
+            <div style={{ height: 590 }}>
+              {children}
+            </div>
           </div>
         </div>
+        <div className='ant-layout-footer'>
+          Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
+        </div>
       </div>
-      <div className='ant-layout-footer'>
-        Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
-      </div>
-    </div>
+    </QueueAnim>
   </div>
+
 )
 
 CoreLayout.propTypes = {

src/main.js

@@ -16,10 +16,9 @@ const MOUNT_NODE = document.getElementById('root')
 
 let render = () => {
   const routes = require('./routes/index').default(store)
-  const routes1 = require('./routes/index1').default(store)
 
   ReactDOM.render(
-    <App store={store} routes={routes} routes1={routes1} />,
+    <App store={store} routes={routes} />,
     MOUNT_NODE
   )
 }

src/routes/Heatmap/index.js → src/routes/Heatmap-route/index.js

@@ -1,10 +1,10 @@
-import CoreLayout2 from './layouts/CoreLayout2'
+import CoreLayout from './layouts/CoreLayout'
 import Clickmap from './Clickmap'
 import Textmap from './Textmap'
 
 export const createRoutes = (store) => ({
-  path        : '/',
-  component   : CoreLayout2,
+  path        : '/heatmap',
+  component   : CoreLayout,
   indexRoute  : Textmap,
   childRoutes : [
     Clickmap

src/store/reducers.js

@@ -1,20 +1,10 @@
 import { combineReducers } from 'redux'
-import locationReducer from './location'
+import siderData from '../containers/Sider/reducers'
 
 export const makeRootReducer = (asyncReducers) => {
   return combineReducers({
-    location: locationReducer,
-    ...asyncReducers
+    siderData
   })
 }
 
-export const injectReducer = (store, { key, reducer }) => {
-  if (Object.hasOwnProperty.call(store.asyncReducers, key)) {
-    return
-  }
-
-  store.asyncReducers[key] = reducer
-  store.replaceReducer(makeRootReducer(store.asyncReducers))
-}
-
 export default makeRootReducer