543 dist/components/BarChart.js
View file

Large diffs are not rendered by default.

309 dist/components/Button.js
View file
@@ -0,0 +1,309 @@
"use strict";

var _glamor = require("glamor");

var _Theme = require("./Theme");

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 _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; }

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 _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 _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); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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; }

var React = require('react');

var PropTypes = require('prop-types');

var Icon = require('./Icon');

var Spin = require('./Spin');

var _require = require('../constants/App'),
buttonTypes = _require.buttonTypes,
themeShape = _require.themeShape;

var StyleUtils = require('../utils/Style');

var Button =
/*#__PURE__*/
function (_React$Component) {
_inherits(Button, _React$Component);

function Button() {
var _getPrototypeOf2;

var _this;

_classCallCheck(this, Button);

for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Button)).call.apply(_getPrototypeOf2, [this].concat(args)));

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_windowSizeIsSmall", function (theme) {
var windowSize = StyleUtils.getWindowSize(theme.BreakPoints);
return !(windowSize === 'medium' || windowSize === 'large');
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_childIsVisible", function (child) {
return !child.props || child.props.className !== 'visuallyHidden';
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_hasVisibleChildren", function () {
if (!_this.props.children) {
return false;
}

if (!Array.isArray(_this.props.children)) {
return _this._childIsVisible(_this.props.children);
}

return _this.props.children.some(_this._childIsVisible);
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "styles", function (theme) {
var windowSizeIsSmall = _this._windowSizeIsSmall(theme);

return _objectSpread({
component: _objectSpread({
borderRadius: 2,
borderStyle: 'solid',
borderWidth: 1,
borderColor: 'transparent',
boxSizing: 'border-box',
display: 'inline-block',
padding: '4px 14px',
fontSize: theme.FontSizes.MEDIUM,
fontFamily: theme.Fonts.SEMIBOLD,
cursor: _this.props.type === 'disabled' ? 'default' : 'pointer',
transition: 'all .2s ease-in',
minWidth: 16,
position: 'relative'
}, _this.props.style),
children: {
justifyContent: 'center',
display: 'flex',
alignItems: 'center',
lineHeight: '20px'
},
primary: {
backgroundColor: theme.Colors.PRIMARY,
borderColor: theme.Colors.PRIMARY,
color: theme.Colors.WHITE,
fill: theme.Colors.WHITE,
transition: 'all .2s ease-in',
':hover': windowSizeIsSmall ? null : {
backgroundColor: StyleUtils.adjustColor(theme.Colors.PRIMARY, -15),
borderColor: StyleUtils.adjustColor(theme.Colors.PRIMARY, -15),
transition: 'all .2s ease-in'
},
':active': {
backgroundColor: StyleUtils.adjustColor(theme.Colors.PRIMARY, -30),
borderColor: StyleUtils.adjustColor(theme.Colors.PRIMARY, -30),
transition: 'all .2s ease-in'
}
},
primaryOutline: {
backgroundColor: 'transparent',
borderColor: theme.Colors.PRIMARY,
color: theme.Colors.PRIMARY,
fill: theme.Colors.PRIMARY,
transition: 'all .2s ease-in',
':hover': windowSizeIsSmall ? null : {
backgroundColor: theme.Colors.PRIMARY,
color: theme.Colors.WHITE,
fill: theme.Colors.WHITE,
transition: 'all .2s ease-in'
},
':active': {
backgroundColor: StyleUtils.adjustColor(theme.Colors.PRIMARY, -30),
borderColor: StyleUtils.adjustColor(theme.Colors.PRIMARY, -30),
color: theme.Colors.WHITE,
fill: theme.Colors.WHITE,
transition: 'all .2s ease-in'
}
},
primaryInverse: {
backgroundColor: theme.Colors.WHITE,
borderColor: theme.Colors.WHITE,
color: theme.Colors.PRIMARY,
fill: theme.Colors.PRIMARY,
transition: 'all .2s ease-in',
':hover': windowSizeIsSmall ? null : {
backgroundColor: StyleUtils.adjustColor(theme.Colors.WHITE, -15),
borderColor: StyleUtils.adjustColor(theme.Colors.WHITE, -15),
transition: 'all .2s ease-in'
},
':active': {
backgroundColor: StyleUtils.adjustColor(theme.Colors.WHITE, -30),
borderColor: StyleUtils.adjustColor(theme.Colors.WHITE, -30),
transition: 'all .2s ease-in'
}
},
secondary: {
backgroundColor: theme.Colors.GRAY_300,
borderColor: 'transparent',
color: theme.Colors.GRAY_700,
fill: theme.Colors.GRAY_500,
transition: 'all .2s ease-in',
':hover': windowSizeIsSmall ? null : {
backgroundColor: StyleUtils.adjustColor(theme.Colors.GRAY_300, -15),
borderColor: 'transparent',
fill: theme.Colors.WHITE,
transition: 'all .2s ease-in'
},
':active': {
backgroundColor: StyleUtils.adjustColor(theme.Colors.GRAY_300, -30),
borderColor: 'transparent',
fill: theme.Colors.WHITE,
transition: 'all .2s ease-in'
}
},
base: {
backgroundColor: 'transparent',
color: theme.Colors.PRIMARY,
fill: theme.Colors.PRIMARY,
transition: 'all .2s ease-in',
borderColor: 'transparent',
borderRadius: 2,
borderWidth: 1,
':hover': windowSizeIsSmall ? null : {
color: StyleUtils.adjustColor(theme.Colors.PRIMARY, -8),
fill: StyleUtils.adjustColor(theme.Colors.PRIMARY, -8),
transition: 'all .2s ease-in',
borderColor: theme.Colors.GRAY_300
},
':active': {
color: StyleUtils.adjustColor(theme.Colors.PRIMARY, -16),
fill: StyleUtils.adjustColor(theme.Colors.PRIMARY, -16),
transition: 'all .2s ease-in',
backgroundColor: theme.Colors.GRAY_100
}
},
neutral: {
backgroundColor: 'transparent',
borderColor: theme.Colors.GRAY_300,
borderRadius: 2,
borderWidth: 1,
color: theme.Colors.PRIMARY,
fill: theme.Colors.PRIMARY,
':hover': windowSizeIsSmall ? null : {
backgroundColor: theme.Colors.GRAY_100
},
':active': {
backgroundColor: StyleUtils.adjustColor(theme.Colors.GRAY_100, -15)
}
},
disabled: {
backgroundColor: 'transparent',
borderColor: theme.Colors.GRAY_300,
color: theme.Colors.GRAY_300,
fill: theme.Colors.GRAY_300
},
icon: {
marginLeft: _this._hasVisibleChildren() ? -4 : 0,
marginRight: _this._hasVisibleChildren() ? 5 : 0
},
buttonText: {
marginLeft: _this.props.isActive && _this.props.actionText ? 10 : 0
}
}, _this.props.styles);
});

return _this;
}

