working on making the file upload work over websocket and json

This commit is contained in:
2018-01-17 23:27:27 -05:00
parent 8e72ffb917
commit 06e9317c9a
7876 changed files with 385003 additions and 7978 deletions

View File

@@ -0,0 +1,162 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _simpleAssign = require('simple-assign');
var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var getStyles = function getStyles(_ref, _ref2) {
var index = _ref.index;
var stepper = _ref2.stepper;
var orientation = stepper.orientation;
var styles = {
root: {
flex: '0 0 auto'
}
};
if (index > 0) {
if (orientation === 'horizontal') {
styles.root.marginLeft = -6;
} else if (orientation === 'vertical') {
styles.root.marginTop = -14;
}
}
return styles;
};
var Step = function (_Component) {
(0, _inherits3.default)(Step, _Component);
function Step() {
var _ref3;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, Step);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref3 = Step.__proto__ || (0, _getPrototypeOf2.default)(Step)).call.apply(_ref3, [this].concat(args))), _this), _this.renderChild = function (child) {
var _this$props = _this.props,
active = _this$props.active,
completed = _this$props.completed,
disabled = _this$props.disabled,
index = _this$props.index,
last = _this$props.last;
var icon = index + 1;
return _react2.default.cloneElement(child, (0, _simpleAssign2.default)({ active: active, completed: completed, disabled: disabled, icon: icon, last: last }, child.props));
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(Step, [{
key: 'render',
value: function render() {
var _props = this.props,
active = _props.active,
completed = _props.completed,
disabled = _props.disabled,
index = _props.index,
last = _props.last,
children = _props.children,
style = _props.style,
other = (0, _objectWithoutProperties3.default)(_props, ['active', 'completed', 'disabled', 'index', 'last', 'children', 'style']);
var prepareStyles = this.context.muiTheme.prepareStyles;
var styles = getStyles(this.props, this.context);
return _react2.default.createElement(
'div',
(0, _extends3.default)({ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, other),
_react2.default.Children.map(children, this.renderChild)
);
}
}]);
return Step;
}(_react.Component);
Step.contextTypes = {
muiTheme: _propTypes2.default.object.isRequired,
stepper: _propTypes2.default.object
};
Step.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Sets the step as active. Is passed to child components.
*/
active: _propTypes2.default.bool,
/**
* Should be `Step` sub-components such as `StepLabel`.
*/
children: _propTypes2.default.node,
/**
* Mark the step as completed. Is passed to child components.
*/
completed: _propTypes2.default.bool,
/**
* Mark the step as disabled, will also disable the button if
* `StepButton` is a child of `Step`. Is passed to child components.
*/
disabled: _propTypes2.default.bool,
/**
* @ignore
* Used internally for numbering.
*/
index: _propTypes2.default.number,
/**
* @ignore
*/
last: _propTypes2.default.bool,
/**
* Override the inline-style of the root element.
*/
style: _propTypes2.default.object
} : {};
exports.default = Step;

View File

