openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx

   1 /*
   2  * Copyright © 2016-2018 European Support Limited
   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 or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 import React from 'react';
  17 import PropTypes from 'prop-types';
  18
  19 import i18n from 'nfvo-utils/i18n/i18n.js';
  20 import Form from 'nfvo-components/input/validation/Form.jsx';
  21
  22 import FileDetails from './imagesEditorComponents/FileDetails.jsx';
  23 import ImageDetails from './imagesEditorComponents/ImageDetails.jsx';
  24 import { imageCustomValidations } from './ImageValidations.js';
  25
  26 class SoftwareProductComponentsImageEditorView extends React.Component {
  27     static propTypes = {
  28         onDataChanged: PropTypes.func.isRequired,
  29         onSubmit: PropTypes.func.isRequired,
  30         onCancel: PropTypes.func.isRequired
  31     };
  32
  33     render() {
  34         let {
  35             onCancel,
  36             onValidateForm,
  37             isReadOnlyMode,
  38             isFormValid,
  39             formReady,
  40             data = {},
  41             genericFieldInfo,
  42             qgenericFieldInfo,
  43             dataMap,
  44             onDataChanged,
  45             isManual,
  46             onQDataChanged
  47         } = this.props;
  48         let { id, fileName } = data;
  49         let editingMode = Boolean(id);
  50         return (
  51             <div>
  52                 {genericFieldInfo && (
  53                     <Form
  54                         ref={form => {
  55                             this.form = form;
  56                         }}
  57                         hasButtons={true}
  58                         btnClassName="sdc-modal__footer"
  59                         onSubmit={() => this.submit()}
  60                         onReset={() => onCancel()}
  61                         labledButtons={true}
  62                         isReadOnlyMode={isReadOnlyMode}
  63                         isValid={isFormValid}
  64                         formReady={formReady}
  65                         submitButtonText={
  66                             editingMode ? i18n('Save') : i18n('Create')
  67                         }
  68                         onValidateForm={() =>
  69                             onValidateForm(imageCustomValidations)
  70                         }
  71                         className="vsp-components-image-editor">
  72                         <div className="editor-data">
  73                             <FileDetails
  74                                 editingMode={editingMode}
  75                                 genericFieldInfo={genericFieldInfo}
  76                                 qgenericFieldInfo={qgenericFieldInfo}
  77                                 fileName={fileName}
  78                                 onDataChanged={onDataChanged}
  79                                 isManual={isManual}
  80                                 dataMap={dataMap}
  81                                 onQDataChanged={onQDataChanged}
  82                             />
  83                             {editingMode && (
  84                                 <ImageDetails
  85                                     dataMap={dataMap}
  86                                     qgenericFieldInfo={qgenericFieldInfo}
  87                                     onQDataChanged={onQDataChanged}
  88                                 />
  89                             )}
  90                         </div>
  91                     </Form>
  92                 )}
  93             </div>
  94         );
  95     }
  96     submit() {
  97         let { data, qdata, onSubmit, version } = this.props;
  98         onSubmit({ data, qdata, version });
  99     }
 100 }
 101
 102 export default SoftwareProductComponentsImageEditorView;