Completely updated React, fixed #11, (hopefully)

This commit is contained in:
2018-03-04 19:11:49 -05:00
parent 6e0afd6e2a
commit 34e5f5139a
13674 changed files with 333464 additions and 473223 deletions

View File

@@ -45,6 +45,10 @@ var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _warning = require('warning');
var _warning2 = _interopRequireDefault(_warning);
@@ -85,12 +89,6 @@ var _TabScrollButton2 = _interopRequireDefault(_TabScrollButton);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_ComponentType = require('prop-types').func;
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
var babelPluginFlowReactPropTypes_proptype_IndicatorStyle = require('./TabIndicator').babelPluginFlowReactPropTypes_proptype_IndicatorStyle || require('prop-types').any;
var styles = exports.styles = function styles(theme) {
return {
root: {
@@ -117,109 +115,12 @@ var styles = exports.styles = function styles(theme) {
centered: {
justifyContent: 'center'
},
buttonAuto: (0, _defineProperty3.default)({}, theme.breakpoints.down('sm'), {
buttonAuto: (0, _defineProperty3.default)({}, theme.breakpoints.down('xs'), {
display: 'none'
})
};
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* The CSS class name of the scroll button elements.
*/
buttonClassName: require('prop-types').string,
/**
* If `true`, the tabs will be centered.
* This property is intended for large views.
*/
centered: require('prop-types').bool,
/**
* The content of the component.
*/
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* If `true`, the tabs will grow to use all the available space.
* This property is intended for small views, like on mobile.
*/
fullWidth: require('prop-types').bool,
/**
* The CSS class name of the indicator element.
*/
indicatorClassName: require('prop-types').string,
/**
* Determines the color of the indicator.
*/
indicatorColor: require('prop-types').oneOfType([require('prop-types').oneOf(['accent']), require('prop-types').oneOf(['primary']), require('prop-types').string]),
/**
* Callback fired when the value changes.
*
* @param {object} event The event source of the callback
* @param {number} value We default to the index of the child
*/
onChange: require('prop-types').func.isRequired,
/**
* True invokes scrolling properties and allow for horizontally scrolling
* (or swiping) the tab bar.
*/
scrollable: require('prop-types').bool,
/**
* Determine behavior of scroll buttons when tabs are set to scroll
* `auto` will only present them on medium and larger viewports
* `on` will always present them
* `off` will never present them
*/
scrollButtons: require('prop-types').oneOf(['auto', 'on', 'off']),
/**
* The component used to render the scroll buttons.
*/
TabScrollButton: typeof babelPluginFlowReactPropTypes_proptype_ComponentType === 'function' ? babelPluginFlowReactPropTypes_proptype_ComponentType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ComponentType),
/**
* Determines the color of the `Tab`.
*/
textColor: require('prop-types').oneOf(['accent', 'primary', 'inherit']),
/**
* @ignore
*/
theme: require('prop-types').object,
/**
* The value of the currently selected `Tab`.
* If you don't want any selected `Tab`, you can set this property to `false`.
*/
value: require('prop-types').any.isRequired
};
var babelPluginFlowReactPropTypes_proptype_TabsMeta = {
clientWidth: require('prop-types').number.isRequired,
scrollLeft: require('prop-types').number.isRequired,
scrollLeftNormalized: require('prop-types').number.isRequired,
scrollWidth: require('prop-types').number.isRequired,
// ClientRect
left: require('prop-types').number.isRequired,
right: require('prop-types').number.isRequired
};
var Tabs = function (_React$Component) {
(0, _inherits3.default)(Tabs, _React$Component);
@@ -235,10 +136,7 @@ var Tabs = function (_React$Component) {
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Tabs.__proto__ || (0, _getPrototypeOf2.default)(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
indicatorStyle: {
left: 0,
width: 0
},
indicatorStyle: {},
scrollerStyle: {
marginBottom: 0
},
@@ -263,14 +161,14 @@ var Tabs = function (_React$Component) {
var showScrollButtons = scrollable && (scrollButtons === 'auto' || scrollButtons === 'on');
conditionalElements.scrollButtonLeft = showScrollButtons ? _react2.default.createElement(TabScrollButtonProp, {
direction: theme.direction === 'rtl' ? 'right' : 'left',
direction: theme && theme.direction === 'rtl' ? 'right' : 'left',
onClick: _this.handleLeftScrollClick,
visible: _this.state.showLeftScroll,
className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.buttonAuto, scrollButtons === 'auto'), buttonClassName)
}) : null;
conditionalElements.scrollButtonRight = showScrollButtons ? _react2.default.createElement(TabScrollButtonProp, {
direction: theme.direction === 'rtl' ? 'left' : 'right',
direction: theme && theme.direction === 'rtl' ? 'left' : 'right',
onClick: _this.handleRightScrollClick,
visible: _this.state.showRightScroll,
className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.buttonAuto, scrollButtons === 'auto'), buttonClassName)
@@ -294,11 +192,11 @@ var Tabs = function (_React$Component) {
var tabMeta = void 0;
if (_this.tabs && value !== false) {
var _children = _this.tabs.children[0].children;
var children = _this.tabs.children[0].children;
if (_children.length > 0) {
var tab = _children[_this.valueToIndex[value]];
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(Boolean(tab), 'Material-UI: the value provided `' + value + '` is invalid') : void 0;
if (children.length > 0) {
var tab = children[_this.valueToIndex[value]];
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(tab, 'Material-UI: the value provided `' + value + '` is invalid') : void 0;
tabMeta = tab ? tab.getBoundingClientRect() : null;
}
}
@@ -366,17 +264,17 @@ var Tabs = function (_React$Component) {
if (_this.tabs && scrollable && scrollButtons !== 'off') {
var _this$tabs = _this.tabs,
_scrollWidth = _this$tabs.scrollWidth,
_clientWidth = _this$tabs.clientWidth;
scrollWidth = _this$tabs.scrollWidth,
clientWidth = _this$tabs.clientWidth;
var _scrollLeft = (0, _normalizeScrollLeft.getNormalizedScrollLeft)(_this.tabs, theme.direction);
var scrollLeft = (0, _normalizeScrollLeft.getNormalizedScrollLeft)(_this.tabs, theme.direction);
var _showLeftScroll = theme.direction === 'rtl' ? _scrollWidth > _clientWidth + _scrollLeft : _scrollLeft > 0;
var showLeftScroll = theme.direction === 'rtl' ? scrollWidth > clientWidth + scrollLeft : scrollLeft > 0;
var _showRightScroll = theme.direction === 'rtl' ? _scrollLeft > 0 : _scrollWidth > _clientWidth + _scrollLeft;
var showRightScroll = theme.direction === 'rtl' ? scrollLeft > 0 : scrollWidth > clientWidth + scrollLeft;
if (_showLeftScroll !== _this.state.showLeftScroll || _showRightScroll !== _this.state.showRightScroll) {
_this.setState({ showLeftScroll: _showLeftScroll, showRightScroll: _showRightScroll });
if (showLeftScroll !== _this.state.showLeftScroll || showRightScroll !== _this.state.showRightScroll) {
_this.setState({ showLeftScroll: showLeftScroll, showRightScroll: showRightScroll });
}
}
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
@@ -389,6 +287,12 @@ var Tabs = function (_React$Component) {
this.setState({ mounted: true });
this.updateIndicatorState(this.props);
this.updateScrollButtonState();
if (this.props.action) {
this.props.action({
updateIndicator: this.handleResize
});
}
}
}, {
key: 'componentDidUpdate',
@@ -443,10 +347,11 @@ var Tabs = function (_React$Component) {
_this2 = this;
var _props = this.props,
action = _props.action,
buttonClassName = _props.buttonClassName,
centered = _props.centered,
classes = _props.classes,
childrenProp = _props.children,
classes = _props.classes,
classNameProp = _props.className,
fullWidth = _props.fullWidth,
indicatorClassName = _props.indicatorClassName,
@@ -458,7 +363,7 @@ var Tabs = function (_React$Component) {
textColor = _props.textColor,
theme = _props.theme,
value = _props.value,
other = (0, _objectWithoutProperties3.default)(_props, ['buttonClassName', 'centered', 'classes', 'children', 'className', 'fullWidth', 'indicatorClassName', 'indicatorColor', 'onChange', 'scrollable', 'scrollButtons', 'TabScrollButton', 'textColor', 'theme', 'value']);
other = (0, _objectWithoutProperties3.default)(_props, ['action', 'buttonClassName', 'centered', 'children', 'classes', 'className', 'fullWidth', 'indicatorClassName', 'indicatorColor', 'onChange', 'scrollable', 'scrollButtons', 'TabScrollButton', 'textColor', 'theme', 'value']);
var className = (0, _classnames2.default)(classes.root, classNameProp);
@@ -530,13 +435,96 @@ var Tabs = function (_React$Component) {
return Tabs;
}(_react2.default.Component);
Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Callback fired when the component mounts.
* This is useful when you want to trigger an action programmatically.
* It currently only supports `updateIndicator()` action.
*
* @param {object} actions This object contains all possible actions
* that can be triggered programmatically.
*/
action: _propTypes2.default.func,
/**
* The CSS class name of the scroll button elements.
*/
buttonClassName: _propTypes2.default.string,
/**
* If `true`, the tabs will be centered.
* This property is intended for large views.
*/
centered: _propTypes2.default.bool,
/**
* The content of the component.
*/
children: _propTypes2.default.node,
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* If `true`, the tabs will grow to use all the available space.
* This property is intended for small views, like on mobile.
*/
fullWidth: _propTypes2.default.bool,
/**
* The CSS class name of the indicator element.
*/
indicatorClassName: _propTypes2.default.string,
/**
* Determines the color of the indicator.
*/
indicatorColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.oneOf(['secondary', 'primary'])]),
/**
* Callback fired when the value changes.
*
* @param {object} event The event source of the callback
* @param {number} value We default to the index of the child
*/
onChange: _propTypes2.default.func,
/**
* True invokes scrolling properties and allow for horizontally scrolling
* (or swiping) the tab bar.
*/
scrollable: _propTypes2.default.bool,
/**
* Determine behavior of scroll buttons when tabs are set to scroll
* `auto` will only present them on medium and larger viewports
* `on` will always present them
* `off` will never present them
*/
scrollButtons: _propTypes2.default.oneOf(['auto', 'on', 'off']),
/**
* The component used to render the scroll buttons.
*/
TabScrollButton: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
/**
* Determines the color of the `Tab`.
*/
textColor: _propTypes2.default.oneOf(['secondary', 'primary', 'inherit']),
/**
* @ignore
*/
theme: _propTypes2.default.object.isRequired,
/**
* The value of the currently selected `Tab`.
* If you don't want any selected `Tab`, you can set this property to `false`.
*/
value: _propTypes2.default.any
} : {};
Tabs.defaultProps = {
centered: false,
fullWidth: false,
indicatorColor: 'accent',
indicatorColor: 'secondary',
scrollable: false,
scrollButtons: 'auto',
TabScrollButton: _TabScrollButton2.default,
textColor: 'inherit'
};
exports.default = (0, _withStyles2.default)(styles, { withTheme: true, name: 'MuiTabs' })(Tabs);
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiTabs', withTheme: true })(Tabs);