@@ -0,0 +1,217 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _simpleAssign = require('simple-assign');
var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _transitions = require('../styles/transitions');
var _transitions2 = _interopRequireDefault(_transitions);
var _EnhancedButton = require('../internal/EnhancedButton');
var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton);
var _StepLabel = require('./StepLabel');
var _StepLabel2 = _interopRequireDefault(_StepLabel);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var isLabel = function isLabel(child) {
return child && child.type && child.type.muiName === 'StepLabel';
};
var getStyles = function getStyles(props, context, state) {
var hovered = state.hovered;
var _context$muiTheme$ste = context.muiTheme.stepper,
backgroundColor = _context$muiTheme$ste.backgroundColor,
hoverBackgroundColor = _context$muiTheme$ste.hoverBackgroundColor;
var styles = {
root: {
padding: 0,
backgroundColor: hovered ? hoverBackgroundColor : backgroundColor,
transition: _transitions2.default.easeOut()
}
};
if (context.stepper.orientation === 'vertical') {
styles.root.width = '100%';
}
return styles;
};
var StepButton = function (_Component) {
(0, _inherits3.default)(StepButton, _Component);
function StepButton() {
var _ref;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, StepButton);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = StepButton.__proto__ || (0, _getPrototypeOf2.default)(StepButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
hovered: false,
touched: false
}, _this.handleMouseEnter = function (event) {
var onMouseEnter = _this.props.onMouseEnter;
// Cancel hover styles for touch devices
if (!_this.state.touched) {
_this.setState({ hovered: true });
}
if (typeof onMouseEnter === 'function') {
onMouseEnter(event);
}
}, _this.handleMouseLeave = function (event) {
var onMouseLeave = _this.props.onMouseLeave;
_this.setState({ hovered: false });
if (typeof onMouseLeave === 'function') {
onMouseLeave(event);
}
}, _this.handleTouchStart = function (event) {
var onTouchStart = _this.props.onTouchStart;
if (!_this.state.touched) {
_this.setState({ touched: true });
}
if (typeof onTouchStart === 'function') {
onTouchStart(event);
}
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(StepButton, [{
key: 'render',
value: function render() {
var _props = this.props,
active = _props.active,
children = _props.children,
completed = _props.completed,
disabled = _props.disabled,
icon = _props.icon,
iconContainerStyle = _props.iconContainerStyle,
last = _props.last,
onMouseEnter = _props.onMouseEnter,
onMouseLeave = _props.onMouseLeave,
onTouchStart = _props.onTouchStart,
style = _props.style,
other = (0, _objectWithoutProperties3.default)(_props, ['active', 'children', 'completed', 'disabled', 'icon', 'iconContainerStyle', 'last', 'onMouseEnter', 'onMouseLeave', 'onTouchStart', 'style']);
var styles = getStyles(this.props, this.context, this.state);
var child = isLabel(children) ? children : _react2.default.createElement(
_StepLabel2.default,
null,
children
);
return _react2.default.createElement(
_EnhancedButton2.default,
(0, _extends3.default)({
disabled: disabled,
style: (0, _simpleAssign2.default)(styles.root, style),
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave,
onTouchStart: this.handleTouchStart
}, other),
_react2.default.cloneElement(child, { active: active, completed: completed, disabled: disabled, icon: icon, iconContainerStyle: iconContainerStyle })
);
}
}]);
return StepButton;
}(_react.Component);
StepButton.contextTypes = {
muiTheme: _propTypes2.default.object.isRequired,
stepper: _propTypes2.default.object
};
StepButton.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Passed from `Step` Is passed to StepLabel.
*/
active: _propTypes2.default.bool,
/**
* Can be a `StepLabel` or a node to place inside `StepLabel` as children.
*/
children: _propTypes2.default.node,
/**
* Sets completed styling. Is passed to StepLabel.
*/
completed: _propTypes2.default.bool,
/**
* Disables the button and sets disabled styling. Is passed to StepLabel.
*/
disabled: _propTypes2.default.bool,
/**
* The icon displayed by the step label.
*/
icon: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.string, _propTypes2.default.number]),
/**
* Override the inline-styles of the icon container element.
*/
iconContainerStyle: _propTypes2.default.object,
/** @ignore */
last: _propTypes2.default.bool,
/** @ignore */
onMouseEnter: _propTypes2.default.func,
/** @ignore */
onMouseLeave: _propTypes2.default.func,
/** @ignore */
onTouchStart: _propTypes2.default.func,
/**
* Override the inline-style of the root element.
*/
style: _propTypes2.default.object
} : {};
exports.default = StepButton;

View File

