@kiwicom/orbit-components/es/Itinerary/ItinerarySegment/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import styled, { css } from "styled-components";
import { ItinerarySegmentContext } from "./context";
import Stack from "../../Stack";
import getSpacingToken from "../../common/getSpacingToken";
import defaultTheme from "../../defaultTheme";
import handleKeyDown from "../../utils/handleKeyDown";
const StyledWrapper = styled.div.withConfig({
  displayName: "ItinerarySegment__StyledWrapper",
  componentId: "sc-gil19c-0"
})(["", ""], ({
  theme,
  noElevation,
  actionable
}) => css(["cursor:", ";margin-bottom:", ";box-shadow:", ";border-radius:", ";padding:", " 0;", ""], actionable && "pointer", getSpacingToken, !noElevation && theme.orbit.boxShadowFixed, theme.orbit.borderRadiusLarge, theme.orbit.spaceSmall, actionable && css(["&:hover,&:focus{box-shadow:", ";outline:none;}"], !noElevation && theme.orbit.boxShadowActionActive))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledWrapper.defaultProps = {
  theme: defaultTheme
};

const ItinerarySegment = ({
  children,
  spaceAfter,
  dataTest,
  noElevation,
  actionable = true,
  onClick
}) => {
  const content = React.Children.toArray(children);
  const [opened, setOpened] = React.useState(false);
  const parts = /*#__PURE__*/React.createElement(Stack, {
    direction: "column",
    spacing: "small"
  }, React.Children.map(children, (el, i) => {
    return /*#__PURE__*/React.createElement(ItinerarySegmentContext.Provider, {
      value: {
        index: i,
        opened,
        toggleOpened: () => setOpened(prev => !prev),
        last: i === React.Children.count(children) - 1,
        isNextHidden: content[i + 1] && content[i + 1].props.hidden,
        count: React.Children.count(children),
        isHidden: el.props.hidden,
        noElevation: !!noElevation
      }
    }, el);
  }));

  const handleClick = ev => {
    if (onClick) onClick(ev);
    setOpened(prev => !prev);
  };

  return /*#__PURE__*/React.createElement(StyledWrapper, {
    actionable: actionable,
    spaceAfter: spaceAfter,
    "data-test": dataTest,
    tabIndex: 0,
    onKeyDown: handleKeyDown(() => setOpened(prev => !prev)),
    onClick: handleClick,
    noElevation: noElevation
  }, parts);
};

export default ItinerarySegment;