gerrit.onap Code Review - sdc/sdc-workflow-designer.git/blob

   1 /*
   2 * Copyright © 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 import { Localize, Translate } from 'react-redux-i18n';
  19
  20 const VersionListItem = ({ data, onSelectVersion, isHeader, isSelected }) => {
  21     let { modificationTime, name, state, description } = data;
  22     const modificationText = !isHeader ? (
  23         <Localize value={modificationTime} dateFormat="date.long" />
  24     ) : (
  25         <Translate value="workflow.overview.lastEdited" />
  26     );
  27
  28     function onVersionClick() {
  29         onSelectVersion(data);
  30     }
  31
  32     return (
  33         <div
  34             data-test-id="version-item-row"
  35             className={`version-item-row ${
  36                 isHeader ? 'header-row' : 'clickable'
  37             } ${isSelected ? 'selected' : ''}`}
  38             onClick={onVersionClick}>
  39             <div
  40                 className={`version-item-field ${
  41                     isHeader ? 'header-field item-version' : 'item-version'
  42                 }`}>
  43                 {name}
  44             </div>
  45             <div
  46                 className={`version-item-field ${
  47                     isHeader ? 'header-field item-status' : 'item-status'
  48                 }`}>
  49                 {state}
  50             </div>
  51             <div
  52                 className={`version-item-field ${
  53                     isHeader ? 'header-field' : 'item-last-edited'
  54                 }`}>
  55                 {modificationText}
  56             </div>
  57             <div
  58                 className={`version-item-field ${
  59                     isHeader ? 'header-field' : 'item-description'
  60                 }`}>
  61                 <div className="description-text">{description}</div>
  62             </div>
  63         </div>
  64     );
  65 };
  66
  67 VersionListItem.propTypes = {
  68     data: PropTypes.object,
  69     onSelectVersion: PropTypes.func,
  70     isHeader: PropTypes.bool,
  71     isSelected: PropTypes.bool
  72 };
  73
  74 export default VersionListItem;