openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/ArtifactOrNestedFileList.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 i18n from 'nfvo-utils/i18n/i18n.js';
  18 import Button from 'sdc-ui/lib/react/Button.js';
  19 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  20 import SelectInput from 'nfvo-components/input/SelectInput.jsx';
  21
  22 const NestedList = ({ selected }) => (
  23     <ul className="nested-list">
  24         {selected.map(nested => (
  25             <li key={nested} className="nested-list-item">
  26                 {nested}
  27             </li>
  28         ))}
  29     </ul>
  30 );
  31
  32 const ArtifactOrNestedFileList = ({
  33     type,
  34     title,
  35     selected,
  36     options,
  37     onSelectChanged,
  38     onAddAllUnassigned,
  39     isReadOnlyMode,
  40     headerClassName
  41 }) => (
  42     <div
  43         className={`artifact-files ${
  44             type === 'nested' ? 'nested' : ''
  45         } ${headerClassName} `}>
  46         <div className="artifact-files-header">
  47             <span>
  48                 {type === 'artifact' && (
  49                     <SVGIcon
  50                         color="primary"
  51                         name="artifacts"
  52                         iconClassName="heat-setup-module-icon"
  53                     />
  54                 )}
  55                 {`${title}`}
  56             </span>
  57             {type === 'artifact' && (
  58                 <Button
  59                     disabled={isReadOnlyMode}
  60                     btnType="link"
  61                     className="add-all-unassigned"
  62                     onClick={onAddAllUnassigned}>
  63                     {i18n('Add All Unassigned Files')}
  64                 </Button>
  65             )}
  66         </div>
  67         {type === 'nested' ? (
  68             <NestedList selected={selected} />
  69         ) : (
  70             <SelectInput
  71                 options={options}
  72                 onMultiSelectChanged={onSelectChanged || (() => {})}
  73                 value={selected}
  74                 clearable={false}
  75                 placeholder={i18n('Add Artifact')}
  76                 multi
  77             />
  78         )}
  79     </div>
  80 );
  81
  82 export default ArtifactOrNestedFileList;