_createClass(Button, [{
key: "render",
value: function render() {
// Manually consume everything that isn't going to be passed down to the button so we don't have to keep adding props one at a time.
// Keep elementProps for backwards compatibility.
var _this$props = this.props,
actionText = _this$props.actionText,
buttonRef = _this$props.buttonRef,
children = _this$props.children,
className = _this$props.className,
elementProps = _this$props.elementProps,
icon = _this$props.icon,
isActive = _this$props.isActive,
style = _this$props.style,
theme = _this$props.theme,
rest = _objectWithoutProperties(_this$props, ["actionText", "buttonRef", "children", "className", "elementProps", "icon", "isActive", "style", "theme"]);

var mergedTheme = StyleUtils.mergeTheme(theme);
var styles = this.styles(mergedTheme); // We need to remove the styles prop from rest so we don't pass it to children.

delete rest.styles;
return React.createElement("button", _extends({
className: 'mx-button ' + (0, _glamor.css)(_objectSpread({}, styles.component, styles[this.props.type], style)) + ' ' + (className || ''),
disabled: this.props.type === 'disabled',
ref: buttonRef
}, rest, elementProps), React.createElement("div", {
style: styles.children
}, icon && !isActive && React.createElement(Icon, {
size: 20,
style: styles.icon,
type: icon
}), isActive && React.createElement(Spin, {
direction: "counterclockwise"
}, React.createElement(Icon, {
size: 20,
type: "spinner"
})), React.createElement("div", {
style: styles.buttonText
}, isActive ? actionText : children)));
}
}]);

return Button;
}(React.Component);

_defineProperty(Button, "propTypes", {
'aria-label': PropTypes.string,
actionText: PropTypes.string,
buttonRef: PropTypes.func,
// Object or string since glamor supplies an object, not a string.
className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
elementProps: PropTypes.object,
icon: PropTypes.string,
isActive: PropTypes.bool,
onClick: PropTypes.func,
style: PropTypes.object,
styles: PropTypes.object,
theme: themeShape,
type: PropTypes.oneOf(buttonTypes)
});

_defineProperty(Button, "defaultProps", {
elementProps: {},
onClick: function onClick() {},
isActive: false,
styles: {},
type: 'primary'
});

module.exports = (0, _Theme.withTheme)(Button);
151 dist/components/ButtonGroup.js
View file
@@ -0,0 +1,151 @@
"use strict";

var _Theme = require("./Theme");

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 _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 _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 _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 _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); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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; }

var React = require('react');

var PropTypes = require('prop-types');

var Radium = require('radium');

var Button = require('./Button');

var _require = require('../constants/App'),
buttonTypes = _require.buttonTypes,
themeShape = _require.themeShape;

var StyleUtils = require('../utils/Style');

var ButtonGroup =
/*#__PURE__*/
function (_React$Component) {
_inherits(ButtonGroup, _React$Component);

function ButtonGroup() {
var _getPrototypeOf2;

var _this;

_classCallCheck(this, ButtonGroup);

for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ButtonGroup)).call.apply(_getPrototypeOf2, [this].concat(args)));

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "styles", function (theme) {
return {
component: _extends({
boxSizing: 'border-box',
borderRadius: 0,
borderWidth: 1,
borderRightWidth: _this.props.type === 'base' ? 1 : 0,
margin: 0,
verticalAlign: 'middle'
}, _this.props.style),
firstChild: {
borderRadius: '2px 0 0 2px'
},
lastChild: {
borderRadius: '0 2px 2px 0',
borderRightWidth: 1
},
onlyChild: {
borderRadius: 2,
borderWidth: 1
},
disabled: {
backgroundColor: 'transparent',
color: theme.Colors.GRAY_300,
cursor: 'default',
fill: theme.Colors.GRAY_300,
':hover': {
backgroundColor: 'transparent'
},
':active': {
backgroundColor: 'transparent'
}
}
};
});

return _this;
}

_createClass(ButtonGroup, [{
key: "render",
value: function render() {
var _this2 = this;

var theme = StyleUtils.mergeTheme(this.props.theme);
var styles = this.styles(theme);
return React.createElement("div", {
className: "mx-button-group"
}, this.props.buttons.map(function (button, i) {
var isFirstChild = i === 0;
var isLastChild = i === _this2.props.buttons.length - 1;
var isOnlyChild = isFirstChild && isLastChild;
var isDisabled = button.type === 'disabled';

var style = button.style,
rest = _objectWithoutProperties(button, ["style"]);

return React.createElement(Button, _extends({
key: i,
style: _extends({}, styles.component, isFirstChild && styles.firstChild, isLastChild && styles.lastChild, isOnlyChild && styles.onlyChild, isDisabled && styles.disabled, style),
theme: theme,
type: _this2.props.type
}, rest), button.text);
}));
}
}]);

return ButtonGroup;
}(React.Component);

_defineProperty(ButtonGroup, "propTypes", {
buttons: PropTypes.arrayOf(PropTypes.shape({
'aria-label': PropTypes.string,
icon: PropTypes.string,
onClick: PropTypes.func,
style: PropTypes.object,
text: PropTypes.string,
type: PropTypes.oneOf(buttonTypes)
}).isRequired),
theme: themeShape,
type: PropTypes.oneOf(buttonTypes)
});

_defineProperty(ButtonGroup, "defaultProps", {
buttons: [],
type: 'primaryOutline'
});

module.exports = (0, _Theme.withTheme)(Radium(ButtonGroup));
401 dist/components/Calendar.js
View file

Large diffs are not rendered by default.

224 dist/components/DatePicker.js
View file
@@ -0,0 +1,224 @@
"use strict";

var _Theme = require("./Theme");

var _Calendar = _interopRequireDefault(require("./Calendar"));

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

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 _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 _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 _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); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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; }

var React = require('react');

var PropTypes = require('prop-types');

var Radium = require('radium');

var moment = require('moment');

var Icon = require('./Icon');

var _require = require('../constants/App'),
themeShape = _require.themeShape;

var StyleUtils = require('../utils/Style');

var DatePicker =
/*#__PURE__*/
function (_React$Component) {
_inherits(DatePicker, _React$Component);

function DatePicker() {
var _getPrototypeOf2;

var _this;

_classCallCheck(this, DatePicker);

for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DatePicker)).call.apply(_getPrototypeOf2, [this].concat(args)));

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
currentDate: _this.props.selectedDate || moment().unix(),
showCalendar: false
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleDateSelect", function (date) {
if (_this.props.closeOnDateSelect) {
_this._handleScrimClick();
}

