openecomp-ui/src/sdc-app/flows/FlowsPunchOut.jsx

   1 import React from 'react';
   2 import ReactDOM from 'react-dom';
   3 import Configuration from 'sdc-app/config/Configuration.js';
   4 import Application from 'sdc-app/Application.jsx';
   5 import store from 'sdc-app/AppStore.js';
   6 import FlowsListEditor from './FlowsListEditor.js';
   7 import FlowsActions from './FlowsActions.js';
   8
   9 class FlowsListEditorPunchOutWrapper extends React.Component {
  10
  11         componentDidMount() {
  12                 let element = ReactDOM.findDOMNode(this);
  13                 element.addEventListener('click', event => {
  14                         if (event.target.tagName === 'A') {
  15                                 event.preventDefault();
  16                         }
  17                 });
  18                 ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
  19                         element.addEventListener(eventType, event => event.stopPropagation())
  20                 );
  21         }
  22
  23         render() {
  24                 return <FlowsListEditor/>;
  25         }
  26 }
  27
  28 export default class DiagramPunchOut {
  29
  30         render({options: {data, apiRoot, apiHeaders}, onEvent}, element) {
  31
  32                 if (!this.isConfigSet) {
  33                         Configuration.setATTApiRoot(apiRoot);
  34                         Configuration.setATTApiHeaders(apiHeaders);
  35                         this.isConfigSet = true;
  36                 }
  37
  38                 this.onEvent = onEvent;
  39                 this.handleData(data);
  40
  41                 if (!this.rendered) {
  42                         ReactDOM.render(<Application><div className='dox-ui'><FlowsListEditorPunchOutWrapper/></div></Application>, element);
  43                         this.rendered = true;
  44                 }
  45         }
  46
  47         unmount(element) {
  48                 let dispatch = action => store.dispatch(action);
  49                 ReactDOM.unmountComponentAtNode(element);
  50                 FlowsActions.reset(dispatch);
  51         }
  52
  53         handleData(data) {
  54                 let {serviceID, diagramType} = data;
  55                 let dispatch = action => store.dispatch(action);
  56
  57                 if (serviceID !== this.prevServiceID || diagramType !== this.prevDiagramType) {
  58                         this.prevServiceID = serviceID;
  59                         this.prevDiagramType = diagramType;
  60                         FlowsActions.fetchFlowArtifacts(dispatch, {...data});
  61                 }
  62         }
  63 }