@kiwicom/orbit-components/lib/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 strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "SeatLegend", {
  enumerable: true,
  get: function () {
    return _SeatLegend.default;
  }
});
exports.default = void 0;

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var React = _interopRequireWildcard(require("react"));

var _SeatLegend = _interopRequireDefault(require("./components/SeatLegend"));

var _Stack = _interopRequireDefault(require("../Stack"));

var _Text = _interopRequireDefault(require("../Text"));

var _useRandomId = require("../hooks/useRandomId");

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _SeatNormal = _interopRequireWildcard(require("./components/SeatNormal"));

var _SeatSmall = _interopRequireWildcard(require("./components/SeatSmall"));

var _helpers = require("./components/helpers");

var _SeatCircle = _interopRequireWildcard(require("./components/SeatCircle"));

var _consts = require("./consts");

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

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


StyledSeatWrapper.defaultProps = {
  theme: _defaultTheme.default
};

const StyledSeat = _styledComponents.default.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.default
};

const Seat = ({
  type = _consts.TYPES.DEFAULT,
  selected,
  onClick,
  size = _consts.SIZE_OPTIONS.MEDIUM,
  dataTest,
  price,
  label,
  title = "Seat",
  description = "Presents options for seating"
}) => {
  const randomId = (0, _useRandomId.useRandomIdSeed)();
  const titleId = randomId("title");
  const descrId = randomId("descr");
  const clickable = type !== _consts.TYPES.UNAVAILABLE;
  return /*#__PURE__*/React.createElement(_Stack.default, {
    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 === _consts.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 === _consts.SIZE_OPTIONS.SMALL ? /*#__PURE__*/React.createElement(_SeatSmall.default, {
    type: type,
    selected: selected,
    price: price,
    label: label
  }) : /*#__PURE__*/React.createElement(_SeatNormal.default, {
    type: type,
    selected: selected,
    price: price,
    label: label
  })), selected && clickable && /*#__PURE__*/React.createElement(_SeatCircle.default, {
    size: size,
    type: type
  })), price && !(selected && type === _consts.TYPES.UNAVAILABLE) && /*#__PURE__*/React.createElement(_Text.default, {
    size: "small",
    type: "secondary"
  }, price));
};

var _default = Seat;
exports.default = _default;