_this.props.onDateSelect(date);
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleScrimClick", function () {
_this.setState({
showCalendar: false
});
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_toggleCalendar", function () {
_this.setState({
showCalendar: !_this.state.showCalendar
});
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "styles", function (theme) {
return {
component: _extends({
backgroundColor: theme.Colors.WHITE,
borderColor: _this.state.showCalendar ? theme.Colors.PRIMARY : theme.Colors.GRAY_300,
borderRadius: 3,
borderStyle: 'solid',
borderWidth: 1,
boxSizing: 'border-box',
color: theme.Colors.BLACK,
display: 'inline-block',
fontFamily: theme.FontFamily,
fontSize: theme.FontSizes.MEDIUM,
position: 'relative',
width: '100%'
}, _this.props.style),
calendar: {
boxShadow: theme.ShadowHigh
},
calendarWrapper: {
boxSizing: 'border-box',
display: _this.state.showCalendar ? 'block' : 'none',
position: 'absolute',
right: 0,
width: 287,
zIndex: 10
},
// Selected Date styles
selectedDateWrapper: {
alignItems: 'center',
cursor: 'pointer',
display: 'flex',
justifyContent: 'space-between',
padding: '10px 15px',
position: 'relative'
},
selectedDateIcon: {
fill: theme.Colors.PRIMARY,
marginRight: 5
},
selectedDateText: {
color: _this.props.selectedDate ? theme.Colors.GRAY_700 : theme.Colors.GRAY_500,
flex: 1
},
selectedDateCaret: {
fill: _this.state.showCalendar ? theme.Colors.PRIMARY : theme.Colors.GRAY_500
},
scrim: {
bottom: 0,
left: 0,
position: 'fixed',
right: 0,
top: 0,
zIndex: 9
}
};
});

return _this;
}

_createClass(DatePicker, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(newProps) {
if (newProps.selectedDate && newProps.selectedDate !== this.props.selectedDate) {
this.setState({
currentDate: newProps.selectedDate
});
}
}
}, {
key: "render",
value: function render() {
var theme = StyleUtils.mergeTheme(this.props.theme);
var styles = this.styles(theme);
return React.createElement("div", {
className: "mx-date-picker",
ref: this.props.elementRef,
style: styles.component
}, React.createElement("div", {
onClick: this._toggleCalendar,
style: styles.selectedDateWrapper
}, React.createElement(Icon, {
className: "mx-date-picker-icon-calendar",
size: 20,
style: styles.selectedDateIcon,
type: "calendar"
}), React.createElement("div", {
className: "mx-selected-date-text",
style: styles.selectedDateText
}, this.props.selectedDate ? moment.unix(this.props.selectedDate).format(this.props.format) : this.props.placeholderText), React.createElement(Icon, {
className: "mx-date-picker-icon-caret",
size: 20,
style: styles.selectedDateCaret,
type: this.state.showCalendar ? 'caret-up' : 'caret-down'
})), React.createElement("div", {
className: "mx-selected-date-calendar",
style: styles.calendarWrapper
}, React.createElement(_Calendar.default, {
onDateSelect: this._handleDateSelect,
selectedDate: this.state.currentDate,
style: styles.calendar,
theme: theme
})), this.state.showCalendar ? React.createElement("div", {
className: "mx-date-picker-scrim",
onClick: this._handleScrimClick,
style: styles.scrim
}) : null);
}
}]);

return DatePicker;
}(React.Component);

_defineProperty(DatePicker, "propTypes", {
closeOnDateSelect: PropTypes.bool,
elementRef: PropTypes.func,
format: PropTypes.string,
locale: PropTypes.string,
minimumDate: PropTypes.number,
onDateSelect: PropTypes.func,
placeholderText: PropTypes.string,
selectedDate: PropTypes.number,
style: PropTypes.object,
theme: themeShape
});

_defineProperty(DatePicker, "defaultProps", {
closeOnDateSelect: false,
format: 'MMM D, YYYY',
locale: 'en',
onDateSelect: function onDateSelect() {},
placeholderText: 'Select A Date'
});

module.exports = (0, _Theme.withTheme)(Radium(DatePicker));
750 dist/components/DateRangePicker.js
View file

Large diffs are not rendered by default.

118 dist/components/DateRangePicker/DefaultRanges.js
View file
@@ -0,0 +1,118 @@
"use strict";

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 _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 _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 _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); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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; }

var PropTypes = require('prop-types');

var Radium = require('radium');

var React = require('react');

var Icon = require('../Icon');

var _require = require('../../constants/App'),
themeShape = _require.themeShape;

var DefaultRanges =
/*#__PURE__*/
function (_React$Component) {
_inherits(DefaultRanges, _React$Component);

function DefaultRanges() {
var _getPrototypeOf2;

var _this;

_classCallCheck(this, DefaultRanges);

for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DefaultRanges)).call.apply(_getPrototypeOf2, [this].concat(args)));

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
selectedOption: null
});

return _this;
}

_createClass(DefaultRanges, [{
key: "render",
value: function render() {
var _this2 = this;

var _this$props = this.props,
defaultRanges = _this$props.defaultRanges,
handleDefaultRangeSelection = _this$props.handleDefaultRangeSelection,
selectedStartDate = _this$props.selectedStartDate,
selectedEndDate = _this$props.selectedEndDate,
styles = _this$props.styles,
theme = _this$props.theme;
return React.createElement("div", {
className: "mx-default-ranges",
role: "",
style: styles.rangeOptions
}, defaultRanges.map(function (range, index) {
var isSelectedRange = _this2.state.selectedOption === index && range.getStartDate() === selectedStartDate && range.getEndDate() === selectedEndDate;
return React.createElement("button", {
"aria-label": "".concat(range.displayValue, " range").concat(isSelectedRange ? ', Selected' : ''),
className: "mx-default-ranges-range",
key: range.displayValue + range.getStartDate(),
onClick: function onClick() {
handleDefaultRangeSelection(range);

_this2.setState({
selectedOption: index
});
},
style: styles.rangeOption
}, React.createElement("div", null, React.createElement(Icon, {
size: 20,
style: _extends({}, styles.rangeOptionIcon, {
fill: isSelectedRange ? theme.Colors.PRIMARY : 'transparent'
}),
type: "check-solid"
})), React.createElement("div", null, range.displayValue));
}));
}
}]);

return DefaultRanges;
}(React.Component);

DefaultRanges.propTypes = {
defaultRanges: PropTypes.array,
handleDefaultRangeSelection: PropTypes.func,
primaryColor: PropTypes.string,
selectedEndDate: PropTypes.number,
selectedStartDate: PropTypes.number,
styles: PropTypes.shape({
defaultRangesTitle: PropTypes.object,
rangeOption: PropTypes.object,
rangeOptions: PropTypes.object
}),
theme: themeShape
};
module.exports = Radium(DefaultRanges);
176 dist/components/DateRangePicker/MonthTable.js
View file
@@ -0,0 +1,176 @@
"use strict";

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 _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 _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 _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); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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; }

var React = require('react');

var PropTypes = require('prop-types');

var moment = require('moment');

var _require = require('../../constants/DateRangePicker'),
SelectedBox = _require.SelectedBox;

