@kiwicom/orbit-components/es/Tile/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import * as React from "react";
import styled from "styled-components";
import defaultTokens from "../defaultTokens";
import TileHeader, { StyledIconRight } from "./TileHeader";
import TileExpandable from "./TileExpandable";
export const StyledTile = styled((_ref) => {
  let {
    theme,
    icon,
    title,
    external
  } = _ref,
      props = _objectWithoutProperties(_ref, ["theme", "icon", "title", "external"]);

  const Component = props.href ? "a" : "div";
  return React.createElement(Component, props, props.children);
}).withConfig({
  displayName: "Tile__StyledTile",
  componentId: "sc-15i01z6-0"
})(["display:block;box-sizing:border-box;font-family:", ";text-decoration:none;background:", ";border-radius:", ";border:solid 1px ", ";box-shadow:0 2px 4px 0 rgba(23,27,30,0.1);transition:box-shadow ", " ease-in-out;&:hover,&:focus{outline:0;box-shadow:0 4px 12px 0 rgba(23,27,30,0.1);}&:hover ", "{color:", ";}"], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.paletteWhite, ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  theme
}) => theme.orbit.paletteCloudNormal, ({
  theme
}) => theme.orbit.durationFast, StyledIconRight, ({
  theme
}) => theme.orbit.paletteInkLightHover);
StyledTile.defaultProps = {
  theme: defaultTokens
};

class Tile extends React.PureComponent {
  constructor(...args) {
    super(...args);

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

    _defineProperty(this, "setExpanded", ({
      expanded,
      initialExpanded
    }) => {
      this.setState({
        expanded,
        initialExpanded
      });
    });

    _defineProperty(this, "isExpandable", () => {
      const {
        href,
        children
      } = this.props;
      return !!(!href && children); // Tile is expandable if - not href && children are passed
    });

    _defineProperty(this, "handleClick", ev => {
      const {
        onClick
      } = this.props;

      if (this.isExpandable()) {
        this.setExpanded({
          expanded: !this.state.expanded,
          initialExpanded: false
        });
      } else if (onClick) {
        onClick(ev);
      }
    });
  }

  componentDidMount() {
    const {
      expanded
    } = this.props;
    this.setExpanded({
      expanded,
      initialExpanded: expanded
    });
  }

  render() {
    const {
      href,
      external,
      icon,
      title,
      description,
      children,
      dataTest
    } = this.props;
    const isExpandable = this.isExpandable();
    const isExpanded = this.state.expanded;
    return React.createElement(StyledTile, {
      target: !isExpandable && external ? "_blank" : undefined,
      href: !isExpandable ? href : undefined,
      "data-test": dataTest
    }, React.createElement(TileHeader, {
      icon: icon,
      title: title,
      description: description,
      external: external,
      onClick: this.handleClick,
      isExpandable: isExpandable,
      isExpanded: isExpanded
    }), isExpandable && children && React.createElement(TileExpandable, {
      expanded: isExpanded,
      initialExpanded: this.state.initialExpanded
    }, children));
  }

}

export default Tile;