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
  26         componentDidMount() {
  27                 let element = ReactDOM.findDOMNode(this);
  28                 element.addEventListener('click', event => {
  29                         if (event.target.tagName === 'A') {
  30                                 event.preventDefault();
  31                         }
  32                 });
  33                 ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType =>
  34                         element.addEventListener(eventType, event => event.stopPropagation())
  35                 );
  36         }
  37
  38         render() {
  39                 return <FlowsListEditor/>;
  40         }
  41 }
  42
  43 export default class DiagramPunchOut {
  44
  45         render({options: {data, apiRoot, apiHeaders}, onEvent}, element) {
  46
  47                 if (!this.isConfigSet) {
  48                         Configuration.setATTApiRoot(apiRoot);
  49                         Configuration.setATTApiHeaders(apiHeaders);
  50                         this.isConfigSet = true;
  51                 }
  52
  53                 this.onEvent = onEvent;
  54                 this.handleData(data);
  55
  56                 if (!this.rendered) {
  57                         ReactDOM.render(<Application><div className='dox-ui'><FlowsListEditorPunchOutWrapper/></div></Application>, element);
  58                         this.rendered = true;
  59                 }
  60         }
  61
  62         unmount(element) {
  63                 let dispatch = action => store.dispatch(action);
  64                 ReactDOM.unmountComponentAtNode(element);
  65                 FlowsActions.reset(dispatch);
  66         }
  67
  68         handleData(data) {
  69                 let {serviceID, diagramType} = data;
  70                 let dispatch = action => store.dispatch(action);
  71
  72                 if (serviceID !== this.prevServiceID || diagramType !== this.prevDiagramType) {
  73                         this.prevServiceID = serviceID;
  74                         this.prevDiagramType = diagramType;
  75                         FlowsActions.fetchFlowArtifacts(dispatch, {...data});
  76                 }
  77         }
  78 }