header.jsx 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import React from 'react';
  2. import { Input, Select, Icon, Button } from 'antd';
  3. import emitter from '../../eventManger/ev';
  4. const Option = Select.Option;
  5. import './header.less';
  6. class Header extends React.Component {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. title: props.chartTitle || '未命名'
  11. };
  12. }
  13. componentDidMount() {
  14. // 在组件装载完成后发布事件
  15. this.eventEmitter = emitter.addListener('headersettitle', (title)=>{
  16. this.setState({
  17. title
  18. });
  19. });
  20. console.log('chartDesigner header\'s emitter has been added...');
  21. }
  22. componentWillUnmount() {
  23. emitter.removeListener(this.eventEmitter);
  24. console.log('chartDesigner header\'s emitter has been removed...');
  25. }
  26. emit(eventName, params) {
  27. emitter.emit(eventName);
  28. }
  29. titleChange() {
  30. }
  31. render() {
  32. const { emptyTitle, title } = this.state;
  33. return <div className='header'>
  34. <div className='header-item toolbar-title'>
  35. <Input className='input-title'
  36. width={200}
  37. addonAfter={<Icon type="setting" />}
  38. value={title}
  39. onChange={this.titleChange}
  40. />
  41. </div>
  42. <div className='header-item toolbar-buttons'>
  43. <div className=''>
  44. <Button className='button-uodo' icon='undo' onClick={this.emit('undo')}>撤销</Button>
  45. <Button className='button-redo' onClick={this.emit('redo')}>重做</Button>
  46. <Button className='button-uodo' onClick={this.emit('Preview')}>预览</Button>
  47. <Button className='button-uodo' onClick={this.emit('save')}>保存</Button>
  48. </div>
  49. </div>
  50. </div>
  51. }
  52. }
  53. export default Header;