openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx

   1 import React from 'react';
   2 import classnames from 'classnames';
   3
   4 import VersionController from 'nfvo-components/panel/versionController/VersionController.jsx';
   5 import NavigationSideBar from 'nfvo-components/panel/NavigationSideBar.jsx';
   6
   7 export default class TabulatedEditor extends React.Component {
   8
   9         render() {
  10                 const {versionControllerProps, navigationBarProps, onToggle, onVersionSwitching, onCreate, onSave, onClose, onVersionControllerAction, onNavigate, children} = this.props;
  11                 const {className = ''} = React.Children.only(children).props;
  12                 const child = this.prepareChild();
  13
  14                 return (
  15                         <div className='software-product-view'>
  16                                 <div className='software-product-navigation-side-bar'>
  17                                         <NavigationSideBar {...navigationBarProps} onSelect={onNavigate} onToggle={onToggle}/>
  18                                 </div>
  19                                 <div className='software-product-landing-view-right-side flex-column'>
  20                                         <VersionController
  21                                                 {...versionControllerProps}
  22                                                 onVersionSwitching={version => onVersionSwitching(version)}
  23                                                 callVCAction={onVersionControllerAction}
  24                                                 onCreate={onCreate && this.handleCreate}
  25                                                 onSave={onSave && this.handleSave}
  26                                                 onClose={() => onClose(versionControllerProps)}/>
  27                                         <div className={classnames('content-area', `${className}`)}>
  28                                         {
  29                                                 child
  30                                         }
  31                                         </div>
  32                                 </div>
  33                         </div>
  34                 );
  35         }
  36
  37         prepareChild() {
  38                 const {onSave, onCreate, children} = this.props;
  39
  40                 const additionalChildProps = {ref: 'editor'};
  41                 if (onSave) {
  42                         additionalChildProps.onSave = onSave;
  43                 }
  44                 if (onCreate) {
  45                         additionalChildProps.onCreate = onCreate;
  46                 }
  47
  48                 const child = React.cloneElement(React.Children.only(children), additionalChildProps);
  49                 return child;
  50         }
  51
  52
  53
  54         handleSave = () => {
  55                 const childInstance = this.refs.editor.getWrappedInstance();
  56                 if (childInstance.save) {
  57                         return childInstance.save();
  58                 } else {
  59                         return this.props.onSave();
  60                 }
  61         };
  62
  63         handleCreate = () => {
  64                 const childInstance = this.refs.editor.getWrappedInstance();
  65                 if (childInstance.create) {
  66                         childInstance.create();
  67                 } else {
  68                         this.props.onCreate();
  69                 }
  70         }
  71 }