var MonthTable =
/*#__PURE__*/
function (_React$Component) {
_inherits(MonthTable, _React$Component);

function MonthTable() {
var _getPrototypeOf2;

var _this;

_classCallCheck(this, MonthTable);

for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(MonthTable)).call.apply(_getPrototypeOf2, [this].concat(args)));

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_focusDay", function (day) {
var refForDay = _this[day];

if (refForDay && refForDay.focus) {
refForDay.focus();
}
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_setRefForDay", function (day) {
return function (ref) {
_this[day] = ref;
};
});

return _this;
}

_createClass(MonthTable, [{
key: "componentDidMount",
value: function componentDidMount() {
this._focusDay(this.props.focusedDay);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (prevProps.focusedDay !== this.props.focusedDay) {
this._focusDay(this.props.focusedDay);
}
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
activeSelectDate = _this$props.activeSelectDate,
currentDate = _this$props.currentDate,
focusedDay = _this$props.focusedDay,
getDateRangePosition = _this$props.getDateRangePosition,
handleDateHover = _this$props.handleDateHover,
handleDateSelect = _this$props.handleDateSelect,
handleKeyDown = _this$props.handleKeyDown,
isInActiveRange = _this$props.isInActiveRange,
minimumDate = _this$props.minimumDate,
selectedBox = _this$props.selectedBox,
selectedEndDate = _this$props.selectedEndDate,
selectedStartDate = _this$props.selectedStartDate,
styles = _this$props.styles;
var days = [];
var startDate = moment.unix(currentDate).startOf('month').startOf('week');
var endDate = moment.unix(currentDate).endOf('month').endOf('week');

while (moment(startDate).isBefore(endDate)) {
var disabledDay = minimumDate && startDate.isBefore(moment.unix(minimumDate));
var isActiveRange = selectedStartDate || selectedEndDate ? isInActiveRange(selectedStartDate, selectedEndDate, activeSelectDate, startDate) : false;
var whereInRange = getDateRangePosition(selectedStartDate, selectedEndDate, activeSelectDate, startDate);
var isSelectedStartDay = startDate.isSame(moment.unix(selectedStartDate), 'day');
var isSelectedEndDay = startDate.isSame(moment.unix(selectedEndDate), 'day');
var isSelectedDay = isSelectedStartDay || isSelectedEndDay;
/**
* Aria label possible states
*
* 1. Not in range, not selected
* Thursday, April 13th, 2018
* 2. In range, not selected
* Thursday, April 13th, 2018, within selected range.
* 3. In range, selected start date
* Thursday, April 13th, 2018, selected start date for range.
* 4. In range, selected end date
* Thursday, April 13th, 2018, selected end date for range.
* */

var ariaLabelStateText = '';
var ariaLabelBeginningText = "Select ".concat(selectedBox === SelectedBox.FROM ? 'start' : 'end', " date for range, ");
var ariaLabelDateText = moment(startDate).format('dddd, MMMM Do, YYYY');

if (!isSelectedDay && isActiveRange) {
ariaLabelStateText = ', within selected range';
} else if (isSelectedStartDay) {
ariaLabelStateText = ', selected start date for range.';
} else if (isSelectedEndDay) {
ariaLabelStateText = ', selected end date for range.';
}

var day = React.createElement("a", {
"aria-label": ariaLabelBeginningText + ariaLabelDateText + ariaLabelStateText,
"aria-pressed": isSelectedDay,
className: "mx-month-table-day",
key: startDate,
onClick: !disabledDay && handleDateSelect.bind(null, startDate.unix()),
onKeyDown: handleKeyDown.bind(null, startDate.unix()),
onMouseEnter: !disabledDay && handleDateHover.bind(null, startDate.unix()),
ref: this._setRefForDay(startDate.unix()),
role: "button",
style: _extends({}, styles.calendarDay, startDate.isSame(moment.unix(currentDate), 'month') && styles.currentMonth, disabledDay && styles.calendarDayDisabled, startDate.isSame(moment(), 'day') && !isActiveRange && styles.today, isActiveRange && _extends({}, styles.betweenDay, styles['betweenDay' + whereInRange]), isSelectedDay && _extends({}, styles.selectedDay, styles['selected' + whereInRange])),
tabIndex: startDate.isSame(moment.unix(focusedDay), 'day') ? 0 : null
}, startDate.date());
days.push(day);
startDate = startDate.add(1, 'd');
}

return React.createElement("div", {
className: "mx-month-table",
style: styles.calendarTable
}, days);
}
}]);

return MonthTable;
}(React.Component);

MonthTable.propTypes = {
activeSelectDate: PropTypes.number,
currentDate: PropTypes.number,
focusedDay: PropTypes.number,
getDateRangePosition: PropTypes.func,
handleDateHover: PropTypes.func,
handleDateSelect: PropTypes.func,
handleKeyDown: PropTypes.func,
isInActiveRange: PropTypes.func,
minimumDate: PropTypes.number,
selectedBox: PropTypes.string,
selectedEndDate: PropTypes.number,
selectedStartDate: PropTypes.number,
styles: PropTypes.object
};
module.exports = MonthTable;
214 dist/components/DateRangePicker/SelectionPane.js
View file
@@ -0,0 +1,214 @@
"use strict";

var _Theme = require("../Theme");

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 _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 _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 _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); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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; }

var React = require('react');

var moment = require('moment');

var PropTypes = require('prop-types');

var DefaultRanges = require('../DateRangePicker/DefaultRanges');

var _require = require('../../constants/DateRangePicker'),
SelectedBox = _require.SelectedBox;

var _require2 = require('../../constants/App'),
themeShape = _require2.themeShape;

var StyleUtils = require('../../utils/Style');