@@ -0,0 +1,77 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PlainStepConnector = undefined;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _pure = require('recompose/pure');
var _pure2 = _interopRequireDefault(_pure);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var propTypes = {
/**
* Override the inline-style of the root element.
*/
style: _propTypes2.default.object
};
var contextTypes = {
muiTheme: _propTypes2.default.object.isRequired,
stepper: _propTypes2.default.object
};
var StepConnector = function StepConnector(props, context) {
var muiTheme = context.muiTheme,
stepper = context.stepper;
var styles = {
wrapper: {
flex: '1 1 auto'
},
line: {
display: 'block',
borderColor: muiTheme.stepper.connectorLineColor
}
};
/**
* Clean up once we can use CSS pseudo elements
*/
if (stepper.orientation === 'horizontal') {
styles.line.marginLeft = -6;
styles.line.borderTopStyle = 'solid';
styles.line.borderTopWidth = 1;
} else if (stepper.orientation === 'vertical') {
styles.wrapper.marginLeft = 14 + 11; // padding + 1/2 icon
styles.line.borderLeftStyle = 'solid';
styles.line.borderLeftWidth = 1;
styles.line.minHeight = 28;
}
var prepareStyles = muiTheme.prepareStyles;
return _react2.default.createElement(
'div',
{ style: prepareStyles(styles.wrapper) },
_react2.default.createElement('span', { style: prepareStyles(styles.line) })
);
};
StepConnector.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
StepConnector.contextTypes = contextTypes;
exports.PlainStepConnector = StepConnector;
exports.default = (0, _pure2.default)(StepConnector);

View File

@@ -0,0 +1,168 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _simpleAssign = require('simple-assign');
var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _ExpandTransition = require('../internal/ExpandTransition');
var _ExpandTransition2 = _interopRequireDefault(_ExpandTransition);
var _warning = require('warning');
var _warning2 = _interopRequireDefault(_warning);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ExpandTransition(props) {
return _react2.default.createElement(_ExpandTransition2.default, props);
}
var getStyles = function getStyles(props, context) {
var styles = {
root: {
marginTop: -14,
marginLeft: 14 + 11, // padding + 1/2 icon
paddingLeft: 24 - 11 + 8,
paddingRight: 16,
overflow: 'hidden'
}
};
if (!props.last) {
styles.root.borderLeft = '1px solid ' + context.muiTheme.stepper.connectorLineColor;
}
return styles;
};
var StepContent = function (_Component) {
(0, _inherits3.default)(StepContent, _Component);
function StepContent() {
(0, _classCallCheck3.default)(this, StepContent);
return (0, _possibleConstructorReturn3.default)(this, (StepContent.__proto__ || (0, _getPrototypeOf2.default)(StepContent)).apply(this, arguments));
}
(0, _createClass3.default)(StepContent, [{
key: 'render',
value: function render() {
var _props = this.props,
active = _props.active,
children = _props.children,
completed = _props.completed,
last = _props.last,
style = _props.style,
transition = _props.transition,
transitionDuration = _props.transitionDuration,
other = (0, _objectWithoutProperties3.default)(_props, ['active', 'children', 'completed', 'last', 'style', 'transition', 'transitionDuration']);
var _context = this.context,
stepper = _context.stepper,
prepareStyles = _context.muiTheme.prepareStyles;
if (stepper.orientation !== 'vertical') {
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: <StepContent /> is only designed for use with the vertical stepper.') : void 0;
return null;
}
var styles = getStyles(this.props, this.context);
var transitionProps = {
enterDelay: transitionDuration,
transitionDuration: transitionDuration,
open: active
};
return _react2.default.createElement(
'div',
(0, _extends3.default)({ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, other),
_react2.default.createElement(transition, transitionProps, _react2.default.createElement(
'div',
{ style: { overflow: 'hidden' } },
children
))
);
}
}]);
return StepContent;
}(_react.Component);
StepContent.defaultProps = {
transition: ExpandTransition,
transitionDuration: 450
};
StepContent.contextTypes = {
muiTheme: _propTypes2.default.object.isRequired,
stepper: _propTypes2.default.object
};
StepContent.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Expands the content
*/
active: _propTypes2.default.bool,
/**
* Step content
*/
children: _propTypes2.default.node,
/**
* @ignore
*/
completed: _propTypes2.default.bool,
/**
* @ignore
*/
last: _propTypes2.default.bool,
/**
* Override the inline-style of the root element.
*/
style: _propTypes2.default.object,
/**
* ReactTransitionGroup component.
*/
transition: _propTypes2.default.func,
/**
* Adjust the duration of the content expand transition. Passed as a prop to the transition component.
*/
transitionDuration: _propTypes2.default.number
} : {};
exports.default = StepContent;

View File

