@kiwicom/orbit-components/es/Seat/index.js

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

import styled, { css } from "styled-components";
import * as React from "react";
import SeatLegend from "./components/SeatLegend";
import Stack from "../Stack";
import Text from "../Text";
import { useRandomIdSeed } from "../hooks/useRandomId";
import defaultTheme from "../defaultTheme";
import SeatNormal, { StyledPath as StyledPathNormal, StyledStrokeNormal } from "./components/SeatNormal";
import SeatSmall, { StyledPath as StyledPathSmall, StyledStrokeSmall } from "./components/SeatSmall";
import { resolveHoverColor, resolveAccentColor, resolveFillColor, resolveFocusColor, resolveCloseIconColor } from "./components/helpers";
import SeatCircle, { StyledCirclePath } from "./components/SeatCircle";
import { SIZE_OPTIONS, TYPES } from "./consts";

const getSize = ({
  size
}) => {
  const height = {
    [SIZE_OPTIONS.SMALL]: "36px",
    [SIZE_OPTIONS.MEDIUM]: "46px"
  };
  const width = {
    [SIZE_OPTIONS.SMALL]: "32px",
    [SIZE_OPTIONS.MEDIUM]: "46px"
  };
  return `width: ${width[size]}; height: ${height[size]};`;
};

const StyledSeatWrapper = styled.div.withConfig({
  displayName: "Seat__StyledSeatWrapper",
  componentId: "sc-1m3bb67-0"
})(["", ""], ({
  type,
  selected,
  theme
}) => css(["position:relative;cursor:", ";", ";outline:none;font-family:", ";&:hover{", ",", "{", ";}", "{fill:", ";}}&:active,&:focus{", ",", "{fill:", ";}", ",", "{stroke:", ";}}&:focus:not(:focus-visible):not(:active){", ",", "{fill:", ";}", ",", "{stroke:", ";}}"], type !== TYPES.UNAVAILABLE && "pointer", getSize, theme.orbit.fontFamily, StyledPathNormal, StyledPathSmall, type !== TYPES.UNAVAILABLE && !selected && css(["fill:", ";"], resolveHoverColor), StyledCirclePath, resolveCloseIconColor({
  theme,
  type,
  hover: true
}), StyledPathNormal, StyledPathSmall, resolveFillColor({
  theme,
  type,
  selected,
  focus: true
}), StyledStrokeNormal, StyledStrokeSmall, resolveFocusColor, StyledPathNormal, StyledPathSmall, resolveFillColor, StyledStrokeNormal, StyledStrokeSmall, resolveAccentColor)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledSeatWrapper.defaultProps = {
  theme: defaultTheme
};
const StyledSeat = styled.svg.withConfig({
  displayName: "Seat__StyledSeat",
  componentId: "sc-1m3bb67-1"
})([""]); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledSeat.defaultProps = {
  theme: defaultTheme
};

const Seat = ({
  type = TYPES.DEFAULT,
  selected,
  onClick,
  size = SIZE_OPTIONS.MEDIUM,
  dataTest,
  price,
  label,
  title = "Seat",
  description = "Presents options for seating"
}) => {
  const randomId = useRandomIdSeed();
  const titleId = randomId("title");
  const descrId = randomId("descr");
  const clickable = type !== TYPES.UNAVAILABLE;
  return /*#__PURE__*/React.createElement(Stack, {
    inline: true,
    grow: false,
    spacing: "XXXSmall",
    direction: "column",
    align: "center"
  }, /*#__PURE__*/React.createElement(StyledSeatWrapper, {
    "data-test": dataTest,
    onClick: clickable ? onClick : undefined,
    tabIndex: clickable ? "0" : "-1",
    type: type,
    size: size,
    selected: selected
  }, /*#__PURE__*/React.createElement("svg", {
    viewBox: size === SIZE_OPTIONS.SMALL ? "0 0 32 36" : "0 0 46 46",
    "aria-labelledby": `${titleId} ${descrId}`,
    fill: "none",
    role: "img"
  }, /*#__PURE__*/React.createElement("title", {
    id: titleId
  }, title), /*#__PURE__*/React.createElement("desc", {
    id: descrId
  }, description), size === SIZE_OPTIONS.SMALL ? /*#__PURE__*/React.createElement(SeatSmall, {
    type: type,
    selected: selected,
    price: price,
    label: label
  }) : /*#__PURE__*/React.createElement(SeatNormal, {
    type: type,
    selected: selected,
    price: price,
    label: label
  })), selected && clickable && /*#__PURE__*/React.createElement(SeatCircle, {
    size: size,
    type: type
  })), price && !(selected && type === TYPES.UNAVAILABLE) && /*#__PURE__*/React.createElement(Text, {
    size: "small",
    type: "secondary"
  }, price));
};

export { SeatLegend };
export default Seat;