var SelectionPane =
/*#__PURE__*/
function (_React$Component) {
_inherits(SelectionPane, _React$Component);

function SelectionPane() {
var _getPrototypeOf2;

var _this;

_classCallCheck(this, SelectionPane);

for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SelectionPane)).call.apply(_getPrototypeOf2, [this].concat(args)));

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleDateBoxClick", function (date, selectedBox) {
_this.props.onDateBoxClick(date, selectedBox);
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "styles", function (theme) {
var isLargeOrMediumWindowSize = ['large', 'medium'].indexOf(StyleUtils.getWindowSize(theme.BreakPoints)) !== -1;
return {
container: {
display: 'flex',
flexDirection: 'column',
height: '100%',
borderRight: isLargeOrMediumWindowSize ? '1px solid ' + theme.Colors.GRAY_300 : 'none',
padding: theme.Spacing.MEDIUM,
boxSizing: 'border-box',
width: 275
},
calendarHeaderNav: {
width: 35,
cursor: 'pointer'
},
boxLabel: {
fontFamily: theme.FontFamily,
fontSize: theme.FontSizes.MEDIUM,
color: theme.Colors.GRAY_700,
display: 'inline-block',
marginTop: theme.Spacing.SMALL
},
dateSelectBox: {
backgroundColor: 'transparent',
borderColor: theme.Colors.GRAY_300,
borderRadius: 3,
borderStyle: 'solid',
borderWidth: 1,
boxSizing: 'border-box',
color: theme.Colors.GRAY_700,
cursor: 'pointer',
display: 'block',
fontFamily: theme.FontFamily,
fontSize: theme.FontSizes.MEDIUM,
marginBottom: theme.Spacing.SMALL,
marginTop: theme.Spacing.XSMALL,
padding: '10px 15px',
textAlign: 'left',
width: '100%'
},
selectedDateSelectBox: {
borderColor: theme.Colors.PRIMARY,
cursor: 'pointer',
color: theme.Colors.PRIMARY
},
//Default Ranges
defaultRangesTitle: {
color: theme.Colors.PRIMARY,
fontFamily: theme.Fonts.SEMIBOLD,
fontSize: theme.FontSizes.SMALL,
padding: "".concat(theme.Spacing.LARGE, "px 0px ").concat(theme.Spacing.SMALL, "px 0px")
},
rangeOptions: {
boxSizing: 'border-box',
color: theme.Colors.GRAY_700,
display: 'flex',
flexWrap: 'wrap',
fontSize: theme.FontSizes.MEDIUM,
width: '100%'
},
rangeOption: {
alignItems: 'center',
backgroundColor: 'transparent',
border: 'none',
boxSizing: 'border-box',
color: theme.Colors.GRAY_700,
cursor: 'pointer',
display: 'flex',
padding: "".concat(theme.Spacing.SMALL, "px ").concat(theme.Spacing.SMALL, "px"),
width: '50%',
fontSize: theme.FontSizes.SMALL,
':hover': {
backgroundColor: theme.Colors.GRAY_100
},
':focus': {
backgroundColor: theme.Colors.GRAY_100,
outline: 'none'
}
},
rangeOptionIcon: {
paddingRight: theme.Spacing.SMALL
}
};
});

return _this;
}

_createClass(SelectionPane, [{
key: "render",
value: function render() {
var _this2 = this;

var theme = StyleUtils.mergeTheme(this.props.theme);
var styles = this.styles(theme);
var _this$props = this.props,
selectedStartDate = _this$props.selectedStartDate,
selectedEndDate = _this$props.selectedEndDate;
return React.createElement("div", {
className: "mx-selection-pane",
style: styles.container
}, React.createElement("div", null, React.createElement("label", {
style: styles.boxLabel
}, "From"), React.createElement("button", {
"aria-label": "Select Start Date, ".concat(selectedStartDate ? 'Current start date is ' + moment.unix(selectedStartDate).format('MMM D, YYYY') : ''),
className: "mx-selection-pane-from-field",
onClick: function onClick() {
return _this2._handleDateBoxClick(selectedStartDate, SelectedBox.FROM);
},
ref: this.props.getFromButtonRef,
style: _extends({}, styles.dateSelectBox, this.props.selectedBox === SelectedBox.FROM ? styles.selectedDateSelectBox : null)
}, selectedStartDate ? moment.unix(selectedStartDate).format('MMM D, YYYY') : 'Select Start Date'), React.createElement("label", {
style: styles.boxLabel
}, "To"), React.createElement("button", {
"aria-label": "Select End Date, ".concat(selectedEndDate ? 'Current end date is ' + moment.unix(selectedEndDate).format('MMM D, YYYY') : ''),
className: "mx-selection-pane-to-field",
onClick: function onClick() {
return _this2._handleDateBoxClick(selectedEndDate, SelectedBox.TO);
},
ref: this.props.getToButtonRef,
style: _extends({}, styles.dateSelectBox, this.props.selectedBox === SelectedBox.TO ? styles.selectedDateSelectBox : null)
}, selectedEndDate ? moment.unix(selectedEndDate).format('MMM D, YYYY') : 'Select End Date')), React.createElement("div", null, React.createElement("div", {
style: _extends({}, styles.defaultRangesTitle, {
color: theme.Colors.PRIMARY
})
}, "Select a Range"), React.createElement(DefaultRanges, _extends({}, this.props, {
styles: styles,
theme: theme
}))));
}
}]);

return SelectionPane;
}(React.Component);

_defineProperty(SelectionPane, "propTypes", {
currentDate: PropTypes.string,
defaultRanges: PropTypes.array,
getFromButtonRef: PropTypes.func,
getToButtonRef: PropTypes.func,
onDateBoxClick: PropTypes.func,
selectedBox: PropTypes.string,
selectedEndDate: PropTypes.number,
selectedStartDate: PropTypes.number,
setCurrentDate: PropTypes.func,
theme: themeShape
});

module.exports = (0, _Theme.withTheme)(SelectionPane);
246 dist/components/DateRangePicker/Selector.js
View file
@@ -0,0 +1,246 @@
"use strict";

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 _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 _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 _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); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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; }

var React = require('react');

var moment = require('moment');

var keycode = require('keycode');

var PropTypes = require('prop-types');

var Icon = require('../Icon');

var Selector =
/*#__PURE__*/
function (_React$Component) {
_inherits(Selector, _React$Component);

function Selector() {
var _getPrototypeOf2;

var _this;

_classCallCheck(this, Selector);

for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Selector)).call.apply(_getPrototypeOf2, [this].concat(args)));

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "styles", function () {
return {
container: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
},
calendarHeaderNav: {
cursor: 'pointer'
},
currentDate: {
padding: '0px 10px'
}
};
});

return _this;
}

_createClass(Selector, [{
key: "render",
value: function render() {
var _this2 = this;

var styles = this.styles();
return React.createElement("div", {
className: "mx-selector",
style: _extends({}, this.props.style, styles.container)
}, React.createElement("a", {
"aria-label": "Previous ".concat(this.props.type),
className: "mx-selector-previous",
onClick: this.props.handlePreviousClick,
onKeyUp: function onKeyUp(e) {
return keycode(e) === 'enter' && _this2.props.handlePreviousClick(e);
},
role: "button",
tabIndex: 0
}, React.createElement(Icon, {
size: 20,
style: styles.calendarHeaderNav,
type: "caret-left"
})), React.createElement("div", {
"aria-label": "Currently in ".concat(this.props.currentDate),
className: "mx-selector-current-date",
role: "heading",
style: styles.currentDate
}, this.props.currentDate), React.createElement("a", {
"aria-label": "Next ".concat(this.props.type),
className: "mx-selector-next",
onClick: this.props.handleNextClick,
onKeyUp: function onKeyUp(e) {
return keycode(e) === 'enter' && _this2.props.handleNextClick(e);
},
role: "button",
tabIndex: 0
}, React.createElement(Icon, {
size: 20,
style: styles.calendarHeaderNav,
type: "caret-right"
})));
}
}]);

return Selector;
}(React.Component);

