增加 ActionSheet 组件及调整工台台代码

internals/webpack/webpack.dev.babel.js

@@ -43,7 +43,8 @@ module.exports = require('./webpack.base.babel')({
   },
 
   // Emit a source map for easier debugging
-  devtool: 'cheap-module-eval-source-map',
+  // devtool: 'cheap-module-eval-source-map',
+  devtool: 'source-map',
 });
 
 /**

package.json

@@ -81,7 +81,7 @@
     "intl": "1.2.5",
     "invariant": "2.2.1",
     "ip": "1.1.3",
-    "lodash": "4.16.4",
+    "lodash": "^4.16.4",
     "minimist": "1.2.0",
     "react": "15.3.2",
     "react-dom": "15.3.2",

src/components/ActionSheet/index.js

+/**
+*
+* ActionSheet
+*
+*/
+
+import React, { PureComponent } from 'react';
+import { Row, Col, Icon } from 'antd';
+
+
+class ActionSheet extends PureComponent { // eslint-disable-line react/prefer-stateless-function
+  static propTypes = {
+    visable: React.PropTypes.bool.isRequired,
+    buttons: React.PropTypes.array.isRequired,
+    onHidden: React.PropTypes.func.isRequired,
+    onSearch: React.PropTypes.func.isRequired,
+  };
+
+  state = {
+    visible: false,
+    buttons: [],
+    onHidden: () => {},
+    onSearch: () => {},
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  handlePermission(button) {
+    hasPermissionTo(button.subject, button.act, { category: button.category }, () =>{
+      Turbolinks.visit(button.path)
+    });
+  }
+
+  handleDisplay(props) {
+    enableBodyMove(false)
+    $(document).one('turbolinks:before-cache', ()=> { enableBodyMove(true) });
+    this.setState({visible: true});
+    $('#action-sheet-container').animateCSS('slideInUp')
+    disableRefresh()
+  }
+
+  handleDestroy() {
+    $('#action-sheet-container').animateCSS('slideOutDown', ()=> {
+      this.setState({visible: false});
+      enableBodyMove(true)
+      this.props.onHidden && this.props.onHidden();
+      enableRefresh(this.props.onSearch)
+    });
+  }
+
+  componentWillReceiveProps(nextProps, prevProps) {
+    if (nextProps.visible) {
+      this.handDisplay(nextProps);
+    }
+  }
+
+  render() {
+    const buttonsLength = this.props.buttons.length;
+    let rowCount = Math.ceil(buttonsLength / 4);
+    if (buttonsLength % 4 === 0) {
+      rowCount = buttonsLength / 4 + 1;
+    }
+
+    const offset = {
+      height: rowCount * 121,
+      top: this.state.visible? ($(window).height() - rowCount * 121) : '100%',
+    };
+
+    const results = [];
+    const rows = _.range(0, rowCount);
+    if (buttonsLength > 0) {
+      rows.map((row) => {
+        let cols = _.range(4 * row, 4 * row + 3);
+        cols.map((col) => {
+          let button = this.props.button[col];
+          if (button) {
+            results.push(<Col span="6" className="action-sheet-links">
+              <a 
+                className="action-sheet-link"
+                href={button.need_permission? 'javascript:void(0);': button.path}
+                onClick={button.need_permission? this.handlePermission.bind(this, button): null}>
+                <div className={`svg-container with-opacity ${button.class}`}>
+                  <svg>
+                    <use xlinkHref={button.image}></use>
+                  </svg>
+                </div>
+                <p className="ik-margin-top-10 ik-content-font ik-title-color">
+                  {button.name}
+                </p>
+              </a>
+            </Col>);
+          }
+        });
+
+        if(row === (rows - 1)) {
+          results.push(<Col span="6" offset={(18 - (buttonsLength % 4) * 6)} className="ik-padding-vertical-20">
+            <div className="action-sheet-button" onClick={this.handleDestroy}>
+              <Icon type="cross-circle" />
+            </div>
+          </Col>);
+        }
+      });
+    }
+    let rowfragment = null;
+    if (buttonsLength > 0) {
+      rowfragment = (<Row>{results}</Row>);
+    }
+
+    return (
+      <Row>
+        <Col 
+          span="24" 
+          id="action-sheet-cover"
+          onClick={this.handleDestroy}
+          style={this.state.visable ? {display:'block'} : {display:'none'}}></Col>
+        <Col 
+          span="24" 
+          id="action-sheet-cover"
+          style={offset}>
+          {rowfragment}
+        </Col>
+      </Row>
+    );
+  }
+}
+
+export default ActionSheet;

src/components/ActionSheet/tests/index.test.js

+// import ActionSheet from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<ActionSheet />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

src/modules/dashboard/admin.js

 import React, { Component } from 'react';
 import { Col, Row, Icon } from 'antd';
 
-export default class DashboardIndexAdmin extends Component { // eslint-disable-line react/prefer-stateless-function
+class DashboardIndexAdmin extends Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props, context) {
     super(props, context);
   }
@@ -244,3 +244,5 @@ export default class DashboardIndexAdmin extends Component { // eslint-disable-l
     );
   }
 }
+
+export default DashboardIndexAdmin;
\ No newline at end of file

src/modules/dashboard/dashboard.js

