@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 _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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");

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

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

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

var 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
};

var Seat = function Seat(_ref3) {
  var _ref3$type = _ref3.type,
      type = _ref3$type === void 0 ? _consts.TYPES.DEFAULT : _ref3$type,
      selected = _ref3.selected,
      onClick = _ref3.onClick,
      _ref3$size = _ref3.size,
      size = _ref3$size === void 0 ? _consts.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 = (0, _useRandomId.useRandomIdSeed)();
  var titleId = randomId("title");
  var descrId = randomId("descr");
  var 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": "".concat(titleId, " ").concat(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;