openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/SortableModuleFileList.js

   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 isEqual from 'lodash/isEqual';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import SortableListItem from './SortableListItem.js';
  20 import { fileTypes } from '../HeatSetupConstants.js';
  21
  22 import Button from 'sdc-ui/lib/react/Button.js';
  23 import ModuleFile from './ModuleFile.js';
  24
  25 class SortableModuleFileList extends React.Component {
  26     state = {
  27         draggingIndex: null,
  28         data: this.props.modules
  29     };
  30
  31     componentDidUpdate() {
  32         if (!isEqual(this.state.data, this.props.modules)) {
  33             /* eslint-disable-next-line */
  34             this.setState({
  35                 data: this.props.modules
  36             });
  37         }
  38     }
  39
  40     render() {
  41         let {
  42             unassigned,
  43             onModuleRename,
  44             onModuleDelete,
  45             onModuleAdd,
  46             onBaseAdd,
  47             onModuleFileTypeChange,
  48             onToggleVolFilesDisplay,
  49             isBaseExist,
  50             isReadOnlyMode
  51         } = this.props;
  52         const childProps = module => ({
  53             module,
  54             onModuleRename,
  55             onModuleDelete,
  56             onModuleFileTypeChange: (value, type) => {
  57                 if (
  58                     type === fileTypes.VOL.label ||
  59                     type === fileTypes.VOL_ENV.label
  60                 ) {
  61                     onToggleVolFilesDisplay({ module, value: false });
  62                 }
  63                 onModuleFileTypeChange({ module, value, type });
  64             },
  65
  66             files: unassigned,
  67             displayVolumes: Boolean(
  68                 module.vol || module.volEnv || module.showVolFiles
  69             ),
  70             onToggleVolFilesDisplay: value =>
  71                 onToggleVolFilesDisplay({ module, value })
  72         });
  73
  74         let listItems = this.state.data.map(function(item, i) {
  75             return (
  76                 <SortableListItem
  77                     key={i}
  78                     updateState={data => this.setState(data)}
  79                     items={this.state.data}
  80                     draggingIndex={this.state.draggingIndex}
  81                     sortId={i}
  82                     outline="list">
  83                     <ModuleFile
  84                         {...childProps(item)}
  85                         isReadOnlyMode={this.props.isReadOnlyMode}
  86                     />
  87                 </SortableListItem>
  88             );
  89         }, this);
  90
  91         return (
  92             <div
  93                 className={`modules-list-wrapper ${
  94                     listItems.length > 0 ? 'modules-list-wrapper-divider' : ''
  95                 }`}>
  96                 <div className="modules-list-header">
  97                     {!isBaseExist && (
  98                         <div>
  99                             <Button
 100                                 btnType="link"
 101                                 onClick={onBaseAdd}
 102                                 disabled={
 103                                     isReadOnlyMode || unassigned.length === 0
 104                                 }>
 105                                 {i18n('Add Base')}
 106                             </Button>
 107                         </div>
 108                     )}
 109                     <div>
 110                         <Button
 111                             btnType="link"
 112                             onClick={onModuleAdd}
 113                             disabled={
 114                                 isReadOnlyMode || unassigned.length === 0
 115                             }>
 116                             {i18n('Add Module')}
 117                         </Button>
 118                     </div>
 119                 </div>
 120                 {listItems.length > 0 && <ul>{listItems}</ul>}
 121             </div>
 122         );
 123     }
 124 }
 125
 126 export default SortableModuleFileList;