@@ -23,7 +23,7 @@ class DashboardIndex extends PureComponent { // eslint-disable-line react/prefer
     android_upgrade_image: this.props.android_upgrade_image,
     org_id: this.props.org_id,
     current_buttons: [], //当前按钮
-    actionSheetVisible: false, //ActionSheet 是否可见
+    actionSheetVisible: true, //ActionSheet 是否可见
     statistic: {},
     documents: [],
     approvingDocuments: [],
@@ -33,7 +33,7 @@ class DashboardIndex extends PureComponent { // eslint-disable-line react/prefer
     activeTab: 'approving',
     hasPermission: true,
     loading: true,
-    logined: false,
+    logined: true,
     is_admin: false,
     icons: false,
     new_buttons: [],

src/modules/dashboard/index.js

 import React, { PureComponent } from 'react';
 import DashboardIndex from './dashboard';
 
-export default class HomePage extends PureComponent { // eslint-disable-line react/prefer-stateless-function
+class HomePage extends PureComponent { // eslint-disable-line react/prefer-stateless-function
   render() {
+    const config = {};
+
     return (
       <div>
-        <h1>
-          This is Dashboard components !
-        </h1>
-        <DashboardIndex />
+        <DashboardIndex
+          org_id={1}
+          dingtalk_config={config}
+          android_upgrade_image="assets/image/upgrade/header_android.png"
+          upgrade_image="assets/images/upgrade/header.png" />
       </div>
     );
   }
 }
+
+export default HomePage;
\ No newline at end of file

src/modules/dashboard/member.js

 import React, { Component } from 'react';
+import _ from 'lodash';
 import { Col, Row, Icon } from 'antd';
 
-export default class DashboardIndexMember extends Component { // eslint-disable-line react/prefer-stateless-function
+import ActionSheet from 'components/ActionSheet';
+
+class DashboardIndexMember extends Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props, context) {
     super(props, context);
   }
 
   render() {
-    return (<p> hello member!</p>);
-
-    const props = $.extend({}, this.props);
-
-    const memberShortcuts = [
+    const props = this.props;
+    const memberShortcuts = _.chunk([
       { type: 'purchase', name: '采购列表', onClick: props.onClick.bind(null, 'purchase') },
       { type: 'sale', name: '销售列表', onClick: props.onClick.bind(null, 'sale') },
       { type: 'other', name: '其他列表', onClick: props.onClick.bind(null, 'other') },
@@ -20,7 +20,7 @@ export default class DashboardIndexMember extends Component { // eslint-disable-
       { type: 'supplier', name: '供应商列表', path: '/mobile/suppliers' },
       { type: 'product', name: '产品列表', path: '/mobile/products' },
       { type: 'inventory', name: '库存查询', path: '/mobile/inventories' },
-    ].chunk(4);
+    ], 4);
 
     let outlet = null;
 
@@ -60,6 +60,7 @@ export default class DashboardIndexMember extends Component { // eslint-disable-
             </div>
           );
         }
+
         outlet = (
           <Row type="flex" justify="center" className="document-list ik-padding-bottom-20">
             <Col span="16" className="ik-text-center">
@@ -70,23 +71,27 @@ export default class DashboardIndexMember extends Component { // eslint-disable-
       }
     }
 
-    let fragments = null;
-    memberShortcuts.each((shortcuts, rowCount) => {
-      shortcuts.each((shortcut, colCount) => {
+    let fragments = [];
+    memberShortcuts.map((shortcuts, rowCount) => {
+      shortcuts.map((shortcut, colCount) => {
         let className = ''
+
         if ((colCount + 1) % 4 === 0 ) {
           className = '';
         } else {
           className = 'ik-border-right';
         }
+
         if (rowCount < memberShortcuts.length - 1) {
           className += 'ik-border-bottom';
         }
+
         let href = shortcut.path;
         if (shortcut.onClick) {
           href = 'javascript:void(0);';
         }
-        fragments += (<Col span="6" className={className}>
+
+        fragments.push(<Col span="6" className={className} key={shortcut.type}>
           <a className="shortcut-link" href={href} onClick={shortcut.onClick}>
             <svg>
               <use xlinkHref={props.icons[shortcut.type]} />
@@ -96,7 +101,6 @@ export default class DashboardIndexMember extends Component { // eslint-disable-
         </Col>);
       });
     });
-
     return (<Row>
       <Row id="action-sheet-button-container">
         <Col span="6" offset="18" className="ik-padding-top-20">
@@ -108,7 +112,7 @@ export default class DashboardIndexMember extends Component { // eslint-disable-
         </Col>
       </Row>
       <div id="action-sheet-wrapper">
-        <IKActionSheet buttons={props.current_buttons} visible={props.actionSheetVisible} onHidden={props.actionSheetHidden} onSearch={props.handleSearch} />
+        <ActionSheet buttons={props.current_buttons} visable={props.actionSheetVisible} onHidden={props.actionSheetHidden} onSearch={props.handleSearch} />
       </div>
       <Row>
         <Col span="24">
@@ -126,3 +130,5 @@ export default class DashboardIndexMember extends Component { // eslint-disable-
     </Row>);
   }
 }
+
+export default DashboardIndexMember;