@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/bookingTypes/MulticityOverlayTrip.js

Smart FAQ

// @flow

import * as React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import TextLink from '@kiwicom/orbit-components/lib/TextLink';
import Translate from '@kiwicom/nitro/lib/components/Translate';

import MulticityTrip from './MulticityTrip';
import type { MulticityOverlayTrip_booking } from './__generated__/MulticityOverlayTrip_booking.graphql';

type Props = {|
  booking: MulticityOverlayTrip_booking,
|};

type State = {|
  overlapping: boolean,
  visibleTripsHeight: number,
|};

class MulticityOverlayTrip extends React.Component<Props, State> {
  constructor(props) {
    super(props);
    this.state = {
      overlapping: true,
      visibleTripsHeight: 0,
    };
  }

  toggleOverlapping = () => {
    this.setState(prevState => ({ overlapping: !prevState.overlapping }));
  };

  setVisibleTripsHeight = (height: number) => {
    this.setState({ visibleTripsHeight: height });
  };

  render() {
    const { booking } = this.props;
    const { trips } = booking;
    const buttonText = this.state.overlapping ? (
      <Translate t="smartfaq.single_booking_page.show_more_trips" />
    ) : (
      <Translate t="smartfaq.single_booking_page.show_less_trips" />
    );

    return trips && trips.length > 2 ? (
      <div>
        <div
          className={
            this.state.overlapping
              ? 'multicityWrapper'
              : 'multicityWrapper multicityWrapperIsActive'
          }
        >
          <MulticityTrip
            booking={booking}
            setVisibleTripsHeight={this.setVisibleTripsHeight}
          />
          <div
            className={
              this.state.overlapping
                ? 'multicityOverlay'
                : 'multicityOverlay multicityOverlayIsActive'
            }
          />
        </div>
        <Stack flex justify="center" spaceAfter="large">
          <TextLink
            onClick={this.toggleOverlapping}
            type="secondary"
            size="normal"
            dataTest="toggleDisplayedTrips"
          >
            {buttonText}
          </TextLink>
        </Stack>
        <style jsx>
          {`
            .multicityWrapper {
              position: relative;
              height: ${this.state.visibleTripsHeight}px;
              max-height: ${this.state.visibleTripsHeight}px;
              overflow: hidden;
            }
            .multicityWrapperIsActive {
              height: auto;
              max-height: 10000px; /* workaround for transition with height: auto */
            }
            .multicityOverlay {
              display: flex;
              justify-content: center;
              align-items: flex-end;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: inherit;
              pointer-events: none;
              background: linear-gradient(
                rgba(255, 255, 255, 0),
                rgba(255, 255, 255, 0) 40%,
                rgba(255, 255, 255, 1)
              );
              z-index: 1;
            }
            @keyframes overlay {
              0% {
                opacity: 1;
              }
              100% {
                opacity: 0;
                z-index: -1;
              }
            }
          `}
        </style>
      </div>
    ) : (
      <MulticityTrip booking={booking} />
    );
  }
}

export default createFragmentContainer(
  MulticityOverlayTrip,
  graphql`
    fragment MulticityOverlayTrip_booking on BookingMulticity {
      trips {
        duration
      }
      ...MulticityTrip_booking
    }
  `,
);