diff --git a/package.json b/package.json index 0427775069c6da4afa2f8de6317cfa4ea19b34e8..13897dff98ada27ad141971772e2249ddebed943 100755 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "dependencies": { "antd": "next", "classnames": "^2.2.5", + "core-js": "^2.5.1", "dva": "^2.0.3", "lodash": "^4.17.4", "lodash-decorators": "^4.4.1", @@ -26,9 +27,9 @@ "numeral": "^2.0.6", "prop-types": "^15.5.10", "qs": "^6.5.0", - "react": "^15.6.2", + "react": "^16.0.0", "react-document-title": "^2.0.3", - "react-dom": "^15.6.2" + "react-dom": "^16.0.0" }, "devDependencies": { "babel-eslint": "^8.0.1", @@ -43,7 +44,7 @@ "babel-runtime": "^6.9.2", "cross-port-killer": "^1.0.1", "enzyme": "^3.1.0", - "enzyme-adapter-react-15": "^1.0.2", + "enzyme-adapter-react-16": "^1.0.2", "eslint": "^4.8.0", "eslint-config-airbnb": "^16.0.0", "eslint-plugin-babel": "^4.0.0", @@ -57,7 +58,7 @@ "lint-staged": "^4.3.0", "mockjs": "^1.0.1-beta3", "nightmare": "^2.10.0", - "react-test-renderer": "^15.6.2", + "react-test-renderer": "^16.0.0", "redbox-react": "^1.3.2", "roadhog": "^1.2.1", "roadhog-api-doc": "^0.1.8", diff --git a/src/index.js b/src/index.js index 88dbc389423f69dc80533adc6d43292be9bb82c5..3b145434182ca7159fb3b5927f67dbe901ea91e3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import dva from 'dva'; import 'moment/locale/zh-cn'; import models from './models'; +import './polyfill'; import './g2'; // import { browserHistory } from 'dva/router'; import './index.less'; diff --git a/src/polyfill.js b/src/polyfill.js new file mode 100644 index 0000000000000000000000000000000000000000..a35895996cceacf560559fd7c87dd49f1537c07d --- /dev/null +++ b/src/polyfill.js @@ -0,0 +1,7 @@ +import 'core-js/es6/map'; +import 'core-js/es6/set'; + +global.requestAnimationFrame = + global.requestAnimationFrame || function requestAnimationFrame(callback) { + setTimeout(callback, 0); + }; diff --git a/src/routes/Forms/AdvancedForm.js b/src/routes/Forms/AdvancedForm.js index c633e71369b712923a2abbefd00b7f5117f633c8..d3106bd63e0578853c0a423f95c88ca16ecc8938 100644 --- a/src/routes/Forms/AdvancedForm.js +++ b/src/routes/Forms/AdvancedForm.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { PureComponent } from 'react'; import { Card, Button, Form, Icon, Col, Row, DatePicker, TimePicker, Input, Select, Popover } from 'antd'; import { connect } from 'dva'; import PageHeaderLayout from '../../layouts/PageHeaderLayout'; @@ -41,228 +41,231 @@ const tableData = [{ department: 'Sidney No. 1 Lake Park', }]; -function AdvancedForm({ form, dispatch, submitting }) { - const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form; - const validate = () => { - validateFieldsAndScroll((error, values) => { - if (!error) { - // submit the values - dispatch({ - type: 'form/submitAdvancedForm', - payload: values, - }); - } - }); - }; - const errors = getFieldsError(); - const getErrorInfo = () => { - const errorCount = Object.keys(errors).filter(key => errors[key]).length; - if (!errors || errorCount === 0) { - return null; - } - const scrollToField = (fieldKey) => { - const labelNode = document.querySelector(`label[for="${fieldKey}"]`); - if (labelNode) { - labelNode.scrollIntoView(true); - } +class AdvancedForm extends PureComponent { + render() { + const { form, dispatch, submitting } = this.props; + const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form; + const validate = () => { + validateFieldsAndScroll((error, values) => { + if (!error) { + // submit the values + dispatch({ + type: 'form/submitAdvancedForm', + payload: values, + }); + } + }); }; - const errorList = Object.keys(errors).map((key) => { - if (!errors[key]) { + const errors = getFieldsError(); + const getErrorInfo = () => { + const errorCount = Object.keys(errors).filter(key => errors[key]).length; + if (!errors || errorCount === 0) { return null; } + const scrollToField = (fieldKey) => { + const labelNode = document.querySelector(`label[for="${fieldKey}"]`); + if (labelNode) { + labelNode.scrollIntoView(true); + } + }; + const errorList = Object.keys(errors).map((key) => { + if (!errors[key]) { + return null; + } + return ( +
  • scrollToField(key)}> + +
    {errors[key][0]}
    +
    {fieldLabels[key]}
    +
    • + ); + }); return ( -
  • scrollToField(key)}> - -
    {errors[key][0]}
    -
    {fieldLabels[key]}
    -
    • + + trigger.parentNode} + > + + + {errorCount} + ); - }); + }; return ( - - trigger.parentNode} - > - - - {errorCount} - + + +
    + + + + {getFieldDecorator('name', { + rules: [{ required: true, message: '请输入仓库名称' }], + })( + + )} + + + + + {getFieldDecorator('url', { + rules: [{ required: true, message: '请选择' }], + })( + + )} + + + + + {getFieldDecorator('owner', { + rules: [{ required: true, message: '请选择管理员' }], + })( + + )} + + + + + + + {getFieldDecorator('approver', { + rules: [{ required: true, message: '请选择审批员' }], + })( + + )} + + + + + {getFieldDecorator('dateRange', { + rules: [{ required: true, message: '请选择生效日期' }], + })( + + )} + + + + + {getFieldDecorator('type', { + rules: [{ required: true, message: '请选择仓库类型' }], + })( + + )} + + + +
    +     + +
    + + + + {getFieldDecorator('name2', { + rules: [{ required: true, message: '请输入' }], + })( + + )} + + + + + {getFieldDecorator('url2', { + rules: [{ required: true, message: '请选择' }], + })( + + )} + + + + + {getFieldDecorator('owner2', { + rules: [{ required: true, message: '请选择管理员' }], + })( + + )} + + + + + + + {getFieldDecorator('approver2', { + rules: [{ required: true, message: '请选择审批员' }], + })( + + )} + + + + + {getFieldDecorator('dateRange2', { + rules: [{ required: true, message: '请输入' }], + })( + trigger.parentNode} + /> + )} + + + + + {getFieldDecorator('type2', { + rules: [{ required: true, message: '请选择仓库类型' }], + })( + + )} + + + +
    +     + + {getFieldDecorator('members', { + initialValue: tableData, + })()} + + + {getErrorInfo()} + + +     ); - }; - return ( - - -
    - - - - {getFieldDecorator('name', { - rules: [{ required: true, message: '请输入仓库名称' }], - })( - - )} - - - - - {getFieldDecorator('url', { - rules: [{ required: true, message: '请选择' }], - })( - - )} - - - - - {getFieldDecorator('owner', { - rules: [{ required: true, message: '请选择管理员' }], - })( - - )} - - - - - - - {getFieldDecorator('approver', { - rules: [{ required: true, message: '请选择审批员' }], - })( - - )} - - - - - {getFieldDecorator('dateRange', { - rules: [{ required: true, message: '请选择生效日期' }], - })( - - )} - - - - - {getFieldDecorator('type', { - rules: [{ required: true, message: '请选择仓库类型' }], - })( - - )} - - - -
    -     - -
    - - - - {getFieldDecorator('name2', { - rules: [{ required: true, message: '请输入' }], - })( - - )} - - - - - {getFieldDecorator('url2', { - rules: [{ required: true, message: '请选择' }], - })( - - )} - - - - - {getFieldDecorator('owner2', { - rules: [{ required: true, message: '请选择管理员' }], - })( - - )} - - - - - - - {getFieldDecorator('approver2', { - rules: [{ required: true, message: '请选择审批员' }], - })( - - )} - - - - - {getFieldDecorator('dateRange2', { - rules: [{ required: true, message: '请输入' }], - })( - trigger.parentNode} - /> - )} - - - - - {getFieldDecorator('type2', { - rules: [{ required: true, message: '请选择仓库类型' }], - })( - - )} - - - -
    -     - - {getFieldDecorator('members', { - initialValue: tableData, - })()} - - - {getErrorInfo()} - - -     - ); + } } export default connect(state => ({ diff --git a/tests/setupTests.js b/tests/setupTests.js index 7ada61f8ad46a8daa612ece4c231aef68d8672ff..bb003dda92168056586272d77b6f64a8da34a100 100644 --- a/tests/setupTests.js +++ b/tests/setupTests.js @@ -1,6 +1,8 @@ +/* eslint-disable import/first */ +import '../src/polyfill'; import { jsdom } from 'jsdom'; import Enzyme from 'enzyme'; -import Adapter from 'enzyme-adapter-react-15'; +import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() }); @@ -9,7 +11,3 @@ const documentHTML = '