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

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

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

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

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

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

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

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

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

var _Heading = _interopRequireDefault(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 _handleKeyDown = _interopRequireDefault(require("../utils/handleKeyDown"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

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

StyledListChoiceIcon.defaultProps = {
  theme: _defaultTheme.default
};
var StyledListChoice = (0, _styledComponents.default)(function (_ref5) {
  var disabled = _ref5.disabled,
      theme = _ref5.theme,
      props = (0, _objectWithoutProperties2.default)(_ref5, ["disabled", "theme"]);
  return /*#__PURE__*/React.createElement("div", props);
}).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:", ";&:last-child{border:none;}&:focus,&:hover{outline:none;", ";}", "{width:auto;}"], function (_ref6) {
  var theme = _ref6.theme;
  return "".concat(theme.orbit.spaceSmall, " ").concat(theme.orbit.spaceMedium);
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.paletteCloudNormal;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.paletteWhite;
}, function (_ref9) {
  var disabled = _ref9.disabled;
  return disabled ? "not-allowed" : "pointer";
}, function (_ref10) {
  var disabled = _ref10.disabled,
      theme = _ref10.theme;
  return !disabled && (0, _styledComponents.css)(["background-color:", ";", " svg{color:", ";}"], theme.orbit.paletteCloudLight, StyledListChoiceIcon, theme.orbit.colorIconPrimary);
}, _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-", ":", ";"], _rtl.right, function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.spaceSmall;
});

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,
      disabled = props.disabled;

  var conditionalProps = _objectSpread({}, selectable ? {
    "aria-checked": selected
  } : null);

  return /*#__PURE__*/React.createElement(StyledListChoice, (0, _extends2.default)({
    onClick: !disabled ? onClick : null,
    "data-test": dataTest,
    onKeyDown: !disabled ? (0, _handleKeyDown.default)(onClick) : null,
    tabIndex: "0",
    disabled: disabled,
    "aria-disabled": disabled,
    role: selectable ? "checkbox" : "button"
  }, conditionalProps), icon && /*#__PURE__*/React.createElement(StyledListChoiceIcon, null, icon), /*#__PURE__*/React.createElement(StyledListChoiceContent, null, /*#__PURE__*/React.createElement(_Heading.default, {
    type: "title4"
  }, title), description && /*#__PURE__*/React.createElement(_Text.default, {
    type: "secondary",
    size: "small"
  }, description)), selectable && /*#__PURE__*/React.createElement(_Checkbox.default, {
    checked: selected,
    readOnly: true,
    disabled: disabled,
    tabIndex: "-1"
  }));
};

var _default = ListChoice;
exports.default = _default;