keystone
Version:
Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose
1,632 lines (1,356 loc) • 2.02 MB
JavaScript
(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';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _elemental = require('./elemental');
var _reactRouter = require('react-router');
var _noImportant = require('aphrodite/no-important');
var _Mobile = require('./components/Navigation/Mobile');
var _Mobile2 = _interopRequireDefault(_Mobile);
var _Primary = require('./components/Navigation/Primary');
var _Primary2 = _interopRequireDefault(_Primary);
var _Secondary = require('./components/Navigation/Secondary');
var _Secondary2 = _interopRequireDefault(_Secondary);
var _Footer = require('./components/Footer');
var _Footer2 = _interopRequireDefault(_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 = _noImportant.StyleSheet.create({
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 = void 0,
currentSection = void 0;
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 = _react2.default.createElement(
_elemental.Container,
null,
_react2.default.createElement(
'p',
null,
'List not found!'
),
_react2.default.createElement(
_reactRouter.Link,
{ to: '' + 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 _react2.default.createElement(
'div',
{ className: (0, _noImportant.css)(classes.wrapper) },
_react2.default.createElement(
'header',
null,
_react2.default.createElement(_Mobile2.default, {
brand: Keystone.brand,
currentListKey: props.params.listId,
currentSectionKey: currentSectionKey,
sections: Keystone.nav.sections,
signoutUrl: Keystone.signoutUrl
}),
_react2.default.createElement(_Primary2.default, {
currentSectionKey: currentSectionKey,
brand: Keystone.brand,
sections: Keystone.nav.sections,
signoutUrl: Keystone.signoutUrl
}),
currentSection ? _react2.default.createElement(_Secondary2.default, {
currentListKey: props.params.listId,
lists: currentSection.lists,
itemId: props.params.itemId
}) : null
),
_react2.default.createElement(
'main',
{ className: (0, _noImportant.css)(classes.body) },
children
),
_react2.default.createElement(_Footer2.default, {
appversion: Keystone.appversion,
backUrl: Keystone.backUrl,
brand: Keystone.brand,
User: Keystone.User,
user: Keystone.user,
version: Keystone.version
})
);
};
module.exports = App;
},{"../utils/lists":153,"./components/Footer":2,"./components/Navigation/Mobile":5,"./components/Navigation/Primary":7,"./components/Navigation/Secondary":9,"./elemental":73,"aphrodite/no-important":undefined,"react":undefined,"react-router":undefined}],2:[function(require,module,exports){
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _noImportant = require('aphrodite/no-important');
var _elemental = require('../../elemental');
var _theme = require('../../../theme');
var _theme2 = _interopRequireDefault(_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 = _react2.default.createClass({
displayName: 'Footer',
propTypes: {
appversion: _react2.default.PropTypes.string,
backUrl: _react2.default.PropTypes.string,
brand: _react2.default.PropTypes.string,
user: _react2.default.PropTypes.object,
User: _react2.default.PropTypes.object, // eslint-disable-line react/sort-prop-types
version: _react2.default.PropTypes.string
},
// Render the user
renderUser: function renderUser() {
var _props = this.props,
User = _props.User,
user = _props.user;
if (!user) return null;
return _react2.default.createElement(
'span',
null,
_react2.default.createElement(
'span',
null,
' Signed in as '
),
_react2.default.createElement(
'a',
{ href: Keystone.adminPath + '/' + User.path + '/' + user.id, tabIndex: '-1', className: (0, _noImportant.css)(classes.link) },
user.name
),
_react2.default.createElement(
'span',
null,
'.'
)
);
},
render: function render() {
var _props2 = this.props,
backUrl = _props2.backUrl,
brand = _props2.brand,
appversion = _props2.appversion,
version = _props2.version;
return _react2.default.createElement(
'footer',
{ className: (0, _noImportant.css)(classes.footer), 'data-keystone-footer': true },
_react2.default.createElement(
_elemental.Container,
null,
_react2.default.createElement(
'a',
{
href: backUrl,
tabIndex: '-1',
className: (0, _noImportant.css)(classes.link)
},
brand + (appversion ? ' ' + appversion : '')
),
_react2.default.createElement(
'span',
null,
' powered by '
),
_react2.default.createElement(
'a',
{
href: 'http://keystonejs.com',
target: '_blank',
className: (0, _noImportant.css)(classes.link),
tabIndex: '-1'
},
'KeystoneJS'
),
_react2.default.createElement(
'span',
null,
' version ',
version,
'.'
),
this.renderUser()
)
);
}
});
/* eslint quote-props: ["error", "as-needed"] */
var linkHoverAndFocus = {
color: _theme2.default.color.gray60,
outline: 'none'
};
var classes = _noImportant.StyleSheet.create({
footer: {
boxShadow: '0 -1px 0 rgba(0, 0, 0, 0.1)',
color: _theme2.default.color.gray40,
fontSize: _theme2.default.font.size.small,
paddingBottom: 30,
paddingTop: 40,
textAlign: 'center'
},
link: {
color: _theme2.default.color.gray60,
':hover': linkHoverAndFocus,
':focus': linkHoverAndFocus
}
});
module.exports = Footer;
},{"../../../theme":148,"../../elemental":73,"aphrodite/no-important":undefined,"react":undefined}],3:[function(require,module,exports){
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_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 = _react2.default.createClass({
displayName: 'MobileListItem',
propTypes: {
children: _react2.default.PropTypes.node.isRequired,
className: _react2.default.PropTypes.string,
href: _react2.default.PropTypes.string.isRequired,
onClick: _react2.default.PropTypes.func
},
render: function render() {
return _react2.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 = require('react');
var _react2 = _interopRequireDefault(_react);
var _ListItem = require('./ListItem');
var _ListItem2 = _interopRequireDefault(_ListItem);
var _reactRouter = require('react-router');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var MobileSectionItem = _react2.default.createClass({
displayName: 'MobileSectionItem',
propTypes: {
children: _react2.default.PropTypes.node.isRequired,
className: _react2.default.PropTypes.string,
currentListKey: _react2.default.PropTypes.string,
href: _react2.default.PropTypes.string.isRequired,
lists: _react2.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 : Keystone.adminPath + '/' + item.path;
var className = _this.props.currentListKey && _this.props.currentListKey === item.path ? 'MobileNavigation__list-item is-active' : 'MobileNavigation__list-item';
return _react2.default.createElement(
_ListItem2.default,
{ key: item.path, href: href, className: className, onClick: _this.props.onClick },
item.label
);
});
return _react2.default.createElement(
'div',
{ className: 'MobileNavigation__lists' },
navLists
);
},
render: function render() {
return _react2.default.createElement(
'div',
{ className: this.props.className },
_react2.default.createElement(
_reactRouter.Link,
{
className: 'MobileNavigation__section-item',
to: this.props.href,
tabIndex: '-1',
onClick: this.props.onClick
},
this.props.children
),
this.renderLists()
);
}
}); /**
* A mobile section
*/
module.exports = MobileSectionItem;
},{"./ListItem":3,"react":undefined,"react-router":undefined}],5:[function(require,module,exports){
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactAddonsCssTransitionGroup = require('react-addons-css-transition-group');
var _reactAddonsCssTransitionGroup2 = _interopRequireDefault(_reactAddonsCssTransitionGroup);
var _SectionItem = require('./SectionItem');
var _SectionItem2 = _interopRequireDefault(_SectionItem);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var ESCAPE_KEY_CODE = 27; /**
* The mobile navigation, displayed on screens < 768px
*/
var MobileNavigation = _react2.default.createClass({
displayName: 'MobileNavigation',
propTypes: {
brand: _react2.default.PropTypes.string,
currentListKey: _react2.default.PropTypes.string,
currentSectionKey: _react2.default.PropTypes.string,
sections: _react2.default.PropTypes.array.isRequired,
signoutUrl: _react2.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 : Keystone.adminPath + '/' + section.lists[0].path;
var className = _this.props.currentSectionKey && _this.props.currentSectionKey === section.key ? 'MobileNavigation__section is-active' : 'MobileNavigation__section';
// Render a SectionItem
return _react2.default.createElement(
_SectionItem2.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 _react2.default.createElement('div', { className: 'MobileNavigation__blockout', onClick: this.toggleMenu });
},
// Render the sidebar menu
renderMenu: function renderMenu() {
if (!this.state.menuIsVisible) return null;
return _react2.default.createElement(
'nav',
{ className: 'MobileNavigation__menu' },
_react2.default.createElement(
'div',
{ className: 'MobileNavigation__sections' },
this.renderNavigation()
)
);
},
render: function render() {
if (!this.state.barIsVisible) return null;
return _react2.default.createElement(
'div',
{ className: 'MobileNavigation' },
_react2.default.createElement(
'div',
{ className: 'MobileNavigation__bar' },
_react2.default.createElement(
'button',
{
type: 'button',
onClick: this.toggleMenu,
className: 'MobileNavigation__bar__button MobileNavigation__bar__button--menu'
},
_react2.default.createElement('span', { className: 'MobileNavigation__bar__icon octicon octicon-' + (this.state.menuIsVisible ? 'x' : 'three-bars') })
),
_react2.default.createElement(
'span',
{ className: 'MobileNavigation__bar__label' },
this.props.brand
),
_react2.default.createElement(
'a',
{
href: this.props.signoutUrl,
className: 'MobileNavigation__bar__button MobileNavigation__bar__button--signout'
},
_react2.default.createElement('span', { className: 'MobileNavigation__bar__icon octicon octicon-sign-out' })
)
),
_react2.default.createElement('div', { className: 'MobileNavigation__bar--placeholder' }),
_react2.default.createElement(
_reactAddonsCssTransitionGroup2.default,
{
transitionName: 'MobileNavigation__menu',
transitionEnterTimeout: 260,
transitionLeaveTimeout: 200
},
this.renderMenu()
),
_react2.default.createElement(
_reactAddonsCssTransitionGroup2.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 = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _reactRouter = require('react-router');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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, _classnames2.default)('primary-navbar__item', className);
var Button = to ? _react2.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
) : _react2.default.createElement(
'a',
{
className: 'primary-navbar__link',
href: href,
key: title,
tabIndex: '-1',
title: title
},
children
);
return _react2.default.createElement(
'li',
{
className: itemClassName,
'data-section-label': label
},
Button
);
}; /**
* 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
*/
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 = require('react');
var _react2 = _interopRequireDefault(_react);
var _elemental = require('../../../elemental');
var _NavItem = require('./NavItem');
var _NavItem2 = _interopRequireDefault(_NavItem);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var PrimaryNavigation = _react2.default.createClass({
displayName: 'PrimaryNavigation',
propTypes: {
brand: _react2.default.PropTypes.string,
currentSectionKey: _react2.default.PropTypes.string,
sections: _react2.default.PropTypes.array.isRequired,
signoutUrl: _react2.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 _react2.default.createElement(
_NavItem2.default,
{
label: 'octicon-sign-out',
href: this.props.signoutUrl,
title: 'Sign Out'
},
_react2.default.createElement('span', { className: 'octicon octicon-sign-out' })
);
},
// Render the back button
renderBackButton: function renderBackButton() {
if (!Keystone.backUrl) return null;
return _react2.default.createElement(
_NavItem2.default,
{
label: 'octicon-globe',
href: Keystone.backUrl,
title: 'Front page - ' + this.props.brand
},
_react2.default.createElement('span', { className: 'octicon octicon-globe' })
);
},
// Render the link to the webpage
renderFrontLink: function renderFrontLink() {
return _react2.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 _props = this.props,
brand = _props.brand,
currentSectionKey = _props.currentSectionKey;
var className = currentSectionKey === 'dashboard' ? 'primary-navbar__brand primary-navbar__item--active' : 'primary-navbar__brand';
return _react2.default.createElement(
_NavItem2.default,
{
className: className,
label: 'octicon-home',
title: 'Dashboard - ' + brand,
to: Keystone.adminPath
},
_react2.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 href = section.lists[0].external ? section.lists[0].path : Keystone.adminPath + '/' + section.lists[0].path;
var isActive = _this.props.currentSectionKey && _this.props.currentSectionKey === section.key;
var className = isActive ? 'primary-navbar__item--active' : null;
return _react2.default.createElement(
_NavItem2.default,
{
active: isActive,
key: section.key,
label: section.label,
className: className,
to: href
},
section.label
);
});
},
render: function render() {
if (!this.state.navIsVisible) return null;
return _react2.default.createElement(
'nav',
{ className: 'primary-navbar' },
_react2.default.createElement(
_elemental.Container,
{ clearFloatingChildren: true },
_react2.default.createElement(
'ul',
{ className: 'app-nav app-nav--primary app-nav--left' },
this.renderBrand(),
this.renderNavigation()
),
this.renderFrontLink()
)
);
}
}); /**
* The primary (i.e. uppermost) navigation on desktop. Renders all sections and
* the home-, website- and signout buttons.
*/
module.exports = PrimaryNavigation;
},{"../../../elemental":73,"./NavItem":6,"react":undefined}],8:[function(require,module,exports){
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_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 = _react2.default.createClass({
displayName: 'SecondaryNavItem',
propTypes: {
children: _react2.default.PropTypes.node.isRequired,
className: _react2.default.PropTypes.string,
href: _react2.default.PropTypes.string.isRequired,
onClick: _react2.default.PropTypes.func,
path: _react2.default.PropTypes.string,
title: _react2.default.PropTypes.string
},
render: function render() {
return _react2.default.createElement(
'li',
{ className: this.props.className, 'data-list-path': this.props.path },
_react2.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 = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactRedux = require('react-redux');
var _elemental = require('../../../elemental');
var _active = require('../../../screens/List/actions/active');
var _NavItem = require('./NavItem');
var _NavItem2 = _interopRequireDefault(_NavItem);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var SecondaryNavigation = _react2.default.createClass({
displayName: 'SecondaryNavigation',
propTypes: {
currentListKey: _react2.default.PropTypes.string,
lists: _react2.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 : Keystone.adminPath + '/' + 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 _react2.default.createElement(
_NavItem2.default,
{
key: list.path,
path: list.path,
className: className,
href: href,
onClick: onClick
},
list.label
);
});
return _react2.default.createElement(
'ul',
{ className: 'app-nav app-nav--secondary app-nav--left' },
navigation
);
},
render: function render() {
if (!this.state.navIsVisible) return null;
return _react2.default.createElement(
'nav',
{ className: 'secondary-navbar' },
_react2.default.createElement(
_elemental.Container,
{ clearFloatingChildren: true },
this.renderNavigation(this.props.lists)
)
);
}
}); /**
* The secondary navigation links to inidvidual lists of a section
*/
module.exports = (0, _reactRedux.connect)(function (state) {
return {
currentList: state.lists.currentList
};
})(SecondaryNavigation);
},{"../../../elemental":73,"../../../screens/List/actions/active":102,"./NavItem":8,"react":undefined,"react-redux":undefined}],10:[function(require,module,exports){
'use strict';
var _theme = require('../../../theme');
var _theme2 = _interopRequireDefault(_theme);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
module.exports = {
danger: _theme2.default.alert.color.danger,
error: _theme2.default.alert.color.danger,
info: _theme2.default.alert.color.info,
success: _theme2.default.alert.color.success,
warning: _theme2.default.alert.color.warning
};
},{"../../../theme":148}],11:[function(require,module,exports){
'use strict';
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 _noImportant = require('aphrodite/no-important');
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styles = require('./styles');
var _styles2 = _interopRequireDefault(_styles);
var _colors = require('./colors');
var _colors2 = _interopRequireDefault(_colors);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var classes = _noImportant.StyleSheet.create(_styles2.default);
// 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 || !classes[type]) return c;
return (0, _react.cloneElement)(c, {
className: (0, _noImportant.css)(classes[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, _noImportant.css)(classes.alert, classes[color], className);
props.children = _react.Children.map(children, cloneWithClassnames);
return _react2.default.createElement(Component, _extends({}, props, { 'data-alert-type': color }));
};
Alert.propTypes = {
color: _react.PropTypes.oneOf(Object.keys(_colors2.default)).isRequired,
component: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string])
};
Alert.defaultProps = {
component: 'div'
};
module.exports = Alert;
},{"./colors":10,"./styles":12,"aphrodite/no-important":undefined,"react":undefined}],12:[function(require,module,exports){
'use strict';
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; }; // ==============================
// Alert
// ==============================
/* eslint quote-props: ["error", "as-needed"] */
var _colors = require('./colors');
var _colors2 = _interopRequireDefault(_colors);
var _theme = require('../../../theme');
var _theme2 = _interopRequireDefault(_theme);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// Prepare variants
var colorVariants = {};
Object.keys(_colors2.default).forEach(function (color) {
colorVariants[color] = {
backgroundColor: _colors2.default[color].background,
borderColor: _colors2.default[color].border,
color: _colors2.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 = _extends({
alert: {
borderColor: 'transparent',
borderRadius: _theme2.default.alert.borderRadius,
borderStyle: 'solid',
borderWidth: _theme2.default.alert.borderWidth,
margin: _theme2.default.alert.margin,
padding: _theme2.default.alert.padding
},
// tagnames
a: linkStyles,
Link: linkStyles,
strong: {
fontWeight: 500
}
}, headingTagnames, colorVariants);
},{"../../../theme":148,"./colors":10}],13:[function(require,module,exports){
'use strict';
var _noImportant = require('aphrodite/no-important');
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _theme = require('../../../theme');
var _theme2 = _interopRequireDefault(_theme);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } 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, _noImportant.css)(classes.container, className);
return _react2.default.createElement(
Component,
props,
!!heading && _react2.default.createElement(
'h2',
{ 'data-e2e-blank-state-heading': true, className: (0, _noImportant.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 = _noImportant.StyleSheet.create({
container: {
backgroundColor: _theme2.default.blankstate.background,
borderRadius: _theme2.default.blankstate.borderRadius,
color: _theme2.default.blankstate.color,
paddingBottom: _theme2.default.blankstate.paddingVertical,
paddingLeft: _theme2.default.blankstate.paddingHorizontal,
paddingRight: _theme2.default.blankstate.paddingHorizontal,
paddingTop: _theme2.default.blankstate.paddingVertical,
textAlign: 'center'
},
heading: {
color: 'inherit',
':last-child': {
marginBottom: 0
}
}
});
module.exports = BlankState;
},{"../../../theme":148,"aphrodite/no-important":undefined,"react":undefined}],14:[function(require,module,exports){
'use strict';
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 _noImportant = require('aphrodite/no-important');
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styles = require('./styles');
var _styles2 = _interopRequireDefault(_styles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
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 commonClasses = _noImportant.StyleSheet.create(_styles2.default.common);
var stylesheetCache = {};
function getStyleSheet(variant, color) {
var cacheKey = variant + '-' + color;
if (!stylesheetCache[cacheKey]) {
var variantStyles = _styles2.default[variant](color);
stylesheetCache[cacheKey] = _noImportant.StyleSheet.create(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 = function (_Component) {
_inherits(Button, _Component);
function Button() {
_classCallCheck(this, Button);
return _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments));
}
_createClass(Button, [{
key: 'render',
value: function render() {
var _props = this.props,
active = _props.active,
aphroditeStyles = _props.aphroditeStyles,
block = _props.block,
className = _props.className,
color = _props.color,
Tag = _props.component,
disabled = _props.disabled,
size = _props.size,
variant = _props.variant,
props = _objectWithoutProperties(_props, ['active', 'aphroditeStyles', 'block', 'className', 'color', 'component', 'disabled', 'size', 'variant']);
// get the styles
var variantClasses = getStyleSheet(variant, color);
props.className = _noImportant.css.apply(undefined, [commonClasses.base, commonClasses[size], variantClasses.base, block ? commonClasses.block : null, disabled ? commonClasses.disabled : null, active ? variantClasses.active : null].concat(_toConsumableArray(aphroditeStyles)));
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 _react2.default.createElement(Tag, props);
}
}]);
return Button;
}(_react.Component);
;
Button.propTypes = {
active: _react.PropTypes.bool,
aphroditeStyles: _react.PropTypes.arrayOf(_react.PropTypes.shape({
_definition: _react.PropTypes.object,
_name: _react.PropTypes.string
})),
block: _react.PropTypes.bool,
color: _react.PropTypes.oneOf(BUTTON_COLORS),
component: _react.PropTypes.oneOfType([_react.PropTypes.func, _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 = {
aphroditeStyles: [],
color: 'default',
variant: 'fill'
};
module.exports = Button;
},{"./styles":15,"aphrodite/no-important":undefined,"react":undefined}],15:[function(require,module,exports){
'use strict';
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; }; // ==============================
// Button
// ==============================
var _css = require('../../../utils/css');
var _color = require('../../../utils/color');
var _theme = require('../../../theme');
var _theme2 = _interopRequireDefault(_theme);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// Common Styles
// ----------------
exports.common = {
// Base Button
// ----------------
base: {
'appearance': 'none',
'background': 'none',
'borderWidth': _theme2.default.button.borderWidth,
'borderStyle': 'solid',
'borderColor': 'transparent',
'borderRadius': _theme2.default.button.borderRadius,
'cursor': 'pointer',
'display': 'inline-block',
'fontWeight': _theme2.default.button.font.weight,
'height': _theme2.default.component.height,
'lineHeight': _theme2.default.component.lineHeight,
'marginBottom': 0,
'padding': '0 ' + _theme2.default.button.paddingHorizontal,
'outline': 0,
'textAlign': 'center',
'touchAction': 'manipulation',
'userSelect': 'none',
'verticalAlign': 'middle',
'whiteSpace': 'nowrap',
':hover': {
color: _theme2.default.button.default.textColor,
textDecoration: 'none'
},
':focus': {
color: _theme2.default.button.default.textColor,
textDecoration: 'none'
}
},
// Block Display
// ----------------
block: {
display: 'block',
width: '100%'
},
// Disabled
// ----------------
disabled: {
opacity: 0.4,
pointerEvents: 'none'
},
// Sizes
// ----------------
large: {
fontSize: _theme2.default.font.size.large
},
default: {
fontSize: _theme2.default.font.size.default
},
small: {
fontSize: _theme2.default.font.size.small
},
xsmall: {
fontSize: _theme2.default.font.size.xsmall,
lineHeight: '1.9',
paddingLeft: '.66em',
paddingRight: '.66em'
}
};
// Fill Variant
// ----------------
function buttonFillVariant(textColor, bgColor) {
var hoverStyles = _extends({}, (0, _css.gradientVertical)((0, _color.lighten)(bgColor, 10), (0, _color.darken)(bgColor, 5)), {
borderColor: (0, _color.darken)(bgColor, 5) + ' ' + (0, _color.darken)(bgColor, 10) + ' ' + (0, _color.darken)(bgColor, 15),
boxShadow: '0 1px 0 rgba(0,0,0,0.1)',
color: textColor,
outline: 'none'
});
var focusStyles = _extends({}, (0, _css.gradientVertical)((0, _color.lighten)(bgColor, 10), (0, _color.darken)(bgColor, 5)), {
borderColor: (0, _color.darken)(bgColor, 5) + ' ' + (0, _color.darken)(bgColor, 10) + ' ' + (0, _color.darken)(bgColor, 15),
boxShadow: '0 0 0 3px ' + (0, _color.fade)(bgColor, 25),
color: textColor,
outline: 'none'
});
var activeStyles = {
backgroundColor: (0, _color.darken)(bgColor, 10),
backgroundImage: 'none',
borderColor: (0, _color.darken)(bgColor, 25) + ' ' + (0, _color.darken)(bgColor, 15) + ' ' + (0, _color.darken)(bgColor, 10),
boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.1)'
};
return {
base: _extends({}, (0, _css.gradientVertical)((0, _color.lighten)(bgColor, 5), (0, _color.darken)(bgColor, 10), bgColor), {
'borderColor': (0, _color.darken)(bgColor, 10) + ' ' + (0, _color.darken)(bgColor, 20) + ' ' + (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 = _theme2.default.input.border.color.default;
var hoverStyles = _extends({}, (0, _css.gradientVertical)('#fff', '#eee'), {
borderColor: (0, _color.darken)(borderColor, 5) + ' ' + (0, _color.darken)(borderColor, 5) + ' ' + (0, _color.darken)(borderColor, 10),
boxShadow: '0 1px 0 rgba(0,0,0,0.1)',
color: _theme2.default.color.text
});
var focusStyles = {
borderColor: _theme2.default.color.primary,
boxShadow: '0 0 0 3px ' + (0, _color.fade)(_theme2.default.color.primary, 10),
color: _theme2.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: _theme2.default.color.text
};
return {
base: _extends({}, (0, _css.gradientVertical)('#fafafa', '#eaeaea'), {
'borderColor': borderColor + ' ' + (0, _color.darken)(borderColor, 6) + ' ' + (0, _color.darken)(borderColor, 12),
'color': _theme2.default.color.text,
'textShadow': '0 1px 0 white',
':hover': hoverStyles,
':focus': focusStyles,
':active': activeStyles
}),
// gross hack
active: _extends({}, activeStyles, {
':hover': activeStyles,
':focus': _extends({}, activeStyles, focusStyles, {
boxShadow: '0 0 0 3px ' + (0, _color.fade)(_theme2.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', _theme2.default.button.danger.bgColor);
default:
return buttonFillVariant('white', _theme2.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 ' + (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 ': _extends({}, 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(_theme2.default.button[color].bgColor, _theme2.default.button[color].borderColor);
};
// Link Variant
// ----------------
function buttonLinkVariant(textColor, hoverColor) {
var hoverStyles = {
color: hoverColor,
textDecoration: 'underline'
};
return {
base: {
'background': 'none',
'border': 0,
'boxShadow': 'none',
'color': textColor,
'fontWeight': 'normal',
'outline': 'none',
':hover': hoverStyles,
':focus': hoverStyles,
':active': hoverStyles
},
active: hoverStyles
};
};
function buttonLinkDelete() {
var styles = buttonLinkVariant(_theme2.default.color.gray40, _theme2.default.color.danger);
var hoverStyles = _extends({}, (0, _css.gradientVertical)((0, _color.lighten)(_theme2.default.color.danger, 10), (0, _color.darken)(_theme2.default.color.danger, 10)), {
backgroundColor: _theme2.default.color.danger,
borderColor: (0, _color.darken)(_theme2.default.color.danger, 4) + ' ' + (0, _color.darken)(_theme2.default.color.danger, 8) + ' ' + (0, _color.darken)(_theme2.default.color.danger, 12),
boxShadow: '0 1px 0 rgba(0,0,0,0.1)',
color: 'white',
textDecoration: 'none'
});
var activeStyles = {
backgroundColor: (0, _color.darken)(_theme2.default.color.danger, 4),
backgroundImage: 'none',
borderColor: (0, _color.darken)(_theme2.default.color.danger, 12) + ' ' + (0, _color.darken)(_theme2.default.color.danger, 8) + ' ' + (0, _color.darken)(_theme2.default.color.danger, 8),
boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.1)',
color: 'white'
};
return {
base: _extends({}, styles.base, {
':hover': hoverStyles,
':focus': hoverStyles,
':active': activeStyles
}),
active: activeStyles
};
}
exports.link = function (color) {
switch (color) {
case 'default':
return buttonLinkVariant(_theme2.default.color.link, _theme2.default.color.linkHover);
case 'cancel':
return buttonLinkVariant(_theme2.default.color.gray40, _theme2.default.color.danger);
case 'delete':
return buttonLinkDelete();
default:
return buttonLinkVariant(_theme2.default.color[color], _theme2.default.color[color]);
}
};
},{"../../../theme":148,"../../../utils/color":150,"../../../utils/css":152}],16:[function(require,module,exports){
'use strict';
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 _noImportant = require('aphrodite/no-important');
var _styles = require('./styles');
var _styles2 = _interopRequireDefault(_styles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var classes = _noImportant.StyleSheet.create(_styles2.default);
function Center(_ref) {
var className = _ref.className,
Component = _ref.component,
height = _ref.height,
style = _ref.style,
props = _objectWithoutProperties(_ref, ['className', 'component', 'height', 'style']);
props.className = (0, _noImportant.css)(classes.center, className);
props.style = _extends({ height: height }, style);
return _react2.default.createElement(Component, props);
};
Center.propTypes = {
component: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
height: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string])
};
Center.defaultProps = {
component: 'div',
height: 'auto'
};
module.exports = Center;
},{"./styles":17,"aphrodite/no-important":undefined,"react":undefined}],17:[function(require,module,exports){
'use strict';
// ==============================
// Center
// ==============================
module.exports = {
center: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}
};
},{}],18:[function(require,module,exports){
'use strict';
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 _theme = require('../../../theme');
var _theme2 = _interopRequireDefault(_theme);
var _color = require('../../../utils/color');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var baseColors = {};
['danger', 'info', 'primary', 'success', 'warning'].forEach(function (color) {
baseColors[color] = {
background: (0, _color.fade)(_theme2.default.color[color], 10),
backgroundActive: (0, _color.fade)(_theme2.default.color[color], 20),
backgroundHover: (0, _color.fade)(_theme2.default.color[color], 15),
text: _theme2.default.color[color]
};
});
var invertedColors = {};
['danger', 'info', 'primary', 'success', 'warning'].forEach(function (color) {
invertedColors[color + '__inverted'] = {
background: _theme2.default.color[color],
backgroundActive: (0, _color.lighten)(_theme2.default.color[color], 5),
backgroundHover: (0, _color.lighten)(_theme2.default.color[color], 15),
text: 'white'
};
});
module.exports = _extends({
default: {
background: _theme2.default.color.gray10,
backgroundActive: _theme2.default.color.gray20,
backgroundHover: _theme2.