@@ -0,0 +1,196 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _typeof2 = require('babel-runtime/helpers/typeof');
var _typeof3 = _interopRequireDefault(_typeof2);
var _simpleAssign = require('simple-assign');
var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _checkCircle = require('../svg-icons/action/check-circle');
var _checkCircle2 = _interopRequireDefault(_checkCircle);
var _SvgIcon = require('../SvgIcon');
var _SvgIcon2 = _interopRequireDefault(_SvgIcon);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var getStyles = function getStyles(_ref, _ref2) {
var active = _ref.active,
completed = _ref.completed,
disabled = _ref.disabled;
var muiTheme = _ref2.muiTheme,
stepper = _ref2.stepper;
var _muiTheme$stepper = muiTheme.stepper,
textColor = _muiTheme$stepper.textColor,
disabledTextColor = _muiTheme$stepper.disabledTextColor,
iconColor = _muiTheme$stepper.iconColor,
inactiveIconColor = _muiTheme$stepper.inactiveIconColor;
var baseTheme = muiTheme.baseTheme;
var orientation = stepper.orientation;
var styles = {
root: {
height: orientation === 'horizontal' ? 72 : 64,
color: textColor,
display: 'flex',
alignItems: 'center',
fontFamily: baseTheme.fontFamily,
fontSize: 14,
paddingLeft: 14,
paddingRight: 14
},
icon: {
color: iconColor,
display: 'block',
fontSize: 24,
width: 24,
height: 24
},
iconContainer: {
paddingRight: 8
}
};
if (active) {
styles.root.fontWeight = 500;
}
if (!completed && !active) {
styles.icon.color = inactiveIconColor;
}
if (disabled) {
styles.icon.color = inactiveIconColor;
styles.root.color = disabledTextColor;
styles.root.cursor = 'default';
}
return styles;
};
var renderIcon = function renderIcon(completed, icon, styles) {
var iconType = typeof icon === 'undefined' ? 'undefined' : (0, _typeof3.default)(icon);
if (iconType === 'number' || iconType === 'string') {
if (completed) {
return _react2.default.createElement(_checkCircle2.default, {
color: styles.icon.color,
style: styles.icon
});
}
return _react2.default.createElement(
_SvgIcon2.default,
{ color: styles.icon.color, style: styles.icon },
_react2.default.createElement('circle', { cx: '12', cy: '12', r: '10' }),
_react2.default.createElement(
'text',
{
x: '12',
y: '16',
textAnchor: 'middle',
fontSize: '12',
fill: '#fff'
},
icon
)
);
}
return icon;
};
var StepLabel = function StepLabel(props, context) {
var active = props.active,
children = props.children,
completed = props.completed,
userIcon = props.icon,
iconContainerStyle = props.iconContainerStyle,
last = props.last,
style = props.style,
other = (0, _objectWithoutProperties3.default)(props, ['active', 'children', 'completed', 'icon', 'iconContainerStyle', 'last', 'style']);
var prepareStyles = context.muiTheme.prepareStyles;
var styles = getStyles(props, context);
var icon = renderIcon(completed, userIcon, styles);
return _react2.default.createElement(
'span',
(0, _extends3.default)({ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, other),
icon && _react2.default.createElement(
'span',
{ style: prepareStyles((0, _simpleAssign2.default)(styles.iconContainer, iconContainerStyle)) },
icon
),
children
);
};
StepLabel.muiName = 'StepLabel';
StepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Sets active styling. Overrides disabled coloring.
*/
active: _propTypes2.default.bool,
/**
* The label text node
*/
children: _propTypes2.default.node,
/**
* Sets completed styling. Overrides disabled coloring.
*/
completed: _propTypes2.default.bool,
/**
* Sets disabled styling.
*/
disabled: _propTypes2.default.bool,
/**
* The icon displayed by the step label.
*/
icon: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.string, _propTypes2.default.number]),
/**
* Override the inline-styles of the icon container element.
*/
iconContainerStyle: _propTypes2.default.object,
/**
* @ignore
*/
last: _propTypes2.default.bool,
/**
* Override the inline-style of the root element.
*/
style: _propTypes2.default.object
} : {};
StepLabel.contextTypes = {
muiTheme: _propTypes2.default.object.isRequired,
stepper: _propTypes2.default.object
};
exports.default = StepLabel;

