skyquake/plugins/composer/src/src/components/EditorForwardingGraph/mapConnectionPoint.js

   1 /**
   2  * Created by onvelocity on 3/4/16.
   3  */
   4 'use strict'
   5 import React from 'react'
   6 import onCutDelegateToRemove from './onCutDelegateToRemove'
   7 import onHoverHighlightConnectionPoint from './onHoverHighlightConnectionPoint'
   8 import onClickSelectAndShowInDetailsPanel from './onClickSelectAndShowInDetailsPanel'
   9 export default function mapConnectionPoint(style, addLine, cpRef, i) {
  10         return (
  11                 <div key={cpRef.uid || i} className="rsp">
  12                         {addLine ? <div className="rsp-line"></div> : null}
  13                         <div className={cpRef.className} data-uid={cpRef.uid} style={style}
  14                                  onCut={onCutDelegateToRemove.bind(null, cpRef)}
  15                                  onMouseEnter={onHoverHighlightConnectionPoint.bind(null, cpRef.cpNumber)}
  16                                  onMouseLeave={onHoverHighlightConnectionPoint.bind(null, cpRef.cpNumber)}
  17                                  onClick={onClickSelectAndShowInDetailsPanel.bind(null, cpRef)}>
  18                                 <small>{cpRef.cpNumber || cpRef.vnfdConnectionPointName}</small>
  19                         </div>
  20                 </div>
  21         );
  22 }