@mongodb-js/mongodb-ui-components
Version:
A collection of frequently used functional UI components found on mongodb.com
1,398 lines (1,163 loc) • 2.65 MB
JavaScript
require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
}
}return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
};
}();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _raf = require('raf');
var _raf2 = _interopRequireDefault(_raf);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
var NavBackground = function (_React$Component) {
_inherits(NavBackground, _React$Component);
function NavBackground(props) {
_classCallCheck(this, NavBackground);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(NavBackground).call(this, props));
_this.state = {
isOpaque: _this.props.isOpaque,
isOpen: _this.props.isOpen,
backgroundOpacity: 0.9
};
return _this;
}
_createClass(NavBackground, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
window.addEventListener('scroll', function () {
if (_this2.RafId) return;
_this2.RafId = (0, _raf2.default)(function () {
if (_this2.props.isOpen) {
_this2.RafId = undefined;
return;
}
var y = window.scrollY || window.pageYOffset;
var isOpaque = _this2.state.isOpaque;
if (y >= 50 && !isOpaque) {
_this2.setState({ isOpaque: true });
} else if (!_this2.props.isOpaque && y < 50 && isOpaque) {
_this2.setState({ isOpaque: false });
}
_this2.RafId = undefined;
});
});
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(props) {
var obj = {};
if (props.isOpen) {
obj.isOpen = props.isOpen;
}
if (props.isOpaque) {
var y = window.scrollY || window.pageYOffset;
obj.isOpaque = y < 50 ? props.isOpaque : true;
}
this.setState(obj);
if (!props.isOpen) return;
var listener = this.hasTouch ? 'touchend' : 'mouseup';
var setActiveSection = this.props.setActiveSection;
window.addEventListener(listener, function onWindowPress(e) {
var el = e.target;
var toTrigger = true;
while (el) {
if (/nav/.test(el.className)) {
toTrigger = false;
break;
}
el = el.parentNode;
}
if (toTrigger) {
setActiveSection(-1);
window.removeEventListener(listener, onWindowPress);
}
});
}
}, {
key: 'render',
value: function render() {
var classnames = 'nav-background flex flex--center-x';
if (this.props.isOpen) classnames += ' nav-background--open';
if (this.state.isOpaque) classnames += ' nav-background--opaque';
return _react2.default.createElement('div', { className: classnames }, this.props.children);
}
}]);
return NavBackground;
}(_react2.default.Component);
exports.default = NavBackground;
var _React$PropTypes = _react2.default.PropTypes;
var node = _React$PropTypes.node;
var bool = _React$PropTypes.bool;
var func = _React$PropTypes.func;
NavBackground.propTypes = {
children: node,
isOpaque: bool,
isOpen: bool,
setActiveSection: func.isRequired
};
},{"raf":116,"react":259}],2:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var cloudServices = {
cta: {
header: 'Try It Now',
links: [{
text: 'MongoDB 3.2',
href: 'https://www.mongodb.com/mongodb-3.2'
}, {
text: 'Download Center',
href: 'https://www.mongodb.com/download-center'
}]
},
linkLists: [[{ href: 'https://docs.cloud.mongodb.com/', text: 'Cloud Manager', bold: true }, { href: 'https://docs.opsmanager.mongodb.com/current', text: 'Ops Manager', bold: true }]]
};
exports.default = {
downloadJmpValue: 'docs',
logoUrl: 'https://webassets.mongodb.com/_com_assets/global/mongodb-logo-white.png',
logoLink: 'https://docs.mongodb.com',
tagline: 'Documentation',
topSections: [{
text: 'Company',
href: 'https://mongodb.com'
}, {
text: 'Open Source',
href: 'https://www.mongodb.com/community'
}, {
text: 'University',
href: 'https://university.mongodb.com'
}],
sections: [{
text: 'Server',
href: 'https://docs.mongodb.com/manual',
link: true
}, {
text: 'Drivers',
href: 'https://docs.mongodb.com/ecosystem/drivers/',
link: true
}, {
text: 'Cloud Services'
}, {
text: 'Compass',
href: 'https://docs.mongodb.com/compass',
link: true
}, {
text: 'BI Connector',
href: 'https://docs.mongodb.com/bi-connector',
link: true
}],
subsections: [_react2.default.createElement('div', null), _react2.default.createElement('div', null), cloudServices, _react2.default.createElement('div', null), _react2.default.createElement('div', null)]
};
},{"react":259}],3:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _docs = require('./docs');
var _docs2 = _interopRequireDefault(_docs);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
exports.default = { docs: _docs2.default };
},{"./docs":2}],4:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var NavCTA = function (_ref) {
var first = _ref.first;
var header = _ref.header;
var links = _ref.links;
return _react2.default.createElement('div', { className: 'nav-cta ' + (first ? 'nav-cta--first' : '') + ' flex flex--wrap flex--center-all' }, _react2.default.createElement('h2', { className: 'nav-cta__header' }, header), _react2.default.createElement('ul', { style: { width: '100%', padding: 0 } }, links.map(function (link, i) {
return _react2.default.createElement('a', {
key: i,
className: 'nav-cta__a',
href: link.href }, _react2.default.createElement('li', null, _react2.default.createElement('strong', null, link.text)));
})));
};
var _React$PropTypes = _react2.default.PropTypes;
var bool = _React$PropTypes.bool;
var string = _React$PropTypes.string;
var shape = _React$PropTypes.shape;
var arrayOf = _React$PropTypes.arrayOf;
NavCTA.propTypes = {
first: bool,
header: string.isRequired,
links: arrayOf(shape({
href: string.isRequired,
text: string.isRequired
}))
};
exports.default = NavCTA;
},{"react":259}],5:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.hamburgerIcon = exports.downloadIcon = exports.searchIcon = exports.contactIcon = undefined;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var contactIcon = exports.contactIcon = _react2.default.createElement('svg', { width: '18px', height: '18px', viewBox: '0 0 22 22' }, _react2.default.createElement('g', { stroke: 'none', strokeWidth: '1', fill: 'none', fillRule: 'evenodd' }, _react2.default.createElement('g', { transform: 'translate(-1104.000000, -19.000000)', fill: '#9E9E9E' }, _react2.default.createElement('g', { transform: 'translate(0.000000, -1.000000)' }, _react2.default.createElement('g', { transform: 'translate(85.000000, 0.000000)' }, _react2.default.createElement('g', { transform: 'translate(1019.000000, 20.000000)' }, _react2.default.createElement('path', { d: 'M20.7058824,14.2352941 L15.5294118,14.2352941 C14.8137647,14.2352941 14.2352941,14.8137647 14.2352941,15.5294118 L14.2352941,16.8235294 C9.05882353,16.8235294 5.25670588,12.8596471 5.17647059,7.76470588 L6.47058824,7.76470588 C7.18623529,7.76470588 7.76470588,7.18623529 7.76470588,6.47058824 L7.76470588,1.29411765 C7.76470588,0.578470588 7.18623529,0 6.47058824,0 L1.29411765,0 C0.578470588,0 0,0.578470588 0,1.29411765 L0,7.76470588 C0,15.6264706 6.37352941,22 14.2352941,22 L20.7058824,22 C21.4215294,22 22,21.4215294 22,20.7058824 L22,15.5294118 C22,14.8137647 21.4215294,14.2352941 20.7058824,14.2352941 L20.7058824,14.2352941 Z' })))))));
var searchIcon = exports.searchIcon = _react2.default.createElement('svg', { width: '18px', height: '18px', viewBox: '0 0 22 22' }, _react2.default.createElement('g', { stroke: 'none', strokeWidth: '1', fill: 'none', fillRule: 'evenodd' }, _react2.default.createElement('g', { transform: 'translate(-1047.000000, -20.000000)', fill: '#9E9E9E' }, _react2.default.createElement('g', { transform: 'translate(0.000000, -1.000000)' }, _react2.default.createElement('g', { transform: 'translate(85.000000, 0.000000)' }, _react2.default.createElement('g', { transform: 'translate(962.000000, 21.000000)' }, _react2.default.createElement('path', { d: 'M21.999039,20.4735664 L15.9967575,14.4712848 C17.2312375,12.9021633 17.9072357,10.9816123 17.9072357,8.95361785 C17.9072357,6.56188268 16.9749402,4.3134054 15.2838257,2.62341003 C13.5938303,0.932295458 11.345353,0 8.95361785,0 C6.56188268,0 4.3134054,0.932295458 2.62341003,2.62229083 C0.932295458,4.3134054 0,6.56188268 0,8.95361785 C0,11.345353 0.932295458,13.5938303 2.62341003,15.2838257 C4.3134054,16.9760594 6.56188268,17.9072357 8.95361785,17.9072357 C10.9536322,17.9072357 12.8484416,17.2480256 14.4063711,16.0448832 L20.4176063,22.0549992 L21.999039,20.4735664 L21.999039,20.4735664 Z M4.20596198,13.7012737 C2.93678665,12.4343368 2.23840446,10.747699 2.23840446,8.95361785 C2.23840446,7.15841747 2.93678665,5.47401811 4.20596198,4.20596198 C5.47401811,2.93678665 7.15953667,2.23840446 8.95361785,2.23840446 C10.747699,2.23840446 12.4332176,2.93678665 13.7012737,4.20708119 C14.970449,5.47401811 15.6688312,7.15841747 15.6688312,8.95361785 C15.6688312,10.747699 14.970449,12.4343368 13.7012737,13.7023929 C12.4332176,14.970449 10.747699,15.6688312 8.95361785,15.6688312 C7.15953667,15.6688312 5.47401811,14.970449 4.20596198,13.7012737 L4.20596198,13.7012737 Z' })))))));
var downloadIcon = exports.downloadIcon = _react2.default.createElement('svg', { width: '14px', height: '21px', viewBox: '0 0 16 21' }, _react2.default.createElement('g', { stroke: 'none', strokeWidth: '1', fill: 'none', fillRule: 'evenodd' }, _react2.default.createElement('g', { transform: 'translate(-1282.000000, -16.000000)', fill: '#FFFFFF' }, _react2.default.createElement('g', { transform: 'translate(0.000000, -1.000000)' }, _react2.default.createElement('g', { transform: 'translate(85.000000, 0.000000)' }, _react2.default.createElement('g', { transform: 'translate(1197.000000, 17.000000)' }, _react2.default.createElement('path', { d: 'M13.9079108,6.9539554 L13.0386664,6.9539554 L13.0386664,8.69244425 L13.9079108,8.69244425 L13.9079108,13.9079108 L1.73848885,13.9079108 L1.73848885,8.69244425 L2.60773328,8.69244425 L2.60773328,6.9539554 L1.73848885,6.9539554 C0.77971225,6.9539554 0,7.73366765 0,8.69244425 L0,16.5156441 C0,17.4744207 0.77971225,18.2541329 1.73848885,18.2541329 L6.9539554,18.2541329 L6.9539554,19.1233774 L4.34622213,19.1233774 L4.34622213,20.8618662 L11.3001775,20.8618662 L11.3001775,19.1233774 L8.69244425,19.1233774 L8.69244425,18.2541329 L13.9079108,18.2541329 C14.8666874,18.2541329 15.6463997,17.4744207 15.6463997,16.5156441 L15.6463997,8.69244425 C15.6463997,7.73366765 14.8666874,6.9539554 13.9079108,6.9539554 L13.9079108,6.9539554 Z' }), _react2.default.createElement('path', { d: 'M11.9147333,6.69926679 L10.6856217,5.47015517 L8.69244425,7.46333264 L8.69244425,0 L6.9539554,0 L6.9539554,7.46333264 L4.96077794,5.47015517 L3.73166632,6.69926679 L7.82319983,10.7908003 L11.9147333,6.69926679 Z', id: 'Shape' })))))));
var hamburgerIcon = exports.hamburgerIcon = '\n<svg width=\'768\' height=\'768\' viewBox=\'0 0 768 768\'>\n <path d=\'M96 160h576q13.25 0 22.625 9.375t9.375 22.625-9.375 22.625-22.625 9.375h-576q-13.25 0-22.625-9.375t-9.375-22.625 9.375-22.625 22.625-9.375zM96 544h576q13.25 0 22.625 9.375t9.375 22.625-9.375 22.625-22.625 9.375h-576q-13.25 0-22.625-9.375t-9.375-22.625 9.375-22.625 22.625-9.375zM96 352h576q13.25 0 22.625 9.375t9.375 22.625-9.375 22.625-22.625 9.375h-576q-13.25 0-22.625-9.375t-9.375-22.625 9.375-22.625 22.625-9.375z\'>\n </path>\n</svg>';
},{"react":259}],6:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}return target;
};
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _velocityReact = require('velocity-react');
var _section = require('./section');
var _section2 = _interopRequireDefault(_section);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var animation = {
active: { opacity: 1 },
inactive: { opacity: 0 }
};
var BottomPanel = function (_ref) {
var isMobile = _ref.isMobile;
var isOpen = _ref.isOpen;
var activeSection = _ref.activeSection;
var sections = _ref.sections;
var midSections = _ref.midSections;
return _react2.default.createElement('div', { className: 'nav-panel-bottom' }, sections.map(function (section, i) {
return _react2.default.createElement('div', {
key: i,
style: { width: 'inherit' },
className: !(isMobile && isOpen) && activeSection !== i ? 'nav-panel-bottom__section--inactive' : '' }, _react2.default.createElement(_velocityReact.VelocityComponent, {
animation: isMobile && isOpen || activeSection === i ? animation.active : animation.inactive,
duration: '300',
delay: activeSection !== i ? 100 : 0 }, _react2.default.createElement(_section2.default, _extends({
count: i,
midSection: midSections[i]
}, section))));
}));
};
var _React$PropTypes = _react2.default.PropTypes;
var number = _React$PropTypes.number;
var bool = _React$PropTypes.bool;
var string = _React$PropTypes.string;
var array = _React$PropTypes.array;
BottomPanel.propTypes = {
activeSection: number,
isOpen: bool.isRequired,
isMobile: bool.isRequired,
environment: string,
sections: array,
midSections: array
};
BottomPanel.defaultProps = {
environment: 'com'
};
exports.default = BottomPanel;
},{"./section":7,"react":259,"velocity-react":261}],7:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}return target;
};
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _navCta = require('../nav-cta');
var _navCta2 = _interopRequireDefault(_navCta);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var Section = function (_ref) {
var newTab = _ref.newTab;
var cta = _ref.cta;
var linkLists = _ref.linkLists;
var midSection = _ref.midSection;
var count = _ref.count;
return _react2.default.createElement('div', { className: 'nav-panel-bottom__section flex flex--space-between flex--wrap' }, cta && _react2.default.createElement(_navCta2.default, _extends({ first: count === 0 }, cta)), (midSection.link ? [[midSection]] : []).concat(linkLists).map(function (links, i) {
return _react2.default.createElement('ul', { key: i }, links.map(function (_ref2, j) {
var style = _ref2.style;
var href = _ref2.href;
var bold = _ref2.bold;
var link = _ref2.link;
var text = _ref2.text;
var className = _ref2.className;
return href ? _react2.default.createElement('a', {
key: i + '.' + j,
style: style,
href: href,
className: className,
target: newTab ? '_blank' : '_self' }, _react2.default.createElement('li', null, bold || link ? _react2.default.createElement('strong', null, text) : text)) : _react2.default.createElement('li', { className: className }, bold || link ? _react2.default.createElement('strong', null, text) : text);
}));
}));
};
var _React$PropTypes = _react2.default.PropTypes;
var array = _React$PropTypes.array;
var bool = _React$PropTypes.bool;
var any = _React$PropTypes.any;
var object = _React$PropTypes.object;
var number = _React$PropTypes.number;
Section.propTypes = {
linkLists: array,
newTab: bool,
cta: any,
midSection: object,
count: number
};
Section.defaultProps = {
linkLists: []
};
exports.default = Section;
},{"../nav-cta":4,"react":259}],8:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}return target;
};
var _createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
}
}return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
};
}();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _velocityReact = require('velocity-react');
var _section = require('./section');
var _section2 = _interopRequireDefault(_section);
var _navIcons = require('../nav-icons');
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
var MiddlePanel = function (_React$Component) {
_inherits(MiddlePanel, _React$Component);
function MiddlePanel(props) {
_classCallCheck(this, MiddlePanel);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(MiddlePanel).call(this, props));
_this.animation = {
'closed': {
display: 'none',
opacity: 0
},
'open': {
opacity: 1
}
};
_this.velocityConfig = {
duration: 300,
easing: 'easeOutQuart'
};
_this.state = {
isMobile: _this.props.isMobile,
animation: 'closed',
activeSection: _this.props.activeSection
};
_this.onToggle = _this.onToggle.bind(_this);
return _this;
}
_createClass(MiddlePanel, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(props) {
this.setState({
activeSection: props.activeSection,
isMobile: props.isMobile
});
}
}, {
key: 'onTabSelect',
value: function onTabSelect(i, e) {
e.preventDefault();
if (this.state.activeSection === i) {
i = -1;
}
this.props.setActiveSection(i);
this.setState({ activeSection: i });
}
}, {
key: 'onToggle',
value: function onToggle(i) {
this.props.toggle();
this.setState({
animation: this.state.animation === 'closed' ? 'open' : 'closed'
});
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props;
var sections = _props.sections;
var logoLink = _props.logoLink;
var logoUrl = _props.logoUrl;
var tagline = _props.tagline;
var _state = this.state;
var isMobile = _state.isMobile;
var activeSection = _state.activeSection;
return _react2.default.createElement('div', { className: 'nav-panel-middle' }, _react2.default.createElement('ul', {
className: 'nav-panel-middle__ul flex flex--space-between flex--wrap' }, _react2.default.createElement('a', { href: logoLink, className: 'flex flex--center-y' }, _react2.default.createElement('li', { className: 'nav-panel-middle__li nav-panel-middle__logo' }, _react2.default.createElement('img', {
className: 'nav-panel-middle__logo-img',
src: logoUrl })), _react2.default.createElement('li', { className: 'nav-panel-middle__li nav-panel-middle__tagline-container' }, _react2.default.createElement('p', { className: 'nav-panel-middle__tagline' }, tagline))), _react2.default.createElement(_velocityReact.VelocityComponent, _extends({}, this.velocityConfig, {
animation: isMobile ? this.animation[this.state.animation] : this.animation['open'] }), _react2.default.createElement('div', {
className: 'flex flex--center-all flex--wrap',
style: { display: isMobile ? 'none' : 'inherit' } }, sections.map(function (section, i) {
return _react2.default.createElement(_section2.default, _extends({
className: 'nav-panel-middle__li nav-panel-middle__btn ' + (activeSection === i ? 'nav-panel-middle__li--active' : ''),
handler: _this2.onTabSelect.bind(_this2, i)
}, section));
}))), _react2.default.createElement('li', {
onClick: this.onToggle,
onTouchTap: this.onToggle,
className: 'nav-panel-middle__hamburger' }, _react2.default.createElement('button', { dangerouslySetInnerHTML: { __html: _navIcons.hamburgerIcon } }))));
}
}]);
return MiddlePanel;
}(_react2.default.Component);
exports.default = MiddlePanel;
var _React$PropTypes = _react2.default.PropTypes;
var func = _React$PropTypes.func;
var number = _React$PropTypes.number;
var bool = _React$PropTypes.bool;
var string = _React$PropTypes.string;
var array = _React$PropTypes.array;
MiddlePanel.propTypes = {
setActiveSection: func.isRequired,
toggle: func.isRequired,
activeSection: number,
isMobile: bool.isRequired,
sections: array,
logoUrl: string,
logoLink: string,
tagline: string
};
MiddlePanel.defaultProps = {
logoLink: '/',
tagline: 'For Giant Ideas',
activeSection: -1
};
},{"../nav-icons":5,"./section":9,"react":259,"velocity-react":261}],9:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var Section = function (_ref) {
var className = _ref.className;
var href = _ref.href;
var text = _ref.text;
var extraText = _ref.extraText;
var isLink = _ref.isLink;
var handler = _ref.handler;
return _react2.default.createElement('li', { className: className }, _react2.default.createElement('a', {
className: 'font--white',
href: href,
onClick: !isLink && handler,
onTouchTap: !isLink && handler }, text, extraText && _react2.default.createElement('span', { className: 'extra-text' }, extraText)));
};
var _React$PropTypes = _react2.default.PropTypes;
var string = _React$PropTypes.string;
var bool = _React$PropTypes.bool;
var func = _React$PropTypes.func;
Section.propTypes = {
className: string,
href: string,
text: string,
extraText: string,
isLink: bool,
handler: func
};
exports.default = Section;
},{"react":259}],10:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _search = require('./search');
var _search2 = _interopRequireDefault(_search);
var _navIcons = require('../nav-icons');
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var TopPanel = function (_ref) {
var host = _ref.host;
var includeSearch = _ref.includeSearch;
var searchUrl = _ref.searchUrl;
var contactUrl = _ref.contactUrl;
var sections = _ref.sections;
var downloadJmpValue = _ref.downloadJmpValue;
var downloadUrl = _ref.downloadUrl;
return _react2.default.createElement('div', { className: 'nav-panel-top font--center' }, _react2.default.createElement('ul', { className: 'flex flex--space-between', style: { height: '100%' } }, _react2.default.createElement('div', { className: 'nav-panel-top__links flex flex--center-y font--center' }, sections.map(function (section, i) {
return _react2.default.createElement('a', {
key: i,
className: 'nav-panel-top__a',
target: section.text === 'Open Source' && host === '' ? '_self' : '_blank',
href: section.href }, _react2.default.createElement('li', { className: 'nav-panel-top__li' }, section.text));
})), _react2.default.createElement('div', { className: 'flex flex--center-y' }, _react2.default.createElement('a', { href: contactUrl }, _react2.default.createElement('button', {
className: 'flex flex--center-all flex--wrap nav-panel-top__contact',
style: includeSearch ? {} : { marginRight: '15px' } }, _navIcons.contactIcon)), includeSearch && _react2.default.createElement(_search2.default, { searchUrl: searchUrl }), _react2.default.createElement('a', {
className: 'nav-panel-top__a',
href: '' + host + downloadUrl + '?jmp=' + downloadJmpValue,
target: host === '' ? '_self' : '_blank' }, _react2.default.createElement('button', { className: '\n btn-small btn-fill btn-fill--light-green\n margin--left-xs nav-panel-top__download\n ' }, _react2.default.createElement('span', { style: { verticalAlign: 'middle' } }, 'Download'), _navIcons.downloadIcon)))));
};
var _React$PropTypes = _react2.default.PropTypes;
var string = _React$PropTypes.string;
var bool = _React$PropTypes.bool;
var array = _React$PropTypes.array;
TopPanel.propTypes = {
includeSearch: bool,
searchUrl: string,
contactUrl: string,
sections: array,
host: string.isRequired,
downloadUrl: string,
downloadJmpValue: string
};
TopPanel.defaultProps = {
includeSearch: true,
searchUrl: '/search?search=',
contactUrl: '/contact?jmp=nav',
downloadUrl: '/download-center',
downloadJmpValue: 'nav'
};
exports.default = TopPanel;
},{"../nav-icons":5,"./search":11,"react":259}],11:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}return target;
};
var _createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
}
}return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
};
}();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _velocityReact = require('velocity-react');
var _navIcons = require('../nav-icons');
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
var SearchInput = function (_React$Component) {
_inherits(SearchInput, _React$Component);
function SearchInput(props) {
_classCallCheck(this, SearchInput);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(SearchInput).call(this, props));
_this.state = { isOpen: false };
_this.velocityConfig = {
duration: 300,
easing: 'easeOutQuint'
};
_this.setState = _this.setState.bind(_this);
_this.onBtnPress = _this.onBtnPress.bind(_this);
_this.toggle = _this.toggle.bind(_this);
return _this;
}
_createClass(SearchInput, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.links = document.querySelector('.nav-panel-top__links');
}
}, {
key: 'onSearch',
value: function onSearch() {
var value = encodeURIComponent(this.refs.searchInput.value);
window.location.href = '' + this.props.searchUrl + value;
}
}, {
key: 'onBtnPress',
value: function onBtnPress(e) {
e.preventDefault();
e.stopPropagation();
if (!this.state.isOpen) {
this.refs.searchInput.focus();
this.toggle(true);
} else if (!this.refs.searchInput.value) {
this.toggle(false);
} else {
this.onSearch();
}
}
}, {
key: 'toggle',
value: function toggle(isOpen) {
this.setState({ isOpen: isOpen });
this.links.classList.toggle('nav-panel-top__links--hidden', isOpen);
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var isOpen = this.state.isOpen;
return _react2.default.createElement('span', { className: 'flex flex--wrap' }, _react2.default.createElement(_velocityReact.VelocityComponent, _extends({}, this.velocityConfig, {
animation: isOpen ? { marginRight: '-35px', opacity: 1 } : { marginRight: '-210px', opacity: 0 } }), _react2.default.createElement('input', {
className: 'input nav-panel-top__input',
onBlur: function () {
return window.setTimeout(function () {
return _this2.toggle(false);
}, 50);
},
onKeyUp: function (e) {
return e.keyCode === 13 && _this2.onSearch();
},
ref: 'searchInput',
placeholder: 'search' })), _react2.default.createElement(_velocityReact.VelocityComponent, _extends({}, this.velocityConfig, {
animation: isOpen ? { scale: 0.8 } : { scale: 1 } }), _react2.default.createElement('button', {
className: 'flex flex--center-all flex--wrap nav-panel-top__search',
onClick: this.onBtnPress,
onTouchStart: this.onBtnPress
}, _navIcons.searchIcon)));
}
}]);
return SearchInput;
}(_react2.default.Component);
exports.default = SearchInput;
var string = _react2.default.PropTypes.string;
SearchInput.propTypes = {
searchUrl: string
};
},{"../nav-icons":5,"react":259,"velocity-react":261}],12:[function(require,module,exports){
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _MONGODB_NAV = require('MONGODB_NAV');
var _MONGODB_NAV2 = _interopRequireDefault(_MONGODB_NAV);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
if (/^loaded|^i|^c/.test(document.readyState)) {
resolve(_MONGODB_NAV2.default);
} else {
document.addEventListener('DOMContentLoaded', onload);
window.addEventListener('load', onload);
}
function onload() {
document.removeEventListener('DOMContentLoaded', onload);
window.removeEventListener('load', onload);
resolve(_MONGODB_NAV2.default);
}
function resolve(Component) {
var data = document.getElementById('mongodb-nav-data');
var props = data && JSON.parse(data.getAttribute('data-props'));
(0, _reactDom.render)(_react2.default.createElement(Component, props), document.querySelector(data.getAttribute('data-container')), function () {
return window.reactNavOnLoad ? window.reactNavOnLoad() : null;
});
}
},{"MONGODB_NAV":"MONGODB_NAV","react":259,"react-dom":118}],13:[function(require,module,exports){
'use strict';
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* @typechecks
*/
var emptyFunction = require('./emptyFunction');
/**
* Upstream version of event listener. Does not take into account specific
* nature of platform.
*/
var EventListener = {
/**
* Listen to DOM events during the bubble phase.
*
* @param {DOMEventTarget} target DOM element to register listener on.
* @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
* @param {function} callback Callback function.
* @return {object} Object with a `remove` method.
*/
listen: function listen(target, eventType, callback) {
if (target.addEventListener) {
target.addEventListener(eventType, callback, false);
return {
remove: function remove() {
target.removeEventListener(eventType, callback, false);
}
};
} else if (target.attachEvent) {
target.attachEvent('on' + eventType, callback);
return {
remove: function remove() {
target.detachEvent('on' + eventType, callback);
}
};
}
},
/**
* Listen to DOM events during the capture phase.
*
* @param {DOMEventTarget} target DOM element to register listener on.
* @param {string} eventType Event type, e.g. 'click' or 'mouseover'.
* @param {function} callback Callback function.
* @return {object} Object with a `remove` method.
*/
capture: function capture(target, eventType, callback) {
if (target.addEventListener) {
target.addEventListener(eventType, callback, true);
return {
remove: function remove() {
target.removeEventListener(eventType, callback, true);
}
};
} else {
if ("development" !== 'production') {
console.error('Attempted to listen to events during the capture phase on a ' + 'browser that does not support the capture phase. Your application ' + 'will not receive some events.');
}
return {
remove: emptyFunction
};
}
},
registerDefault: function registerDefault() {}
};
module.exports = EventListener;
},{"./emptyFunction":20}],14:[function(require,module,exports){
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
*/
'use strict';
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
/**
* Simple, lightweight module assisting with the detection and context of
* Worker. Helps avoid circular dependencies and allows code to reason about
* whether or not they are in a Worker, even if they never include the main
* `ReactWorker` dependency.
*/
var ExecutionEnvironment = {
canUseDOM: canUseDOM,
canUseWorkers: typeof Worker !== 'undefined',
canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),
canUseViewport: canUseDOM && !!window.screen,
isInWorker: !canUseDOM // For now, this is true - might change in the future.
};
module.exports = ExecutionEnvironment;
},{}],15:[function(require,module,exports){
"use strict";
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @typechecks
*/
var _hyphenPattern = /-(.)/g;
/**
* Camelcases a hyphenated string, for example:
*
* > camelize('background-color')
* < "backgroundColor"
*
* @param {string} string
* @return {string}
*/
function camelize(string) {
return string.replace(_hyphenPattern, function (_, character) {
return character.toUpperCase();
});
}
module.exports = camelize;
},{}],16:[function(require,module,exports){
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @typechecks
*/
'use strict';
var camelize = require('./camelize');
var msPattern = /^-ms-/;
/**
* Camelcases a hyphenated CSS property name, for example:
*
* > camelizeStyleName('background-color')
* < "backgroundColor"
* > camelizeStyleName('-moz-transition')
* < "MozTransition"
* > camelizeStyleName('-ms-transition')
* < "msTransition"
*
* As Andi Smith suggests
* (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
* is converted to lowercase `ms`.
*
* @param {string} string
* @return {string}
*/
function camelizeStyleName(string) {
return camelize(string.replace(msPattern, 'ms-'));
}
module.exports = camelizeStyleName;
},{"./camelize":15}],17:[function(require,module,exports){
'use strict';
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
*
*/
var isTextNode = require('./isTextNode');
/*eslint-disable no-bitwise */
/**
* Checks if a given DOM node contains or is another DOM node.
*/
function containsNode(outerNode, innerNode) {
if (!outerNode || !innerNode) {
return false;
} else if (outerNode === innerNode) {
return true;
} else if (isTextNode(outerNode)) {
return false;
} else if (isTextNode(innerNode)) {
return containsNode(outerNode, innerNode.parentNode);
} else if ('contains' in outerNode) {
return outerNode.contains(innerNode);
} else if (outerNode.compareDocumentPosition) {
return !!(outerNode.compareDocumentPosition(innerNode) & 16);
} else {
return false;
}
}
module.exports = containsNode;
},{"./isTextNode":30}],18:[function(require,module,exports){
'use strict';
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @typechecks
*/
var invariant = require('./invariant');
/**
* Convert array-like objects to arrays.
*
* This API assumes the caller knows the contents of the data type. For less
* well defined inputs use createArrayFromMixed.
*
* @param {object|function|filelist} obj
* @return {array}
*/
function toArray(obj) {
var length = obj.length;
// Some browsers builtin objects can report typeof 'function' (e.g. NodeList
// in old versions of Safari).
!(!Array.isArray(obj) && (typeof obj === 'object' || typeof obj === 'function')) ? "development" !== 'production' ? invariant(false, 'toArray: Array-like object expected') : invariant(false) : void 0;
!(typeof length === 'number') ? "development" !== 'production' ? invariant(false, 'toArray: Object needs a length property') : invariant(false) : void 0;
!(length === 0 || length - 1 in obj) ? "development" !== 'production' ? invariant(false, 'toArray: Object should have keys for indices') : invariant(false) : void 0;
!(typeof obj.callee !== 'function') ? "development" !== 'production' ? invariant(false, 'toArray: Object can\'t be `arguments`. Use rest params ' + '(function(...args) {}) or Array.from() instead.') : invariant(false) : void 0;
// Old IE doesn't give collections access to hasOwnProperty. Assume inputs
// without method will throw during the slice call and skip straight to the
// fallback.
if (obj.hasOwnProperty) {
try {
return Array.prototype.slice.call(obj);
} catch (e) {
// IE < 9 does not support Array#slice on collections objects
}
}
// Fall back to copying key by key. This assumes all keys have a value,
// so will not preserve sparsely populated inputs.
var ret = Array(length);
for (var ii = 0; ii < length; ii++) {
ret[ii] = obj[ii];
}
return ret;
}
/**
* Perform a heuristic test to determine if an object is "array-like".
*
* A monk asked Joshu, a Zen master, "Has a dog Buddha nature?"
* Joshu replied: "Mu."
*
* This function determines if its argument has "array nature": it returns
* true if the argument is an actual array, an `arguments' object, or an
* HTMLCollection (e.g. node.childNodes or node.getElementsByTagName()).
*
* It will return false for other array-like objects like Filelist.
*
* @param {*} obj
* @return {boolean}
*/
function hasArrayNature(obj) {
return(
// not null/false
!!obj && (
// arrays are objects, NodeLists are functions in Safari
typeof obj == 'object' || typeof obj == 'function') &&
// quacks like an array
'length' in obj &&
// not window
!('setInterval' in obj) &&
// no DOM node should be considered an array-like
// a 'select' element has 'length' and 'item' properties on IE8
typeof obj.nodeType != 'number' && (
// a real array
Array.isArray(obj) ||
// arguments
'callee' in obj ||
// HTMLCollection/NodeList
'item' in obj)
);
}
/**
* Ensure that the argument is an array by wrapping it in an array if it is not.
* Creates a copy of the argument if it is already an array.
*
* This is mostly useful idiomatically:
*
* var createArrayFromMixed = require('createArrayFromMixed');
*
* function takesOneOrMoreThings(things) {
* things = createArrayFromMixed(things);
* ...
* }
*
* This allows you to treat `things' as an array, but accept scalars in the API.
*
* If you need to convert an array-like object, like `arguments`, into an array
* use toArray instead.
*
* @param {*} obj
* @return {array}
*/
function createArrayFromMixed(obj) {
if (!hasArrayNature(obj)) {
return [obj];
} else if (Array.isArray(obj)) {
return obj.slice();
} else {
return toArray(obj);
}
}
module.exports = createArrayFromMixed;
},{"./invariant":28}],19:[function(require,module,exports){
'use strict';
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @typechecks
*/
/*eslint-disable fb-www/unsafe-html*/
var ExecutionEnvironment = require('./ExecutionEnvironment');
var createArrayFromMixed = require('./createArrayFromMixed');
var getMarkupWrap = require('./getMarkupWrap');
var invariant = require('./invariant');
/**
* Dummy container used to render all markup.
*/
var dummyNode = ExecutionEnvironment.canUseDOM ? document.createElement('div') : null;
/**
* Pattern used by `getNodeName`.
*/
var nodeNamePattern = /^\s*<(\w+)/;
/**
* Extracts the `nodeName` of the first element in a string of markup.
*
* @param {string} markup String of markup.
* @return {?string} Node name of the supplied markup.
*/
function getNodeName(markup) {
var nodeNameMatch = markup.match(nodeNamePattern);
return nodeNameMatch && nodeNameMatch[1].toLowerCase();
}
/**
* Creates an array containing the nodes rendered from the supplied markup. The
* optionally supplied `handleScript` function will be invoked once for each
* <script> element that is rendered. If no `handleScript` function is supplied,
* an exception is thrown if any <script> elements are rendered.
*
* @param {string} markup A string of valid HTML markup.
* @param {?function} handleScript Invoked once for each rendered <script>.
* @return {array<DOMElement|DOMTextNode>} An array of rendered nodes.
*/
function createNodesFromMarkup(markup, handleScript) {
var node = dummyNode;
!!!dummyNode ? "development" !== 'production' ? invariant(false, 'createNodesFromMarkup dummy not initialized') : invariant(false) : void 0;
var nodeName = getNodeName(markup);
var wrap = nodeName && getMarkupWrap(nodeName);
if (wrap) {
node.innerHTML = wrap[1] + markup + wrap[2];
var wrapDepth = wrap[0];
while (wrapDepth--) {
node = node.lastChild;
}
} else {
node.innerHTML = markup;
}
var scripts = node.getElementsByTagName('script');
if (scripts.length) {
!handleScript ? "development" !== 'production' ? invariant(false, 'createNodesFromMarkup(...): Unexpected <script> element rendered.') : invariant(false) : void 0;
createArrayFromMixed(scripts).forEach(handleScript);
}
var nodes = Array.from(node.childNodes);
while (node.lastChild) {
node.removeChild(node.lastChild);
}
return nodes;
}
module.exports = createNodesFromMarkup;
},{"./ExecutionEnvironment":14,"./createArrayFromMixed":18,"./getMarkupWrap":24,"./invariant":28}],20:[function(require,module,exports){
"use strict";
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
*
*/
function makeEmptyFunction(arg) {
return function () {
return arg;