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

@@ -3,35 +3,28 @@ import { StandardProps } from '..';
import { ButtonBaseProps } from '../ButtonBase';
import { ButtonBaseClassKey } from '../ButtonBase/ButtonBase';
export interface TabProps extends StandardProps<
ButtonBaseProps,
TabClassKey,
'onChange'
> {
export interface TabProps extends StandardProps<ButtonBaseProps, TabClassKey, 'onChange'> {
disabled?: boolean;
fullWidth?: boolean;
icon?: string | React.ReactElement<any>;
value?: any;
label?: React.ReactNode;
onChange?: (
event: React.ChangeEvent<{ checked: boolean }>,
value: any
) => void;
onChange?: (event: React.ChangeEvent<{ checked: boolean }>, value: any) => void;
onClick?: React.EventHandler<any>;
selected?: boolean;
style?: object;
textColor?: string | 'accent' | 'primary' | 'inherit';
style?: React.CSSProperties;
textColor?: string | 'secondary' | 'primary' | 'inherit';
}
export type TabClassKey =
| ButtonBaseClassKey
| 'rootLabelIcon'
| 'rootAccent'
| 'rootAccentSelected'
| 'rootAccentDisabled'
| 'rootPrimary'
| 'rootPrimarySelected'
| 'rootPrimaryDisabled'
| 'rootSecondary'
| 'rootSecondarySelected'
| 'rootSecondaryDisabled'
| 'rootInherit'
| 'rootInheritSelected'
| 'rootInheritDisabled'
@@ -39,8 +32,7 @@ export type TabClassKey =
| 'wrapper'
| 'labelContainer'
| 'label'
| 'labelWrapped'
;
| 'labelWrapped';
declare const Tab: React.ComponentType<TabProps>;

View File

@@ -45,6 +45,10 @@ var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
@@ -59,13 +63,8 @@ var _ButtonBase2 = _interopRequireDefault(_ButtonBase);
var _helpers = require('../utils/helpers');
var _Icon = require('../Icon');
var _Icon2 = _interopRequireDefault(_Icon);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_Element = require('react').babelPluginFlowReactPropTypes_proptype_Element || require('prop-types').any;
// @inheritedComponent ButtonBase
var styles = exports.styles = function styles(theme) {
@@ -84,27 +83,27 @@ var styles = exports.styles = function styles(theme) {
rootLabelIcon: {
height: 72
},
rootAccent: {
color: theme.palette.text.secondary
},
rootAccentSelected: {
color: theme.palette.secondary.A200
},
rootAccentDisabled: {
color: theme.palette.text.disabled
rootInherit: {
color: 'inherit',
opacity: 0.7
},
rootPrimary: {
color: theme.palette.text.secondary
},
rootPrimarySelected: {
color: theme.palette.primary[500]
color: theme.palette.primary.main
},
rootPrimaryDisabled: {
color: theme.palette.text.disabled
},
rootInherit: {
color: 'inherit',
opacity: 0.7
rootSecondary: {
color: theme.palette.text.secondary
},
rootSecondarySelected: {
color: theme.palette.secondary.main
},
rootSecondaryDisabled: {
color: theme.palette.text.disabled
},
rootInheritSelected: {
opacity: 1
@@ -137,81 +136,12 @@ var styles = exports.styles = function styles(theme) {
}, theme.breakpoints.up('md'), {
fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1)
}),
labelWrapped: (0, _defineProperty3.default)({}, theme.breakpoints.down('md'), {
labelWrapped: (0, _defineProperty3.default)({}, theme.breakpoints.down('sm'), {
fontSize: theme.typography.pxToRem(theme.typography.fontSize - 2)
})
};
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* If `true`, the tab will be disabled.
*/
disabled: require('prop-types').bool,
/**
* @ignore
*/
fullWidth: require('prop-types').bool,
/**
* The icon element. If a string is provided, it will be used as a font ligature.
*/
icon: require('prop-types').oneOfType([require('prop-types').string, typeof babelPluginFlowReactPropTypes_proptype_Element === 'function' ? babelPluginFlowReactPropTypes_proptype_Element : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Element)]),
/**
* @ignore
* For server side rendering consideration, we let the selected tab
* render the indicator.
*/
indicator: require('prop-types').oneOfType([require('prop-types').string, typeof babelPluginFlowReactPropTypes_proptype_Element === 'function' ? babelPluginFlowReactPropTypes_proptype_Element : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Element)]),
/**
* The label element.
*/
label: require('prop-types').oneOfType([require('prop-types').string, typeof babelPluginFlowReactPropTypes_proptype_Element === 'function' ? babelPluginFlowReactPropTypes_proptype_Element : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Element)]),
/**
* @ignore
*/
onChange: require('prop-types').func,
/**
* @ignore
*/
onClick: require('prop-types').func,
/**
* @ignore
*/
selected: require('prop-types').bool,
/**
* @ignore
*/
style: require('prop-types').object,
/**
* @ignore
*/
textColor: require('prop-types').oneOfType([require('prop-types').oneOf(['accent']), require('prop-types').oneOf(['primary']), require('prop-types').oneOf(['inherit']), require('prop-types').string]),
/**
* You can provide your own value. Otherwise, we fallback to the child position index.
*/
value: require('prop-types').any
};
var Tab = function (_React$Component) {
(0, _inherits3.default)(Tab, _React$Component);
@@ -244,9 +174,9 @@ var Tab = function (_React$Component) {
}
}, _this.label = undefined, _this.checkTextWrap = function () {
if (_this.label) {
var _wrappedText = _this.label.getClientRects().length > 1;
if (_this.state.wrappedText !== _wrappedText) {
_this.setState({ wrappedText: _wrappedText });
var wrappedText = _this.label.getClientRects().length > 1;
if (_this.state.wrappedText !== wrappedText) {
_this.setState({ wrappedText: wrappedText });
}
}
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
@@ -280,7 +210,7 @@ var Tab = function (_React$Component) {
classNameProp = _props.className,
disabled = _props.disabled,
fullWidth = _props.fullWidth,
iconProp = _props.icon,
icon = _props.icon,
indicator = _props.indicator,
labelProp = _props.label,
onChange = _props.onChange,
@@ -291,21 +221,11 @@ var Tab = function (_React$Component) {
other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'className', 'disabled', 'fullWidth', 'icon', 'indicator', 'label', 'onChange', 'selected', 'style', 'textColor', 'value']);
var icon = void 0;
if (iconProp !== undefined) {
icon = _react2.default.isValidElement(iconProp) ? iconProp : _react2.default.createElement(
_Icon2.default,
null,
iconProp
);
}
var label = void 0;
if (labelProp !== undefined) {
label = _react2.default.createElement(
'div',
'span',
{ className: classes.labelContainer },
_react2.default.createElement(
'span',
@@ -320,11 +240,11 @@ var Tab = function (_React$Component) {
);
}
var className = (0, _classnames2.default)(classes.root, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes['root' + (0, _helpers.capitalizeFirstLetter)(textColor)], true), (0, _defineProperty3.default)(_classNames2, classes['root' + (0, _helpers.capitalizeFirstLetter)(textColor) + 'Disabled'], disabled), (0, _defineProperty3.default)(_classNames2, classes['root' + (0, _helpers.capitalizeFirstLetter)(textColor) + 'Selected'], selected), (0, _defineProperty3.default)(_classNames2, classes.rootLabelIcon, icon && label), (0, _defineProperty3.default)(_classNames2, classes.fullWidth, fullWidth), _classNames2), classNameProp);
var className = (0, _classnames2.default)(classes.root, classes['root' + (0, _helpers.capitalize)(textColor)], (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes['root' + (0, _helpers.capitalize)(textColor) + 'Disabled'], disabled), (0, _defineProperty3.default)(_classNames2, classes['root' + (0, _helpers.capitalize)(textColor) + 'Selected'], selected), (0, _defineProperty3.default)(_classNames2, classes.rootLabelIcon, icon && label), (0, _defineProperty3.default)(_classNames2, classes.fullWidth, fullWidth), _classNames2), classNameProp);
var style = {};
if (textColor !== 'accent' && textColor !== 'inherit') {
if (textColor !== 'secondary' && textColor !== 'inherit') {
style.color = textColor;
}
@@ -355,7 +275,66 @@ var Tab = function (_React$Component) {
return Tab;
}(_react2.default.Component);
Tab.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* If `true`, the tab will be disabled.
*/
disabled: _propTypes2.default.bool,
/**
* @ignore
*/
fullWidth: _propTypes2.default.bool,
/**
* The icon element.
*/
icon: _propTypes2.default.node,
/**
* @ignore
* For server side rendering consideration, we let the selected tab
* render the indicator.
*/
indicator: _propTypes2.default.node,
/**
* The label element.
*/
label: _propTypes2.default.node,
/**
* @ignore
*/
onChange: _propTypes2.default.func,
/**
* @ignore
*/
onClick: _propTypes2.default.func,
/**
* @ignore
*/
selected: _propTypes2.default.bool,
/**
* @ignore
*/
style: _propTypes2.default.object,
/**
* @ignore
*/
textColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.oneOf(['secondary', 'primary', 'inherit'])]),
/**
* You can provide your own value. Otherwise, we fallback to the child position index.
*/
value: _propTypes2.default.any
} : {};
Tab.defaultProps = {
disabled: false
disabled: false,
textColor: 'inherit'
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiTab' })(Tab);

View File

@@ -1,15 +1,13 @@
// @flow
// @inheritedComponent ButtonBase
import React from 'react';
import type { Element } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import ButtonBase from '../ButtonBase';
import { capitalizeFirstLetter } from '../utils/helpers';
import Icon from '../Icon';
import { capitalize } from '../utils/helpers';
export const styles = (theme: Object) => ({
export const styles = theme => ({
root: {
...theme.typography.button,
maxWidth: 264,
@@ -26,27 +24,27 @@ export const styles = (theme: Object) => ({
rootLabelIcon: {
height: 72,
},
rootAccent: {
color: theme.palette.text.secondary,
},
rootAccentSelected: {
color: theme.palette.secondary.A200,
},
rootAccentDisabled: {
color: theme.palette.text.disabled,
rootInherit: {
color: 'inherit',
opacity: 0.7,
},
rootPrimary: {
color: theme.palette.text.secondary,
},
rootPrimarySelected: {
color: theme.palette.primary[500],
color: theme.palette.primary.main,
},
rootPrimaryDisabled: {
color: theme.palette.text.disabled,
},
rootInherit: {
color: 'inherit',
opacity: 0.7,
rootSecondary: {
color: theme.palette.text.secondary,
},
rootSecondarySelected: {
color: theme.palette.secondary.main,
},
rootSecondaryDisabled: {
color: theme.palette.text.disabled,
},
rootInheritSelected: {
opacity: 1,
@@ -82,82 +80,13 @@ export const styles = (theme: Object) => ({
},
},
labelWrapped: {
[theme.breakpoints.down('md')]: {
[theme.breakpoints.down('sm')]: {
fontSize: theme.typography.pxToRem(theme.typography.fontSize - 2),
},
},
});
type ProvidedProps = {
classes: Object,
};
export type Props = {
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* If `true`, the tab will be disabled.
*/
disabled?: boolean,
/**
* @ignore
*/
fullWidth?: boolean,
/**
* The icon element. If a string is provided, it will be used as a font ligature.
*/
icon?: string | Element<any>,
/**
* @ignore
* For server side rendering consideration, we let the selected tab
* render the indicator.
*/
indicator?: string | Element<any>,
/**
* The label element.
*/
label?: string | Element<any>,
/**
* @ignore
*/
onChange?: (event: SyntheticEvent<>, value: any) => void,
/**
* @ignore
*/
onClick?: (event: SyntheticEvent<>) => void,
/**
* @ignore
*/
selected?: boolean,
/**
* @ignore
*/
style?: Object,
/**
* @ignore
*/
textColor?: 'accent' | 'primary' | 'inherit' | string,
/**
* You can provide your own value. Otherwise, we fallback to the child position index.
*/
value?: any,
};
type State = {
wrappedText: boolean,
};
class Tab extends React.Component<ProvidedProps & Props, State> {
static defaultProps = {
disabled: false,
};
class Tab extends React.Component {
state = {
wrappedText: false,
};
@@ -206,7 +135,7 @@ class Tab extends React.Component<ProvidedProps & Props, State> {
className: classNameProp,
disabled,
fullWidth,
icon: iconProp,
icon,
indicator,
label: labelProp,
onChange,
@@ -217,17 +146,11 @@ class Tab extends React.Component<ProvidedProps & Props, State> {
...other
} = this.props;
let icon;
if (iconProp !== undefined) {
icon = React.isValidElement(iconProp) ? iconProp : <Icon>{iconProp}</Icon>;
}
let label;
if (labelProp !== undefined) {
label = (
<div className={classes.labelContainer}>
<span className={classes.labelContainer}>
<span
className={classNames(classes.label, {
[classes.labelWrapped]: this.state.wrappedText,
@@ -238,16 +161,16 @@ class Tab extends React.Component<ProvidedProps & Props, State> {
>
{labelProp}
</span>
</div>
</span>
);
}
const className = classNames(
classes.root,
classes[`root${capitalize(textColor)}`],
{
[classes[`root${capitalizeFirstLetter(textColor)}`]]: true,
[classes[`root${capitalizeFirstLetter(textColor)}Disabled`]]: disabled,
[classes[`root${capitalizeFirstLetter(textColor)}Selected`]]: selected,
[classes[`root${capitalize(textColor)}Disabled`]]: disabled,
[classes[`root${capitalize(textColor)}Selected`]]: selected,
[classes.rootLabelIcon]: icon && label,
[classes.fullWidth]: fullWidth,
},
@@ -256,7 +179,7 @@ class Tab extends React.Component<ProvidedProps & Props, State> {
let style = {};
if (textColor !== 'accent' && textColor !== 'inherit') {
if (textColor !== 'secondary' && textColor !== 'inherit') {
style.color = textColor;
}
@@ -289,4 +212,69 @@ class Tab extends React.Component<ProvidedProps & Props, State> {
}
}
Tab.propTypes = {
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the tab will be disabled.
*/
disabled: PropTypes.bool,
/**
* @ignore
*/
fullWidth: PropTypes.bool,
/**
* The icon element.
*/
icon: PropTypes.node,
/**
* @ignore
* For server side rendering consideration, we let the selected tab
* render the indicator.
*/
indicator: PropTypes.node,
/**
* The label element.
*/
label: PropTypes.node,
/**
* @ignore
*/
onChange: PropTypes.func,
/**
* @ignore
*/
onClick: PropTypes.func,
/**
* @ignore
*/
selected: PropTypes.bool,
/**
* @ignore
*/
style: PropTypes.object,
/**
* @ignore
*/
textColor: PropTypes.oneOfType([
PropTypes.string,
PropTypes.oneOf(['secondary', 'primary', 'inherit']),
]),
/**
* You can provide your own value. Otherwise, we fallback to the child position index.
*/
value: PropTypes.any,
};
Tab.defaultProps = {
disabled: false,
textColor: 'inherit',
};
export default withStyles(styles, { name: 'MuiTab' })(Tab);

View File

@@ -1,19 +1,13 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface TabIndicatorProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
TabIndicatorClassKey
> {
color: 'accent' | 'primary' | string;
export interface TabIndicatorProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, TabIndicatorClassKey> {
color: 'secondary' | 'primary' | string;
style: { left: number; width: number };
}
export type TabIndicatorClassKey =
| 'root'
| 'colorAccent'
| 'colorPrimary'
;
export type TabIndicatorClassKey = 'root' | 'colorSecondary' | 'colorPrimary';
declare const TabIndicator: React.ComponentType<TabIndicatorProps>;

View File

@@ -13,12 +13,14 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _ref; // weak
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
@@ -41,50 +43,15 @@ var styles = exports.styles = function styles(theme) {
transition: theme.transitions.create(),
willChange: 'left, width'
},
colorAccent: {
backgroundColor: theme.palette.secondary.A200
},
colorPrimary: {
backgroundColor: theme.palette.primary[500]
backgroundColor: theme.palette.primary.main
},
colorSecondary: {
backgroundColor: theme.palette.secondary.main
}
};
};
var babelPluginFlowReactPropTypes_proptype_IndicatorStyle = {
left: require('prop-types').number.isRequired,
width: require('prop-types').number.isRequired
};
var babelPluginFlowReactPropTypes_proptype_ProvidedProps = {
classes: require('prop-types').object.isRequired
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* @ignore
* The color of the tab indicator.
*/
color: require('prop-types').oneOfType([require('prop-types').oneOf(['accent']), require('prop-types').oneOf(['primary']), require('prop-types').string]).isRequired,
/**
* @ignore
* The style of the root element.
*/
style: require('prop-types').shape({
left: require('prop-types').number.isRequired,
width: require('prop-types').number.isRequired
}).isRequired
};
/**
* @ignore - internal component.
*/
@@ -94,20 +61,35 @@ function TabIndicator(props) {
color = props.color,
styleProp = props.style;
var colorPredefined = ['primary', 'accent'].indexOf(color) !== -1;
var className = (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes['color' + (0, _helpers.capitalizeFirstLetter)(color)], colorPredefined), classNameProp);
var colorPredefined = ['primary', 'secondary'].indexOf(color) !== -1;
var className = (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes['color' + (0, _helpers.capitalize)(color)], colorPredefined), classNameProp);
var style = colorPredefined ? styleProp : (0, _extends3.default)({}, styleProp, {
backgroundColor: color
});
return _react2.default.createElement('div', { className: className, style: style });
return _react2.default.createElement('span', { className: className, style: style });
}
TabIndicator.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired
}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'color', require('prop-types').oneOfType([require('prop-types').oneOf(['accent']), require('prop-types').oneOf(['primary']), require('prop-types').string]).isRequired), (0, _defineProperty3.default)(_ref, 'style', require('prop-types').shape({
left: require('prop-types').number.isRequired,
width: require('prop-types').number.isRequired
}).isRequired), _ref) : {};
TabIndicator.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* @ignore
* The color of the tab indicator.
*/
color: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.oneOf(['primary', 'secondary'])]),
/**
* @ignore
* The style of the root element.
*/
style: _propTypes2.default.object
} : {};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiTabIndicator' })(TabIndicator);

View File

@@ -1,11 +1,10 @@
// @flow weak
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { capitalizeFirstLetter } from '../utils/helpers';
import { capitalize } from '../utils/helpers';
export const styles = (theme: Object) => ({
export const styles = theme => ({
root: {
position: 'absolute',
height: 2,
@@ -14,54 +13,24 @@ export const styles = (theme: Object) => ({
transition: theme.transitions.create(),
willChange: 'left, width',
},
colorAccent: {
backgroundColor: theme.palette.secondary.A200,
},
colorPrimary: {
backgroundColor: theme.palette.primary[500],
backgroundColor: theme.palette.primary.main,
},
colorSecondary: {
backgroundColor: theme.palette.secondary.main,
},
});
export type IndicatorStyle = {
left: number,
width: number,
};
export type ProvidedProps = {
classes: Object,
};
export type Props = {
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* @ignore
* The color of the tab indicator.
*/
color: 'accent' | 'primary' | string,
/**
* @ignore
* The style of the root element.
*/
style: IndicatorStyle,
};
/**
* @ignore - internal component.
*/
function TabIndicator(props: ProvidedProps & Props) {
function TabIndicator(props) {
const { classes, className: classNameProp, color, style: styleProp } = props;
const colorPredefined = ['primary', 'accent'].indexOf(color) !== -1;
const colorPredefined = ['primary', 'secondary'].indexOf(color) !== -1;
const className = classNames(
classes.root,
{
[classes[`color${capitalizeFirstLetter(color)}`]]: colorPredefined,
[classes[`color${capitalize(color)}`]]: colorPredefined,
},
classNameProp,
);
@@ -73,7 +42,28 @@ function TabIndicator(props: ProvidedProps & Props) {
backgroundColor: color,
};
return <div className={className} style={style} />;
return <span className={className} style={style} />;
}
TabIndicator.propTypes = {
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* @ignore
* The color of the tab indicator.
*/
color: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['primary', 'secondary'])]),
/**
* @ignore
* The style of the root element.
*/
style: PropTypes.object,
};
export default withStyles(styles, { name: 'MuiTabIndicator' })(TabIndicator);

View File

@@ -1,18 +1,13 @@
import { StandardProps } from '..';
import { ButtonBaseProps, ButtonBaseClassKey } from '../ButtonBase/ButtonBase';
export interface TabScrollButtonProps extends StandardProps<
ButtonBaseProps,
TabScrollButtonClassKey
> {
export interface TabScrollButtonProps
extends StandardProps<ButtonBaseProps, TabScrollButtonClassKey> {
direction?: 'left' | 'right';
visible?: boolean;
}
export type TabScrollButtonClassKey =
| ButtonBaseClassKey
| 'root'
;
export type TabScrollButtonClassKey = ButtonBaseClassKey | 'root';
declare const TabScrollButton: React.ComponentType<TabScrollButtonProps>;

View File

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
});
exports.styles = undefined;
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
@@ -17,16 +13,26 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref3; // weak
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _KeyboardArrowLeft = require('../internal/svg-icons/KeyboardArrowLeft');
var _KeyboardArrowLeft2 = _interopRequireDefault(_KeyboardArrowLeft);
var _KeyboardArrowRight = require('../internal/svg-icons/KeyboardArrowRight');
var _KeyboardArrowRight2 = _interopRequireDefault(_KeyboardArrowRight);
var _withStyles = require('../styles/withStyles');
var _withStyles2 = _interopRequireDefault(_withStyles);
@@ -35,14 +41,6 @@ var _ButtonBase = require('../ButtonBase');
var _ButtonBase2 = _interopRequireDefault(_ButtonBase);
var _KeyboardArrowLeft = require('../svg-icons/KeyboardArrowLeft');
var _KeyboardArrowLeft2 = _interopRequireDefault(_KeyboardArrowLeft);
var _KeyboardArrowRight = require('../svg-icons/KeyboardArrowRight');
var _KeyboardArrowRight2 = _interopRequireDefault(_KeyboardArrowRight);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var styles = exports.styles = function styles(theme) {
@@ -54,40 +52,14 @@ var styles = exports.styles = function styles(theme) {
};
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* Which direction should the button indicate?
*/
direction: require('prop-types').oneOf(['left', 'right']).isRequired,
/**
* Callback to execute for button press.
*/
onClick: require('prop-types').func,
/**
* Should the button be present or just consume space.
*/
visible: require('prop-types').bool
};
/**
* @ignore - internal component.
*/
var _ref = _react2.default.createElement(_KeyboardArrowLeft2.default, null);
var _ref2 = _react2.default.createElement(_KeyboardArrowRight2.default, null);
/**
* @ignore - internal component.
*/
function TabScrollButton(props) {
var classes = props.classes,
classNameProp = props.className,
@@ -110,9 +82,29 @@ function TabScrollButton(props) {
);
}
TabScrollButton.propTypes = process.env.NODE_ENV !== "production" ? (_ref3 = {
classes: require('prop-types').object.isRequired
}, (0, _defineProperty3.default)(_ref3, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref3, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref3, 'direction', require('prop-types').oneOf(['left', 'right']).isRequired), (0, _defineProperty3.default)(_ref3, 'onClick', require('prop-types').func), (0, _defineProperty3.default)(_ref3, 'visible', require('prop-types').bool), _ref3) : {};
TabScrollButton.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* Which direction should the button indicate?
*/
direction: _propTypes2.default.oneOf(['left', 'right']),
/**
* Callback to execute for button press.
*/
onClick: _propTypes2.default.func,
/**
* Should the button be present or just consume space.
*/
visible: _propTypes2.default.bool
} : {};
TabScrollButton.defaultProps = {
visible: true
};

View File

@@ -1,50 +1,22 @@
// @flow weak
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
import withStyles from '../styles/withStyles';
import ButtonBase from '../ButtonBase';
import KeyboardArrowLeft from '../svg-icons/KeyboardArrowLeft';
import KeyboardArrowRight from '../svg-icons/KeyboardArrowRight';
export const styles = (theme: Object) => ({
export const styles = theme => ({
root: {
color: 'inherit',
flex: `0 0 ${theme.spacing.unit * 7}px`,
},
});
type ProvidedProps = {
classes: Object,
};
export type Props = {
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* Which direction should the button indicate?
*/
direction: 'left' | 'right',
/**
* Callback to execute for button press.
*/
onClick?: Function,
/**
* Should the button be present or just consume space.
*/
visible?: boolean,
};
/**
* @ignore - internal component.
*/
function TabScrollButton(props: ProvidedProps & Props) {
function TabScrollButton(props) {
const { classes, className: classNameProp, direction, onClick, visible, ...other } = props;
const className = classNames(classes.root, classNameProp);
@@ -60,6 +32,29 @@ function TabScrollButton(props: ProvidedProps & Props) {
);
}
TabScrollButton.propTypes = {
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Which direction should the button indicate?
*/
direction: PropTypes.oneOf(['left', 'right']),
/**
* Callback to execute for button press.
*/
onClick: PropTypes.func,
/**
* Should the button be present or just consume space.
*/
visible: PropTypes.bool,
};
TabScrollButton.defaultProps = {
visible: true,
};

View File

@@ -2,23 +2,20 @@ import * as React from 'react';
import { StandardProps } from '..';
import { ButtonBaseProps, ButtonBaseClassKey } from '../ButtonBase/ButtonBase';
export interface TabsProps extends StandardProps<
ButtonBaseProps,
TabsClassKey,
'onChange'
> {
export interface TabsProps extends StandardProps<ButtonBaseProps, TabsClassKey, 'onChange'> {
action?: (actions: TabsActions) => void;
buttonClassName?: string;
centered?: boolean;
children?: React.ReactNode;
fullWidth?: boolean;
value: any;
indicatorClassName?: string;
indicatorColor?: 'accent' | 'primary' | string;
onChange: (event: React.ChangeEvent<{}>, value: any) => void;
indicatorColor?: 'secondary' | 'primary' | string;
onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
scrollable?: boolean;
scrollButtons?: 'auto' | 'on' | 'off';
TabScrollButton?: React.ReactType,
textColor?: 'accent' | 'primary' | 'inherit' | string;
TabScrollButton?: React.ReactType;
textColor?: 'secondary' | 'primary' | 'inherit' | string;
value: any;
width?: string;
}
@@ -28,8 +25,11 @@ export type TabsClassKey =
| 'scrollingContainer'
| 'fixed'
| 'scrollable'
| 'centered'
;
| 'centered';
export interface TabsActions {
updateIndicator(): void;
}
declare const Tabs: React.ComponentType<TabsProps>;

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

View File

@@ -1,7 +1,5 @@
// @flow
import React from 'react';
import type { Node, ComponentType } from 'react';
import PropTypes from 'prop-types';
import warning from 'warning';
import classNames from 'classnames';
import EventListener from 'react-event-listener';
@@ -12,9 +10,8 @@ import scroll from 'scroll';
import withStyles from '../styles/withStyles';
import TabIndicator from './TabIndicator';
import TabScrollButton from './TabScrollButton';
import type { IndicatorStyle } from './TabIndicator';
export const styles = (theme: Object) => ({
export const styles = theme => ({
root: {
overflow: 'hidden',
minHeight: 48,
@@ -40,126 +37,15 @@ export const styles = (theme: Object) => ({
justifyContent: 'center',
},
buttonAuto: {
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('xs')]: {
display: 'none',
},
},
});
type ProvidedProps = {
classes: Object,
indicatorColor: string,
TabScrollButton: ComponentType<*>,
theme: Object,
};
export type Props = {
/**
* The CSS class name of the scroll button elements.
*/
buttonClassName?: string,
/**
* If `true`, the tabs will be centered.
* This property is intended for large views.
*/
centered?: boolean,
/**
* The content of the component.
*/
children?: Node,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* If `true`, the tabs will grow to use all the available space.
* This property is intended for small views, like on mobile.
*/
fullWidth?: boolean,
/**
* The CSS class name of the indicator element.
*/
indicatorClassName?: string,
/**
* Determines the color of the indicator.
*/
indicatorColor?: 'accent' | 'primary' | 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: Function,
/**
* True invokes scrolling properties and allow for horizontally scrolling
* (or swiping) the tab bar.
*/
scrollable?: boolean,
/**
* 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?: 'auto' | 'on' | 'off',
/**
* The component used to render the scroll buttons.
*/
TabScrollButton?: ComponentType<*>,
/**
* Determines the color of the `Tab`.
*/
textColor?: 'accent' | 'primary' | 'inherit',
/**
* @ignore
*/
theme?: Object,
/**
* The value of the currently selected `Tab`.
* If you don't want any selected `Tab`, you can set this property to `false`.
*/
value: any,
};
type State = {
indicatorStyle: IndicatorStyle,
scrollerStyle: Object,
showLeftScroll: boolean,
showRightScroll: boolean,
mounted: boolean,
};
export type TabsMeta = {
clientWidth: number,
scrollLeft: number,
scrollLeftNormalized: number,
scrollWidth: number,
// ClientRect
left: number,
right: number,
};
class Tabs extends React.Component<ProvidedProps & Props, State> {
static defaultProps = {
centered: false,
fullWidth: false,
indicatorColor: 'accent',
scrollable: false,
scrollButtons: 'auto',
TabScrollButton,
textColor: 'inherit',
};
class Tabs extends React.Component {
state = {
indicatorStyle: {
left: 0,
width: 0,
},
indicatorStyle: {},
scrollerStyle: {
marginBottom: 0,
},
@@ -173,6 +59,12 @@ class Tabs extends React.Component<ProvidedProps & Props, State> {
this.setState({ mounted: true });
this.updateIndicatorState(this.props);
this.updateScrollButtonState();
if (this.props.action) {
this.props.action({
updateIndicator: this.handleResize,
});
}
}
componentDidUpdate(prevProps, prevState) {
@@ -213,7 +105,7 @@ class Tabs extends React.Component<ProvidedProps & Props, State> {
conditionalElements.scrollButtonLeft = showScrollButtons ? (
<TabScrollButtonProp
direction={theme.direction === 'rtl' ? 'right' : 'left'}
direction={theme && theme.direction === 'rtl' ? 'right' : 'left'}
onClick={this.handleLeftScrollClick}
visible={this.state.showLeftScroll}
className={classNames(
@@ -227,7 +119,7 @@ class Tabs extends React.Component<ProvidedProps & Props, State> {
conditionalElements.scrollButtonRight = showScrollButtons ? (
<TabScrollButtonProp
direction={theme.direction === 'rtl' ? 'left' : 'right'}
direction={theme && theme.direction === 'rtl' ? 'left' : 'right'}
onClick={this.handleRightScrollClick}
visible={this.state.showRightScroll}
className={classNames(
@@ -242,7 +134,7 @@ class Tabs extends React.Component<ProvidedProps & Props, State> {
return conditionalElements;
};
getTabsMeta = (value, direction): { tabsMeta: ?TabsMeta, tabMeta: ?ClientRect } => {
getTabsMeta = (value, direction) => {
let tabsMeta;
if (this.tabs) {
const rect = this.tabs.getBoundingClientRect();
@@ -263,7 +155,7 @@ class Tabs extends React.Component<ProvidedProps & Props, State> {
if (children.length > 0) {
const tab = children[this.valueToIndex[value]];
warning(Boolean(tab), `Material-UI: the value provided \`${value}\` is invalid`);
warning(tab, `Material-UI: the value provided \`${value}\` is invalid`);
tabMeta = tab ? tab.getBoundingClientRect() : null;
}
}
@@ -346,7 +238,6 @@ class Tabs extends React.Component<ProvidedProps & Props, State> {
scrollSelectedIntoView = () => {
const { theme, value } = this.props;
const { tabsMeta, tabMeta } = this.getTabsMeta(value, theme.direction);
if (!tabMeta || !tabsMeta) {
@@ -388,10 +279,11 @@ class Tabs extends React.Component<ProvidedProps & Props, State> {
render() {
const {
action,
buttonClassName,
centered,
classes,
children: childrenProp,
classes,
className: classNameProp,
fullWidth,
indicatorClassName,
@@ -472,4 +364,99 @@ class Tabs extends React.Component<ProvidedProps & Props, State> {
}
}
export default withStyles(styles, { withTheme: true, name: 'MuiTabs' })(Tabs);
Tabs.propTypes = {
/**
* 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: PropTypes.func,
/**
* The CSS class name of the scroll button elements.
*/
buttonClassName: PropTypes.string,
/**
* If `true`, the tabs will be centered.
* This property is intended for large views.
*/
centered: PropTypes.bool,
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the tabs will grow to use all the available space.
* This property is intended for small views, like on mobile.
*/
fullWidth: PropTypes.bool,
/**
* The CSS class name of the indicator element.
*/
indicatorClassName: PropTypes.string,
/**
* Determines the color of the indicator.
*/
indicatorColor: PropTypes.oneOfType([
PropTypes.string,
PropTypes.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: PropTypes.func,
/**
* True invokes scrolling properties and allow for horizontally scrolling
* (or swiping) the tab bar.
*/
scrollable: PropTypes.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: PropTypes.oneOf(['auto', 'on', 'off']),
/**
* The component used to render the scroll buttons.
*/
TabScrollButton: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* Determines the color of the `Tab`.
*/
textColor: PropTypes.oneOf(['secondary', 'primary', 'inherit']),
/**
* @ignore
*/
theme: PropTypes.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: PropTypes.any,
};
Tabs.defaultProps = {
centered: false,
fullWidth: false,
indicatorColor: 'secondary',
scrollable: false,
scrollButtons: 'auto',
TabScrollButton,
textColor: 'inherit',
};
export default withStyles(styles, { name: 'MuiTabs', withTheme: true })(Tabs);

View File

@@ -1,3 +1,2 @@
// @flow
export { default } from './Tabs';
export { default as Tab } from './Tab';