digitransit-ui/app/component/itinerary/ItinerarySummary.js

import PropTypes from 'prop-types';
import React from 'react';
import cx from 'classnames';
import TimeSummary from './TimeSummary';
import StreetSummary from './StreetSummary';
import { itineraryShape } from '../../util/shapes';

function ItinerarySummary({
  itinerary,
  walking,
  biking,
  driving,
  futureText,
  isMultiRow,
  isMobile,
  hideBottomDivider,
}) {
  return (
    <div className="itinerary-summary">
      {!isMobile && <div className="divider-top" />}
      <TimeSummary
        duration={itinerary.duration}
        className="duration--itinerary-summary"
        startTime={itinerary.start}
        endTime={itinerary.end}
        futureText={futureText}
        multiRow={isMultiRow}
      />
      {walking?.distance > 0 && (
        <StreetSummary
          className="distance--itinerary-summary"
          distance={walking.distance}
          duration={walking.duration}
          mode="walk"
        />
      )}
      {biking?.distance > 0 && (
        <StreetSummary
          className="distance--itinerary-summary"
          icon="icon_cyclist"
          distance={biking.distance}
          duration={biking.duration}
          mode="bike"
        />
      )}
      {driving?.distance > 0 && (
        <StreetSummary
          className="distance--itinerary-summary driving-summary"
          icon="icon_car-withoutBox"
          distance={driving.distance}
          duration={driving.duration}
          mode="car"
        />
      )}
      {!hideBottomDivider && <div className={cx('divider-bottom')} />}
    </div>
  );
}

ItinerarySummary.description = () =>
  "Displays itinerary summary; itinerary's duration and walk distance";

const summaryShape = PropTypes.shape({
  duration: PropTypes.number,
  distance: PropTypes.number,
});

ItinerarySummary.propTypes = {
  itinerary: itineraryShape.isRequired,
  walking: summaryShape,
  biking: summaryShape,
  driving: summaryShape,
  futureText: PropTypes.string,
  isMultiRow: PropTypes.bool,
  isMobile: PropTypes.bool,
  hideBottomDivider: PropTypes.bool,
};

ItinerarySummary.defaultProps = {
  walking: {},
  biking: {},
  driving: {},
  futureText: '',
  isMultiRow: false,
  isMobile: false,
  hideBottomDivider: false,
};

ItinerarySummary.displayName = 'ItinerarySummary';

export default ItinerarySummary;