@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.

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import cx from "clsx";
import SeatLegend from "./components/SeatLegend";
import Stack from "../Stack";
import Text from "../Text";
import { useRandomIdSeed } from "../hooks/useRandomId";
import SeatNormal from "./components/SeatNormal";
import SeatSmall from "./components/SeatSmall";
import SeatCircle from "./components/SeatCircle";
import { SIZE_OPTIONS, TYPES } from "./consts";
const Seat = ({
  type = TYPES.DEFAULT,
  selected = false,
  onClick,
  size = SIZE_OPTIONS.MEDIUM,
  dataTest,
  id,
  price,
  label,
  title,
  description,
  "aria-labelledby": ariaLabelledBy = ""
}) => {
  const randomId = useRandomIdSeed();
  const titleId = title ? randomId("title") : "";
  const descrId = description ? randomId("descr") : "";
  const isAvailable = type !== TYPES.UNAVAILABLE;
  const clickable = isAvailable && onClick !== undefined;
  const commonProps = {
    className: cx("orbit-seat font-base group relative", isAvailable && "cursor-pointer", size === SIZE_OPTIONS.SMALL ? "w-800 h-[36px]" : "size-[46px]"),
    id,
    "data-test": dataTest
  };
  const seatContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
    viewBox: size === SIZE_OPTIONS.SMALL ? "0 0 32 36" : "0 0 46 46",
    "aria-labelledby": `${[ariaLabelledBy, titleId, descrId].join(" ").trim()}` || undefined,
    fill: "none",
    role: "img"
  }, title && /*#__PURE__*/React.createElement("title", {
    id: titleId
  }, title), description && /*#__PURE__*/React.createElement("desc", {
    id: descrId
  }, description), size === SIZE_OPTIONS.SMALL ? /*#__PURE__*/React.createElement(SeatSmall, {
    type: type,
    selected: selected,
    label: label
  }) : /*#__PURE__*/React.createElement(SeatNormal, {
    type: type,
    selected: selected,
    label: label
  })), selected && isAvailable && /*#__PURE__*/React.createElement(SeatCircle, {
    size: size,
    type: type
  }));
  return /*#__PURE__*/React.createElement(Stack, {
    inline: true,
    grow: false,
    spacing: "50",
    direction: "column",
    align: "center"
  }, clickable ? /*#__PURE__*/React.createElement("button", _extends({}, commonProps, {
    onClick: onClick,
    type: "button",
    "aria-pressed": selected
  }), seatContent) : /*#__PURE__*/React.createElement("div", _extends({}, commonProps, {
    role: "button",
    "aria-pressed": selected,
    "aria-disabled": "true"
  }), seatContent), price && !(selected && !isAvailable) && /*#__PURE__*/React.createElement(Text, {
    size: "small",
    type: "secondary"
  }, price));
};
export { SeatLegend };
export default Seat;