Commit 1b0e0abf by 小明

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

parent 3d6d0331
...@@ -43,7 +43,8 @@ module.exports = require('./webpack.base.babel')({ ...@@ -43,7 +43,8 @@ module.exports = require('./webpack.base.babel')({
}, },
// Emit a source map for easier debugging // Emit a source map for easier debugging
devtool: 'cheap-module-eval-source-map', // devtool: 'cheap-module-eval-source-map',
devtool: 'source-map',
}); });
/** /**
......
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
"intl": "1.2.5", "intl": "1.2.5",
"invariant": "2.2.1", "invariant": "2.2.1",
"ip": "1.1.3", "ip": "1.1.3",
"lodash": "4.16.4", "lodash": "^4.16.4",
"minimist": "1.2.0", "minimist": "1.2.0",
"react": "15.3.2", "react": "15.3.2",
"react-dom": "15.3.2", "react-dom": "15.3.2",
......
/**
*
* 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;
// 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);
});
});
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Col, Row, Icon } from 'antd'; 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) { constructor(props, context) {
super(props, context); super(props, context);
} }
...@@ -244,3 +244,5 @@ export default class DashboardIndexAdmin extends Component { // eslint-disable-l ...@@ -244,3 +244,5 @@ export default class DashboardIndexAdmin extends Component { // eslint-disable-l
); );
} }
} }
export default DashboardIndexAdmin;
\ No newline at end of file
...@@ -23,7 +23,7 @@ class DashboardIndex extends PureComponent { // eslint-disable-line react/prefer ...@@ -23,7 +23,7 @@ class DashboardIndex extends PureComponent { // eslint-disable-line react/prefer
android_upgrade_image: this.props.android_upgrade_image, android_upgrade_image: this.props.android_upgrade_image,
org_id: this.props.org_id, org_id: this.props.org_id,
current_buttons: [], //当前按钮 current_buttons: [], //当前按钮
actionSheetVisible: false, //ActionSheet 是否可见 actionSheetVisible: true, //ActionSheet 是否可见
statistic: {}, statistic: {},
documents: [], documents: [],
approvingDocuments: [], approvingDocuments: [],
...@@ -33,7 +33,7 @@ class DashboardIndex extends PureComponent { // eslint-disable-line react/prefer ...@@ -33,7 +33,7 @@ class DashboardIndex extends PureComponent { // eslint-disable-line react/prefer
activeTab: 'approving', activeTab: 'approving',
hasPermission: true, hasPermission: true,
loading: true, loading: true,
logined: false, logined: true,
is_admin: false, is_admin: false,
icons: false, icons: false,
new_buttons: [], new_buttons: [],
......
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import DashboardIndex from './dashboard'; 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() { render() {
const config = {};
return ( return (
<div> <div>
<h1> <DashboardIndex
This is Dashboard components ! org_id={1}
</h1> dingtalk_config={config}
<DashboardIndex /> android_upgrade_image="assets/image/upgrade/header_android.png"
upgrade_image="assets/images/upgrade/header.png" />
</div> </div>
); );
} }
} }
\ No newline at end of file
export default HomePage;
\ No newline at end of file
import React, { Component } from 'react'; import React, { Component } from 'react';
import _ from 'lodash';
import { Col, Row, Icon } from 'antd'; 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) { constructor(props, context) {
super(props, context); super(props, context);
} }
render() { render() {
return (<p> hello member!</p>); const props = this.props;
const memberShortcuts = _.chunk([
const props = $.extend({}, this.props);
const memberShortcuts = [
{ type: 'purchase', name: '采购列表', onClick: props.onClick.bind(null, 'purchase') }, { type: 'purchase', name: '采购列表', onClick: props.onClick.bind(null, 'purchase') },
{ type: 'sale', name: '销售列表', onClick: props.onClick.bind(null, 'sale') }, { type: 'sale', name: '销售列表', onClick: props.onClick.bind(null, 'sale') },
{ type: 'other', name: '其他列表', onClick: props.onClick.bind(null, 'other') }, { type: 'other', name: '其他列表', onClick: props.onClick.bind(null, 'other') },
...@@ -20,7 +20,7 @@ export default class DashboardIndexMember extends Component { // eslint-disable- ...@@ -20,7 +20,7 @@ export default class DashboardIndexMember extends Component { // eslint-disable-
{ type: 'supplier', name: '供应商列表', path: '/mobile/suppliers' }, { type: 'supplier', name: '供应商列表', path: '/mobile/suppliers' },
{ type: 'product', name: '产品列表', path: '/mobile/products' }, { type: 'product', name: '产品列表', path: '/mobile/products' },
{ type: 'inventory', name: '库存查询', path: '/mobile/inventories' }, { type: 'inventory', name: '库存查询', path: '/mobile/inventories' },
].chunk(4); ], 4);
let outlet = null; let outlet = null;
...@@ -60,6 +60,7 @@ export default class DashboardIndexMember extends Component { // eslint-disable- ...@@ -60,6 +60,7 @@ export default class DashboardIndexMember extends Component { // eslint-disable-
</div> </div>
); );
} }
outlet = ( outlet = (
<Row type="flex" justify="center" className="document-list ik-padding-bottom-20"> <Row type="flex" justify="center" className="document-list ik-padding-bottom-20">
<Col span="16" className="ik-text-center"> <Col span="16" className="ik-text-center">
...@@ -70,23 +71,27 @@ export default class DashboardIndexMember extends Component { // eslint-disable- ...@@ -70,23 +71,27 @@ export default class DashboardIndexMember extends Component { // eslint-disable-
} }
} }
let fragments = null; let fragments = [];
memberShortcuts.each((shortcuts, rowCount) => { memberShortcuts.map((shortcuts, rowCount) => {
shortcuts.each((shortcut, colCount) => { shortcuts.map((shortcut, colCount) => {
let className = '' let className = ''
if ((colCount + 1) % 4 === 0 ) { if ((colCount + 1) % 4 === 0 ) {
className = ''; className = '';
} else { } else {
className = 'ik-border-right'; className = 'ik-border-right';
} }
if (rowCount < memberShortcuts.length - 1) { if (rowCount < memberShortcuts.length - 1) {
className += 'ik-border-bottom'; className += 'ik-border-bottom';
} }
let href = shortcut.path; let href = shortcut.path;
if (shortcut.onClick) { if (shortcut.onClick) {
href = 'javascript:void(0);'; 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}> <a className="shortcut-link" href={href} onClick={shortcut.onClick}>
<svg> <svg>
<use xlinkHref={props.icons[shortcut.type]} /> <use xlinkHref={props.icons[shortcut.type]} />
...@@ -96,7 +101,6 @@ export default class DashboardIndexMember extends Component { // eslint-disable- ...@@ -96,7 +101,6 @@ export default class DashboardIndexMember extends Component { // eslint-disable-
</Col>); </Col>);
}); });
}); });
return (<Row> return (<Row>
<Row id="action-sheet-button-container"> <Row id="action-sheet-button-container">
<Col span="6" offset="18" className="ik-padding-top-20"> <Col span="6" offset="18" className="ik-padding-top-20">
...@@ -108,7 +112,7 @@ export default class DashboardIndexMember extends Component { // eslint-disable- ...@@ -108,7 +112,7 @@ export default class DashboardIndexMember extends Component { // eslint-disable-
</Col> </Col>
</Row> </Row>
<div id="action-sheet-wrapper"> <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> </div>
<Row> <Row>
<Col span="24"> <Col span="24">
...@@ -126,3 +130,5 @@ export default class DashboardIndexMember extends Component { // eslint-disable- ...@@ -126,3 +130,5 @@ export default class DashboardIndexMember extends Component { // eslint-disable-
</Row>); </Row>);
} }
} }
export default DashboardIndexMember;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment