header.jsx 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. import React from 'react'
  2. import { Input, Select, Icon, Button } from 'antd'
  3. const Option = Select.Option
  4. import { Link } from 'react-router-dom'
  5. import { connect } from 'dva'
  6. import { ActionCreators } from 'redux-undo'
  7. import { hashHistory } from 'react-router'
  8. import '../../models/chartDesigner'
  9. import './header.less'
  10. const Header = ({ chartDesigner, dispatch }) => {
  11. return (
  12. <div className='header'>
  13. <div className='header-item toolbar-back'>
  14. <Button onClick={() => {
  15. window.history.back();
  16. }}>
  17. 返回
  18. </Button>
  19. </div>
  20. <div className='header-item toolbar-title'>
  21. <Input
  22. className='input-title'
  23. addonAfter={<Icon type="edit"
  24. onClick={() => {
  25. const input = this.refs.titleInput
  26. input.focus()
  27. }}
  28. />}
  29. onChange={(e) => {
  30. dispatch({ type: 'chartDesigner/setModel', name: 'header', value: { label: e.target.value } });
  31. }}
  32. value={chartDesigner.header.label}
  33. />
  34. </div>
  35. <div className='header-item toolbar-buttons'>
  36. <div className=''>
  37. {/* <Button onClick={() => {
  38. const viewType = chartDesigner.baseConfig.viewType.key;
  39. if(viewType == 'bar') {
  40. dispatch({ type: 'chartDesigner/fetchBarData'});
  41. }else if(viewType == 'pie') {
  42. dispatch({ type: 'chartDesigner/fetchPieData' });
  43. }
  44. }}>请求测试</Button> */}
  45. <Button className='button-uodo' icon='undo' onClick={() => {
  46. dispatch(ActionCreators.undo());
  47. }}>撤销</Button>
  48. <Button className='button-redo' onClick={() => {
  49. dispatch(ActionCreators.redo());
  50. }}>重做</Button>
  51. <Button className='button-uodo' >预览</Button>
  52. <Button className='button-uodo' >保存</Button>
  53. </div>
  54. </div>
  55. </div>
  56. )
  57. }
  58. function mapStateToProps({ present: { chartDesigner } }) {
  59. return { chartDesigner: chartDesigner }
  60. }
  61. export default connect(mapStateToProps)(Header);