Commit 1b0e0abf by 小明

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

parent 3d6d0331
......@@ -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',
});
/**
......
......@@ -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",
......
/**
*
* 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 { 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
......@@ -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: [],
......
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
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;
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