backpack-ui/dist/components/mobileToolbar/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _icon = require("../icon");

var _icon2 = _interopRequireDefault(_icon);

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

var styles = {
  container: {
    base: {
      backgroundColor: _colors2.default.bgPrimary,
      borderTop: "1px solid " + _colors2.default.borderPrimary,
      fontSize: "11px",
      overflow: "hidden"
    }
  },

  breadcrumbs: {
    base: {
      float: "left",
      lineHeight: 1,
      width: "55%"
    }
  },

  buttons: {
    base: {
      float: "right",
      lineHeight: 1,
      marginTop: "-1px",
      overflow: "hidden",
      textAlign: "right",
      width: "45%"
    }
  },

  button: {
    base: {
      display: "inline-block",
      position: "relative"
    },

    notFirstChild: {
      marginLeft: "1px" // to offset Divider
    },

    lastChild: {
      paddingRight: "16px"
    }
  },

  anchor: {
    base: {
      display: "block",
      overflow: "hidden",
      padding: "23px 16px 20px",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      width: "100%"
    }
  },

  divider: {
    base: {
      backgroundColor: _colors2.default.borderPrimary,
      display: "block",
      height: "10px",
      right: "-1px",
      position: "absolute",
      top: "24px",
      width: "1px"
    }
  },

  icon: {
    base: {
      marginRight: "9px",
      verticalAlign: "baseline",
      top: "-1px"
    }
  }
};

function MobileToolbar(_ref) {
  var children = _ref.children,
      location = _ref.location,
      locationUrl = _ref.locationUrl,
      selectedDates = _ref.selectedDates,
      style = _ref.style,
      qaHook = _ref.qaHook;

  return _react2.default.createElement(
    "div",
    { className: "MobileToolbar", style: [styles.container.base, style] },
    (selectedDates || location) && _react2.default.createElement(
      "div",
      { className: "MobileToolbar-breadcrumbs", style: styles.breadcrumbs.base },
      selectedDates && _react2.default.createElement(
        "span",
        null,
        _react2.default.createElement(
          "time",
          { style: { fontWeight: 600 } },
          selectedDates
        ),
        " in"
      ),
      " ",
      location && locationUrl && _react2.default.createElement(
        "a",
        {
          "data-testid": qaHook ? "location" : null,
          style: styles.anchor.base,
          href: "//lonelyplanet.com" + locationUrl
        },
        _react2.default.createElement(_icon2.default, {
          name: "chevron-left",
          size: "tiny",
          inline: "before",
          style: styles.icon.base
        }),
        location
      )
    ),
    _react2.default.createElement(
      "div",
      { className: "MobileToolbar-buttons", style: styles.buttons.base },
      children.map(function (child, index) {
        return _react2.default.createElement(
          "div",
          {
            className: "MobileToolbar-button",
            style: [styles.button.base, index !== 0 && styles.button.notFirstChild],
            key: "MobileToolbar-part" + index
          },
          child,
          index !== 1 && _react2.default.createElement("span", {
            className: "Divider",
            style: styles.divider.base,
            "aria-hidden": "true"
          })
        );
      })
    )
  );
}

MobileToolbar.propTypes = {
  /**
   * Contents of toolbar
   */
  children: _propTypes2.default.node.isRequired,

  /**
   * Location name for breadcrumb link
   */
  location: _propTypes2.default.string.isRequired,

  /**
   * Location URL for breadcrumb link
   */
  locationUrl: _propTypes2.default.string.isRequired,

  /**
   * Selected dates of POI booking
   */
  selectedDates: _propTypes2.default.string,

  /**
   * Style object to add or override container styles
   */
  style: _propTypes2.default.objectOf(_propTypes2.default.string, _propTypes2.default.number),

  /**
   * Ability to use custom data hook for QA purposes
   */
  qaHook: _propTypes2.default.bool
};

MobileToolbar.defaultProps = {
  children: null,

  location: "",

  locationUrl: "",

  selectedDates: "",

  style: {},

  qaHook: false
};

exports.default = (0, _radium2.default)(MobileToolbar);