@kiwicom/orbit-components/es/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.

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

import * as React from "react";
import styled from "styled-components";
import defaultTheme from "../../defaultTheme";
import TileHeader, { StyledIconRight } from "./TileHeader";
import TileExpandable from "./TileExpandable";
import KEY_CODE_MAP from "../../common/keyMaps";
export var StyledTile = styled(function (_ref) {
  var theme = _ref.theme,
      icon = _ref.icon,
      title = _ref.title,
      external = _ref.external,
      props = _objectWithoutProperties(_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;
}, StyledIconRight, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.paletteInkLightHover;
});
StyledTile.defaultProps = {
  theme: defaultTheme
};

var Tile = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(Tile, _React$PureComponent);

  var _super = _createSuper(Tile);

  function Tile() {
    var _this;

    _classCallCheck(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));

    _defineProperty(_assertThisInitialized(_this), "state", {
      expanded: false,
      initialExpanded: false
    });

    _defineProperty(_assertThisInitialized(_this), "setExpanded", function (_ref9) {
      var expanded = _ref9.expanded,
          initialExpanded = _ref9.initialExpanded;

      _this.setState({
        expanded: expanded,
        initialExpanded: initialExpanded
      });
    });

    _defineProperty(_assertThisInitialized(_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
    });

    _defineProperty(_assertThisInitialized(_this), "toggleExpandable", function () {
      if (_this.isExpandable()) {
        _this.setExpanded({
          expanded: !_this.state.expanded,
          initialExpanded: false
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleClick", function (ev) {
      var onClick = _this.props.onClick;

      _this.toggleExpandable();

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

    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (ev) {
      var onClick = _this.props.onClick;

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

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

        _this.toggleExpandable();

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

    return _this;
  }

  _createClass(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, {
        icon: icon,
        title: title,
        description: description,
        external: external,
        onClick: this.handleClick,
        isExpandable: isExpandable,
        isExpanded: isExpanded
      }), isExpandable && children && /*#__PURE__*/React.createElement(TileExpandable, {
        expanded: isExpanded,
        initialExpanded: this.state.initialExpanded
      }, children));
    }
  }]);

  return Tile;
}(React.PureComponent);

export default Tile;