View File

@@ -0,0 +1,155 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _simpleAssign = require('simple-assign');
var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _StepConnector = require('./StepConnector');
var _StepConnector2 = _interopRequireDefault(_StepConnector);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var getStyles = function getStyles(props) {
var orientation = props.orientation;
return {
root: {
display: 'flex',
flexDirection: orientation === 'horizontal' ? 'row' : 'column',
alignContent: 'center',
alignItems: orientation === 'horizontal' ? 'center' : 'stretch',
justifyContent: 'space-between'
}
};
};
var Stepper = function (_Component) {
(0, _inherits3.default)(Stepper, _Component);
function Stepper() {
(0, _classCallCheck3.default)(this, Stepper);
return (0, _possibleConstructorReturn3.default)(this, (Stepper.__proto__ || (0, _getPrototypeOf2.default)(Stepper)).apply(this, arguments));
}
(0, _createClass3.default)(Stepper, [{
key: 'getChildContext',
value: function getChildContext() {
var orientation = this.props.orientation;
return { stepper: { orientation: orientation } };
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
activeStep = _props.activeStep,
children = _props.children,
connector = _props.connector,
linear = _props.linear,
style = _props.style;
var prepareStyles = this.context.muiTheme.prepareStyles;
var styles = getStyles(this.props, this.context);
/**
* One day, we may be able to use real CSS tools
* For now, we need to create our own "pseudo" elements
* and nth child selectors, etc
* That's what some of this garbage is for :)
*/
var numChildren = _react.Children.count(children);
var steps = _react.Children.map(children, function (step, index) {
var controlProps = { index: index };
if (activeStep === index) {
controlProps.active = true;
} else if (linear && activeStep > index) {
controlProps.completed = true;
} else if (linear && activeStep < index) {
controlProps.disabled = true;
}
if (index + 1 === numChildren) {
controlProps.last = true;
}
return [index > 0 && connector, _react2.default.cloneElement(step, (0, _simpleAssign2.default)(controlProps, step.props))];
});
return _react2.default.createElement(
'div',
{ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) },
steps
);
}
}]);
return Stepper;
}(_react.Component);
Stepper.defaultProps = {
connector: _react2.default.createElement(_StepConnector2.default, null),
orientation: 'horizontal',
linear: true
};
Stepper.contextTypes = { muiTheme: _propTypes2.default.object.isRequired };
Stepper.childContextTypes = { stepper: _propTypes2.default.object };
Stepper.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Set the active step (zero based index). This will enable `Step` control helpers.
*/
activeStep: _propTypes2.default.number,
/**
* Should be two or more `<Step />` components.
*/
children: _propTypes2.default.node,
/**
* A component to be placed between each step.
*/
connector: _propTypes2.default.node,
/**
* If set to `true`, the `Stepper` will assist in controlling steps for linear flow
*/
linear: _propTypes2.default.bool,
/**
* The stepper orientation (layout flow direction)
*/
orientation: _propTypes2.default.oneOf(['horizontal', 'vertical']),
/**
* Override the inline-style of the root element.
*/
style: _propTypes2.default.object
} : {};
exports.default = Stepper;

View File

@@ -0,0 +1,34 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Stepper = exports.StepLabel = exports.StepContent = exports.StepButton = exports.Step = undefined;
var _Step2 = require('./Step');
var _Step3 = _interopRequireDefault(_Step2);
var _StepButton2 = require('./StepButton');
var _StepButton3 = _interopRequireDefault(_StepButton2);
var _StepContent2 = require('./StepContent');
var _StepContent3 = _interopRequireDefault(_StepContent2);
var _StepLabel2 = require('./StepLabel');
var _StepLabel3 = _interopRequireDefault(_StepLabel2);
var _Stepper2 = require('./Stepper');
var _Stepper3 = _interopRequireDefault(_Stepper2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.Step = _Step3.default;
exports.StepButton = _StepButton3.default;
exports.StepContent = _StepContent3.default;
exports.StepLabel = _StepLabel3.default;
exports.Stepper = _Stepper3.default;