openecomp-ui/src/nfvo-components/editor/TabulatedEditor.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 classnames from 'classnames';
  18
  19 import VersionController from 'nfvo-components/panel/versionController/VersionController.jsx';
  20 import NavigationSideBar from 'nfvo-components/panel/NavigationSideBar.jsx';
  21
  22 export default class TabulatedEditor extends React.Component {
  23
  24         render() {
  25                 const {navigationBarProps, onToggle, onVersionSwitching, onCreate, onSave, onClose, onVersionControllerAction, onNavigate, children, meta} = this.props;
  26                 let {versionControllerProps} = this.props;
  27                 const {className = ''} = React.Children.only(children).props;
  28                 const child = this.prepareChild();
  29
  30                 if(onClose) {
  31                         versionControllerProps = {
  32                                 ...versionControllerProps,
  33                                 onClose: () => onClose(versionControllerProps)
  34                         };
  35                 }
  36                 return (
  37                         <div className='software-product-view'>
  38                                 <div className='software-product-navigation-side-bar'>
  39                                         <NavigationSideBar {...navigationBarProps} onSelect={onNavigate} onToggle={onToggle}/>
  40                                 </div>
  41                                 <div className='software-product-landing-view-right-side flex-column'>
  42                                         <VersionController
  43                                                 {...versionControllerProps}
  44                                                 onVersionSwitching={version => onVersionSwitching(version, meta)}
  45                                                 callVCAction={(action, version) => onVersionControllerAction(action, version, meta)}
  46                                                 onCreate={onCreate && this.handleCreate}
  47                                                 onSave={onSave && this.handleSave}/>
  48                                         <div className={classnames('content-area', `${className}`)}>
  49                                         {
  50                                                 child
  51                                         }
  52                                         </div>
  53                                 </div>
  54                         </div>
  55                 );
  56         }
  57
  58         prepareChild() {
  59                 const {onSave, onCreate, children} = this.props;
  60
  61                 const additionalChildProps = {ref: 'editor'};
  62                 if (onSave) {
  63                         additionalChildProps.onSave = onSave;
  64                 }
  65                 if (onCreate) {
  66                         additionalChildProps.onCreate = onCreate;
  67                 }
  68
  69                 const child = React.cloneElement(React.Children.only(children), additionalChildProps);
  70                 return child;
  71         }
  72
  73
  74
  75         handleSave = () => {
  76                 const childInstance = this.refs.editor.getWrappedInstance();
  77                 if (childInstance.save) {
  78                         return childInstance.save();
  79                 } else {
  80                         return this.props.onSave();
  81                 }
  82         };
  83
  84         handleCreate = () => {
  85                 const childInstance = this.refs.editor.getWrappedInstance();
  86                 if (childInstance.create) {
  87                         childInstance.create();
  88                 } else {
  89                         this.props.onCreate();
  90                 }
  91         }
  92 }