keystone
Version:
Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose
1,243 lines (1,053 loc) • 2.42 MB
JavaScript
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
var _react = _interopRequireDefault(require("react"));
var _elemental = require("./elemental");
var _reactRouter = require("react-router");
var _glamor = require("glamor");
var _Mobile = _interopRequireDefault(require("./components/Navigation/Mobile"));
var _Primary = _interopRequireDefault(require("./components/Navigation/Primary"));
var _Secondary = _interopRequireDefault(require("./components/Navigation/Secondary"));
var _Footer = _interopRequireDefault(require("./components/Footer"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/**
* The App component is the component that is rendered around all views, and
* contains common things like navigation, footer, etc.
*/
var classes = {
wrapper: {
display: 'flex',
flexDirection: 'column',
minHeight: '100vh'
},
body: {
flexGrow: 1
}
};
var App = function App(props) {
var listsByPath = require('../utils/lists').listsByPath;
var children = props.children; // If we're on either a list or an item view
var currentList, currentSection;
if (props.params.listId) {
currentList = listsByPath[props.params.listId]; // If we're on a list path that doesn't exist (e.g. /keystone/gibberishasfw34afsd) this will
// be undefined
if (!currentList) {
children = _react["default"].createElement(_elemental.Container, null, _react["default"].createElement("p", null, "List not found!"), _react["default"].createElement(_reactRouter.Link, {
to: "".concat(Keystone.adminPath)
}, "Go back home"));
} else {
// Get the current section we're in for the navigation
currentSection = Keystone.nav.by.list[currentList.key];
}
} // Default current section key to dashboard
var currentSectionKey = currentSection && currentSection.key || 'dashboard';
return _react["default"].createElement("div", {
className: (0, _glamor.css)(classes.wrapper)
}, _react["default"].createElement("header", null, _react["default"].createElement(_Mobile["default"], {
brand: Keystone.brand,
currentListKey: props.params.listId,
currentSectionKey: currentSectionKey,
sections: Keystone.nav.sections,
signoutUrl: Keystone.signoutUrl
}), _react["default"].createElement(_Primary["default"], {
currentSectionKey: currentSectionKey,
brand: Keystone.brand,
sections: Keystone.nav.sections,
signoutUrl: Keystone.signoutUrl
}), currentSection ? _react["default"].createElement(_Secondary["default"], {
currentListKey: props.params.listId,
lists: currentSection.lists,
itemId: props.params.itemId
}) : null), _react["default"].createElement("main", {
className: (0, _glamor.css)(classes.body)
}, children), _react["default"].createElement(_Footer["default"], {
appversion: Keystone.appversion,
backUrl: Keystone.backUrl,
brand: Keystone.brand,
User: Keystone.User,
user: Keystone.user,
version: Keystone.version
}));
};
module.exports = App;
},{"../utils/lists":154,"./components/Footer":2,"./components/Navigation/Mobile":5,"./components/Navigation/Primary":7,"./components/Navigation/Secondary":9,"./elemental":73,"glamor":undefined,"react":undefined,"react-router":undefined}],2:[function(require,module,exports){
"use strict";
var _react = _interopRequireDefault(require("react"));
var _glamor = require("glamor");
var _elemental = require("../../elemental");
var _theme = _interopRequireDefault(require("../../../theme"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/**
* The global Footer, displays a link to the website and the current Keystone
* version in use
*/
var Footer = _react["default"].createClass({
displayName: 'Footer',
propTypes: {
appversion: _react["default"].PropTypes.string,
backUrl: _react["default"].PropTypes.string,
brand: _react["default"].PropTypes.string,
user: _react["default"].PropTypes.object,
User: _react["default"].PropTypes.object,
// eslint-disable-line react/sort-prop-types
version: _react["default"].PropTypes.string
},
// Render the user
renderUser: function renderUser() {
var _this$props = this.props,
User = _this$props.User,
user = _this$props.user;
if (!user) return null;
return _react["default"].createElement("span", null, _react["default"].createElement("span", null, " Signed in as "), _react["default"].createElement("a", {
href: "".concat(Keystone.adminPath, "/").concat(User.path, "/").concat(user.id),
tabIndex: "-1",
className: (0, _glamor.css)(classes.link)
}, user.name), _react["default"].createElement("span", null, "."));
},
render: function render() {
var _this$props2 = this.props,
backUrl = _this$props2.backUrl,
brand = _this$props2.brand,
appversion = _this$props2.appversion,
version = _this$props2.version;
return _react["default"].createElement("footer", {
className: (0, _glamor.css)(classes.footer),
"data-keystone-footer": true
}, _react["default"].createElement(_elemental.Container, null, _react["default"].createElement("a", {
href: backUrl,
tabIndex: "-1",
className: (0, _glamor.css)(classes.link)
}, brand + (appversion ? ' ' + appversion : '')), _react["default"].createElement("span", null, " powered by "), _react["default"].createElement("a", {
href: "http://keystonejs.com",
target: "_blank",
className: (0, _glamor.css)(classes.link),
tabIndex: "-1"
}, "KeystoneJS"), _react["default"].createElement("span", null, " version ", version, "."), this.renderUser()));
}
});
/* eslint quote-props: ["error", "as-needed"] */
var linkHoverAndFocus = {
color: _theme["default"].color.gray60,
outline: 'none'
};
var classes = {
footer: {
boxShadow: '0 -1px 0 rgba(0, 0, 0, 0.1)',
color: _theme["default"].color.gray40,
fontSize: _theme["default"].font.size.small,
paddingBottom: 30,
paddingTop: 40,
textAlign: 'center'
},
link: {
color: _theme["default"].color.gray60,
':hover': linkHoverAndFocus,
':focus': linkHoverAndFocus
}
};
module.exports = Footer;
},{"../../../theme":149,"../../elemental":73,"glamor":undefined,"react":undefined}],3:[function(require,module,exports){
"use strict";
var _react = _interopRequireDefault(require("react"));
var _reactRouter = require("react-router");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/**
* A list item of the mobile navigation
*/
var MobileListItem = _react["default"].createClass({
displayName: 'MobileListItem',
propTypes: {
children: _react["default"].PropTypes.node.isRequired,
className: _react["default"].PropTypes.string,
href: _react["default"].PropTypes.string.isRequired,
onClick: _react["default"].PropTypes.func
},
render: function render() {
return _react["default"].createElement(_reactRouter.Link, {
className: this.props.className,
to: this.props.href,
onClick: this.props.onClick,
tabIndex: "-1"
}, this.props.children);
}
});
module.exports = MobileListItem;
},{"react":undefined,"react-router":undefined}],4:[function(require,module,exports){
"use strict";
var _react = _interopRequireDefault(require("react"));
var _ListItem = _interopRequireDefault(require("./ListItem"));
var _reactRouter = require("react-router");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/**
* A mobile section
*/
var MobileSectionItem = _react["default"].createClass({
displayName: 'MobileSectionItem',
propTypes: {
children: _react["default"].PropTypes.node.isRequired,
className: _react["default"].PropTypes.string,
currentListKey: _react["default"].PropTypes.string,
href: _react["default"].PropTypes.string.isRequired,
lists: _react["default"].PropTypes.array
},
// Render the lists
renderLists: function renderLists() {
var _this = this;
if (!this.props.lists || this.props.lists.length <= 1) return null;
var navLists = this.props.lists.map(function (item) {
// Get the link and the classname
var href = item.external ? item.path : "".concat(Keystone.adminPath, "/").concat(item.path);
var className = _this.props.currentListKey && _this.props.currentListKey === item.path ? 'MobileNavigation__list-item is-active' : 'MobileNavigation__list-item';
return _react["default"].createElement(_ListItem["default"], {
key: item.path,
href: href,
className: className,
onClick: _this.props.onClick
}, item.label);
});
return _react["default"].createElement("div", {
className: "MobileNavigation__lists"
}, navLists);
},
render: function render() {
return _react["default"].createElement("div", {
className: this.props.className
}, _react["default"].createElement(_reactRouter.Link, {
className: "MobileNavigation__section-item",
to: this.props.href,
tabIndex: "-1",
onClick: this.props.onClick
}, this.props.children), this.renderLists());
}
});
module.exports = MobileSectionItem;
},{"./ListItem":3,"react":undefined,"react-router":undefined}],5:[function(require,module,exports){
"use strict";
var _react = _interopRequireDefault(require("react"));
var _reactAddonsCssTransitionGroup = _interopRequireDefault(require("react-addons-css-transition-group"));
var _SectionItem = _interopRequireDefault(require("./SectionItem"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/**
* The mobile navigation, displayed on screens < 768px
*/
var ESCAPE_KEY_CODE = 27;
var MobileNavigation = _react["default"].createClass({
displayName: 'MobileNavigation',
propTypes: {
brand: _react["default"].PropTypes.string,
currentListKey: _react["default"].PropTypes.string,
currentSectionKey: _react["default"].PropTypes.string,
sections: _react["default"].PropTypes.array.isRequired,
signoutUrl: _react["default"].PropTypes.string
},
getInitialState: function getInitialState() {
return {
barIsVisible: false
};
},
// Handle showing and hiding the menu based on the window size when
// resizing
componentDidMount: function componentDidMount() {
this.handleResize();
window.addEventListener('resize', this.handleResize);
},
componentWillUnmount: function componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
},
handleResize: function handleResize() {
this.setState({
barIsVisible: window.innerWidth < 768
});
},
// Toggle the menu
toggleMenu: function toggleMenu() {
this[this.state.menuIsVisible ? 'hideMenu' : 'showMenu']();
},
// Show the menu
showMenu: function showMenu() {
this.setState({
menuIsVisible: true
}); // Make the body unscrollable, so you can only scroll in the menu
document.body.style.overflow = 'hidden';
document.body.addEventListener('keyup', this.handleEscapeKey, false);
},
// Hide the menu
hideMenu: function hideMenu() {
this.setState({
menuIsVisible: false
}); // Make the body scrollable again
document.body.style.overflow = null;
document.body.removeEventListener('keyup', this.handleEscapeKey, false);
},
// If the escape key was pressed, hide the menu
handleEscapeKey: function handleEscapeKey(event) {
if (event.which === ESCAPE_KEY_CODE) {
this.hideMenu();
}
},
renderNavigation: function renderNavigation() {
var _this = this;
if (!this.props.sections || !this.props.sections.length) return null;
return this.props.sections.map(function (section) {
// Get the link and the classname
var href = section.lists[0].external ? section.lists[0].path : "".concat(Keystone.adminPath, "/").concat(section.lists[0].path);
var className = _this.props.currentSectionKey && _this.props.currentSectionKey === section.key ? 'MobileNavigation__section is-active' : 'MobileNavigation__section'; // Render a SectionItem
return _react["default"].createElement(_SectionItem["default"], {
key: section.key,
className: className,
href: href,
lists: section.lists,
currentListKey: _this.props.currentListKey,
onClick: _this.toggleMenu
}, section.label);
});
},
// Render a blockout
renderBlockout: function renderBlockout() {
if (!this.state.menuIsVisible) return null;
return _react["default"].createElement("div", {
className: "MobileNavigation__blockout",
onClick: this.toggleMenu
});
},
// Render the sidebar menu
renderMenu: function renderMenu() {
if (!this.state.menuIsVisible) return null;
return _react["default"].createElement("nav", {
className: "MobileNavigation__menu"
}, _react["default"].createElement("div", {
className: "MobileNavigation__sections"
}, this.renderNavigation()));
},
render: function render() {
if (!this.state.barIsVisible) return null;
return _react["default"].createElement("div", {
className: "MobileNavigation"
}, _react["default"].createElement("div", {
className: "MobileNavigation__bar"
}, _react["default"].createElement("button", {
type: "button",
onClick: this.toggleMenu,
className: "MobileNavigation__bar__button MobileNavigation__bar__button--menu"
}, _react["default"].createElement("span", {
className: 'MobileNavigation__bar__icon octicon octicon-' + (this.state.menuIsVisible ? 'x' : 'three-bars')
})), _react["default"].createElement("span", {
className: "MobileNavigation__bar__label"
}, this.props.brand), _react["default"].createElement("a", {
href: this.props.signoutUrl,
className: "MobileNavigation__bar__button MobileNavigation__bar__button--signout"
}, _react["default"].createElement("span", {
className: "MobileNavigation__bar__icon octicon octicon-sign-out"
}))), _react["default"].createElement("div", {
className: "MobileNavigation__bar--placeholder"
}), _react["default"].createElement(_reactAddonsCssTransitionGroup["default"], {
transitionName: "MobileNavigation__menu",
transitionEnterTimeout: 260,
transitionLeaveTimeout: 200
}, this.renderMenu()), _react["default"].createElement(_reactAddonsCssTransitionGroup["default"], {
transitionName: "react-transitiongroup-fade",
transitionEnterTimeout: 0,
transitionLeaveTimeout: 0
}, this.renderBlockout()));
}
});
module.exports = MobileNavigation;
},{"./SectionItem":4,"react":undefined,"react-addons-css-transition-group":undefined}],6:[function(require,module,exports){
"use strict";
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactRouter = require("react-router");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
/**
* A item in the primary navigation. If it has a "to" prop it'll render a
* react-router "Link", if it has a "href" prop it'll render a simple "a" tag
*/
var PrimaryNavItem = function PrimaryNavItem(_ref) {
var children = _ref.children,
className = _ref.className,
href = _ref.href,
label = _ref.label,
title = _ref.title,
to = _ref.to,
active = _ref.active;
var itemClassName = (0, _classnames["default"])('primary-navbar__item', className);
var Button = to ? _react["default"].createElement(_reactRouter.Link, {
className: "primary-navbar__link",
key: title,
tabIndex: "-1",
title: title,
to: to // Block clicks on active link
,
onClick: function onClick(evt) {
if (active) evt.preventDefault();
}
}, children) : _react["default"].createElement("a", {
className: "primary-navbar__link",
href: href,
key: title,
tabIndex: "-1",
title: title
}, children);
return _react["default"].createElement("li", {
className: itemClassName,
"data-section-label": label
}, Button);
};
PrimaryNavItem.displayName = 'PrimaryNavItem';
PrimaryNavItem.propTypes = {
children: _react.PropTypes.node.isRequired,
className: _react.PropTypes.string,
href: _react.PropTypes.string,
label: _react.PropTypes.string,
title: _react.PropTypes.string,
to: _react.PropTypes.string
};
module.exports = PrimaryNavItem;
},{"classnames":undefined,"react":undefined,"react-router":undefined}],7:[function(require,module,exports){
"use strict";
var _react = _interopRequireDefault(require("react"));
var _elemental = require("../../../elemental");
var _NavItem = _interopRequireDefault(require("./NavItem"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/**
* The primary (i.e. uppermost) navigation on desktop. Renders all sections and
* the home-, website- and signout buttons.
*/
var PrimaryNavigation = _react["default"].createClass({
displayName: 'PrimaryNavigation',
propTypes: {
brand: _react["default"].PropTypes.string,
currentSectionKey: _react["default"].PropTypes.string,
sections: _react["default"].PropTypes.array.isRequired,
signoutUrl: _react["default"].PropTypes.string
},
getInitialState: function getInitialState() {
return {};
},
// Handle resizing, hide this navigation on mobile (i.e. < 768px) screens
componentDidMount: function componentDidMount() {
this.handleResize();
window.addEventListener('resize', this.handleResize);
},
componentWillUnmount: function componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
},
handleResize: function handleResize() {
this.setState({
navIsVisible: window.innerWidth >= 768
});
},
// Render the sign out button
renderSignout: function renderSignout() {
if (!this.props.signoutUrl) return null;
return _react["default"].createElement(_NavItem["default"], {
label: "octicon-sign-out",
href: this.props.signoutUrl,
title: "Sign Out"
}, _react["default"].createElement("span", {
className: "octicon octicon-sign-out"
}));
},
// Render the back button
renderBackButton: function renderBackButton() {
if (!Keystone.backUrl) return null;
return _react["default"].createElement(_NavItem["default"], {
label: "octicon-globe",
href: Keystone.backUrl,
title: 'Front page - ' + this.props.brand
}, _react["default"].createElement("span", {
className: "octicon octicon-globe"
}));
},
// Render the link to the webpage
renderFrontLink: function renderFrontLink() {
return _react["default"].createElement("ul", {
className: "app-nav app-nav--primary app-nav--right"
}, this.renderBackButton(), this.renderSignout());
},
renderBrand: function renderBrand() {
// TODO: support navbarLogo from keystone config
var _this$props = this.props,
brand = _this$props.brand,
currentSectionKey = _this$props.currentSectionKey;
var className = currentSectionKey === 'dashboard' ? 'primary-navbar__brand primary-navbar__item--active' : 'primary-navbar__brand';
return _react["default"].createElement(_NavItem["default"], {
className: className,
label: "octicon-home",
title: 'Dashboard - ' + brand,
to: Keystone.adminPath
}, _react["default"].createElement("span", {
className: "octicon octicon-home"
}));
},
// Render the navigation
renderNavigation: function renderNavigation() {
var _this = this;
if (!this.props.sections || !this.props.sections.length) return null;
return this.props.sections.map(function (section) {
// Get the link and the class name
var to = !section.lists[0].external && "".concat(Keystone.adminPath, "/").concat(section.lists[0].path);
var href = section.lists[0].external && section.lists[0].path;
var isActive = _this.props.currentSectionKey && _this.props.currentSectionKey === section.key;
var className = isActive ? 'primary-navbar__item--active' : null;
return _react["default"].createElement(_NavItem["default"], {
active: isActive,
key: section.key,
label: section.label,
className: className,
to: to,
href: href
}, section.label);
});
},
render: function render() {
if (!this.state.navIsVisible) return null;
return _react["default"].createElement("nav", {
className: "primary-navbar"
}, _react["default"].createElement(_elemental.Container, {
clearFloatingChildren: true
}, _react["default"].createElement("ul", {
className: "app-nav app-nav--primary app-nav--left"
}, this.renderBrand(), this.renderNavigation()), this.renderFrontLink()));
}
});
module.exports = PrimaryNavigation;
},{"../../../elemental":73,"./NavItem":6,"react":undefined}],8:[function(require,module,exports){
"use strict";
var _react = _interopRequireDefault(require("react"));
var _reactRouter = require("react-router");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/**
* A navigation item of the secondary navigation
*/
var SecondaryNavItem = _react["default"].createClass({
displayName: 'SecondaryNavItem',
propTypes: {
children: _react["default"].PropTypes.node.isRequired,
className: _react["default"].PropTypes.string,
href: _react["default"].PropTypes.string.isRequired,
onClick: _react["default"].PropTypes.func,
path: _react["default"].PropTypes.string,
title: _react["default"].PropTypes.string
},
render: function render() {
return _react["default"].createElement("li", {
className: this.props.className,
"data-list-path": this.props.path
}, _react["default"].createElement(_reactRouter.Link, {
to: this.props.href,
onClick: this.props.onClick,
title: this.props.title,
tabIndex: "-1"
}, this.props.children));
}
});
module.exports = SecondaryNavItem;
},{"react":undefined,"react-router":undefined}],9:[function(require,module,exports){
"use strict";
var _react = _interopRequireDefault(require("react"));
var _reactRedux = require("react-redux");
var _elemental = require("../../../elemental");
var _active = require("../../../screens/List/actions/active");
var _NavItem = _interopRequireDefault(require("./NavItem"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/**
* The secondary navigation links to inidvidual lists of a section
*/
var SecondaryNavigation = _react["default"].createClass({
displayName: 'SecondaryNavigation',
propTypes: {
currentListKey: _react["default"].PropTypes.string,
lists: _react["default"].PropTypes.array.isRequired
},
getInitialState: function getInitialState() {
return {};
},
// Handle resizing and hide this nav on mobile (i.e. < 768px) screens
componentDidMount: function componentDidMount() {
this.handleResize();
window.addEventListener('resize', this.handleResize);
},
componentWillUnmount: function componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
},
handleResize: function handleResize() {
this.setState({
navIsVisible: this.props.lists && Object.keys(this.props.lists).length > 0 && window.innerWidth >= 768
});
},
// Render the navigation
renderNavigation: function renderNavigation(lists) {
var _this = this;
var navigation = Object.keys(lists).map(function (key) {
var list = lists[key]; // Get the link and the classname
var href = list.external ? list.path : "".concat(Keystone.adminPath, "/").concat(list.path);
var isActive = _this.props.currentListKey && _this.props.currentListKey === list.path;
var className = isActive ? 'active' : null;
var onClick = function onClick(evt) {
// If it's the currently active navigation item and we're not on the item view,
// clear the query params on click
if (isActive && !_this.props.itemId) {
evt.preventDefault();
_this.props.dispatch((0, _active.setActiveList)(_this.props.currentList, _this.props.currentListKey));
}
};
return _react["default"].createElement(_NavItem["default"], {
key: list.path,
path: list.path,
className: className,
href: href,
onClick: onClick
}, list.label);
});
return _react["default"].createElement("ul", {
className: "app-nav app-nav--secondary app-nav--left"
}, navigation);
},
render: function render() {
if (!this.state.navIsVisible) return null;
return _react["default"].createElement("nav", {
className: "secondary-navbar"
}, _react["default"].createElement(_elemental.Container, {
clearFloatingChildren: true
}, this.renderNavigation(this.props.lists)));
}
});
module.exports = (0, _reactRedux.connect)(function (state) {
return {
currentList: state.lists.currentList
};
})(SecondaryNavigation);
},{"../../../elemental":73,"../../../screens/List/actions/active":103,"./NavItem":8,"react":undefined,"react-redux":undefined}],10:[function(require,module,exports){
"use strict";
var _theme = _interopRequireDefault(require("../../../theme"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
module.exports = {
danger: _theme["default"].alert.color.danger,
error: _theme["default"].alert.color.danger,
info: _theme["default"].alert.color.info,
success: _theme["default"].alert.color.success,
warning: _theme["default"].alert.color.warning
};
},{"../../../theme":149}],11:[function(require,module,exports){
"use strict";
var _glamor = require("glamor");
var _react = _interopRequireWildcard(require("react"));
var _styles = _interopRequireDefault(require("./styles"));
var _colors = _interopRequireDefault(require("./colors"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
function _extends() { _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; }; return _extends.apply(this, arguments); }
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; }
// clone children if a class exists for the tagname
var cloneWithClassnames = function cloneWithClassnames(c) {
var type = c.type && c.type.displayName ? c.type.displayName : c.type || null;
if (!type || !_styles["default"][type]) return c;
return (0, _react.cloneElement)(c, {
className: (0, _glamor.css)(_styles["default"][type])
});
};
function Alert(_ref) {
var children = _ref.children,
className = _ref.className,
color = _ref.color,
Component = _ref.component,
props = _objectWithoutProperties(_ref, ["children", "className", "color", "component"]);
props.className = (0, _glamor.css)(_styles["default"].alert, _styles["default"][color], className);
props.children = _react.Children.map(children, cloneWithClassnames);
return _react["default"].createElement(Component, _extends({}, props, {
"data-alert-type": color
}));
}
;
Alert.propTypes = {
color: _react.PropTypes.oneOf(Object.keys(_colors["default"])).isRequired,
component: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string])
};
Alert.defaultProps = {
component: 'div'
};
module.exports = Alert;
},{"./colors":10,"./styles":12,"glamor":undefined,"react":undefined}],12:[function(require,module,exports){
"use strict";
var _colors = _interopRequireDefault(require("./colors"));
var _theme = _interopRequireDefault(require("../../../theme"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
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; }
// Prepare variants
var colorVariants = {};
Object.keys(_colors["default"]).forEach(function (color) {
colorVariants[color] = {
backgroundColor: _colors["default"][color].background,
borderColor: _colors["default"][color].border,
color: _colors["default"][color].text
};
}); // Prepare headings
var headingTagnames = {};
['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function (tag) {
headingTagnames[tag] = {
color: 'inherit'
};
});
var linkStyles = {
color: 'inherit',
textDecoration: 'underline',
':hover': {
color: 'inherit'
},
':focus': {
color: 'inherit'
}
};
module.exports = _objectSpread({
alert: {
borderColor: 'transparent',
borderRadius: _theme["default"].alert.borderRadius,
borderStyle: 'solid',
borderWidth: _theme["default"].alert.borderWidth,
margin: _theme["default"].alert.margin,
padding: _theme["default"].alert.padding
},
// tagnames
a: linkStyles,
Link: linkStyles,
strong: {
fontWeight: 500
}
}, headingTagnames, colorVariants);
},{"../../../theme":149,"./colors":10}],13:[function(require,module,exports){
"use strict";
var _glamor = require("glamor");
var _react = _interopRequireWildcard(require("react"));
var _theme = _interopRequireDefault(require("../../../theme"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
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; }
function BlankState(_ref) {
var className = _ref.className,
children = _ref.children,
heading = _ref.heading,
Component = _ref.component,
props = _objectWithoutProperties(_ref, ["className", "children", "heading", "component"]);
props.className = (0, _glamor.css)(classes.container, className);
return _react["default"].createElement(Component, props, !!heading && _react["default"].createElement("h2", {
"data-e2e-blank-state-heading": true,
className: (0, _glamor.css)(classes.heading)
}, heading), children);
}
;
BlankState.propTypes = {
component: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]).isRequired,
heading: _react.PropTypes.string
};
BlankState.defaultProps = {
component: 'div'
};
/* eslint quote-props: ["error", "as-needed"] */
var classes = {
container: {
backgroundColor: _theme["default"].blankstate.background,
borderRadius: _theme["default"].blankstate.borderRadius,
color: _theme["default"].blankstate.color,
paddingBottom: _theme["default"].blankstate.paddingVertical,
paddingLeft: _theme["default"].blankstate.paddingHorizontal,
paddingRight: _theme["default"].blankstate.paddingHorizontal,
paddingTop: _theme["default"].blankstate.paddingVertical,
textAlign: 'center'
},
heading: {
color: 'inherit',
':last-child': {
marginBottom: 0
}
}
};
module.exports = BlankState;
},{"../../../theme":149,"glamor":undefined,"react":undefined}],14:[function(require,module,exports){
"use strict";
var _glamor = require("glamor");
var _react = _interopRequireWildcard(require("react"));
var _styles = _interopRequireDefault(require("./styles"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
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; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var commonClasses = _styles["default"].common;
var stylesheetCache = {};
function getStyleSheet(variant, color) {
var cacheKey = "".concat(variant, "-").concat(color);
if (!stylesheetCache[cacheKey]) {
var variantStyles = _styles["default"][variant](color);
stylesheetCache[cacheKey] = variantStyles;
}
return stylesheetCache[cacheKey];
}
var BUTTON_SIZES = ['large', 'medium', 'small', 'xsmall'];
var BUTTON_VARIANTS = ['fill', 'hollow', 'link'];
var BUTTON_COLORS = ['default', 'primary', 'success', 'warning', 'danger', 'cancel', 'delete']; // NOTE must NOT be functional component to allow `refs`
var Button =
/*#__PURE__*/
function (_Component) {
_inherits(Button, _Component);
function Button() {
_classCallCheck(this, Button);
return _possibleConstructorReturn(this, _getPrototypeOf(Button).apply(this, arguments));
}
_createClass(Button, [{
key: "render",
value: function render() {
var _this$props = this.props,
active = _this$props.active,
cssStyles = _this$props.cssStyles,
block = _this$props.block,
className = _this$props.className,
color = _this$props.color,
Tag = _this$props.component,
disabled = _this$props.disabled,
size = _this$props.size,
variant = _this$props.variant,
props = _objectWithoutProperties(_this$props, ["active", "cssStyles", "block", "className", "color", "component", "disabled", "size", "variant"]); // get the styles
var variantClasses = getStyleSheet(variant, color);
props.className = _glamor.css.apply(void 0, [commonClasses.base, commonClasses[size], variantClasses.base, block ? commonClasses.block : null, disabled ? commonClasses.disabled : null, active ? variantClasses.active : null].concat(_toConsumableArray(cssStyles)));
if (className) {
props.className += ' ' + className;
} // return an anchor or button
if (!Tag) {
Tag = props.href ? 'a' : 'button';
} // Ensure buttons don't submit by default
if (Tag === 'button' && !props.type) {
props.type = 'button';
}
return _react["default"].createElement(Tag, props);
}
}]);
return Button;
}(_react.Component);
;
Button.propTypes = {
active: _react.PropTypes.bool,
block: _react.PropTypes.bool,
color: _react.PropTypes.oneOf(BUTTON_COLORS),
component: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
cssStyles: _react.PropTypes.arrayOf(_react.PropTypes.shape({
_definition: _react.PropTypes.object,
_name: _react.PropTypes.string
})),
disabled: _react.PropTypes.bool,
href: _react.PropTypes.string,
size: _react.PropTypes.oneOf(BUTTON_SIZES),
variant: _react.PropTypes.oneOf(BUTTON_VARIANTS)
};
Button.defaultProps = {
cssStyles: [],
color: 'default',
variant: 'fill'
};
module.exports = Button;
},{"./styles":15,"glamor":undefined,"react":undefined}],15:[function(require,module,exports){
"use strict";
var _css = require("../../../utils/css");
var _color = require("../../../utils/color");
var _theme = _interopRequireDefault(require("../../../theme"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
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; }
// Common Styles
// ----------------
exports.common = {
// Base Button
// ----------------
base: {
'appearance': 'none',
'background': 'none',
'borderWidth': _theme["default"].button.borderWidth,
'borderStyle': 'solid',
'borderColor': 'transparent',
'borderRadius': _theme["default"].button.borderRadius,
'cursor': 'pointer',
'display': 'inline-block',
'fontWeight': _theme["default"].button.font.weight,
'height': _theme["default"].component.height,
'lineHeight': _theme["default"].component.lineHeight,
'marginBottom': 0,
'padding': "0 ".concat(_theme["default"].button.paddingHorizontal),
'outline': 0,
'textAlign': 'center',
'touchAction': 'manipulation',
'userSelect': 'none',
'verticalAlign': 'middle',
'whiteSpace': 'nowrap',
':hover': {
color: _theme["default"].button["default"].textColor,
textDecoration: 'none'
},
':focus': {
color: _theme["default"].button["default"].textColor,
textDecoration: 'none'
}
},
// Block Display
// ----------------
block: {
display: 'block',
width: '100%'
},
// Disabled
// ----------------
disabled: {
opacity: 0.4,
pointerEvents: 'none'
},
// Sizes
// ----------------
large: {
fontSize: _theme["default"].font.size.large
},
"default": {
fontSize: _theme["default"].font.size["default"]
},
small: {
fontSize: _theme["default"].font.size.small
},
xsmall: {
fontSize: _theme["default"].font.size.xsmall,
lineHeight: '1.9',
paddingLeft: '.66em',
paddingRight: '.66em'
}
}; // Fill Variant
// ----------------
function buttonFillVariant(textColor, bgColor) {
var hoverStyles = _objectSpread({}, (0, _css.gradientVertical)((0, _color.lighten)(bgColor, 10), (0, _color.darken)(bgColor, 5)), {
borderColor: "".concat((0, _color.darken)(bgColor, 5), " ").concat((0, _color.darken)(bgColor, 10), " ").concat((0, _color.darken)(bgColor, 15)),
boxShadow: '0 1px 0 rgba(0,0,0,0.1)',
color: textColor,
outline: 'none'
});
var focusStyles = _objectSpread({}, (0, _css.gradientVertical)((0, _color.lighten)(bgColor, 10), (0, _color.darken)(bgColor, 5)), {
borderColor: "".concat((0, _color.darken)(bgColor, 5), " ").concat((0, _color.darken)(bgColor, 10), " ").concat((0, _color.darken)(bgColor, 15)),
boxShadow: "0 0 0 3px ".concat((0, _color.fade)(bgColor, 25)),
color: textColor,
outline: 'none'
});
var activeStyles = {
backgroundColor: (0, _color.darken)(bgColor, 10),
backgroundImage: 'none',
borderColor: "".concat((0, _color.darken)(bgColor, 25), " ").concat((0, _color.darken)(bgColor, 15), " ").concat((0, _color.darken)(bgColor, 10)),
boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.1)'
};
return {
base: _objectSpread({}, (0, _css.gradientVertical)((0, _color.lighten)(bgColor, 5), (0, _color.darken)(bgColor, 10), bgColor), {
'borderColor': "".concat((0, _color.darken)(bgColor, 10), " ").concat((0, _color.darken)(bgColor, 20), " ").concat((0, _color.darken)(bgColor, 25)),
'boxShadow': 'inset 0 1px 0 rgba(255, 255, 255, 0.1)',
'color': textColor,
'fontWeight': 400,
'textShadow': '0 -1px 0 rgba(0, 0, 0, 0.25)',
':hover': hoverStyles,
':focus': focusStyles,
':active': activeStyles
}),
active: activeStyles
};
} // TODO: This is pretty hacky, needs to be consolidated with the Variant() method
// above (needs more theme variables to be implemented though)
function buttonFillDefault() {
var borderColor = _theme["default"].input.border.color["default"];
var hoverStyles = _objectSpread({}, (0, _css.gradientVertical)('#fff', '#eee'), {
borderColor: "".concat((0, _color.darken)(borderColor, 5), " ").concat((0, _color.darken)(borderColor, 5), " ").concat((0, _color.darken)(borderColor, 10)),
boxShadow: '0 1px 0 rgba(0,0,0,0.1)',
color: _theme["default"].color.text
});
var focusStyles = {
borderColor: _theme["default"].color.primary,
boxShadow: "0 0 0 3px ".concat((0, _color.fade)(_theme["default"].color.primary, 10)),
color: _theme["default"].color.text,
outline: 'none'
};
var activeStyles = {
background: '#e6e6e6',
borderColor: (0, _color.darken)(borderColor, 10),
boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.1)',
color: _theme["default"].color.text
};
return {
base: _objectSpread({}, (0, _css.gradientVertical)('#fafafa', '#eaeaea'), {
'borderColor': "".concat(borderColor, " ").concat((0, _color.darken)(borderColor, 6), " ").concat((0, _color.darken)(borderColor, 12)),
'color': _theme["default"].color.text,
'textShadow': '0 1px 0 white',
':hover': hoverStyles,
':focus': focusStyles,
':active': activeStyles
}),
// gross hack
active: _objectSpread({}, activeStyles, {
':hover': activeStyles,
':focus': _objectSpread({}, activeStyles, focusStyles, {
boxShadow: "0 0 0 3px ".concat((0, _color.fade)(_theme["default"].color.primary, 10), ", inset 0 1px 2px rgba(0, 0, 0, 0.1)")
}),
':active': activeStyles
})
};
}
exports.fill = function (color) {
switch (color) {
case 'default':
return buttonFillDefault();
case 'cancel':
case 'delete':
return buttonFillVariant('white', _theme["default"].button.danger.bgColor);
default:
return buttonFillVariant('white', _theme["default"].button[color].bgColor);
}
}; // Hollow Variant
// ----------------
function buttonHollowVariant(textColor, borderColor) {
var focusAndHoverStyles = {
backgroundImage: 'none',
backgroundColor: (0, _color.fade)(borderColor, 15),
borderColor: (0, _color.darken)(borderColor, 15),
boxShadow: 'none',
color: textColor,
outline: 'none'
};
var focusOnlyStyles = {
boxShadow: "0 0 0 3px ".concat((0, _color.fade)(borderColor, 10))
};
var activeStyles = {
backgroundColor: (0, _color.fade)(borderColor, 35),
borderColor: (0, _color.darken)(borderColor, 25),
boxShadow: 'none'
};
return {
base: {
'background': 'none',
'borderColor': borderColor,
'color': textColor,
':hover': focusAndHoverStyles,
':focus ': Object.assign({}, focusAndHoverStyles, focusOnlyStyles),
':active': activeStyles
},
active: activeStyles
};
}
;
exports.hollow = function (color) {
// TODO: better handling of cancel and delete colors
if (color === 'cancel' || color === 'delete') color = 'danger';
return buttonHollowVariant(_theme["default"].button[color].bgColor, _theme["def