_defineProperty(Selector, "propTypes", {
currentDate: PropTypes.string,
handleNextClick: PropTypes.func,
handlePreviousClick: PropTypes.func,
setCurrentDate: PropTypes.func,
type: PropTypes.string
});

var MonthSelector =
/*#__PURE__*/
function (_React$Component2) {
_inherits(MonthSelector, _React$Component2);

function MonthSelector() {
var _getPrototypeOf3;

var _this3;

_classCallCheck(this, MonthSelector);

for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}

_this3 = _possibleConstructorReturn(this, (_getPrototypeOf3 = _getPrototypeOf(MonthSelector)).call.apply(_getPrototypeOf3, [this].concat(args)));

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "_handlePreviousClick", function () {
var currentDate = moment.unix(_this3.props.currentDate).startOf('month').subtract(1, 'm').unix();

_this3.props.setCurrentDate(currentDate);
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "_handleNextClick", function () {
var currentDate = moment.unix(_this3.props.currentDate).endOf('month').add(1, 'd').unix();

_this3.props.setCurrentDate(currentDate);
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "styles", function () {
return {
monthSelector: {
width: '60%'
}
};
});

return _this3;
}

_createClass(MonthSelector, [{
key: "render",
value: function render() {
var styles = this.styles();
return React.createElement(Selector, _extends({}, this.props, {
currentDate: moment.unix(this.props.currentDate).format('MMMM'),
handleNextClick: this._handleNextClick,
handlePreviousClick: this._handlePreviousClick,
style: styles.monthSelector,
type: "Month"
}));
}
}]);

return MonthSelector;
}(React.Component);

_defineProperty(MonthSelector, "propTypes", {
currentDate: PropTypes.number,
setCurrentDate: PropTypes.func
});

var YearSelector =
/*#__PURE__*/
function (_React$Component3) {
_inherits(YearSelector, _React$Component3);

function YearSelector() {
var _getPrototypeOf4;

var _this4;

_classCallCheck(this, YearSelector);

for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}

_this4 = _possibleConstructorReturn(this, (_getPrototypeOf4 = _getPrototypeOf(YearSelector)).call.apply(_getPrototypeOf4, [this].concat(args)));

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this4)), "_handlePreviousClick", function () {
var currentDate = moment.unix(_this4.props.currentDate).startOf('month').subtract(1, 'y').unix();

_this4.props.setCurrentDate(currentDate);
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this4)), "_handleNextClick", function () {
var currentDate = moment.unix(_this4.props.currentDate).endOf('month').add(1, 'y').unix();

_this4.props.setCurrentDate(currentDate);
});

return _this4;
}

_createClass(YearSelector, [{
key: "render",
value: function render() {
return React.createElement(Selector, _extends({}, this.props, {
currentDate: moment.unix(this.props.currentDate).format('YYYY'),
handleNextClick: this._handleNextClick,
handlePreviousClick: this._handlePreviousClick,
type: "Year"
}));
}
}]);

return YearSelector;
}(React.Component);

_defineProperty(YearSelector, "propTypes", {
currentDate: PropTypes.number,
setCurrentDate: PropTypes.func
});

module.exports = {
MonthSelector: MonthSelector,
YearSelector: YearSelector
};
364 dist/components/DateTimePicker.js
View file
@@ -0,0 +1,364 @@
"use strict";

var _Theme = require("./Theme");

var _Calendar = _interopRequireDefault(require("./Calendar"));

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

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 _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 _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 _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); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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; }

var PropTypes = require('prop-types');

var React = require('react');

var moment = require('moment-timezone/builds/moment-timezone-with-data.min');

var Column = require('./grid/Column');

var Container = require('./grid/Container');

var Icon = require('./Icon');

var Row = require('./grid/Row');

var _require = require('../constants/App'),
themeShape = _require.themeShape;

var StyleUtils = require('../utils/Style');

var MAX_HOUR = 23;
var MAX_MINUTE = 59;

var DatePicker =
/*#__PURE__*/
function (_React$Component) {
_inherits(DatePicker, _React$Component);

function DatePicker() {
var _getPrototypeOf2;

var _this;

_classCallCheck(this, DatePicker);

for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DatePicker)).call.apply(_getPrototypeOf2, [this].concat(args)));

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
showCalendar: false,
editTime: false
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_toggleCalendar", function () {
_this.setState({
showCalendar: !_this.state.showCalendar
});
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleDateSelect", function (date, e) {
e.stopPropagation();

if (_this.props.closeOnDateSelect) {
_this.elementRef.blur();

_this.setState({
showCalendar: false
});
}

var hour = _this.props.selectedDate ? moment.unix(_this.props.selectedDate).hour() : 0;
var minutes = _this.props.selectedDate ? moment.unix(_this.props.selectedDate).minute() : 0;

_this.props.onDateSelect(moment.unix(date).hour(hour).minute(minutes).seconds(0).unix());
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleTimeBlur", function () {
_this.setState({
editTime: false
});
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleTimeFocus", function () {
_this.setState({
showCalendar: false,
editTime: true
});
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_handleTimeSelect", function (e) {
var selectedDate = _this.props.selectedDate ? moment.unix(_this.props.selectedDate) : moment();
var value = e.target.value.toLowerCase().replace('.', '');
var time = value.split(':');
var am = value.indexOf('am') >= 0;
var pm = value.indexOf('pm') >= 0;
var minute = Number(time[1].substring(0, 2));
var hour = Number(time[0]);
hour = am && hour === 12 ? 0 : hour;
hour = pm && hour !== 12 ? hour + 12 : hour;

if (hour > MAX_HOUR || minute > MAX_MINUTE) {
e.value.target = '';
} else {
_this.setState({
editTime: false
});

var date = selectedDate.hour(hour).minute(minute).second(0).unix();

_this.props.onDateSelect(date);
}
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_getTimezone", function (date) {
var timezoneAbbr = date ? moment.unix(date).tz(_this.props.timezone).format('z') : moment().tz(_this.props.timezone).format('z');

