Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 2x 63x 3x 63x 18x 18x 20x 20x 24x 24x 1x 63x 63x 63x 2x | import React, { Component } from 'react';
import './flight-schedule-row.scss';
import Indigo from '../../assets/Indigo.png';
import AI from '../../assets/AI.png';
import EK from '../../assets/EK.png';
import CTA from '../../atom/cta';
import Image from '../../atom/image';
import PropTypes from 'prop-types';
/**
* Component renders single row within flight schedule table.
*/
const FlightScheduleTableRow = (props) => {
const handleClick = () => {
props.onRowClicked(props.flight);
}
let icon;
switch (props.acode) {
case 'Indigo':
icon = Indigo;
break;
case 'EK':
icon = EK;
break;
case 'AI':
icon = AI;
break;
default:
icon = AI;
}
const highlight = props.selected ? 'selected-row' : '';
const classes = `schedule-row ${highlight}`;
return (
<ul key={props.rowid} data-testid={`schedule-row-${props.index}`} className={classes} tabIndex="0" role="button" aria-label={`Flight ${props.flight} departs from ${props.from} at ${props.dtime} and arrives ${props.to} at ${props.atime}, total Flight duration is ${props.duration}.`}>
<li className="only-s-mobile">
<span className="color-highlight icon ">
<Image
source={icon}
alt={`Flight ${props.flight} logo`}
/>
{props.flight}
</span>
</li>
<li className="only-desktop"><span className="highlight">{props.dtime}</span> ({props.from})</li>
<li className="only-desktop"><span className="highlight">{props.atime}</span> ({props.to})</li>
<li className="only-mobile"><span className="highlight">{props.dtime} - {props.atime}</span></li>
<li className="only-mobile"><span >{props.from} - {props.to}</span></li>
<li className="only-mobile">{props.duration}</li>
<li className="not-s-mobile">
<span className="color-highlight icon ">
<Image
source={icon}
alt={`Flight ${props.flight} logo`}
/>
{props.flight}
</span>
</li>
<li className="only-desktop">{props.duration}</li>
<li>
<CTA
title="Select Flight"
ariaLabel={`Select Flight number ${props.flight}`}
disabled={props.selected}
onCtaClicked={handleClick}
tooltip={`Select Flight number ${props.flight}`}
/>
</li>
</ul>
);
}
FlightScheduleTableRow.propTypes = {
/** index within list */
index: PropTypes.number,
/** unique key within list */
rowid: PropTypes.string,
/** flight name */
flight: PropTypes.string,
/** origin code */
from: PropTypes.string,
/** destination code */
to: PropTypes.string,
/** departure time */
dtime: PropTypes.string,
/** arrival time */
atime: PropTypes.string,
/** airline code */
acode: PropTypes.string,
/** total duration of flight */
duration: PropTypes.string,
/** parent function where row click event will be passed */
onRowClicked: PropTypes.func,
/** if row is selected then value is true else false */
selected: PropTypes.bool
};
export default FlightScheduleTableRow; |