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

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import ReactDOM from 'react-dom';
  18 import Configuration from 'sdc-app/config/Configuration.js';
  19 import Application from 'sdc-app/Application.jsx';
  20 import store from 'sdc-app/AppStore.js';
  21 import FlowsListEditor from './FlowsListEditor.js';
  22 import FlowsActions from './FlowsActions.js';
  23
  24 class FlowsListEditorPunchOutWrapper extends React.Component {
  25     componentDidMount() {
  26         let element = ReactDOM.findDOMNode(this);
  27         element.addEventListener('click', event => {
  28             if (event.target.tagName === 'A') {
  29                 event.preventDefault();
  30             }
  31         });
  32         ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
  33             element.addEventListener(eventType, event =>
  34                 event.stopPropagation()
  35             )
  36         );
  37     }
  38
  39     render() {
  40         return <FlowsListEditor />;
  41     }
  42 }
  43
  44 export default class DiagramPunchOut {
  45     render({ options: { data, apiRoot, apiHeaders }, onEvent }, element) {
  46         if (!this.isConfigSet) {
  47             Configuration.setCatalogApiRoot(apiRoot);
  48             Configuration.setCatalogApiHeaders(apiHeaders);
  49             this.isConfigSet = true;
  50         }
  51
  52         this.onEvent = onEvent;
  53         this.handleData(data);
  54
  55         if (!this.rendered) {
  56             ReactDOM.render(
  57                 <Application>
  58                     <div className="dox-ui">
  59                         <FlowsListEditorPunchOutWrapper />
  60                     </div>
  61                 </Application>,
  62                 element
  63             );
  64             this.rendered = true;
  65         }
  66     }
  67
  68     unmount(element) {
  69         let dispatch = action => store.dispatch(action);
  70         ReactDOM.unmountComponentAtNode(element);
  71         FlowsActions.reset(dispatch);
  72     }
  73
  74     handleData(data) {
  75         let { serviceID, diagramType } = data;
  76         let dispatch = action => store.dispatch(action);
  77
  78         if (
  79             serviceID !== this.prevServiceID ||
  80             diagramType !== this.prevDiagramType
  81         ) {
  82             this.prevServiceID = serviceID;
  83             this.prevDiagramType = diagramType;
  84             FlowsActions.fetchFlowArtifacts(dispatch, { ...data });
  85         }
  86     }
  87 }