if (_this.props.timezoneFormat === 'name') {
return _this.props.timezoneNames[timezoneAbbr] || timezoneAbbr;
} else if (_this.props.timezoneFormat === 'abbr') {
return timezoneAbbr;
} else {
return null;
}
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "spans", function () {
return {
date: {
large: _this.props.children ? 5 : 6,
medium: _this.props.children ? 5 : 6,
small: 12
},
children: {
large: 1,
medium: 1,
small: 12
},
time: {
large: 6,
medium: 6,
small: 12
}
};
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "styles", function (theme) {
return _extends({}, {
children: {
textAlign: 'center'
},
// Select styles
selectWrapper: {
alignItems: 'center',
backgroundColor: theme.Colors.WHITE,
borderColor: theme.Colors.GRAY_300,
borderRadius: 3,
borderStyle: 'solid',
borderWidth: 1,
boxShadow: 'none',
boxSizing: 'border-box',
color: theme.Colors.GRAY_700,
cursor: 'pointer',
display: 'flex',
flex: '1 0 0%',
fontSize: theme.FontSizes.MEDIUM,
outline: 'none',
padding: '10px 15px',
position: 'relative'
},
activeSelectWrapper: {
borderColor: theme.Colors.PRIMARY
},
selectedIcon: {
fill: theme.Colors.PRIMARY,
marginRight: 5
},
selectedText: {
color: _this.props.selectedDate ? theme.Colors.GRAY_700 : theme.Colors.GRAY_500,
flex: 1
},
selectedDateCaret: {
fill: _this.state.showCalendar ? theme.Colors.PRIMARY : theme.Colors.GRAY_500
},
// Time Styles
timeInput: {
border: 'none',
boxShadow: 'none',
flex: 1,
fontFamily: theme.Fonts.REGULAR,
fontSize: theme.FontSizes.MEDIUM,
outline: 'none'
},
timeDisplay: {
color: _this.props.selectedDate ? theme.Colors.GRAY_700 : theme.Colors.GRAY_500,
flex: 1,
lineHeight: '1.55em'
},
timezone: {
color: theme.Colors.GRAY_500,
paddingLeft: 10,
textAlign: 'right'
},
//Calendar Styles
calendarWrapper: {
display: _this.state.showCalendar ? 'block' : 'none'
},
calendar: _extends({}, {
backgroundColor: theme.Colors.WHITE,
border: '1px solid ' + theme.Colors.GRAY_300,
borderRadius: 3,
boxShadow: theme.ShadowHigh,
boxSizing: 'border-box',
padding: 20,
position: 'absolute',
right: 0,
top: 50,
width: 287,
zIndex: 10
}, _this.props.calendarStyle)
}, _this.props.styles);
});

return _this;
}

_createClass(DatePicker, [{
key: "render",
value: function render() {
var _this2 = this;

var theme = StyleUtils.mergeTheme(this.props.theme);
var styles = this.styles(theme);
var spans = this.spans();
return React.createElement(Container, {
className: "mx-date-time-picker",
fluid: true
}, React.createElement(Row, null, React.createElement(Column, {
span: spans.date
}, React.createElement("div", {
onClick: this._toggleCalendar,
ref: function ref(_ref) {
return _this2.elementRef = _ref;
},
style: _extends({}, styles.selectWrapper, this.state.showCalendar ? styles.activeSelectWrapper : null),
tabIndex: 0
}, this.props.showIcons ? React.createElement(Icon, {
size: 20,
style: styles.selectedIcon,
type: this.props.dateIcon
}) : null, React.createElement("div", {
style: styles.selectedText
}, this.props.selectedDate ? moment.unix(this.props.selectedDate).format(this.props.dateFormat) : this.props.datePlaceholder), React.createElement(Icon, {
size: 20,
style: styles.selectedDateCaret,
type: this.state.showCalendar ? 'caret-up' : 'caret-down'
})), React.createElement("div", {
style: styles.calendarWrapper
}, React.createElement(_Calendar.default, _extends({}, this.props, {
onDateSelect: this._handleDateSelect,
style: styles.calendar,
theme: theme
})))), this.props.children ? React.createElement(Column, {
span: spans.children
}, React.createElement("div", {
style: styles.children
}, this.props.children)) : null, React.createElement(Column, {
span: spans.time
}, React.createElement("div", {
onBlur: this._handleTimeBlur,
onFocus: this._handleTimeFocus,
style: _extends({}, styles.selectWrapper, this.state.editTime ? styles.activeSelectWrapper : null),
tabIndex: 0
}, this.props.showIcons ? React.createElement(Icon, {
size: 20,
style: styles.selectedIcon,
type: this.props.timeIcon
}) : null, this.state.editTime ? React.createElement("input", {
autoFocus: true,
defaultValue: this.state.editTime ? moment.unix(this.props.selectedDate).format('HH:mm') : null,
name: "time",
onBlur: this._handleTimeSelect,
style: styles.timeInput,
type: "time"
}) : React.createElement("div", {
className: "mx-date-time-picker-time",
style: styles.timeDisplay
}, this.props.selectedDate ? moment.unix(this.props.selectedDate).format(this.props.timeFormat) : this.props.timePlaceholder), this.props.timezoneFormat ? React.createElement("div", {
style: styles.timezone
}, this._getTimezone(this.props.selectedDate)) : null))));
}
}]);

return DatePicker;
}(React.Component);

_defineProperty(DatePicker, "propTypes", {
calendarStyle: PropTypes.object,
closeOnDateSelect: PropTypes.bool,
dateFormat: PropTypes.string,
dateIcon: PropTypes.string,
datePlaceholder: PropTypes.string,
elementRef: PropTypes.func,
locale: PropTypes.string,
minimumDate: PropTypes.number,
onDateSelect: PropTypes.func,
selectedDate: PropTypes.number,
showIcons: PropTypes.bool,
styles: PropTypes.object,
theme: themeShape,
timeFormat: PropTypes.string,
timeIcon: PropTypes.string,
timePlaceholder: PropTypes.string,
timezone: PropTypes.string,
timezoneFormat: PropTypes.oneOf(['abbr', 'name']),
timezoneNames: PropTypes.object
});

_defineProperty(DatePicker, "defaultProps", {
closeOnDateSelect: true,
dateFormat: 'MMM D, YYYY',
dateIcon: 'calendar',
datePlaceholder: 'Select a Date',
locale: 'en',
onDateSelect: function onDateSelect() {},
showIcons: true,
timeFormat: 'LT',
timeIcon: 'clock',
timePlaceholder: 'Select a Time',
timezone: moment.tz.guess(),
timezoneNames: {
EST: 'Eastern Standard Time',
EDT: 'Eastern Daylight Time',
CST: 'Central Standard Time',
CDT: 'Central Daylight Time',
MST: 'Mountain Standard Time',
MDT: 'Mountain Daylight Time',
PST: 'Pacific Standard Time',
PDT: 'Pacific Daylight Time'
}
});

module.exports = (0, _Theme.withTheme)(DatePicker);
295 dist/components/DisplayInput.js
View file
@@ -0,0 +1,295 @@
"use strict";

var _Theme = require("./Theme");

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 _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 _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 _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 _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); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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; }

var React = require('react');

var PropTypes = require('prop-types');

var Radium = require('radium');

var _uniqueId = require('lodash/uniqueId');

var _merge = require('lodash/merge');

var Column = require('../components/grid/Column');

var Container = require('../components/grid/Container');

var Row = require('../components/grid/Row');

var _require = require('../constants/App'),
themeShape = _require.themeShape;

var StyleUtils = require('../utils/Style');

