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

@@ -1,23 +1,20 @@
import { PropTypes, StandardProps } from '..';
import { PaperProps, PaperClassKey } from '../Paper/Paper';
import { PaperProps, PaperClassKey } from '../Paper';
export interface AppBarProps extends StandardProps<
PaperProps,
AppBarClassKey
> {
export interface AppBarProps extends StandardProps<PaperProps, AppBarClassKey> {
color?: PropTypes.Color;
position?: 'static' | 'fixed' | 'absolute';
position?: 'fixed' | 'absolute' | 'sticky' | 'static';
}
export type AppBarClassKey =
| PaperClassKey
| 'positionFixed'
| 'positionAbsolute'
| 'positionSticky'
| 'positionStatic'
| 'colorDefault'
| 'colorPrimary'
| 'colorAccent'
;
| 'colorSecondary';
declare const AppBar: React.ComponentType<AppBarProps>;

View File

@@ -17,13 +17,14 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref;
// @inheritedComponent Paper
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);
@@ -40,9 +41,11 @@ var _Paper2 = _interopRequireDefault(_Paper);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
// @inheritedComponent Paper
var styles = exports.styles = function styles(theme) {
var backgroundColorDefault = theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
return {
root: {
display: 'flex',
@@ -64,57 +67,30 @@ var styles = exports.styles = function styles(theme) {
left: 'auto',
right: 0
},
positionSticky: {
position: 'sticky',
top: 0,
left: 'auto',
right: 0
},
positionStatic: {
position: 'static',
flexShrink: 0
position: 'static'
},
colorDefault: {
backgroundColor: theme.palette.background.appBar,
color: theme.palette.getContrastText(theme.palette.background.appBar)
backgroundColor: backgroundColorDefault,
color: theme.palette.getContrastText(backgroundColorDefault)
},
colorPrimary: {
backgroundColor: theme.palette.primary[500],
color: theme.palette.getContrastText(theme.palette.primary[500])
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText
},
colorAccent: {
backgroundColor: theme.palette.secondary.A200,
color: theme.palette.getContrastText(theme.palette.secondary.A200)
colorSecondary: {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText
}
};
};
var babelPluginFlowReactPropTypes_proptype_Color = require('prop-types').oneOf(['inherit', 'primary', 'accent', 'default']);
var babelPluginFlowReactPropTypes_proptype_Position = require('prop-types').oneOf(['static', 'fixed', 'absolute']);
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* 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,
/**
* The color of the component. It's using the theme palette when that makes sense.
*/
color: require('prop-types').oneOf(['inherit', 'primary', 'accent', 'default']),
/**
* The positioning type.
*/
position: require('prop-types').oneOf(['static', 'fixed', 'absolute'])
};
function AppBar(props) {
var _classNames;
@@ -126,7 +102,7 @@ function AppBar(props) {
other = (0, _objectWithoutProperties3.default)(props, ['children', 'classes', 'className', 'color', 'position']);
var className = (0, _classnames2.default)(classes.root, classes['position' + (0, _helpers.capitalizeFirstLetter)(position)], (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes['color' + (0, _helpers.capitalizeFirstLetter)(color)], color !== 'inherit'), (0, _defineProperty3.default)(_classNames, 'mui-fixed', position === 'fixed'), _classNames), classNameProp);
var className = (0, _classnames2.default)(classes.root, classes['position' + (0, _helpers.capitalize)(position)], (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes['color' + (0, _helpers.capitalize)(color)], color !== 'inherit'), (0, _defineProperty3.default)(_classNames, 'mui-fixed', position === 'fixed'), _classNames), classNameProp);
return _react2.default.createElement(
_Paper2.default,
@@ -135,12 +111,31 @@ function AppBar(props) {
);
}
AppBar.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
color: require('prop-types').oneOf(['inherit', 'primary', 'accent', 'default']).isRequired,
position: require('prop-types').oneOf(['static', 'fixed', 'absolute']).isRequired,
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)
}, (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').oneOf(['inherit', 'primary', 'accent', 'default'])), (0, _defineProperty3.default)(_ref, 'position', require('prop-types').oneOf(['static', 'fixed', 'absolute'])), _ref) : {};
AppBar.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component.
*/
children: _propTypes2.default.node.isRequired,
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: _propTypes2.default.oneOf(['inherit', 'primary', 'secondary', 'default']),
/**
* The positioning type. The behavior of the different options is described
* [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
* Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
*/
position: _propTypes2.default.oneOf(['fixed', 'absolute', 'sticky', 'static'])
} : {};
AppBar.defaultProps = {
color: 'primary',
position: 'fixed'

View File

@@ -1,92 +1,69 @@
// @flow
// @inheritedComponent Paper
import React from 'react';
import type { Node } 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';
import Paper from '../Paper';
export const styles = (theme: Object) => ({
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar.
zIndex: theme.zIndex.appBar,
flexShrink: 0,
},
positionFixed: {
position: 'fixed',
top: 0,
left: 'auto',
right: 0,
},
positionAbsolute: {
position: 'absolute',
top: 0,
left: 'auto',
right: 0,
},
positionStatic: {
position: 'static',
flexShrink: 0,
},
colorDefault: {
backgroundColor: theme.palette.background.appBar,
color: theme.palette.getContrastText(theme.palette.background.appBar),
},
colorPrimary: {
backgroundColor: theme.palette.primary[500],
color: theme.palette.getContrastText(theme.palette.primary[500]),
},
colorAccent: {
backgroundColor: theme.palette.secondary.A200,
color: theme.palette.getContrastText(theme.palette.secondary.A200),
},
});
export const styles = theme => {
const backgroundColorDefault =
theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
export type Color = 'inherit' | 'primary' | 'accent' | 'default';
export type Position = 'static' | 'fixed' | 'absolute';
type ProvidedProps = {
classes: Object,
color: Color,
position: Position,
return {
root: {
display: 'flex',
flexDirection: 'column',
width: '100%',
boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar.
zIndex: theme.zIndex.appBar,
flexShrink: 0,
},
positionFixed: {
position: 'fixed',
top: 0,
left: 'auto',
right: 0,
},
positionAbsolute: {
position: 'absolute',
top: 0,
left: 'auto',
right: 0,
},
positionSticky: {
position: 'sticky',
top: 0,
left: 'auto',
right: 0,
},
positionStatic: {
position: 'static',
},
colorDefault: {
backgroundColor: backgroundColorDefault,
color: theme.palette.getContrastText(backgroundColorDefault),
},
colorPrimary: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
},
colorSecondary: {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText,
},
};
};
export type Props = {
/**
* The content of the component.
*/
children?: Node,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* The color of the component. It's using the theme palette when that makes sense.
*/
color?: Color,
/**
* The positioning type.
*/
position?: Position,
};
function AppBar(props: ProvidedProps & Props) {
function AppBar(props) {
const { children, classes, className: classNameProp, color, position, ...other } = props;
const className = classNames(
classes.root,
classes[`position${capitalizeFirstLetter(position)}`],
classes[`position${capitalize(position)}`],
{
[classes[`color${capitalizeFirstLetter(color)}`]]: color !== 'inherit',
[classes[`color${capitalize(color)}`]]: color !== 'inherit',
'mui-fixed': position === 'fixed', // Useful for the Dialog
},
classNameProp,
@@ -99,6 +76,31 @@ function AppBar(props: ProvidedProps & Props) {
);
}
AppBar.propTypes = {
/**
* The content of the component.
*/
children: PropTypes.node.isRequired,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['inherit', 'primary', 'secondary', 'default']),
/**
* The positioning type. The behavior of the different options is described
* [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
* Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
*/
position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static']),
};
AppBar.defaultProps = {
color: 'primary',
position: 'fixed',

View File

@@ -1,3 +1 @@
// @flow
export { default } from './AppBar';