@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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
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";

var getSize = function getSize(_ref) {
  var _height, _width;

  var size = _ref.size;
  var height = (_height = {}, _defineProperty(_height, SIZE_OPTIONS.SMALL, "36px"), _defineProperty(_height, SIZE_OPTIONS.MEDIUM, "46px"), _height);
  var width = (_width = {}, _defineProperty(_width, SIZE_OPTIONS.SMALL, "32px"), _defineProperty(_width, SIZE_OPTIONS.MEDIUM, "46px"), _width);
  return "width: ".concat(width[size], "; height: ").concat(height[size], ";");
};

var StyledSeatWrapper = styled.div.withConfig({
  displayName: "Seat__StyledSeatWrapper",
  componentId: "sc-1m3bb67-0"
})(["", ""], function (_ref2) {
  var type = _ref2.type,
      selected = _ref2.selected,
      theme = _ref2.theme;
  return 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: theme,
    type: type,
    hover: true
  }), StyledPathNormal, StyledPathSmall, resolveFillColor({
    theme: theme,
    type: type,
    selected: 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
};
var 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
};

var Seat = function Seat(_ref3) {
  var _ref3$type = _ref3.type,
      type = _ref3$type === void 0 ? TYPES.DEFAULT : _ref3$type,
      selected = _ref3.selected,
      onClick = _ref3.onClick,
      _ref3$size = _ref3.size,
      size = _ref3$size === void 0 ? SIZE_OPTIONS.MEDIUM : _ref3$size,
      dataTest = _ref3.dataTest,
      price = _ref3.price,
      label = _ref3.label,
      _ref3$title = _ref3.title,
      title = _ref3$title === void 0 ? "Seat" : _ref3$title,
      _ref3$description = _ref3.description,
      description = _ref3$description === void 0 ? "Presents options for seating" : _ref3$description;
  var randomId = useRandomIdSeed();
  var titleId = randomId("title");
  var descrId = randomId("descr");
  var 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": "".concat(titleId, " ").concat(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;