var DisplayInput =
/*#__PURE__*/
function (_React$Component) {
_inherits(DisplayInput, _React$Component);

function DisplayInput() {
var _getPrototypeOf2;

var _this;

_classCallCheck(this, DisplayInput);

for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(DisplayInput)).call.apply(_getPrototypeOf2, [this].concat(args)));

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_isLargeOrMediumWindowSize", function (theme) {
var windowSize = StyleUtils.getWindowSize(theme.BreakPoints);
return windowSize === 'large' || windowSize === 'medium';
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_getInputColumns", function (hasLabel, showHint) {
if (showHint && hasLabel) {
return {
large: 8,
medium: 7,
small: 12
};
}

if (showHint || hasLabel) {
return {
large: 10,
medium: 9,
small: 12
};
}

return {
large: 12,
medium: 12,
small: 12
};
});

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "styles", function (theme, isLargeOrMediumWindowSize) {
var wrapperFocus = {
borderBottom: _this.props.valid ? '1px solid ' + theme.Colors.PRIMARY : '1px solid ' + theme.Colors.DANGER,
boxShadow: 'none',
outline: 'none'
};
return _merge({}, {
error: {
color: theme.Colors.DANGER
},
hint: {
color: theme.Colors.PRIMARY,
height: 20,
paddingTop: 15,
textAlign: 'right'
},
input: {
backgroundColor: 'transparent',
border: 0,
color: theme.Colors.GRAY_700,
fontSize: theme.FontSizes.LARGE,
lineHeight: 1,
textAlign: 'left',
width: '100%',
':focus': {
boxShadow: 'none',
outline: 'none'
}
},
inputWrapper: {
alignItems: 'center',
display: 'flex',
padding: theme.Spacing.SMALL
},
children: {
alignItems: 'center',
color: theme.Colors.GRAY_700,
display: 'flex',
fontSize: theme.FontSizes.LARGE,
height: theme.Spacing.LARGE,
padding: theme.Spacing.SMALL
},
labelText: {
alignItems: 'center',
color: theme.Colors.GRAY_700,
display: 'flex',
fontSize: theme.FontSizes.SMALL,
fontFamily: theme.Fonts.SEMIBOLD,
paddingBottom: isLargeOrMediumWindowSize ? theme.Spacing.MEDIUM : theme.Spacing.XSMALL,
paddingLeft: theme.Spacing.SMALL,
paddingRight: theme.Spacing.SMALL,
paddingTop: isLargeOrMediumWindowSize ? theme.Spacing.MEDIUM : theme.Spacing.XSMALL,
textAlign: 'left'
},
status: {
paddingBottom: theme.Spacing.XSMALL,
paddingLeft: isLargeOrMediumWindowSize ? theme.Spacing.SMALL : theme.Spacing.XSMALL,
paddingRight: theme.Spacing.SMALL,
paddingTop: theme.Spacing.XSMALL
},
success: {
color: theme.Colors.PRIMARY
},
wrapper: _extends({
borderBottom: _this.props.valid ? '1px solid ' + theme.Colors.GRAY_300 : '1px solid ' + theme.Colors.DANGER,
boxSizing: 'border-box',
paddingBottom: theme.Spacing.XSMALL,
marginLeft: isLargeOrMediumWindowSize ? 0 : -10,
marginRight: isLargeOrMediumWindowSize ? 0 : -10,
paddingTop: theme.Spacing.XSMALL,
transition: 'all .2s ease-in',
WebkitAppearance: 'none',
whiteSpace: 'nowrap',
':focus': wrapperFocus
}, _this.props.style),
wrapperFocus: wrapperFocus
}, _this.props.styles);
});

return _this;
}

_createClass(DisplayInput, [{
key: "componentWillMount",
value: function componentWillMount() {
this._labelId = _uniqueId('DI');
this._inputId = this.props.elementProps.id || _uniqueId('DI');
}
}, {
key: "render",
value: function render() {
// Input properties
var _this$props$elementPr = this.props.elementProps,
disabled = _this$props$elementPr.disabled,
onChange = _this$props$elementPr.onChange,
rest = _objectWithoutProperties(_this$props$elementPr, ["disabled", "onChange"]); // Methods


var theme = StyleUtils.mergeTheme(this.props.theme);
var hasChildren = !!this.props.children;

var isLargeOrMediumWindowSize = this._isLargeOrMediumWindowSize(theme);

var showHint = this.props.showHint && !this.props.status && isLargeOrMediumWindowSize;
var hasLabel = !!this.props.label; // Column Sizes

var twoWidthColumn = {
large: 2,
medium: 2,
small: 0
};

var inputColumn = this._getInputColumns(hasLabel, showHint);

var labelColumn = {
large: 2,
medium: 3,
small: 12
};
var statusColumn = {
large: 10,
medium: 9,
small: 12
}; // Styles

var styles = this.styles(theme, isLargeOrMediumWindowSize);
return React.createElement(Container, {
className: "mx-display-input"
}, React.createElement("div", {
style: _extends({}, styles.wrapper, this.props.isFocused ? styles.wrapperFocus : {})
}, React.createElement(Row, null, this.props.label ? React.createElement(Column, {
span: labelColumn
}, React.createElement("label", {
htmlFor: this._inputId,
id: this._labelId,
style: _extends({}, styles.labelText, this.props.labelStyle)
}, this.props.label)) : null, React.createElement(Column, {
relative: !hasChildren,
span: inputColumn
}, hasChildren ? React.createElement("div", {
style: _extends({}, styles.children, this.props.childrenStyle)
}, this.props.children) : React.createElement("div", {
style: styles.inputWrapper
}, React.createElement("input", _extends({}, rest, {
"aria-disabled": disabled,
"aria-labelledby": this.props.label ? this._labelId : null,
id: this._inputId,
key: "input",
onChange: disabled ? null : onChange,
ref: this.props.elementRef,
style: styles.input
})))), showHint ? React.createElement(Column, {
span: twoWidthColumn
}, React.createElement("div", {
style: styles.hint
}, this.props.showHint && !this.props.status ? React.createElement("div", null, this.props.hint) : null)) : null)), React.createElement(Row, null, this.props.status ? React.createElement(Column, {
offset: twoWidthColumn,
span: statusColumn
}, React.createElement("div", {
style: styles.status
}, React.createElement("div", {
style: styles[this.props.status.type]
}, this.props.status.message))) : null));
}
}]);

return DisplayInput;
}(React.Component);

_defineProperty(DisplayInput, "propTypes", {
childrenStyle: PropTypes.object,
elementProps: PropTypes.object,
elementRef: PropTypes.func,
hint: PropTypes.string,
isFocused: PropTypes.bool,
label: PropTypes.string,
labelStyle: PropTypes.object,
placeholder: PropTypes.string,
showHint: PropTypes.bool,
status: PropTypes.shape({
type: PropTypes.string,
message: PropTypes.string
}),
styles: PropTypes.object,
theme: themeShape,
valid: PropTypes.bool
});

_defineProperty(DisplayInput, "defaultProps", {
elementProps: {
type: 'text'
},
isFocused: false,
valid: true
});

module.exports = (0, _Theme.withTheme)(Radium(DisplayInput));