@kiwicom/orbit-components/lib/deprecated/Tile/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 = exports.StyledTile = void 0;

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

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

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

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

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

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

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

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

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

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

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

var _TileHeader = _interopRequireWildcard(require("./TileHeader"));

var _TileExpandable = _interopRequireDefault(require("./TileExpandable"));

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

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var StyledTile = (0, _styledComponents.default)(function (_ref) {
  var theme = _ref.theme,
      icon = _ref.icon,
      title = _ref.title,
      external = _ref.external,
      props = (0, _objectWithoutProperties2.default)(_ref, ["theme", "icon", "title", "external"]);
  var Component = props.href ? "a" : "div";
  return /*#__PURE__*/React.createElement(Component, props, props.children);
}).withConfig({
  displayName: "Tile__StyledTile",
  componentId: "sc-192fw13-0"
})(["display:block;width:100%;box-sizing:border-box;font-family:", ";text-decoration:none;background:", ";border-radius:", ";box-shadow:", ";transition:box-shadow ", " ease-in-out;&:hover,&:focus{outline:0;box-shadow:", ";}&:hover ", "{color:", ";}"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.fontFamily;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.paletteWhite;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.boxShadowAction;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.durationFast;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.boxShadowActionActive;
}, _TileHeader.StyledIconRight, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.paletteInkLightHover;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

exports.StyledTile = StyledTile;
StyledTile.defaultProps = {
  theme: _defaultTheme.default
};

var Tile = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inherits2.default)(Tile, _React$PureComponent);

  var _super = _createSuper(Tile);

  function Tile() {
    var _this;

    (0, _classCallCheck2.default)(this, Tile);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
      expanded: false,
      initialExpanded: false
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setExpanded", function (_ref9) {
      var expanded = _ref9.expanded,
          initialExpanded = _ref9.initialExpanded;

      _this.setState({
        expanded: expanded,
        initialExpanded: initialExpanded
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isExpandable", function () {
      var _this$props = _this.props,
          href = _this$props.href,
          children = _this$props.children;
      return !!(!href && children); // Tile is expandable if - not href && children are passed
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleExpandable", function () {
      if (_this.isExpandable()) {
        _this.setExpanded({
          expanded: !_this.state.expanded,
          initialExpanded: false
        });
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (ev) {
      var onClick = _this.props.onClick;

      _this.toggleExpandable();

      if (onClick) {
        onClick(ev);
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (ev) {
      var onClick = _this.props.onClick;

      if (ev.keyCode === _keyMaps.default.ENTER) {
        _this.toggleExpandable();

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

        _this.toggleExpandable();

        if (onClick) {
          onClick(ev);
        }
      }
    });
    return _this;
  }

  (0, _createClass2.default)(Tile, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var expanded = this.props.expanded;
      this.setExpanded({
        expanded: expanded,
        initialExpanded: expanded
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          href = _this$props2.href,
          external = _this$props2.external,
          icon = _this$props2.icon,
          title = _this$props2.title,
          description = _this$props2.description,
          children = _this$props2.children,
          dataTest = _this$props2.dataTest;
      var isExpandable = this.isExpandable();
      var isExpanded = this.state.expanded;
      return /*#__PURE__*/React.createElement(StyledTile, {
        target: !isExpandable && external ? "_blank" : undefined,
        rel: !isExpandable && external ? "noopener noreferrer" : undefined,
        href: !isExpandable ? href : undefined,
        "data-test": dataTest,
        onKeyDown: this.handleKeyDown,
        tabIndex: href ? undefined : "0",
        role: href ? undefined : "button"
      }, /*#__PURE__*/React.createElement(_TileHeader.default, {
        icon: icon,
        title: title,
        description: description,
        external: external,
        onClick: this.handleClick,
        isExpandable: isExpandable,
        isExpanded: isExpanded
      }), isExpandable && children && /*#__PURE__*/React.createElement(_TileExpandable.default, {
        expanded: isExpanded,
        initialExpanded: this.state.initialExpanded
      }, children));
    }
  }]);
  return Tile;
}(React.PureComponent);

var _default = Tile;
exports.default = _default;