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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

var _Heading = _interopRequireWildcard(require("../Heading"));

var _Checkbox = _interopRequireWildcard(require("../Checkbox"));

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

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

var _Icon = require("../Icon");

var _rtl = require("../utils/rtl");

var _keyMaps = _interopRequireDefault(require("../common/keyMaps"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

var StyledListChoiceIcon = _styledComponents.default.div.withConfig({
  displayName: "ListChoice__StyledListChoiceIcon",
  componentId: "sc-1y53xes-0"
})(["display:flex;align-self:flex-start;flex:0 0 auto;margin-", ":", ";svg{width:", ";height:", ";color:", ";transition:color ", " ease-in-out;}"], _rtl.right, function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.spaceSmall;
}, (0, _Icon.getSize)("small"), (0, _Icon.getSize)("small"), function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.colorIconPrimary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.durationFast;
});

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

var StyledListChoice = _styledComponents.default.div.withConfig({
  displayName: "ListChoice__StyledListChoice",
  componentId: "sc-1y53xes-1"
})(["display:flex;align-items:center;box-sizing:border-box;width:100%;padding:", ";border-bottom:1px solid ", ";background-color:", ";transition:background-color 0.15s ease-in-out;cursor:pointer;&:last-child{border:none;}&:focus,&:hover{background-color:", ";", " svg{color:", ";}outline:none;}", "{width:auto;}"], function (_ref4) {
  var theme = _ref4.theme;
  return "".concat(theme.orbit.spaceSmall, " ").concat(theme.orbit.spaceMedium);
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.paletteCloudNormal;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.paletteWhite;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.paletteCloudLight;
}, StyledListChoiceIcon, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.colorIconAttention;
}, _Checkbox.Label);

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

var StyledListChoiceContent = _styledComponents.default.div.withConfig({
  displayName: "ListChoice__StyledListChoiceContent",
  componentId: "sc-1y53xes-2"
})(["display:flex;flex-direction:column;justify-content:center;width:100%;padding-", ":", ";", "{line-height:", ";}"], _rtl.right, function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.spaceSmall;
}, _Heading.StyledHeading, function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.lineHeightText;
});

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

var ListChoice = function ListChoice(props) {
  var dataTest = props.dataTest,
      icon = props.icon,
      title = props.title,
      description = props.description,
      selectable = props.selectable,
      onClick = props.onClick,
      selected = props.selected;

  var handleKeyDown = function handleKeyDown(ev) {
    if (onClick) {
      if (ev.keyCode === _keyMaps.default.ENTER) {
        onClick(ev);
      } else if (ev.keyCode === _keyMaps.default.SPACE) {
        ev.preventDefault();
        onClick(ev);
      }
    }
  };

  return React.createElement(StyledListChoice, {
    onClick: onClick,
    "data-test": dataTest,
    onKeyDown: handleKeyDown,
    tabIndex: "0",
    role: "button"
  }, icon && React.createElement(StyledListChoiceIcon, null, icon), React.createElement(StyledListChoiceContent, null, React.createElement(_Heading.default, {
    type: "title4",
    element: "div"
  }, title), description && React.createElement(_Text.default, {
    type: "secondary",
    size: "small"
  }, description)), selectable && React.createElement(_Checkbox.default, {
    checked: selected,
    readOnly: true,
    tabIndex: "-1"
  }));
};

var _default = ListChoice;
exports.default = _default;