backpack-ui
Version:
Lonely Planet's Components
359 lines (294 loc) • 10.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require("babel-runtime/helpers/createClass");
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require("babel-runtime/helpers/inherits");
var _inherits3 = _interopRequireDefault(_inherits2);
var _defineProperty2 = require("babel-runtime/helpers/defineProperty");
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
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 _reactRouter = require("react-router");
var _colors = require("../../styles/colors");
var _colors2 = _interopRequireDefault(_colors);
var _mq = require("../../styles/mq");
var _mq2 = _interopRequireDefault(_mq);
var _timing = require("../../styles/timing");
var _timing2 = _interopRequireDefault(_timing);
var _zIndex = require("../../styles/zIndex");
var _zIndex2 = _interopRequireDefault(_zIndex);
var _flyout = require("../flyout");
var _flyout2 = _interopRequireDefault(_flyout);
var _heading = require("../heading");
var _heading2 = _interopRequireDefault(_heading);
var _paginatorButton = require("../paginatorButton");
var _paginatorButton2 = _interopRequireDefault(_paginatorButton);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var styles = {
container: {
base: {
display: "inline-block",
cursor: "pointer",
position: "relative",
zIndex: _zIndex2.default.globalHeader
}
},
heading: {
base: (0, _defineProperty3.default)({
display: "inline-block",
marginRight: "10px"
}, "@media (min-width: " + _mq2.default.min[600] + ")", {
marginRight: "20px"
})
},
menu: {
base: {
backfaceVisibility: "hidden",
position: "absolute",
top: "70px",
transition: "opacity " + _timing2.default.default + ",\n transform " + _timing2.default.default + ",\n visibility " + _timing2.default.default,
width: "290px"
},
hidden: {
opacity: 0,
transform: "translateY(-1rem)",
visibility: "hidden"
},
visible: {
opacity: 1,
pointerEvents: "all",
transform: "translateY(0)",
visibility: "visible"
}
}
};
var TypeSelector = function (_React$Component) {
(0, _inherits3.default)(TypeSelector, _React$Component);
function TypeSelector(props) {
(0, _classCallCheck3.default)(this, TypeSelector);
var _this = (0, _possibleConstructorReturn3.default)(this, (TypeSelector.__proto__ || (0, _getPrototypeOf2.default)(TypeSelector)).call(this, props));
_this.state = {
menu: false
};
_this.toggleMenu = _this.toggleMenu.bind(_this);
_this.handleClickOutside = _this.handleClickOutside.bind(_this);
_this.handleKeydown = _this.handleKeydown.bind(_this);
return _this;
}
(0, _createClass3.default)(TypeSelector, [{
key: "componentDidMount",
value: function componentDidMount() {
document.addEventListener("click", this.handleClickOutside);
document.addEventListener("keydown", this.handleKeydown);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
document.removeEventListener("click", this.handleClickOutside);
document.removeEventListener("keydown", this.handleKeydown);
}
}, {
key: "toggleMenu",
value: function toggleMenu() {
this.setState({
menu: !this.state.menu
});
}
}, {
key: "handleClickOutside",
value: function handleClickOutside(event) {
var container = this._container;
var menu = this._menu;
if (container.contains(event.target)) {
return;
} else if (!menu.contains(event.target) && this.state.menu) {
this.toggleMenu();
}
}
}, {
key: "handleKeydown",
value: function handleKeydown(event) {
if (event.keyCode === 27 && this.state.menu) {
this.toggleMenu();
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
title = _props.title,
menuItems = _props.menuItems,
_onClick = _props.onClick,
mobile = _props.mobile,
style = _props.style;
return _react2.default.createElement(
"div",
{ // eslint-disable-line jsx-a11y/no-static-element-interactions
className: "TypeSelector",
style: [styles.container.base, mobile && { display: "block" }, style],
onClick: this.toggleMenu,
ref: function ref(node) {
_this2._container = node;
}
},
mobile && _react2.default.createElement(_radium.Style, {
scopeSelector: ".TypeSelector",
rules: {
".Flyout-arrow span": {
left: "auto !important",
marginLeft: "44px !important"
}
}
}),
_react2.default.createElement(
_heading2.default,
{
level: 1,
size: "large",
weight: "thin",
override: styles.heading.base
},
title
),
_react2.default.createElement(_paginatorButton2.default, {
arrow: "triangle",
color: "blue",
direction: "down",
size: "small",
shadow: "tight",
align: "vertical",
iconLabel: "Open menu",
owns: "type-selector-menu"
}),
_react2.default.createElement(
"div",
{
className: "TypeSelector-menu",
id: "type-selector-menu",
style: [styles.menu.base, !mobile && { right: "-125px" }, mobile && { maxWidth: "290px", width: "100%" }, this.state.menu ? styles.menu.visible : styles.menu.hidden],
"aria-hidden": !this.state.menu,
ref: function ref(node) {
_this2._menu = node;
}
},
_react2.default.createElement(
_flyout2.default,
{
arrow: "up",
size: "medium",
displayType: "dropdown",
fill: true
},
_react2.default.createElement(_radium.Style, {
scopeSelector: ".SubNavigation",
rules: {
listStyle: "none",
".TypeSelector-listItem": {
color: "#646c74",
display: "block",
fontSize: "20px",
fontWeight: 300,
marginLeft: -40 / 20 + "em",
marginRight: -40 / 20 + "em",
padding: 17.5 / 20 + "em " + 40 / 20 + "em",
position: "relative"
},
".TypeSelector-listItem:hover": {
backgroundColor: "#f4f8fc"
},
".TypeSelector-listItem:active": {
backgroundColor: "#f4f8fc"
},
".TypeSelector-listItem:focus": {
backgroundColor: "#f4f8fc"
},
".TypeSelector-listItem--active .ActiveMarker": {
backgroundColor: _colors2.default.accentRed,
borderRadius: "100%",
bottom: 0,
display: "block",
height: ".4rem",
left: "2rem",
marginBottom: "auto",
marginTop: "auto",
position: "absolute",
top: 0,
width: ".4rem",
zIndex: 1
}
}
}),
_react2.default.createElement(
"ul",
{ className: "SubNavigation" },
menuItems.map(function (menuItem, index) {
return _react2.default.createElement(
"li",
{ key: index },
_react2.default.createElement(
_reactRouter.Link,
{
to: "" + menuItem.slug,
key: "link " + index,
onClick: function onClick(e) {
_this2.toggleMenu();
if (_onClick) {
_onClick(e);
}
},
className: "TypeSelector-listItem",
activeClassName: "TypeSelector-listItem--active"
},
_react2.default.createElement("span", { className: "ActiveMarker" }),
menuItem.item
)
);
})
)
)
)
);
}
}]);
return TypeSelector;
}(_react2.default.Component);
TypeSelector.propTypes = {
/**
* Title for Type Selector
*/
title: _propTypes2.default.string.isRequired,
/**
* Menu Items for Type Selector
*/
menuItems: _propTypes2.default.arrayOf(_propTypes2.default.object).isRequired,
/**
* Method to run when the Link component is clicked
*/
onClick: _propTypes2.default.func,
/**
* Whether or not to use the mobile layout
*/
mobile: _propTypes2.default.bool,
style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.object]))
};
TypeSelector.defaultProps = {
title: "",
menuItems: [],
onClick: null,
mobile: false
};
TypeSelector.styles = styles;
exports.default = (0, _radium2.default)(TypeSelector);