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

@@ -1,61 +1,68 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
// @inheritedComponent Paper
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';
import Paper from '../Paper';
export const styles = theme => ({
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];
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
}
};
};
function AppBar(props) {
const { children, classes, className: classNameProp, color, position } = props,
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'color', 'position']);
const className = classNames(classes.root, classes[`position${capitalizeFirstLetter(position)}`], {
[classes[`color${capitalizeFirstLetter(color)}`]]: color !== 'inherit',
const className = classNames(classes.root, classes[`position${capitalize(position)}`], {
[classes[`color${capitalize(color)}`]]: color !== 'inherit',
'mui-fixed': position === 'fixed' // Useful for the Dialog
}, classNameProp);
@@ -66,6 +73,31 @@ function AppBar(props) {
);
}
AppBar.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* 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,24 +1,18 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface AvatarProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
AvatarClassKey
> {
export interface AvatarProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, AvatarClassKey> {
alt?: string;
childrenClassName?: string;
component?: React.ReactType;
imgProps?: Object;
component?: React.ReactType<AvatarProps>;
imgProps?: React.HtmlHTMLAttributes<HTMLImageElement>;
sizes?: string;
src?: string;
srcSet?: string;
}
export type AvatarClassKey =
| 'root'
| 'colorDefault'
| 'img'
;
export type AvatarClassKey = 'root' | 'colorDefault' | 'img';
declare const Avatar: React.ComponentType<AvatarProps>;

View File

@@ -1,12 +1,9 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { emphasize } from '../styles/colorManipulator';
export const styles = theme => ({
root: {
@@ -15,8 +12,8 @@ export const styles = theme => ({
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
width: 40,
height: 40,
width: theme.spacing.unit * 5,
height: theme.spacing.unit * 5,
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(20),
borderRadius: '50%',
@@ -25,29 +22,31 @@ export const styles = theme => ({
},
colorDefault: {
color: theme.palette.background.default,
backgroundColor: emphasize(theme.palette.background.default, 0.26)
backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
},
img: {
maxWidth: '100%',
width: '100%',
height: 'auto'
height: '100%',
textAlign: 'center',
// Handle non-square image. The property isn't supported by IE11.
objectFit: 'cover'
}
});
function Avatar(props) {
const {
alt,
classes,
className: classNameProp,
children: childrenProp,
childrenClassName: childrenClassNameProp,
component: ComponentProp,
classes,
className: classNameProp,
component: Component,
imgProps,
sizes,
src,
srcSet
} = props,
other = _objectWithoutProperties(props, ['alt', 'classes', 'className', 'children', 'childrenClassName', 'component', 'imgProps', 'sizes', 'src', 'srcSet']);
other = _objectWithoutProperties(props, ['alt', 'children', 'childrenClassName', 'classes', 'className', 'component', 'imgProps', 'sizes', 'src', 'srcSet']);
const className = classNames(classes.root, {
[classes.colorDefault]: childrenProp && !src && !srcSet
@@ -72,12 +71,64 @@ function Avatar(props) {
}
return React.createElement(
ComponentProp,
Component,
_extends({ className: className }, other),
children
);
}
Avatar.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Used in combination with `src` or `srcSet` to
* provide an alt attribute for the rendered `img` element.
*/
alt: PropTypes.string,
/**
* Used to render icon or text elements inside the Avatar.
* `src` and `alt` props will not be used and no `img` will
* be rendered by default.
*
* This can be an element, or just a string.
*/
children: PropTypes.node,
/**
* @ignore
* The className of the child element.
* Used by Chip and ListItemIcon to style the Avatar icon.
*/
childrenClassName: PropTypes.string,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* Properties applied to the `img` element when the component
* is used to display an image.
*/
imgProps: PropTypes.object,
/**
* The `sizes` attribute for the `img` element.
*/
sizes: PropTypes.string,
/**
* The `src` attribute for the `img` element.
*/
src: PropTypes.string,
/**
* The `srcSet` attribute for the `img` element.
*/
srcSet: PropTypes.string
} : {};
Avatar.defaultProps = {
component: 'div'
};

View File

@@ -1,21 +1,15 @@
import * as React from 'react';
import { StandardProps, PropTypes } from '..';
export interface BadgeProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
BadgeClassKey
> {
export interface BadgeProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, BadgeClassKey> {
badgeContent: React.ReactNode;
children: React.ReactNode;
color?: PropTypes.Color;
color?: PropTypes.Color | 'error';
component?: React.ReactType<BadgeProps>;
}
export type BadgeClassKey =
| 'root'
| 'badge'
| 'colorPrimary'
| 'colorAccent'
;
export type BadgeClassKey = 'root' | 'badge' | 'colorPrimary' | 'colorSecondary';
declare const Badge: React.ComponentType<BadgeProps>;

View File

@@ -1,21 +1,19 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// weak
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
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';
const RADIUS = 12;
export const styles = theme => ({
root: {
position: 'relative',
display: 'inline-flex'
display: 'inline-flex',
// For correct alignment with the text.
verticalAlign: 'middle'
},
badge: {
display: 'flex',
@@ -38,26 +36,37 @@ export const styles = theme => ({
zIndex: 1 // Render the badge on top of potential ripples.
},
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
},
colorError: {
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText
}
});
function Badge(props) {
const { badgeContent, classes, className: classNameProp, color, children } = props,
other = _objectWithoutProperties(props, ['badgeContent', 'classes', 'className', 'color', 'children']);
const className = classNames(classes.root, classNameProp);
const {
badgeContent,
children,
classes,
className: classNameProp,
color,
component: ComponentProp
} = props,
other = _objectWithoutProperties(props, ['badgeContent', 'children', 'classes', 'className', 'color', 'component']);
const badgeClassName = classNames(classes.badge, {
[classes[`color${capitalizeFirstLetter(color)}`]]: color !== 'default'
[classes[`color${capitalize(color)}`]]: color !== 'default'
});
return React.createElement(
'div',
_extends({ className: className }, other),
ComponentProp,
_extends({ className: classNames(classes.root, classNameProp) }, other),
children,
React.createElement(
'span',
@@ -67,8 +76,37 @@ function Badge(props) {
);
}
Badge.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content rendered within the badge.
*/
badgeContent: PropTypes.node.isRequired,
/**
* The badge will be added relative to this node.
*/
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(['default', 'primary', 'secondary', 'error']),
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
} : {};
Badge.defaultProps = {
color: 'default'
color: 'default',
component: 'span'
};
export default withStyles(styles, { name: 'MuiBadge' })(Badge);

View File

@@ -1,20 +1,19 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface BottomNavigationProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
BottomNavigationClassKey,
'onChange'
> {
export interface BottomNavigationProps
extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
BottomNavigationClassKey,
'onChange'
> {
children: React.ReactNode;
onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
showLabels?: boolean;
value?: any;
}
export type BottomNavigationClassKey =
| 'root'
;
export type BottomNavigationClassKey = 'root';
declare const BottomNavigation: React.ComponentType<BottomNavigationProps>;

View File

@@ -1,11 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// weak
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
@@ -32,6 +28,10 @@ function BottomNavigation(props) {
const className = classNames(classes.root, classNameProp);
const children = React.Children.map(childrenProp, (child, childIndex) => {
if (!React.isValidElement(child)) {
return null;
}
const childValue = child.props.value || childIndex;
return React.cloneElement(child, {
selected: childValue === value,
@@ -48,6 +48,37 @@ function BottomNavigation(props) {
);
}
BottomNavigation.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* 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,
/**
* Callback fired when the value changes.
*
* @param {object} event The event source of the callback
* @param {any} value We default to the index of the child
*/
onChange: PropTypes.func,
/**
* If `true`, all `BottomNavigationAction`s will show their labels.
* By default, only the selected `BottomNavigationAction` will show its label.
*/
showLabels: PropTypes.bool,
/**
* The value of the currently selected `BottomNavigationAction`.
*/
value: PropTypes.any
} : {};
BottomNavigation.defaultProps = {
showLabels: false
};

View File

@@ -2,11 +2,8 @@ import * as React from 'react';
import { StandardProps } from '..';
import { ButtonBaseProps, ButtonBaseClassKey } from '../ButtonBase';
export interface BottomNavigationButtonProps extends StandardProps<
ButtonBaseProps,
BottomNavigationButtonClassKey,
'onChange'
> {
export interface BottomNavigationActionProps
extends StandardProps<ButtonBaseProps, BottomNavigationActionClassKey, 'onChange'> {
icon?: string | React.ReactElement<any>;
label?: React.ReactNode;
onChange?: (event: React.ChangeEvent<{}>, value: any) => void;
@@ -16,17 +13,15 @@ export interface BottomNavigationButtonProps extends StandardProps<
value?: any;
}
export type BottomNavigationButtonClassKey =
export type BottomNavigationActionClassKey =
| ButtonBaseClassKey
| 'selected'
| 'selectedIconOnly'
| 'wrapper'
| 'label'
| 'selectedLabel'
| 'hiddenLabel'
| 'icon'
;
| 'hiddenLabel';
declare const BottomNavigationButton: React.ComponentType<BottomNavigationButtonProps>;
declare const BottomNavigationAction: React.ComponentType<BottomNavigationActionProps>;
export default BottomNavigationButton;
export default BottomNavigationAction;

View File

@@ -1,22 +1,19 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
// @inheritedComponent ButtonBase
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import ButtonBase from '../ButtonBase';
import Icon from '../Icon';
export const styles = theme => ({
root: {
transition: theme.transitions.create(['color', 'padding-top'], {
duration: theme.transitions.duration.short
}),
paddingTop: 8,
paddingTop: theme.spacing.unit,
paddingBottom: 10,
paddingLeft: 12,
paddingRight: 12,
@@ -27,7 +24,7 @@ export const styles = theme => ({
},
selected: {
paddingTop: 6,
color: theme.palette.primary[500]
color: theme.palette.primary.main
},
selectedIconOnly: {
paddingTop: theme.spacing.unit * 2
@@ -52,14 +49,10 @@ export const styles = theme => ({
hiddenLabel: {
opacity: 0,
transitionDelay: '0s'
},
icon: {
display: 'block',
margin: 'auto'
}
});
class BottomNavigationButton extends React.Component {
class BottomNavigationAction extends React.Component {
constructor(...args) {
var _temp;
@@ -79,38 +72,23 @@ class BottomNavigationButton extends React.Component {
render() {
const _props = this.props,
{
label,
icon: iconProp,
selected,
classes,
className: classNameProp,
showLabel: showLabelProp,
icon,
label,
onChange,
onClick,
selected,
showLabel: showLabelProp,
value
} = _props,
other = _objectWithoutProperties(_props, ['label', 'icon', 'selected', 'classes', 'className', 'showLabel', 'onChange', 'value']);
other = _objectWithoutProperties(_props, ['classes', 'className', 'icon', 'label', 'onChange', 'onClick', 'selected', 'showLabel', 'value']);
const className = classNames(classes.root, {
[classes.selected]: selected,
[classes.selectedIconOnly]: !showLabelProp && !selected
}, classNameProp);
let icon = null;
if (iconProp) {
if (React.isValidElement(iconProp) && typeof iconProp !== 'string') {
icon = React.cloneElement(iconProp, {
className: classNames(classes.icon, iconProp.props.className)
});
} else {
icon = React.createElement(
Icon,
null,
iconProp
);
}
}
const labelClassName = classNames(classes.label, {
[classes.selectedLabel]: selected,
[classes.hiddenLabel]: !showLabelProp && !selected
@@ -118,7 +96,7 @@ class BottomNavigationButton extends React.Component {
return React.createElement(
ButtonBase,
_extends({ className: className, focusRipple: true }, other, { onClick: this.handleChange }),
_extends({ className: className, focusRipple: true, onClick: this.handleChange }, other),
React.createElement(
'span',
{ className: classes.wrapper },
@@ -133,4 +111,43 @@ class BottomNavigationButton extends React.Component {
}
}
export default withStyles(styles, { name: 'MuiBottomNavigationButton' })(BottomNavigationButton);
BottomNavigationAction.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The icon element.
*/
icon: PropTypes.node,
/**
* The label element.
*/
label: PropTypes.node,
/**
* @ignore
*/
onChange: PropTypes.func,
/**
* @ignore
*/
onClick: PropTypes.func,
/**
* @ignore
*/
selected: PropTypes.bool,
/**
* If `true`, the BottomNavigationAction will show its label.
*/
showLabel: PropTypes.bool,
/**
* You can provide your own value. Otherwise, we fallback to the child position index.
*/
value: PropTypes.any
} : {};
export default withStyles(styles, { name: 'MuiBottomNavigationAction' })(BottomNavigationAction);

View File

@@ -1,4 +1,4 @@
export { default } from './BottomNavigation';
export * from './BottomNavigation';
export { default as BottomNavigationButton } from './BottomNavigationButton';
export * from './BottomNavigationButton';
export { default as BottomNavigationAction } from './BottomNavigationAction';
export * from './BottomNavigationAction';

View File

@@ -1,2 +1,2 @@
export { default } from './BottomNavigation';
export { default as BottomNavigationButton } from './BottomNavigationButton';
export { default as BottomNavigationAction } from './BottomNavigationAction';

View File

@@ -2,20 +2,18 @@ import * as React from 'react';
import { StandardProps, PropTypes } from '..';
import { ButtonBaseProps, ButtonBaseClassKey } from '../ButtonBase';
export interface ButtonProps extends StandardProps<
ButtonBaseProps,
ButtonClassKey
> {
color?: PropTypes.Color | 'contrast';
component?: React.ReactType;
dense?: boolean;
export interface ButtonProps extends StandardProps<ButtonBaseProps, ButtonClassKey, 'component'> {
color?: PropTypes.Color;
component?: React.ReactType<ButtonProps>;
disabled?: boolean;
disableFocusRipple?: boolean;
disableRipple?: boolean;
fab?: boolean;
fullWidth?: boolean;
href?: string;
raised?: boolean;
mini?: boolean;
size?: 'small' | 'medium' | 'large';
type?: string;
variant?: 'flat' | 'raised' | 'fab';
}
export type ButtonClassKey =
@@ -23,17 +21,15 @@ export type ButtonClassKey =
| 'dense'
| 'label'
| 'flatPrimary'
| 'flatAccent'
| 'flatContrast'
| 'flatSecondary'
| 'colorInherit'
| 'raised'
| 'keyboardFocused'
| 'raisedPrimary'
| 'raisedAccent'
| 'raisedContrast'
| 'raisedSecondary'
| 'fab'
;
| 'fullWidth';
declare const Button: React.ComponentType<ButtonProps>;
export default Button
export default Button;

View File

@@ -1,21 +1,21 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _extends from 'babel-runtime/helpers/extends';
// @inheritedComponent ButtonBase
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { fade } from '../styles/colorManipulator';
import ButtonBase from '../ButtonBase';
import { capitalize } from '../utils/helpers';
import { isMuiElement } from '../utils/reactHelpers';
export const styles = theme => ({
root: _extends({}, theme.typography.button, {
lineHeight: '1.4em', // Improve readability for multiline button.
boxSizing: 'border-box',
minWidth: 88,
minWidth: theme.spacing.unit * 11,
minHeight: 36,
padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
borderRadius: 2,
@@ -35,12 +35,6 @@ export const styles = theme => ({
}
}
}),
dense: {
padding: `${theme.spacing.unit - 1}px ${theme.spacing.unit}px`,
minWidth: 64,
minHeight: 32,
fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1)
},
label: {
width: '100%',
display: 'inherit',
@@ -48,29 +42,19 @@ export const styles = theme => ({
justifyContent: 'inherit'
},
flatPrimary: {
color: theme.palette.primary[500],
color: theme.palette.primary.main,
'&:hover': {
backgroundColor: fade(theme.palette.primary[500], 0.12),
backgroundColor: fade(theme.palette.primary.main, 0.12),
// Reset on mouse devices
'@media (hover: none)': {
backgroundColor: 'transparent'
}
}
},
flatAccent: {
color: theme.palette.secondary.A200,
flatSecondary: {
color: theme.palette.secondary.main,
'&:hover': {
backgroundColor: fade(theme.palette.secondary.A200, 0.12),
// Reset on mouse devices
'@media (hover: none)': {
backgroundColor: 'transparent'
}
}
},
flatContrast: {
color: theme.palette.getContrastText(theme.palette.primary[500]),
'&:hover': {
backgroundColor: fade(theme.palette.getContrastText(theme.palette.primary[500]), 0.12),
backgroundColor: fade(theme.palette.secondary.main, 0.12),
// Reset on mouse devices
'@media (hover: none)': {
backgroundColor: 'transparent'
@@ -92,7 +76,7 @@ export const styles = theme => ({
},
'&$disabled': {
boxShadow: theme.shadows[0],
backgroundColor: theme.palette.text.divider
backgroundColor: theme.palette.action.disabledBackground
},
'&:hover': {
backgroundColor: theme.palette.grey.A100,
@@ -101,40 +85,33 @@ export const styles = theme => ({
backgroundColor: theme.palette.grey[300]
},
'&$disabled': {
backgroundColor: theme.palette.text.divider,
// Reset on mouse devices
'@media (hover: none)': {
backgroundColor: theme.palette.grey[300]
}
backgroundColor: theme.palette.action.disabledBackground
}
}
},
keyboardFocused: {},
raisedPrimary: {
color: theme.palette.getContrastText(theme.palette.primary[500]),
backgroundColor: theme.palette.primary[500],
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
'&:hover': {
backgroundColor: theme.palette.primary[700],
backgroundColor: theme.palette.primary.dark,
// Reset on mouse devices
'@media (hover: none)': {
backgroundColor: theme.palette.primary[500]
backgroundColor: theme.palette.primary.main
}
}
},
raisedAccent: {
color: theme.palette.getContrastText(theme.palette.secondary.A200),
backgroundColor: theme.palette.secondary.A200,
raisedSecondary: {
color: theme.palette.secondary.contrastText,
backgroundColor: theme.palette.secondary.main,
'&:hover': {
backgroundColor: theme.palette.secondary.A400,
backgroundColor: theme.palette.secondary.dark,
// Reset on mouse devices
'@media (hover: none)': {
backgroundColor: theme.palette.secondary.A200
backgroundColor: theme.palette.secondary.main
}
}
},
raisedContrast: {
color: theme.palette.getContrastText(theme.palette.primary[500])
},
disabled: {
color: theme.palette.action.disabled
},
@@ -143,44 +120,77 @@ export const styles = theme => ({
padding: 0,
minWidth: 0,
width: 56,
fontSize: 24,
height: 56,
boxShadow: theme.shadows[6],
'&:active': {
boxShadow: theme.shadows[12]
}
},
mini: {
width: 40,
height: 40
},
sizeSmall: {
padding: `${theme.spacing.unit - 1}px ${theme.spacing.unit}px`,
minWidth: theme.spacing.unit * 8,
minHeight: 32,
fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1)
},
sizeLarge: {
padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
minWidth: theme.spacing.unit * 14,
minHeight: 40,
fontSize: theme.typography.pxToRem(theme.typography.fontSize + 1)
},
fullWidth: {
width: '100%'
}
});
function Button(props) {
const {
children,
children: childrenProp,
classes,
className: classNameProp,
color,
dense,
disabled,
disableFocusRipple,
fab,
raised
fullWidth,
mini,
size,
variant
} = props,
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'color', 'dense', 'disabled', 'disableFocusRipple', 'fab', 'raised']);
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'color', 'disabled', 'disableFocusRipple', 'fullWidth', 'mini', 'size', 'variant']);
const fab = variant === 'fab';
const raised = variant === 'raised';
const flat = !raised && !fab;
const className = classNames({
[classes.root]: true,
const className = classNames(classes.root, {
[classes.raised]: raised || fab,
[classes.fab]: fab,
[classes.mini]: fab && mini,
[classes.colorInherit]: color === 'inherit',
[classes.flatPrimary]: flat && color === 'primary',
[classes.flatAccent]: flat && color === 'accent',
[classes.flatContrast]: flat && color === 'contrast',
[classes.flatSecondary]: flat && color === 'secondary',
[classes.raisedPrimary]: !flat && color === 'primary',
[classes.raisedAccent]: !flat && color === 'accent',
[classes.raisedContrast]: !flat && color === 'contrast',
[classes.dense]: dense,
[classes.disabled]: disabled
[classes.raisedSecondary]: !flat && color === 'secondary',
[classes[`size${capitalize(size)}`]]: size !== 'medium',
[classes.disabled]: disabled,
[classes.fullWidth]: fullWidth
}, classNameProp);
let children = childrenProp;
if (fab) {
children = React.Children.map(children, child => {
if (isMuiElement(child, ['Icon', 'SvgIcon'])) {
return React.cloneElement(child, { fontSize: true });
}
return child;
});
}
return React.createElement(
ButtonBase,
_extends({
@@ -197,15 +207,80 @@ function Button(props) {
);
}
Button.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the button.
*/
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(['default', 'inherit', 'primary', 'secondary']),
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
* The default value is a `button`.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* If `true`, the button will be disabled.
*/
disabled: PropTypes.bool,
/**
* If `true`, the keyboard focus ripple will be disabled.
* `disableRipple` must also be true.
*/
disableFocusRipple: PropTypes.bool,
/**
* If `true`, the ripple effect will be disabled.
*/
disableRipple: PropTypes.bool,
/**
* If `true`, the button will take up the full width of its container.
*/
fullWidth: PropTypes.bool,
/**
* The URL to link to when the button is clicked.
* If defined, an `a` element will be used as the root node.
*/
href: PropTypes.string,
/**
* If `true`, and `variant` is `'fab'`, will use mini floating action button styling.
*/
mini: PropTypes.bool,
/**
* The size of the button.
* `small` is equivalent to the dense button styling.
*/
size: PropTypes.oneOf(['small', 'medium', 'large']),
/**
* @ignore
*/
type: PropTypes.string,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
variant: PropTypes.oneOf(['flat', 'raised', 'fab'])
} : {};
Button.defaultProps = {
color: 'default',
dense: false,
disabled: false,
fab: false,
disableFocusRipple: false,
raised: false,
disableRipple: false,
type: 'button'
fullWidth: false,
mini: false,
size: 'medium',
type: 'button',
variant: 'flat'
};
export default withStyles(styles, { name: 'MuiButton' })(Button);

View File

@@ -1,23 +1,21 @@
import * as React from 'react';
import { StandardProps, Replace } from '..';
import { StandardProps } from '..';
export interface ButtonBaseProps extends StandardProps<
Replace<React.AnchorHTMLAttributes<HTMLAnchorElement>, React.ButtonHTMLAttributes<HTMLButtonElement>>,
ButtonBaseClassKey
> {
export interface ButtonBaseProps
extends StandardProps<
React.AnchorHTMLAttributes<HTMLElement> & React.ButtonHTMLAttributes<HTMLElement>,
ButtonBaseClassKey
> {
buttonRef?: React.Ref<any>;
centerRipple?: boolean;
component?: React.ReactType;
component?: React.ReactType<ButtonBaseProps>;
disableRipple?: boolean;
focusRipple?: boolean;
keyboardFocusedClassName?: string;
onKeyboardFocus?: React.FocusEventHandler<any>;
rootRef?: React.Ref<any>;
}
export type ButtonBaseClassKey =
| 'root'
| 'disabled'
;
export type ButtonBaseClassKey = 'root' | 'disabled';
declare const ButtonBase: React.ComponentType<ButtonBaseProps>;

View File

@@ -1,34 +1,35 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// weak
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import keycode from 'keycode';
import ownerWindow from 'dom-helpers/ownerWindow';
import withStyles from '../styles/withStyles';
import { listenForFocusKeys, detectKeyboardFocus, focusKeyPressed } from '../utils/keyboardFocus';
import TouchRipple from './TouchRipple';
import createRippleHandler from './createRippleHandler';
export const styles = theme => ({
export const styles = {
root: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
// Remove grey highlight
WebkitTapHighlightColor: theme.palette.common.transparent,
WebkitTapHighlightColor: 'transparent',
backgroundColor: 'transparent', // Reset default value
outline: 'none',
border: 0,
margin: 0, // Remove the margin in Safari
borderRadius: 0,
padding: 0, // Remove the padding in Firefox
cursor: 'pointer',
userSelect: 'none',
appearance: 'none',
verticalAlign: 'middle',
'-moz-appearance': 'none', // Reset
'-webkit-appearance': 'none', // Reset
textDecoration: 'none',
// So we take precedent over the style of a native <a /> element.
color: 'inherit',
@@ -40,8 +41,13 @@ export const styles = theme => ({
pointerEvents: 'none', // Disable link interactions
cursor: 'default'
}
});
};
/**
* `ButtonBase` contains as few styles as possible.
* It aims to be a simple building block for creating a button.
* It contains a load of style reset and some focus/ripple logic.
*/
class ButtonBase extends React.Component {
constructor(...args) {
var _temp;
@@ -55,12 +61,14 @@ class ButtonBase extends React.Component {
if (this.props.onKeyboardFocus) {
this.props.onKeyboardFocus(event);
}
}, this.ripple = null, this.keyDown = false, this.button = null, this.keyboardFocusTimeout = null, this.keyboardFocusCheckTime = 30, this.keyboardFocusMaxCheckTimes = 5, this.handleKeyDown = event => {
}, this.onRippleRef = node => {
this.ripple = node;
}, this.ripple = null, this.keyDown = false, this.button = null, this.keyboardFocusTimeout = null, this.keyboardFocusCheckTime = 50, this.keyboardFocusMaxCheckTimes = 5, this.handleKeyDown = event => {
const { component, focusRipple, onKeyDown, onClick } = this.props;
const key = keycode(event);
// Check if key is already down to avoid repeats being counted as multiple activations
if (focusRipple && !this.keyDown && this.state.keyboardFocused && key === 'space') {
if (focusRipple && !this.keyDown && this.state.keyboardFocused && this.ripple && key === 'space') {
this.keyDown = true;
event.persist();
this.ripple.stop(event, () => {
@@ -73,12 +81,14 @@ class ButtonBase extends React.Component {
}
// Keyboard accessibility for non interactive elements
if (event.target === this.button && onClick && component && component !== 'a' && component !== 'button' && (key === 'space' || key === 'enter')) {
if (event.target === event.currentTarget && component && component !== 'button' && (key === 'space' || key === 'enter')) {
event.preventDefault();
onClick(event);
if (onClick) {
onClick(event);
}
}
}, this.handleKeyUp = event => {
if (this.props.focusRipple && keycode(event) === 'space' && this.state.keyboardFocused) {
if (this.props.focusRipple && keycode(event) === 'space' && this.ripple && this.state.keyboardFocused) {
this.keyDown = false;
event.persist();
this.ripple.stop(event, () => this.ripple.pulsate(event));
@@ -111,8 +121,9 @@ class ButtonBase extends React.Component {
}
event.persist();
const keyboardFocusCallback = this.onKeyboardFocusHandler.bind(this, event);
detectKeyboardFocus(this, this.button, keyboardFocusCallback);
detectKeyboardFocus(this, this.button, () => {
this.onKeyboardFocusHandler(event);
});
if (this.props.onFocus) {
this.props.onFocus(event);
@@ -122,7 +133,17 @@ class ButtonBase extends React.Component {
componentDidMount() {
this.button = findDOMNode(this);
listenForFocusKeys();
listenForFocusKeys(ownerWindow(this.button));
}
componentWillReceiveProps(nextProps) {
// The blur won't fire when the disabled state is set on a focused input.
// We need to book keep the focused state manually.
if (!this.props.disabled && nextProps.disabled && this.state.keyboardFocused) {
this.setState({
keyboardFocused: false
});
}
}
componentWillUpdate(nextProps, nextState) {
@@ -137,22 +158,10 @@ class ButtonBase extends React.Component {
} // Used to help track keyboard activation keyDown
renderRipple() {
if (!this.props.disableRipple && !this.props.disabled) {
return React.createElement(TouchRipple, {
innerRef: node => {
this.ripple = node;
},
center: this.props.centerRipple
});
}
return null;
}
render() {
const _props = this.props,
{
buttonRef,
centerRipple,
children,
classes,
@@ -173,11 +182,10 @@ class ButtonBase extends React.Component {
onTouchEnd,
onTouchMove,
onTouchStart,
rootRef,
tabIndex,
type
} = _props,
other = _objectWithoutProperties(_props, ['centerRipple', 'children', 'classes', 'className', 'component', 'disabled', 'disableRipple', 'focusRipple', 'keyboardFocusedClassName', 'onBlur', 'onFocus', 'onKeyboardFocus', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseLeave', 'onMouseUp', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'rootRef', 'tabIndex', 'type']);
other = _objectWithoutProperties(_props, ['buttonRef', 'centerRipple', 'children', 'classes', 'className', 'component', 'disabled', 'disableRipple', 'focusRipple', 'keyboardFocusedClassName', 'onBlur', 'onFocus', 'onKeyboardFocus', 'onKeyDown', 'onKeyUp', 'onMouseDown', 'onMouseLeave', 'onMouseUp', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'tabIndex', 'type']);
const className = classNames(classes.root, {
[classes.disabled]: disabled,
@@ -198,11 +206,9 @@ class ButtonBase extends React.Component {
if (ComponentProp === 'button') {
buttonProps.type = type || 'button';
}
if (ComponentProp !== 'a') {
buttonProps.role = buttonProps.role || 'button';
buttonProps.disabled = disabled;
} else {
buttonProps.role = 'button';
}
return React.createElement(
@@ -218,22 +224,130 @@ class ButtonBase extends React.Component {
onTouchEnd: this.handleTouchEnd,
onTouchMove: this.handleTouchMove,
onTouchStart: this.handleTouchStart,
tabIndex: disabled ? -1 : tabIndex,
className: className
}, buttonProps, other, {
ref: rootRef
}),
tabIndex: disabled ? '-1' : tabIndex,
className: className,
ref: buttonRef
}, buttonProps, other),
children,
this.renderRipple()
!disableRipple && !disabled ? React.createElement(TouchRipple, { innerRef: this.onRippleRef, center: centerRipple }) : null
);
}
}
ButtonBase.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Use that property to pass a ref callback to the native button component.
*/
buttonRef: PropTypes.func,
/**
* If `true`, the ripples will be centered.
* They won't start at the cursor interaction position.
*/
centerRipple: 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,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
* The default value is a `button`.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* If `true`, the base button will be disabled.
*/
disabled: PropTypes.bool,
/**
* If `true`, the ripple effect will be disabled.
*/
disableRipple: PropTypes.bool,
/**
* If `true`, the base button will have a keyboard focus ripple.
* `disableRipple` must also be `false`.
*/
focusRipple: PropTypes.bool,
/**
* The CSS class applied while the component is keyboard focused.
*/
keyboardFocusedClassName: PropTypes.string,
/**
* @ignore
*/
onBlur: PropTypes.func,
/**
* @ignore
*/
onClick: PropTypes.func,
/**
* @ignore
*/
onFocus: PropTypes.func,
/**
* Callback fired when the component is focused with a keyboard.
* We trigger a `onFocus` callback too.
*/
onKeyboardFocus: PropTypes.func,
/**
* @ignore
*/
onKeyDown: PropTypes.func,
/**
* @ignore
*/
onKeyUp: PropTypes.func,
/**
* @ignore
*/
onMouseDown: PropTypes.func,
/**
* @ignore
*/
onMouseLeave: PropTypes.func,
/**
* @ignore
*/
onMouseUp: PropTypes.func,
/**
* @ignore
*/
onTouchEnd: PropTypes.func,
/**
* @ignore
*/
onTouchMove: PropTypes.func,
/**
* @ignore
*/
onTouchStart: PropTypes.func,
/**
* @ignore
*/
role: PropTypes.string,
/**
* @ignore
*/
tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* @ignore
*/
type: PropTypes.string
} : {};
ButtonBase.defaultProps = {
centerRipple: false,
focusRipple: false,
disableRipple: false,
tabIndex: 0,
focusRipple: false,
tabIndex: '0',
type: 'button'
};
export default withStyles(styles, { name: 'MuiButtonBase' })(ButtonBase);

View File

@@ -1,10 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// weak
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Transition from 'react-transition-group/Transition';
@@ -18,15 +15,6 @@ class Ripple extends React.Component {
return _temp = super(...args), this.state = {
rippleVisible: false,
rippleLeaving: false
}, this.getRippleStyles = props => {
const { rippleSize, rippleX, rippleY } = props;
return {
width: rippleSize,
height: rippleSize,
top: -(rippleSize / 2) + rippleY,
left: -(rippleSize / 2) + rippleX
};
}, this.handleEnter = () => {
this.setState({
rippleVisible: true
@@ -61,19 +49,54 @@ class Ripple extends React.Component {
[classes.rippleFast]: pulsate
});
const rippleStyles = {
width: rippleSize,
height: rippleSize,
top: -(rippleSize / 2) + rippleY,
left: -(rippleSize / 2) + rippleX
};
return React.createElement(
Transition,
_extends({ onEnter: this.handleEnter, onExit: this.handleExit }, other),
React.createElement(
'span',
{ className: className },
React.createElement('span', { className: rippleClassName, style: this.getRippleStyles(this.props) })
React.createElement('span', { className: rippleClassName, style: rippleStyles })
)
);
}
}
Ripple.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
*/
pulsate: PropTypes.bool,
/**
* Diameter of the ripple.
*/
rippleSize: PropTypes.number,
/**
* Horizontal position of the ripple center.
*/
rippleX: PropTypes.number,
/**
* Vertical position of the ripple center.
*/
rippleY: PropTypes.number
} : {};
Ripple.defaultProps = {
pulsate: false
};
export default Ripple;

View File

@@ -0,0 +1,21 @@
import * as React from 'react';
import { TransitionGroup } from 'react-transition-group';
import { StandardProps } from '..';
export interface TouchRippleProps
extends StandardProps<TransitionGroup.TransitionGroupProps, TouchRippleClassKey> {
center?: boolean;
}
export type TouchRippleClassKey =
| 'root'
| 'wrapper'
| 'wrapperLeaving'
| 'wrapperPulsating'
| 'ripple'
| 'rippleVisible'
| 'rippleFast';
declare const TouchRipple: React.ComponentType<TouchRippleProps>;
export default TouchRipple;

View File

@@ -1,10 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// weak
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import TransitionGroup from 'react-transition-group/TransitionGroup';
import classNames from 'classnames';
@@ -41,10 +38,7 @@ export const styles = theme => ({
display: 'block',
width: '100%',
height: '100%',
animation: `mui-ripple-pulsate 1500ms ${theme.transitions.easing.easeInOut} 200ms infinite`,
rippleVisible: {
opacity: 0.2
}
animation: `mui-ripple-pulsate 2500ms ${theme.transitions.easing.easeInOut} 200ms infinite`
},
'@keyframes mui-ripple-enter': {
'0%': {
@@ -67,7 +61,7 @@ export const styles = theme => ({
transform: 'scale(1)'
},
'50%': {
transform: 'scale(0.9)'
transform: 'scale(0.92)'
},
'100%': {
transform: 'scale(1)'
@@ -122,8 +116,7 @@ class TouchRipple extends React.Component {
}
const element = fakeElement ? null : ReactDOM.findDOMNode(this);
const rect = element ? // $FlowFixMe
element.getBoundingClientRect() : {
const rect = element ? element.getBoundingClientRect() : {
width: 0,
height: 0,
left: 0,
@@ -153,12 +146,8 @@ class TouchRipple extends React.Component {
rippleSize += 1;
}
} else {
const sizeX = Math.max(
// $FlowFixMe
Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
const sizeY = Math.max(
// $FlowFixMe
Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));
}
@@ -180,7 +169,7 @@ class TouchRipple extends React.Component {
const { pulsate, rippleX, rippleY, rippleSize, cb } = params;
let ripples = this.state.ripples;
// Add a ripple to the ripples array
// Add a ripple to the ripples array.
ripples = [...ripples, React.createElement(Ripple, {
key: this.state.nextKey,
classes: this.props.classes,
@@ -254,7 +243,24 @@ class TouchRipple extends React.Component {
}
}
TouchRipple.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* If `true`, the ripple starts at the center of the component
* rather than at the point of interaction.
*/
center: PropTypes.bool,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string
} : {};
TouchRipple.defaultProps = {
center: false
};
export default withStyles(styles, { flip: false, name: 'MuiTouchRipple' })(TouchRipple);

View File

@@ -2,16 +2,11 @@ import * as React from 'react';
import { StandardProps } from '..';
import { PaperProps, PaperClassKey } from '../Paper';
export interface CardProps extends StandardProps<
PaperProps,
CardClassKey
> {
export interface CardProps extends StandardProps<PaperProps, CardClassKey> {
raised?: boolean;
}
export type CardClassKey =
| PaperClassKey
;
export type CardClassKey = PaperClassKey;
declare const Card: React.ComponentType<CardProps>;

View File

@@ -1,10 +1,9 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
// @inheritedComponent Paper
import React from 'react';
import PropTypes from 'prop-types';
import Paper from '../Paper';
function Card(props) {
@@ -14,6 +13,17 @@ function Card(props) {
return React.createElement(Paper, _extends({ elevation: raised ? 8 : 2 }, other));
}
Card.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the card will use raised styling.
*/
raised: PropTypes.bool
} : {};
Card.defaultProps = {
raised: false
};

View File

@@ -1,17 +1,12 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface CardActionsProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
CardActionClassKey
> {
export interface CardActionsProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardActionsClassKey> {
disableActionSpacing?: boolean;
}
export type CardActionClassKey =
| 'root'
| 'actionSpacing'
;
export type CardActionsClassKey = 'root' | 'action';
declare const CardActions: React.ComponentType<CardActionsProps>;

View File

@@ -1,9 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { cloneChildrenWithClassName } from '../utils/reactHelpers';
@@ -13,9 +11,10 @@ export const styles = {
height: 52,
display: 'flex',
alignItems: 'center',
padding: '2px 4px'
padding: '2px 4px',
boxSizing: 'border-box'
},
actionSpacing: {
action: {
margin: '0 4px'
}
};
@@ -27,10 +26,29 @@ function CardActions(props) {
return React.createElement(
'div',
_extends({ className: classNames(classes.root, className) }, other),
disableActionSpacing ? children : cloneChildrenWithClassName(children, classes.actionSpacing)
disableActionSpacing ? children : cloneChildrenWithClassName(children, classes.action)
);
}
CardActions.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* 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 card actions do not have additional margin.
*/
disableActionSpacing: PropTypes.bool
} : {};
CardActions.defaultProps = {
disableActionSpacing: false
};

View File

@@ -1,14 +1,12 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface CardContentProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
CardContentClassKey
> {}
export interface CardContentProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardContentClassKey> {
component?: React.ReactType<CardContentProps>;
}
export type CardContentClassKey =
| 'root'
;
export type CardContentClassKey = 'root';
declare const CardContent: React.ComponentType<CardContentProps>;

View File

@@ -1,8 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
@@ -16,10 +15,30 @@ export const styles = theme => ({
});
function CardContent(props) {
const { classes, className } = props,
other = _objectWithoutProperties(props, ['classes', 'className']);
const { classes, className, component: Component } = props,
other = _objectWithoutProperties(props, ['classes', 'className', 'component']);
return React.createElement('div', _extends({ className: classNames(classes.root, className) }, other));
return React.createElement(Component, _extends({ className: classNames(classes.root, className) }, other));
}
CardContent.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
} : {};
CardContent.defaultProps = {
component: 'div'
};
export default withStyles(styles, { name: 'MuiCardContent' })(CardContent);

View File

@@ -1,24 +1,17 @@
import * as React from 'react';
import { StandardProps } from '..';
import { CardContentProps, CardContentClassKey } from './CardContent';
import { CardContentProps } from './CardContent';
export interface CardHeaderProps extends StandardProps<
CardContentProps,
CardHeaderClassKey,
'title'
> {
export interface CardHeaderProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardHeaderClassKey, 'title'> {
action?: React.ReactNode;
avatar?: React.ReactNode;
component?: React.ReactType<CardHeaderProps>;
subheader?: React.ReactNode;
title?: React.ReactNode;
}
export type CardHeaderClassKey =
| CardContentClassKey
| 'avatar'
| 'content'
| 'title'
| 'subheader'
;
export type CardHeaderClassKey = 'root' | 'avatar' | 'action' | 'content' | 'title' | 'subheader';
declare const CardHeader: React.ComponentType<CardHeaderProps>;

View File

@@ -1,25 +1,27 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// @inheritedComponent CardContent
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';
import CardContent from './CardContent';
export const styles = theme => ({
root: {
display: 'flex',
alignItems: 'center'
alignItems: 'center',
padding: theme.spacing.unit * 2
},
avatar: {
flex: '0 0 auto',
marginRight: theme.spacing.unit * 2
},
action: {
flex: '0 0 auto',
alignSelf: 'flex-start',
marginTop: theme.spacing.unit * -1,
marginRight: theme.spacing.unit * -2
},
content: {
flex: '1 1 auto'
},
@@ -28,18 +30,20 @@ export const styles = theme => ({
});
function CardHeader(props) {
const { avatar, classes, className: classNameProp, subheader, title } = props,
other = _objectWithoutProperties(props, ['avatar', 'classes', 'className', 'subheader', 'title']);
const className = classNames(classes.root, classNameProp);
// Adjustments that depend on the presence of an avatar
const titleType = avatar ? 'body2' : 'headline';
const subheaderType = avatar ? 'body2' : 'body1';
const {
action,
avatar,
classes,
className: classNameProp,
component: Component,
subheader,
title
} = props,
other = _objectWithoutProperties(props, ['action', 'avatar', 'classes', 'className', 'component', 'subheader', 'title']);
return React.createElement(
CardContent,
_extends({ className: className }, other),
Component,
_extends({ className: classNames(classes.root, classNameProp) }, other),
avatar && React.createElement(
'div',
{ className: classes.avatar },
@@ -50,21 +54,66 @@ function CardHeader(props) {
{ className: classes.content },
React.createElement(
Typography,
{ type: titleType, component: 'span', className: classes.title },
{
variant: avatar ? 'body2' : 'headline',
component: 'span',
className: classes.title
},
title
),
React.createElement(
subheader && React.createElement(
Typography,
{
type: subheaderType,
variant: avatar ? 'body2' : 'body1',
component: 'span',
color: 'secondary',
color: 'textSecondary',
className: classes.subheader
},
subheader
)
),
action && React.createElement(
'div',
{ className: classes.action },
action
)
);
}
CardHeader.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The action to display in the card header.
*/
action: PropTypes.node,
/**
* The Avatar for the Card Header.
*/
avatar: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* The content of the component.
*/
subheader: PropTypes.node,
/**
* The content of the Card Title.
*/
title: PropTypes.node
} : {};
CardHeader.defaultProps = {
component: 'div'
};
export default withStyles(styles, { name: 'MuiCardHeader' })(CardHeader);

View File

@@ -1,18 +1,14 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface CardMediaProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
CardMediaClassKey
> {
export interface CardMediaProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardMediaClassKey> {
component?: React.ReactType<CardMediaProps>;
image?: string;
src?: string;
component?: React.ReactType;
}
export type CardMediaClassKey =
| 'root'
;
export type CardMediaClassKey = 'root';
declare const CardMedia: React.ComponentType<CardMediaProps>;

View File

@@ -1,11 +1,9 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import warning from 'warning';
import withStyles from '../styles/withStyles';
export const styles = {
@@ -19,28 +17,60 @@ export const styles = {
}
};
const mediaComponents = ['video', 'audio', 'picture', 'iframe', 'img'];
const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
function CardMedia(props) {
const { classes, className, image, style, src, component: ComponentProp } = props,
other = _objectWithoutProperties(props, ['classes', 'className', 'image', 'style', 'src', 'component']);
const { classes, className, component: Component, image, src, style } = props,
other = _objectWithoutProperties(props, ['classes', 'className', 'component', 'image', 'src', 'style']);
warning(Boolean(image || src), 'Material-UI: either `image` or `src` property must be specified.');
process.env.NODE_ENV !== "production" ? warning(Boolean(image || src), 'Material-UI: either `image` or `src` property must be specified.') : void 0;
const isMediaComponent = mediaComponents.indexOf(ComponentProp) !== -1;
const isMediaComponent = MEDIA_COMPONENTS.indexOf(Component) !== -1;
const composedStyle = !isMediaComponent && image ? _extends({ backgroundImage: `url(${image})` }, style) : style;
const composedClassName = classNames({
[classes.root]: !isMediaComponent,
[classes.rootMedia]: isMediaComponent
}, className);
return React.createElement(ComponentProp, _extends({
return React.createElement(Component, _extends({
className: composedClassName,
style: composedStyle,
src: isMediaComponent ? image || src : undefined
}, other));
}
CardMedia.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Component for rendering image.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* Image to be displayed as a background image.
* Either `image` or `src` prop must be specified.
* Note that caller must specify height otherwise the image will not be visible.
*/
image: PropTypes.string,
/**
* An alias for `image` property.
* Available only with media components.
* Media components: `video`, `audio`, `picture`, `iframe`, `img`.
*/
src: PropTypes.string,
/**
* @ignore
*/
style: PropTypes.object
} : {};
CardMedia.defaultProps = {
component: 'div'
};

View File

@@ -2,14 +2,9 @@ import * as React from 'react';
import { StandardProps } from '..';
import { SwitchBaseProps, SwitchBaseClassKey } from '../internal/SwitchBase';
export interface CheckboxProps extends StandardProps<
SwitchBaseProps,
CheckboxClassKey
> {}
export interface CheckboxProps extends StandardProps<SwitchBaseProps, CheckboxClassKey> {}
export type CheckboxClassKey =
| SwitchBaseClassKey
;
export type CheckboxClassKey = SwitchBaseClassKey;
declare const Checkbox: React.ComponentType<CheckboxProps>;

View File

@@ -1,38 +1,115 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import SwitchBase from '../internal/SwitchBase';
import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';
import withStyles from '../styles/withStyles';
import createSwitch from '../internal/SwitchBase';
import IndeterminateCheckBoxIcon from '../svg-icons/IndeterminateCheckBox';
export const styles = theme => ({
default: {
color: theme.palette.text.secondary
},
checked: {
color: theme.palette.primary[500]
checked: {},
checkedPrimary: {
color: theme.palette.primary.main
},
checkedSecondary: {
color: theme.palette.secondary.main
},
disabled: {
color: theme.palette.action.disabled
}
});
const SwitchBase = createSwitch();
function Checkbox(props) {
const { checkedIcon, icon, indeterminate, indeterminateIcon } = props,
other = _objectWithoutProperties(props, ['checkedIcon', 'icon', 'indeterminate', 'indeterminateIcon']);
const { checkedIcon, classes, color, icon, indeterminate, indeterminateIcon } = props,
other = _objectWithoutProperties(props, ['checkedIcon', 'classes', 'color', 'icon', 'indeterminate', 'indeterminateIcon']);
const checkedClass = classNames(classes.checked, {
[classes.checkedPrimary]: color === 'primary',
[classes.checkedSecondary]: color === 'secondary'
});
return React.createElement(SwitchBase, _extends({
checkedIcon: indeterminate ? indeterminateIcon : checkedIcon,
classes: {
default: classes.default,
checked: checkedClass,
disabled: classes.disabled
},
icon: indeterminate ? indeterminateIcon : icon
}, other));
}
Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* If `true`, the component is checked.
*/
checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
/**
* The icon to display when the component is checked.
*/
checkedIcon: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* The color of the component. It supports those theme colors that make sense for this component.
*/
color: PropTypes.oneOf(['primary', 'secondary']),
/**
* If `true`, the switch will be disabled.
*/
disabled: PropTypes.bool,
/**
* If `true`, the ripple effect will be disabled.
*/
disableRipple: PropTypes.bool,
/**
* The icon to display when the component is unchecked.
*/
icon: PropTypes.node,
/**
* The id of the `input` element.
*/
id: PropTypes.string,
/**
* If `true`, the component appears indeterminate.
*/
indeterminate: PropTypes.bool,
/**
* The icon to display when the component is indeterminate.
*/
indeterminateIcon: PropTypes.node,
/**
* Properties applied to the `input` element.
*/
inputProps: PropTypes.object,
/**
* Use that property to pass a ref callback to the native input component.
*/
inputRef: PropTypes.func,
/**
* Callback fired when the state is changed.
*
* @param {object} event The event source of the callback
* @param {boolean} checked The `checked` value of the switch
*/
onChange: PropTypes.func,
/**
* The input component property `type`.
*/
type: PropTypes.string,
/**
* The value of the component.
*/
value: PropTypes.string
} : {};
Checkbox.defaultProps = {
color: 'secondary',
indeterminate: false,
indeterminateIcon: React.createElement(IndeterminateCheckBoxIcon, null)
};

View File

@@ -1,15 +1,14 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface ChipProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
ChipClassKey
> {
export interface ChipProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ChipClassKey> {
avatar?: React.ReactElement<any>;
label?: React.ReactNode;
onKeyDown?: React.EventHandler<React.KeyboardEvent<any>>;
onRequestDelete?: React.EventHandler<any>;
component?: React.ReactType<ChipProps>;
deleteIcon?: React.ReactElement<any>;
label?: React.ReactNode;
onDelete?: React.EventHandler<any>;
onKeyDown?: React.EventHandler<React.KeyboardEvent<any>>;
}
export type ChipClassKey =
@@ -19,8 +18,7 @@ export type ChipClassKey =
| 'avatar'
| 'avatarChildren'
| 'label'
| 'deleteIcon'
;
| 'deleteIcon';
declare const Chip: React.ComponentType<ChipProps>;

View File

@@ -1,26 +1,24 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import keycode from 'keycode';
import CancelIcon from '../internal/svg-icons/Cancel';
import withStyles from '../styles/withStyles';
import CancelIcon from '../svg-icons/Cancel';
import { emphasize, fade } from '../styles/colorManipulator';
import Avatar from '../Avatar/Avatar';
import '../Avatar/Avatar'; // So we don't have any override priority issue.
export const styles = theme => {
const height = 32;
const backgroundColor = emphasize(theme.palette.background.default, 0.12);
const backgroundColor = theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];
const deleteIconColor = fade(theme.palette.text.primary, 0.26);
return {
root: {
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(13),
display: 'flex',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
height,
@@ -28,7 +26,6 @@ export const styles = theme => {
backgroundColor,
borderRadius: height / 2,
whiteSpace: 'nowrap',
width: 'fit-content',
transition: theme.transitions.create(),
// label will inherit this from root, then `clickable` class overrides this for both
cursor: 'default',
@@ -38,7 +35,7 @@ export const styles = theme => {
},
clickable: {
// Remove grey highlight
WebkitTapHighlightColor: theme.palette.common.transparent,
WebkitTapHighlightColor: 'transparent',
cursor: 'pointer',
'&:hover, &:focus': {
backgroundColor: emphasize(backgroundColor, 0.08)
@@ -55,8 +52,9 @@ export const styles = theme => {
},
avatar: {
marginRight: -4,
width: 32,
height: 32,
width: height,
height,
color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
fontSize: theme.typography.pxToRem(16)
},
avatarChildren: {
@@ -74,7 +72,7 @@ export const styles = theme => {
},
deleteIcon: {
// Remove grey highlight
WebkitTapHighlightColor: theme.palette.common.transparent,
WebkitTapHighlightColor: 'transparent',
color: deleteIconColor,
cursor: 'pointer',
height: 'auto',
@@ -96,20 +94,25 @@ class Chip extends React.Component {
return _temp = super(...args), this.chipRef = null, this.handleDeleteIconClick = event => {
// Stop the event from bubbling up to the `Chip`
event.stopPropagation();
const { onRequestDelete } = this.props;
if (onRequestDelete) {
onRequestDelete(event);
const { onDelete } = this.props;
if (onDelete) {
onDelete(event);
}
}, this.handleKeyDown = event => {
const { onClick, onRequestDelete, onKeyDown } = this.props;
// Ignore events from children of `Chip`.
if (event.currentTarget !== event.target) {
return;
}
const { onClick, onDelete, onKeyDown } = this.props;
const key = keycode(event);
if (onClick && (key === 'space' || key === 'enter')) {
event.preventDefault();
onClick(event);
} else if (onRequestDelete && key === 'backspace') {
} else if (onDelete && key === 'backspace') {
event.preventDefault();
onRequestDelete(event);
onDelete(event);
} else if (key === 'esc') {
event.preventDefault();
if (this.chipRef) {
@@ -129,30 +132,28 @@ class Chip extends React.Component {
avatar: avatarProp,
classes,
className: classNameProp,
component: Component,
deleteIcon: deleteIconProp,
label,
onClick,
onDelete,
onKeyDown,
onRequestDelete,
deleteIcon: deleteIconProp,
tabIndex: tabIndexProp
} = _props,
other = _objectWithoutProperties(_props, ['avatar', 'classes', 'className', 'label', 'onClick', 'onKeyDown', 'onRequestDelete', 'deleteIcon', 'tabIndex']);
other = _objectWithoutProperties(_props, ['avatar', 'classes', 'className', 'component', 'deleteIcon', 'label', 'onClick', 'onDelete', 'onKeyDown', 'tabIndex']);
const className = classNames(classes.root, { [classes.clickable]: onClick }, { [classes.deletable]: onRequestDelete }, classNameProp);
const className = classNames(classes.root, { [classes.clickable]: onClick }, { [classes.deletable]: onDelete }, classNameProp);
let deleteIcon = null;
if (onRequestDelete && deleteIconProp && React.isValidElement(deleteIconProp)) {
deleteIcon = React.cloneElement(deleteIconProp, {
onClick: this.handleDeleteIconClick,
className: classNames(classes.deleteIcon, deleteIconProp.props.className)
});
} else if (onRequestDelete) {
deleteIcon = React.createElement(CancelIcon, { className: classes.deleteIcon, onClick: this.handleDeleteIconClick });
if (onDelete) {
deleteIcon = deleteIconProp && React.isValidElement(deleteIconProp) ? React.cloneElement(deleteIconProp, {
className: classNames(deleteIconProp.props.className, classes.deleteIcon),
onClick: this.handleDeleteIconClick
}) : React.createElement(CancelIcon, { className: classes.deleteIcon, onClick: this.handleDeleteIconClick });
}
let avatar = null;
if (avatarProp && React.isValidElement(avatarProp)) {
// $FlowFixMe - this looks strictly correct, not sure why it errors.
avatar = React.cloneElement(avatarProp, {
className: classNames(classes.avatar, avatarProp.props.className),
childrenClassName: classNames(classes.avatarChildren, avatarProp.props.childrenClassName)
@@ -162,22 +163,21 @@ class Chip extends React.Component {
let tabIndex = tabIndexProp;
if (!tabIndex) {
tabIndex = onClick || onRequestDelete ? 0 : -1;
tabIndex = onClick || onDelete ? 0 : -1;
}
return React.createElement(
'div',
Component,
_extends({
role: 'button',
className: className,
tabIndex: tabIndex,
onClick: onClick,
onKeyDown: this.handleKeyDown
}, other, {
onKeyDown: this.handleKeyDown,
ref: node => {
this.chipRef = node;
}
}),
}, other),
avatar,
React.createElement(
'span',
@@ -189,4 +189,53 @@ class Chip extends React.Component {
}
}
Chip.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Avatar element.
*/
avatar: PropTypes.element,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* Override the default delete icon element. Shown only if `onDelete` is set.
*/
deleteIcon: PropTypes.element,
/**
* The content of the label.
*/
label: PropTypes.node,
/**
* @ignore
*/
onClick: PropTypes.func,
/**
* Callback function fired when the delete icon is clicked.
* If set, the delete icon will be shown.
*/
onDelete: PropTypes.func,
/**
* @ignore
*/
onKeyDown: PropTypes.func,
/**
* @ignore
*/
tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
} : {};
Chip.defaultProps = {
component: 'div'
};
export default withStyles(styles, { name: 'MuiChip' })(Chip);

View File

@@ -1,24 +1,18 @@
import * as React from 'react';
import { StandardProps } from '..';
import { ModalProps, ModalClassKey } from '../internal/Modal';
import { TransitionDuration } from '../internal/transition';
import { PaperProps } from '../Paper';
import { ModalProps, ModalClassKey } from '../Modal';
import { TransitionHandlerProps, TransitionProps } from '../transitions/transition';
export interface DialogProps extends StandardProps<
ModalProps,
DialogClassKey,
'onBackdropClick' | 'onEscapeKeyUp'
> {
export interface DialogProps
extends StandardProps<ModalProps & Partial<TransitionHandlerProps>, DialogClassKey, 'children'> {
children?: React.ReactNode;
fullScreen?: boolean;
ignoreBackdropClick?: boolean;
ignoreEscapeKeyUp?: boolean;
transitionDuration?: TransitionDuration;
maxWidth?: 'xs' | 'sm' | 'md';
fullWidth?: boolean;
onBackdropClick?: Function;
onEscapeKeyUp?: Function;
onRequestClose?: React.EventHandler<any>;
open?: boolean;
maxWidth?: 'xs' | 'sm' | 'md' | false;
PaperProps?: Partial<PaperProps>;
transition?: React.ReactType;
transitionDuration?: TransitionProps['timeout'];
}
export type DialogClassKey =
@@ -29,8 +23,7 @@ export type DialogClassKey =
| 'paperWidthSm'
| 'paperWidthMd'
| 'fullWidth'
| 'fullScreen'
;
| 'fullScreen';
declare const Dialog: React.ComponentType<DialogProps>;

View File

@@ -1,18 +1,17 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
// @inheritedComponent Modal
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { capitalizeFirstLetter } from '../utils/helpers';
import Modal from '../internal/Modal';
import { capitalize } from '../utils/helpers';
import Modal from '../Modal';
import Fade from '../transitions/Fade';
import { duration } from '../styles/transitions';
import Paper from '../Paper';
export const styles = theme => ({
root: {
justifyContent: 'center',
@@ -31,7 +30,7 @@ export const styles = theme => ({
}
},
paperWidthXs: {
maxWidth: theme.breakpoints.values.xs
maxWidth: Math.max(theme.breakpoints.values.xs, 360)
},
paperWidthSm: {
maxWidth: theme.breakpoints.values.sm
@@ -61,36 +60,40 @@ function Dialog(props) {
classes,
className,
fullScreen,
ignoreBackdropClick,
ignoreEscapeKeyUp,
transitionDuration,
maxWidth,
fullWidth,
open,
disableBackdropClick,
disableEscapeKeyDown,
maxWidth,
onBackdropClick,
onEscapeKeyUp,
onClose,
onEnter,
onEntering,
onEntered,
onEntering,
onEscapeKeyDown,
onExit,
onExiting,
onExited,
onRequestClose,
transition: TransitionProp
onExiting,
open,
PaperProps,
transition: TransitionProp,
transitionDuration
} = props,
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'fullScreen', 'ignoreBackdropClick', 'ignoreEscapeKeyUp', 'transitionDuration', 'maxWidth', 'fullWidth', 'open', 'onBackdropClick', 'onEscapeKeyUp', 'onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited', 'onRequestClose', 'transition']);
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'fullScreen', 'fullWidth', 'disableBackdropClick', 'disableEscapeKeyDown', 'maxWidth', 'onBackdropClick', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onEscapeKeyDown', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'transition', 'transitionDuration']);
return React.createElement(
Modal,
_extends({
className: classNames(classes.root, className),
BackdropTransitionDuration: transitionDuration,
ignoreBackdropClick: ignoreBackdropClick,
ignoreEscapeKeyUp: ignoreEscapeKeyUp,
BackdropProps: {
transitionDuration
},
disableBackdropClick: disableBackdropClick,
disableEscapeKeyDown: disableEscapeKeyDown,
onBackdropClick: onBackdropClick,
onEscapeKeyUp: onEscapeKeyUp,
onRequestClose: onRequestClose,
show: open
onEscapeKeyDown: onEscapeKeyDown,
onClose: onClose,
open: open,
role: 'dialog'
}, other),
React.createElement(
TransitionProp,
@@ -107,32 +110,122 @@ function Dialog(props) {
},
React.createElement(
Paper,
{
'data-mui-test': 'Dialog',
_extends({
elevation: 24,
className: classNames(classes.paper, classes[`paperWidth${capitalizeFirstLetter(maxWidth)}`], {
className: classNames(classes.paper, {
[classes[`paperWidth${maxWidth ? capitalize(maxWidth) : ''}`]]: maxWidth,
[classes.fullScreen]: fullScreen,
[classes.fullWidth]: fullWidth
})
},
}, PaperProps),
children
)
)
);
}
Dialog.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Dialog children, usually the included sub-components.
*/
children: PropTypes.node.isRequired,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, clicking the backdrop will not fire the `onClose` callback.
*/
disableBackdropClick: PropTypes.bool,
/**
* If `true`, hitting escape will not fire the `onClose` callback.
*/
disableEscapeKeyDown: PropTypes.bool,
/**
* If `true`, the dialog will be full-screen
*/
fullScreen: PropTypes.bool,
/**
* If `true`, the dialog stretches to `maxWidth`.
*/
fullWidth: PropTypes.bool,
/**
* Determine the max width of the dialog.
* The dialog width grows with the size of the screen, this property is useful
* on the desktop where you might need some coherent different width size across your
* application. Set to `false` to disable `maxWidth`.
*/
maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', false]),
/**
* Callback fired when the backdrop is clicked.
*/
onBackdropClick: PropTypes.func,
/**
* Callback fired when the component requests to be closed.
*
* @param {object} event The event source of the callback
*/
onClose: PropTypes.func,
/**
* Callback fired before the dialog enters.
*/
onEnter: PropTypes.func,
/**
* Callback fired when the dialog has entered.
*/
onEntered: PropTypes.func,
/**
* Callback fired when the dialog is entering.
*/
onEntering: PropTypes.func,
/**
* Callback fired when the escape key is pressed,
* `disableKeyboard` is false and the modal is in focus.
*/
onEscapeKeyDown: PropTypes.func,
/**
* Callback fired before the dialog exits.
*/
onExit: PropTypes.func,
/**
* Callback fired when the dialog has exited.
*/
onExited: PropTypes.func,
/**
* Callback fired when the dialog is exiting.
*/
onExiting: PropTypes.func,
/**
* If `true`, the Dialog is open.
*/
open: PropTypes.bool.isRequired,
/**
* Properties applied to the `Paper` element.
*/
PaperProps: PropTypes.object,
/**
* Transition component.
*/
transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*/
transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })])
} : {};
Dialog.defaultProps = {
fullScreen: false,
ignoreBackdropClick: false,
ignoreEscapeKeyUp: false,
transitionDuration: {
enter: duration.enteringScreen,
exit: duration.leavingScreen
},
maxWidth: 'sm',
fullWidth: false,
open: false,
transition: Fade
disableBackdropClick: false,
disableEscapeKeyDown: false,
maxWidth: 'sm',
transition: Fade,
transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen }
};
export default withStyles(styles, { name: 'MuiDialog' })(Dialog);

View File

@@ -1,16 +1,10 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface DialogActionsProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
DialogActionsClassKey
> {}
export interface DialogActionsProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogActionsClassKey> {}
export type DialogActionsClassKey =
| 'root'
| 'action'
| 'button'
;
export type DialogActionsClassKey = 'root' | 'action' | 'button';
declare const DialogActions: React.ComponentType<DialogActionsProps>;

View File

@@ -1,9 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import '../Button'; // So we don't have any override priority issue.
@@ -30,15 +28,36 @@ function DialogActions(props) {
return React.createElement(
'div',
_extends({ 'data-mui-test': 'DialogActions', className: classNames(classes.root, className) }, other),
React.Children.map(children, button => React.isValidElement(button) && React.createElement(
'div',
{ className: classes.action },
React.cloneElement(button, {
className: classNames(classes.button, button.props.className)
})
))
_extends({ className: classNames(classes.root, className) }, other),
React.Children.map(children, child => {
if (!React.isValidElement(child)) {
return null;
}
return React.createElement(
'div',
{ className: classes.action },
React.cloneElement(child, {
className: classNames(classes.button, child.props.className)
})
);
})
);
}
DialogActions.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string
} : {};
export default withStyles(styles, { name: 'MuiDialogActions' })(DialogActions);

View File

@@ -1,14 +1,10 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface DialogContentProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
DialogContentClassKey
> {}
export interface DialogContentProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogContentClassKey> {}
export type DialogContentClassKey =
| 'root'
;
export type DialogContentClassKey = 'root';
declare const DialogContent: React.ComponentType<DialogContentProps>;

View File

@@ -1,9 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
@@ -32,4 +30,19 @@ function DialogContent(props) {
);
}
DialogContent.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string
} : {};
export default withStyles(styles, { name: 'MuiDialogContent' })(DialogContent);

View File

@@ -1,14 +1,10 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface DialogContentTextProps extends StandardProps<
React.HTMLAttributes<HTMLParagraphElement>,
DialogContentTextClassKey
> {}
export interface DialogContentTextProps
extends StandardProps<React.HTMLAttributes<HTMLParagraphElement>, DialogContentTextClassKey> {}
export type DialogContentTextClassKey =
| 'root'
;
export type DialogContentTextClassKey = 'root';
declare const DialogContentText: React.ComponentType<DialogContentTextProps>;

View File

@@ -1,9 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _extends from 'babel-runtime/helpers/extends';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
@@ -25,4 +23,19 @@ function DialogContentText(props) {
);
}
DialogContentText.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string
} : {};
export default withStyles(styles, { name: 'MuiDialogContentText' })(DialogContentText);

View File

@@ -1,16 +1,12 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface DialogTitleProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
DialogTitleClassKey
> {
export interface DialogTitleProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogTitleClassKey> {
disableTypography?: boolean;
}
export type DialogTitleClassKey =
| 'root'
;
export type DialogTitleClassKey = 'root';
declare const DialogTitle: React.ComponentType<DialogTitleProps>;

View File

@@ -1,9 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';
@@ -23,15 +21,35 @@ function DialogTitle(props) {
return React.createElement(
'div',
_extends({ 'data-mui-test': 'DialogTitle', className: classNames(classes.root, className) }, other),
_extends({ className: classNames(classes.root, className) }, other),
disableTypography ? children : React.createElement(
Typography,
{ type: 'title' },
{ variant: 'title' },
children
)
);
}
DialogTitle.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* 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,
/**
* If `true`, the children won't be wrapped by a typography component.
* For instance, this can be useful to render an h4 instead of the default h2.
*/
disableTypography: PropTypes.bool
} : {};
DialogTitle.defaultProps = {
disableTypography: false
};

View File

@@ -8,7 +8,5 @@ export { default as DialogContent } from './DialogContent';
export * from './DialogContent';
export { default as DialogContentText } from './DialogContentText';
export * from './DialogContentText';
export {
default as withMobileDialog,
} from './withMobileDialog';
export { default as withMobileDialog } from './withMobileDialog';
export * from './withMobileDialog';

View File

@@ -5,8 +5,12 @@ export interface WithMobileDialogOptions {
breakpoint: Breakpoint;
}
export interface InjectedProps {
fullScreen?: boolean;
}
export default function withMobileDialog<P = {}>(
options: WithMobileDialogOptions
options?: WithMobileDialogOptions,
): (
component: React.ComponentType<P & Partial<WithWidthProps>>
) => React.ComponentClass<P & Partial<WithWidthProps>>;
component: React.ComponentType<P & InjectedProps & Partial<WithWidthProps>>,
) => React.ComponentType<P & Partial<WithWidthProps>>;

View File

@@ -1,26 +1,23 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
import _extends from 'babel-runtime/helpers/extends';
import React from 'react';
import wrapDisplayName from 'recompose/wrapDisplayName';
import PropTypes from 'prop-types';
import withWidth, { isWidthDown } from '../utils/withWidth';
/**
* Dialog will responsively be full screen *at or below* the given breakpoint
* (defaults to 'sm' for mobile devices).
* Notice that this Higher-order Component is incompatible with server side rendering.
*/
const withMobileDialog = (options = { breakpoint: 'sm' }) => Component => {
const { breakpoint } = options;
const withMobileDialog = (options = {}) => Component => {
const { breakpoint = 'sm' } = options;
function WithMobileDialog(props) {
return React.createElement(Component, _extends({ fullScreen: isWidthDown(breakpoint, props.width) }, props));
}
if (process.env.NODE_ENV !== 'production') {
WithMobileDialog.displayName = wrapDisplayName(Component, 'withMobileDialog');
}
WithMobileDialog.propTypes = process.env.NODE_ENV !== "production" ? {
width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired
} : {};
return withWidth()(WithMobileDialog);
};

View File

@@ -1,22 +1,15 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface DividerProps extends StandardProps<
React.HTMLAttributes<HTMLHRElement>,
DividerClassKey
> {
export interface DividerProps
extends StandardProps<React.HTMLAttributes<HTMLHRElement>, DividerClassKey> {
absolute?: boolean;
component?: React.ReactType<DividerProps>;
inset?: boolean;
light?: boolean;
}
export type DividerClassKey =
| 'root'
| 'default'
| 'inset'
| 'light'
| 'absolute'
;
export type DividerClassKey = 'root' | 'default' | 'inset' | 'light' | 'absolute';
declare const Divider: React.ComponentType<DividerProps>;

View File

@@ -1,10 +1,10 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { fade } from '../styles/colorManipulator';
export const styles = theme => ({
root: {
@@ -13,14 +13,14 @@ export const styles = theme => ({
border: 'none',
flexShrink: 0
},
default: {
backgroundColor: theme.palette.text.divider
},
inset: {
marginLeft: 72
},
default: {
backgroundColor: theme.palette.divider
},
light: {
backgroundColor: theme.palette.text.lightDivider
backgroundColor: fade(theme.palette.divider, 0.08)
},
absolute: {
position: 'absolute',
@@ -31,20 +31,52 @@ export const styles = theme => ({
});
function Divider(props) {
const { absolute, classes, className: classNameProp, inset, light } = props,
other = _objectWithoutProperties(props, ['absolute', 'classes', 'className', 'inset', 'light']);
const {
absolute,
classes,
className: classNameProp,
component: Component,
inset,
light
} = props,
other = _objectWithoutProperties(props, ['absolute', 'classes', 'className', 'component', 'inset', 'light']);
const className = classNames(classes.root, {
[classes.absolute]: absolute,
[classes.inset]: inset,
[light ? classes.light : classes.default]: true
}, classNameProp);
[classes.inset]: inset
}, light ? classes.light : classes.default, classNameProp);
return React.createElement('hr', _extends({ className: className }, other));
return React.createElement(Component, _extends({ className: className }, other));
}
Divider.propTypes = process.env.NODE_ENV !== "production" ? {
absolute: PropTypes.bool,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* If `true`, the divider will be indented.
*/
inset: PropTypes.bool,
/**
* If `true`, the divider will have a lighter color.
*/
light: PropTypes.bool
} : {};
Divider.defaultProps = {
absolute: false,
component: 'hr',
inset: false,
light: false
};

View File

@@ -1,33 +1,42 @@
import * as React from 'react';
import { StandardProps } from '..';
import { ModalProps, ModalClassKey } from '../internal/Modal';
import { TransitionDuration } from '../internal/transition';
import { ModalProps, ModalClassKey } from '../Modal';
import { SlideProps } from '../transitions/Slide';
import { PaperProps } from '../Paper';
import { Theme } from '../styles/createMuiTheme';
import { TransitionHandlerProps, TransitionProps } from '../transitions/transition';
export interface DrawerProps extends StandardProps<
ModalProps,
DrawerClassKey
> {
export interface DrawerProps
extends StandardProps<
ModalProps & Partial<TransitionHandlerProps>,
DrawerClassKey,
'open' | 'children'
> {
anchor?: 'left' | 'top' | 'right' | 'bottom';
children?: React.ReactNode;
elevation?: number;
transitionDuration?: TransitionDuration;
ModalProps?: Partial<ModalProps>;
open?: boolean;
SlideProps?: SlideProps;
PaperProps?: Partial<PaperProps>;
SlideProps?: Partial<SlideProps>;
theme?: Theme;
type?: 'permanent' | 'persistent' | 'temporary';
transitionDuration?: TransitionProps['timeout'];
variant?: 'permanent' | 'persistent' | 'temporary';
}
export type DrawerClassKey =
| ModalClassKey
| 'paper'
| 'anchorLeft'
| 'anchorRight'
| 'anchorTop'
| 'anchorBottom'
| 'docked'
| 'modal'
;
| 'paper'
| 'paperAnchorLeft'
| 'paperAnchorRight'
| 'paperAnchorTop'
| 'paperAnchorBottom'
| 'paperAnchorDockedLeft'
| 'paperAnchorDockedTop'
| 'paperAnchorDockedRight'
| 'paperAnchorDockedBottom'
| 'modal';
declare const Drawer: React.ComponentType<DrawerProps>;

View File

@@ -1,18 +1,17 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
// @inheritedComponent Modal
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Modal from '../internal/Modal';
import Modal from '../Modal';
import withStyles from '../styles/withStyles';
import Slide from '../transitions/Slide';
import Paper from '../Paper';
import { capitalizeFirstLetter } from '../utils/helpers';
import { capitalize } from '../utils/helpers';
import { duration } from '../styles/transitions';
function getSlideDirection(anchor) {
if (anchor === 'left') {
return 'right';
@@ -36,14 +35,17 @@ export const styles = theme => ({
flexDirection: 'column',
height: '100vh',
flex: '1 0 auto',
zIndex: theme.zIndex.drawer,
WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
// temporary style
position: 'fixed',
top: 0,
zIndex: theme.zIndex.navDrawer,
willChange: 'transform',
// We disable the focus ring for mouse, touch and keyboard users.
// At some point, it would be better to keep it for keyboard users.
// :focus-ring CSS pseudo-class will help.
'&:focus': {
outline: 'none'
},
WebkitOverflowScrolling: 'touch' // Add iOS momentum scrolling.
}
},
paperAnchorLeft: {
left: 0,
@@ -70,10 +72,16 @@ export const styles = theme => ({
maxHeight: '100vh'
},
paperAnchorDockedLeft: {
borderRight: `1px solid ${theme.palette.text.divider}`
borderRight: `1px solid ${theme.palette.divider}`
},
paperAnchorDockedTop: {
borderBottom: `1px solid ${theme.palette.divider}`
},
paperAnchorDockedRight: {
borderLeft: `1px solid ${theme.palette.text.divider}`
borderLeft: `1px solid ${theme.palette.divider}`
},
paperAnchorDockedBottom: {
borderTop: `1px solid ${theme.palette.divider}`
},
modal: {} // Just here so people can override the style.
});
@@ -104,36 +112,35 @@ class Drawer extends React.Component {
classes,
className,
elevation,
transitionDuration,
ModalProps,
onRequestClose,
onClose,
open,
PaperProps,
SlideProps,
theme,
type
transitionDuration,
variant
} = _props,
other = _objectWithoutProperties(_props, ['anchor', 'children', 'classes', 'className', 'elevation', 'transitionDuration', 'ModalProps', 'onRequestClose', 'open', 'SlideProps', 'theme', 'type']);
other = _objectWithoutProperties(_props, ['anchor', 'children', 'classes', 'className', 'elevation', 'ModalProps', 'onClose', 'open', 'PaperProps', 'SlideProps', 'theme', 'transitionDuration', 'variant']);
const rtl = theme.direction === 'rtl';
let anchor = anchorProp;
if (rtl && ['left', 'right'].includes(anchor)) {
if (theme.direction === 'rtl' && ['left', 'right'].includes(anchor)) {
anchor = anchor === 'left' ? 'right' : 'left';
}
const drawer = React.createElement(
Paper,
{
elevation: type === 'temporary' ? elevation : 0,
_extends({
elevation: variant === 'temporary' ? elevation : 0,
square: true,
className: classNames(classes.paper, {
[classes[`paperAnchor${capitalizeFirstLetter(anchor)}`]]: type !== 'permanent',
[classes[`paperAnchorDocked${capitalizeFirstLetter(anchor)}`]]: type !== 'temporary'
className: classNames(classes.paper, classes[`paperAnchor${capitalize(anchor)}`], {
[classes[`paperAnchorDocked${capitalize(anchor)}`]]: variant !== 'temporary'
})
},
}, PaperProps),
children
);
if (type === 'permanent') {
if (variant === 'permanent') {
return React.createElement(
'div',
_extends({ className: classNames(classes.docked, className) }, other),
@@ -152,7 +159,7 @@ class Drawer extends React.Component {
drawer
);
if (type === 'persistent') {
if (variant === 'persistent') {
return React.createElement(
'div',
_extends({ className: classNames(classes.docked, className) }, other),
@@ -160,28 +167,86 @@ class Drawer extends React.Component {
);
}
// type === temporary
// variant === temporary
return React.createElement(
Modal,
_extends({
BackdropTransitionDuration: transitionDuration,
BackdropProps: {
transitionDuration
},
className: classNames(classes.modal, className),
show: open,
onRequestClose: onRequestClose
open: open,
onClose: onClose
}, other, ModalProps),
slidingDrawer
);
}
}
Drawer.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Side from which the drawer will appear.
*/
anchor: PropTypes.oneOf(['left', 'top', 'right', 'bottom']),
/**
* The contents of the drawer.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The elevation of the drawer.
*/
elevation: PropTypes.number,
/**
* Properties applied to the `Modal` element.
*/
ModalProps: PropTypes.object,
/**
* Callback fired when the component requests to be closed.
*
* @param {object} event The event source of the callback
*/
onClose: PropTypes.func,
/**
* If `true`, the drawer is open.
*/
open: PropTypes.bool,
/**
* Properties applied to the `Paper` element.
*/
PaperProps: PropTypes.object,
/**
* Properties applied to the `Slide` element.
*/
SlideProps: PropTypes.object,
/**
* @ignore
*/
theme: PropTypes.object.isRequired,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
*/
transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })]),
/**
* The type of drawer.
*/
variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])
} : {};
Drawer.defaultProps = {
anchor: 'left',
elevation: 16,
transitionDuration: {
enter: duration.enteringScreen,
exit: duration.leavingScreen
},
open: false,
type: 'temporary' // Mobile first.
transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen },
variant: 'temporary' // Mobile first.
};
export default withStyles(styles, { flip: false, withTheme: true, name: 'MuiDrawer' })(Drawer);
export default withStyles(styles, { name: 'MuiDrawer', flip: false, withTheme: true })(Drawer);

View File

@@ -0,0 +1,19 @@
import * as React from 'react';
import { StandardProps } from '..';
import { CollapseProps } from '../transitions/Collapse';
import { PaperProps, PaperClassKey } from '../Paper';
export interface ExpansionPanelProps
extends StandardProps<PaperProps, ExpansionPanelClassKey, 'onChange'> {
CollapseProps?: React.ComponentType<CollapseProps>;
defaultExpanded?: boolean;
disabled?: boolean;
expanded?: boolean;
onChange?: (event: React.ChangeEvent<{}>, expanded: boolean) => void;
}
export type ExpansionPanelClassKey = PaperClassKey | 'disabled' | 'expanded';
declare const ExpansionPanel: React.ComponentType<ExpansionPanelProps>;
export default ExpansionPanel;

View File

@@ -0,0 +1,204 @@
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
// @inheritedComponent Paper
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Collapse from '../transitions/Collapse';
import Paper from '../Paper';
import withStyles from '../styles/withStyles';
import { isMuiElement } from '../utils/reactHelpers';
export const styles = theme => {
const transition = {
duration: theme.transitions.duration.shortest
};
return {
root: {
position: 'relative',
transition: theme.transitions.create(['margin'], transition),
'&:before': {
position: 'absolute',
left: 0,
top: -1,
right: 0,
height: 1,
content: '""',
opacity: 1,
backgroundColor: theme.palette.divider,
transition: theme.transitions.create(['opacity', 'background-color'], transition)
},
'&:first-child': {
borderTopLeftRadius: 2,
borderTopRightRadius: 2,
'&:before': {
display: 'none'
}
},
'&:last-child': {
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2
},
'&$expanded + &': {
'&:before': {
display: 'none'
}
}
},
expanded: {
margin: `${theme.spacing.unit * 2}px 0`,
'&:first-child': {
marginTop: 0
},
'&:last-child': {
marginBottom: 0
},
'&:before': {
opacity: 0
}
},
disabled: {
backgroundColor: theme.palette.action.disabledBackground
}
};
};
class ExpansionPanel extends React.Component {
constructor(...args) {
var _temp;
return _temp = super(...args), this.state = {
expanded: false
}, this.isControlled = null, this.handleChange = event => {
const { onChange } = this.props;
const expanded = !this.state.expanded;
if (onChange) {
onChange(event, expanded);
}
if (!this.isControlled) {
this.setState({ expanded });
}
}, _temp;
}
componentWillMount() {
const { expanded, defaultExpanded } = this.props;
this.isControlled = expanded != null;
this.setState({
expanded: this.isControlled ? expanded : defaultExpanded
});
}
componentWillReceiveProps(nextProps) {
if (this.isControlled) {
this.setState({
expanded: nextProps.expanded
});
}
}
render() {
const _props = this.props,
{
children: childrenProp,
classes,
className: classNameProp,
CollapseProps: CollapsePropsProp,
defaultExpanded,
disabled,
expanded: expandedProp,
onChange
} = _props,
other = _objectWithoutProperties(_props, ['children', 'classes', 'className', 'CollapseProps', 'defaultExpanded', 'disabled', 'expanded', 'onChange']);
const { expanded } = this.state;
const className = classNames(classes.root, {
[classes.expanded]: expanded,
[classes.disabled]: disabled
}, classNameProp);
let summary = null;
const children = React.Children.map(childrenProp, child => {
if (!React.isValidElement(child)) {
return null;
}
if (isMuiElement(child, ['ExpansionPanelSummary'])) {
summary = React.cloneElement(child, {
disabled,
expanded,
onChange: this.handleChange
});
return null;
}
return child;
});
const CollapseProps = !expanded ? {
'aria-hidden': 'true'
} : null;
return React.createElement(
Paper,
_extends({ className: className, elevation: 1, square: true }, other),
summary,
React.createElement(
Collapse,
_extends({ 'in': expanded, timeout: 'auto' }, CollapseProps, CollapsePropsProp),
children
)
);
}
}
ExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the expansion panel.
*/
children: PropTypes.node.isRequired,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Properties applied to the `Collapse` element.
*/
CollapseProps: PropTypes.object,
/**
* If `true`, expands the panel by default.
*/
defaultExpanded: PropTypes.bool,
/**
* If `true`, the panel will be displayed in a disabled state.
*/
disabled: PropTypes.bool,
/**
* If `true`, expands the panel, otherwise collapse it.
* Setting this prop enables control over the panel.
*/
expanded: PropTypes.bool,
/**
* Callback fired when the expand/collapse state is changed.
*
* @param {object} event The event source of the callback
* @param {boolean} expanded The `expanded` state of the panel
*/
onChange: PropTypes.func
} : {};
ExpansionPanel.defaultProps = {
defaultExpanded: false,
disabled: false
};
export default withStyles(styles, { name: 'MuiExpansionPanel' })(ExpansionPanel);

View File

@@ -0,0 +1,11 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface ExpansionPanelActionsProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ExpansionPanelActionsClassKey> {}
export type ExpansionPanelActionsClassKey = 'root' | 'action';
declare const ExpansionPanelActions: React.ComponentType<ExpansionPanelActionsProps>;
export default ExpansionPanelActions;

View File

@@ -0,0 +1,47 @@
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { cloneChildrenWithClassName } from '../utils/reactHelpers';
export const styles = theme => ({
root: {
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px`
},
action: {
marginLeft: theme.spacing.unit
}
});
function ExpansionPanelActions(props) {
const { children, classes, className } = props,
other = _objectWithoutProperties(props, ['children', 'classes', 'className']);
return React.createElement(
'div',
_extends({ className: classNames(classes.root, className) }, other),
cloneChildrenWithClassName(children, classes.action)
);
}
ExpansionPanelActions.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* 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
} : {};
export default withStyles(styles, { name: 'MuiExpansionPanelActions' })(ExpansionPanelActions);

View File

@@ -0,0 +1,11 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface ExpansionPanelDetailsProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ExpansionPanelDetailsClassKey> {}
export type ExpansionPanelDetailsClassKey = 'root';
declare const ExpansionPanelDetails: React.ComponentType<ExpansionPanelDetailsProps>;
export default ExpansionPanelDetails;

View File

@@ -0,0 +1,42 @@
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
export const styles = theme => ({
root: {
display: 'flex',
flexGrow: 1,
padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`
}
});
function ExpansionPanelDetails(props) {
const { classes, children, className } = props,
other = _objectWithoutProperties(props, ['classes', 'children', 'className']);
return React.createElement(
'div',
_extends({ className: classNames(classes.root, className) }, other),
children
);
}
ExpansionPanelDetails.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the expansion panel details.
*/
children: PropTypes.node.isRequired,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string
} : {};
export default withStyles(styles, { name: 'MuiExpansionPanelDetails' })(ExpansionPanelDetails);

View File

@@ -0,0 +1,25 @@
import * as React from 'react';
import { StandardProps } from '..';
import { ButtonBaseProps, ButtonBaseClassKey } from '../ButtonBase';
export interface ExpansionPanelSummaryProps
extends StandardProps<ButtonBaseProps, ExpansionPanelSummaryClassKey> {
disabled?: boolean;
expanded?: boolean;
expandIcon?: React.ReactNode;
onChange?: React.ReactEventHandler<{}>;
}
export type ExpansionPanelSummaryClassKey =
| ButtonBaseClassKey
| 'expanded'
| 'focused'
| 'disabled'
| 'content'
| 'contentExpanded'
| 'expandIcon'
| 'expandIconExpanded';
declare const ExpansionPanelSummary: React.ComponentType<ExpansionPanelSummaryProps>;
export default ExpansionPanelSummary;

View File

@@ -0,0 +1,182 @@
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
// @inheritedComponent ButtonBase
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import ButtonBase from '../ButtonBase';
import IconButton from '../IconButton';
import withStyles from '../styles/withStyles';
export const styles = theme => {
const transition = {
duration: theme.transitions.duration.shortest
};
return {
root: {
display: 'flex',
minHeight: theme.spacing.unit * 6,
transition: theme.transitions.create(['min-height', 'background-color'], transition),
padding: `0 ${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 3}px`,
'&:hover:not($disabled)': {
cursor: 'pointer'
}
},
expanded: {
minHeight: 64
},
focused: {
backgroundColor: theme.palette.grey[300]
},
disabled: {
opacity: 0.38
},
content: {
display: 'flex',
flexGrow: 1,
transition: theme.transitions.create(['margin'], transition),
margin: '12px 0',
'& > :last-child': {
paddingRight: theme.spacing.unit * 4
}
},
contentExpanded: {
margin: '20px 0'
},
expandIcon: {
position: 'absolute',
top: '50%',
right: theme.spacing.unit,
transform: 'translateY(-50%) rotate(0deg)',
transition: theme.transitions.create('transform', transition)
},
expandIconExpanded: {
transform: 'translateY(-50%) rotate(180deg)'
}
};
};
class ExpansionPanelSummary extends React.Component {
constructor(...args) {
var _temp;
return _temp = super(...args), this.state = {
focused: false
}, this.handleFocus = () => {
this.setState({
focused: true
});
}, this.handleBlur = () => {
this.setState({
focused: false
});
}, this.handleChange = event => {
const { onChange, onClick } = this.props;
if (onChange) {
onChange(event);
}
if (onClick) {
onClick(event);
}
}, _temp;
}
render() {
const _props = this.props,
{
children,
classes,
className,
disabled,
expanded,
expandIcon,
onChange
} = _props,
other = _objectWithoutProperties(_props, ['children', 'classes', 'className', 'disabled', 'expanded', 'expandIcon', 'onChange']);
const { focused } = this.state;
return React.createElement(
ButtonBase,
_extends({
focusRipple: false,
disableRipple: true,
disabled: disabled,
component: 'div',
'aria-expanded': expanded,
className: classNames(classes.root, {
[classes.disabled]: disabled,
[classes.expanded]: expanded,
[classes.focused]: focused
}, className)
}, other, {
onKeyboardFocus: this.handleFocus,
onBlur: this.handleBlur,
onClick: this.handleChange
}),
React.createElement(
'div',
{ className: classNames(classes.content, { [classes.contentExpanded]: expanded }) },
children
),
expandIcon && React.createElement(
IconButton,
{
disabled: disabled,
className: classNames(classes.expandIcon, {
[classes.expandIconExpanded]: expanded
}),
component: 'div',
tabIndex: -1,
'aria-hidden': 'true'
},
expandIcon
)
);
}
}
ExpansionPanelSummary.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the expansion panel summary.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* @ignore
* If `true`, the summary will be displayed in a disabled state.
*/
disabled: PropTypes.bool,
/**
* @ignore
* If `true`, expands the summary, otherwise collapse it.
*/
expanded: PropTypes.bool,
/**
* The icon to display as the expand indicator.
*/
expandIcon: PropTypes.node,
/**
* @ignore
*/
onChange: PropTypes.func,
/**
* @ignore
*/
onClick: PropTypes.func
} : {};
ExpansionPanelSummary.defaultProps = {
disabled: false
};
ExpansionPanelSummary.muiName = 'ExpansionPanelSummary';
export default withStyles(styles, { name: 'MuiExpansionPanelSummary' })(ExpansionPanelSummary);

View File

@@ -0,0 +1,8 @@
export { default } from './ExpansionPanel';
export * from './ExpansionPanel';
export { default as ExpansionPanelSummary } from './ExpansionPanelSummary';
export * from './ExpansionPanelSummary';
export { default as ExpansionPanelDetails } from './ExpansionPanelDetails';
export * from './ExpansionPanelDetails';
export { default as ExpansionPanelActions } from './ExpansionPanelActions';
export * from './ExpansionPanelActions';

View File

@@ -0,0 +1,4 @@
export { default } from './ExpansionPanel';
export { default as ExpansionPanelActions } from './ExpansionPanelActions';
export { default as ExpansionPanelDetails } from './ExpansionPanelDetails';
export { default as ExpansionPanelSummary } from './ExpansionPanelSummary';

View File

@@ -1,10 +1,9 @@
import * as React from 'react';
import { StandardProps, PropTypes } from '..';
export interface FormControlProps extends StandardProps<
React.HtmlHTMLAttributes<HTMLDivElement>,
FormControlClassKey
> {
export interface FormControlProps
extends StandardProps<React.HtmlHTMLAttributes<HTMLDivElement>, FormControlClassKey> {
component?: React.ReactType<FormControlProps>;
disabled?: boolean;
error?: boolean;
fullWidth?: boolean;
@@ -12,15 +11,9 @@ export interface FormControlProps extends StandardProps<
onBlur?: React.EventHandler<any>;
onFocus?: React.EventHandler<any>;
required?: boolean;
component?: React.ReactType;
}
export type FormControlClassKey =
| 'root'
| 'marginNormal'
| 'marginDense'
| 'fullWidth'
;
export type FormControlClassKey = 'root' | 'marginNormal' | 'marginDense' | 'fullWidth';
declare const FormControl: React.ComponentType<FormControlProps>;

View File

@@ -1,13 +1,11 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { isDirty, isAdornedStart } from '../Input/Input';
import { capitalize } from '../utils/helpers';
import { isMuiElement } from '../utils/reactHelpers';
export const styles = theme => ({
@@ -45,7 +43,6 @@ export const styles = theme => ({
* - InputLabel
*/
class FormControl extends React.Component {
constructor(props, context) {
super(props, context);
@@ -61,18 +58,17 @@ class FormControl extends React.Component {
if (this.props.onFocus) {
this.props.onFocus(event);
}
if (!this.state.focused) {
this.setState({ focused: true });
}
this.setState(state => !state.focused ? { focused: true } : null);
};
this.handleBlur = event => {
if (this.props.onBlur) {
// The event might be undefined.
// For instance, a child component might call this hook
// when an input is disabled but still having the focus.
if (this.props.onBlur && event) {
this.props.onBlur(event);
}
if (this.state.focused) {
this.setState({ focused: false });
}
this.setState(state => state.focused ? { focused: false } : null);
};
this.handleDirty = () => {
@@ -124,34 +120,77 @@ class FormControl extends React.Component {
render() {
const _props = this.props,
{
children,
classes,
className,
component: ComponentProp,
component: Component,
disabled,
error,
fullWidth,
margin
margin,
required
} = _props,
other = _objectWithoutProperties(_props, ['children', 'classes', 'className', 'component', 'disabled', 'error', 'fullWidth', 'margin']);
other = _objectWithoutProperties(_props, ['classes', 'className', 'component', 'disabled', 'error', 'fullWidth', 'margin', 'required']);
return React.createElement(
ComponentProp,
_extends({
className: classNames(classes.root, {
[classes.marginNormal]: margin === 'normal',
[classes.marginDense]: margin === 'dense',
[classes.fullWidth]: fullWidth
}, className)
}, other, {
onFocus: this.handleFocus,
onBlur: this.handleBlur
}),
children
);
return React.createElement(Component, _extends({
className: classNames(classes.root, {
[classes[`margin${capitalize(margin)}`]]: margin !== 'none',
[classes.fullWidth]: fullWidth
}, className)
}, other, {
onFocus: this.handleFocus,
onBlur: this.handleBlur
}));
}
}
FormControl.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The contents of the form control.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* If `true`, the label, input and helper text should be displayed in a disabled state.
*/
disabled: PropTypes.bool,
/**
* If `true`, the label should be displayed in an error state.
*/
error: PropTypes.bool,
/**
* If `true`, the component will take up the full width of its container.
*/
fullWidth: PropTypes.bool,
/**
* If `dense` or `normal`, will adjust vertical spacing of this and contained components.
*/
margin: PropTypes.oneOf(['none', 'dense', 'normal']),
/**
* @ignore
*/
onBlur: PropTypes.func,
/**
* @ignore
*/
onFocus: PropTypes.func,
/**
* If `true`, the label will indicate that the input is required.
*/
required: PropTypes.bool
} : {};
FormControl.defaultProps = {
component: 'div',
disabled: false,
@@ -160,7 +199,9 @@ FormControl.defaultProps = {
margin: 'none',
required: false
};
FormControl.childContextTypes = {
muiFormControl: PropTypes.object.isRequired
muiFormControl: PropTypes.object
};
export default withStyles(styles, { name: 'MuiFormControl' })(FormControl);

View File

@@ -1,11 +1,12 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface FormControlLabelProps extends StandardProps<
React.LabelHTMLAttributes<HTMLLabelElement>,
FormControlLabelClassKey,
'onChange'
> {
export interface FormControlLabelProps
extends StandardProps<
React.LabelHTMLAttributes<HTMLLabelElement>,
FormControlLabelClassKey,
'onChange'
> {
checked?: boolean | string;
control: React.ReactElement<any>;
disabled?: boolean;
@@ -16,11 +17,7 @@ export interface FormControlLabelProps extends StandardProps<
value?: string;
}
export type FormControlLabelClassKey =
| 'root'
| 'disabled'
| 'label'
;
export type FormControlLabelClassKey = 'root' | 'disabled' | 'label';
declare const FormControlLabel: React.ComponentType<FormControlLabelProps>;

View File

@@ -1,11 +1,8 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
/* eslint-disable jsx-a11y/label-has-for */
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
@@ -16,8 +13,10 @@ export const styles = theme => ({
display: 'inline-flex',
alignItems: 'center',
cursor: 'pointer',
// For correct alignment with the text.
verticalAlign: 'middle',
// Remove grey highlight
WebkitTapHighlightColor: theme.palette.common.transparent,
WebkitTapHighlightColor: 'transparent',
marginLeft: -14,
marginRight: theme.spacing.unit * 2 // used for row presentation of radio/checkbox
},
@@ -25,9 +24,7 @@ export const styles = theme => ({
color: theme.palette.text.disabled,
cursor: 'default'
},
label: {
userSelect: 'none'
}
label: {}
});
/**
@@ -81,12 +78,58 @@ function FormControlLabel(props, context) {
}),
React.createElement(
Typography,
{ className: classes.label },
{ component: 'span', className: classes.label },
label
)
);
}
FormControlLabel.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* If `true`, the component appears selected.
*/
checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`.
*/
control: PropTypes.element,
/**
* If `true`, the control will be disabled.
*/
disabled: PropTypes.bool,
/**
* Use that property to pass a ref callback to the native input component.
*/
inputRef: PropTypes.func,
/**
* The text to be used in an enclosing label element.
*/
label: PropTypes.node,
/*
* @ignore
*/
name: PropTypes.string,
/**
* Callback fired when the state is changed.
*
* @param {object} event The event source of the callback
* @param {boolean} checked The `checked` value of the switch
*/
onChange: PropTypes.func,
/**
* The value of the component.
*/
value: PropTypes.string
} : {};
FormControlLabel.contextTypes = {
muiFormControl: PropTypes.object
};

View File

@@ -1,17 +1,12 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface FormGroupProps extends StandardProps<
React.HtmlHTMLAttributes<HTMLDivElement>,
FormGroupClassKey
> {
export interface FormGroupProps
extends StandardProps<React.HtmlHTMLAttributes<HTMLDivElement>, FormGroupClassKey> {
row?: boolean;
}
export type FormGroupClassKey =
| 'root'
| 'row'
;
export type FormGroupClassKey = 'root' | 'row';
declare const FormGroup: React.ComponentType<FormGroupProps>;

View File

@@ -1,9 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
@@ -37,6 +35,25 @@ function FormGroup(props) {
);
}
FormGroup.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Display group of elements in a compact row.
*/
row: PropTypes.bool
} : {};
FormGroup.defaultProps = {
row: false
};

View File

@@ -1,21 +1,14 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface FormHelperTextProps extends StandardProps<
React.HTMLAttributes<HTMLParagraphElement>,
FormHelperTextClassKey
> {
export interface FormHelperTextProps
extends StandardProps<React.HTMLAttributes<HTMLParagraphElement>, FormHelperTextClassKey> {
disabled?: boolean;
error?: boolean;
margin?: 'dense';
}
export type FormHelperTextClassKey =
| 'root'
| 'dense'
| 'error'
| 'disabled'
;
export type FormHelperTextClassKey = 'root' | 'dense' | 'error' | 'disabled';
declare const FormHelperText: React.ComponentType<FormHelperTextProps>;

View File

@@ -1,16 +1,13 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
export const styles = theme => ({
root: {
color: theme.palette.input.helperText,
color: theme.palette.text.secondary,
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(12),
textAlign: 'left',
@@ -23,23 +20,23 @@ export const styles = theme => ({
marginTop: theme.spacing.unit / 2
},
error: {
color: theme.palette.error.A400
color: theme.palette.error.main
},
disabled: {
color: theme.palette.input.disabled
color: theme.palette.text.disabled
}
});
function FormHelperText(props, context) {
const {
children,
classes,
className: classNameProp,
disabled: disabledProp,
error: errorProp,
margin: marginProp
margin: marginProp,
component: Component
} = props,
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'disabled', 'error', 'margin']);
other = _objectWithoutProperties(props, ['classes', 'className', 'disabled', 'error', 'margin', 'component']);
const { muiFormControl } = context;
let disabled = disabledProp;
@@ -66,13 +63,46 @@ function FormHelperText(props, context) {
[classes.dense]: margin === 'dense'
}, classNameProp);
return React.createElement(
'p',
_extends({ className: className }, other),
children
);
return React.createElement(Component, _extends({ className: className }, other));
}
FormHelperText.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* If `true`, the helper text should be displayed in a disabled state.
*/
disabled: PropTypes.bool,
/**
* If `true`, helper text should be displayed in an error state.
*/
error: PropTypes.bool,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin: PropTypes.oneOf(['dense'])
} : {};
FormHelperText.defaultProps = {
component: 'p'
};
FormHelperText.contextTypes = {
muiFormControl: PropTypes.object
};

View File

@@ -1,22 +1,17 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface FormLabelProps extends StandardProps<
React.LabelHTMLAttributes<HTMLLabelElement>,
FormLabelClassKey
> {
export interface FormLabelProps extends StandardProps<FormLabelBaseProps, FormLabelClassKey> {
component?: React.ReactType<FormLabelBaseProps>;
disabled?: boolean;
error?: boolean;
focused?: boolean;
required?: boolean;
}
export type FormLabelClassKey =
| 'root'
| 'focused'
| 'error'
| 'disabled'
;
export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
export type FormLabelClassKey = 'root' | 'focused' | 'error' | 'disabled';
declare const FormLabel: React.ComponentType<FormLabelProps>;

View File

@@ -1,34 +1,28 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
export const styles = theme => {
const focusColor = theme.palette.primary[theme.palette.type === 'light' ? 'A700' : 'A200'];
return {
root: {
fontFamily: theme.typography.fontFamily,
color: theme.palette.input.labelText,
fontSize: theme.typography.pxToRem(16),
lineHeight: 1,
padding: 0
},
focused: {
color: focusColor
},
error: {
color: theme.palette.error.A400
},
disabled: {
color: theme.palette.input.disabled
}
};
};
export const styles = theme => ({
root: {
fontFamily: theme.typography.fontFamily,
color: theme.palette.text.secondary,
fontSize: theme.typography.pxToRem(16),
lineHeight: 1,
padding: 0
},
focused: {
color: theme.palette.primary[theme.palette.type === 'light' ? 'dark' : 'light']
},
error: {
color: theme.palette.error.main
},
disabled: {
color: theme.palette.text.disabled
}
});
function FormLabel(props, context) {
const {
@@ -81,12 +75,48 @@ function FormLabel(props, context) {
children,
required && React.createElement(
'span',
{ className: asteriskClassName, 'data-mui-test': 'FormLabelAsterisk' },
{ className: asteriskClassName },
'\u2009*'
)
);
}
FormLabel.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* If `true`, the label should be displayed in a disabled state.
*/
disabled: PropTypes.bool,
/**
* If `true`, the label should be displayed in an error state.
*/
error: PropTypes.bool,
/**
* If `true`, the input of this label is focused (used by `FormGroup` components).
*/
focused: PropTypes.bool,
/**
* If `true`, the label will indicate that the input is required.
*/
required: PropTypes.bool
} : {};
FormLabel.defaultProps = {
component: 'label'
};

View File

@@ -1,11 +1,17 @@
import * as React from 'react';
import { StandardProps } from '..';
import { StandardProps, Omit } from '..';
import { HiddenProps } from '../Hidden/Hidden';
import { Breakpoint } from '../styles/createBreakpoints';
export type GridItemsAlignment = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
export type GridContentAlignment = 'stretch' | 'center' | 'flex-start' | 'flex-end' |'space-between' | 'space-around';
export type GridContentAlignment =
| 'stretch'
| 'center'
| 'flex-start'
| 'flex-end'
| 'space-between'
| 'space-around';
export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
@@ -22,20 +28,21 @@ export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
export type GridSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
export interface GridProps extends StandardProps<
React.HTMLAttributes<HTMLElement> & Partial<Record<Breakpoint, boolean | GridSize>>,
GridClassKey,
'hidden'
> {
component?: React.ReactType;
container?: boolean;
item?: boolean;
alignItems?: GridItemsAlignment;
export interface GridProps
extends StandardProps<
React.HTMLAttributes<HTMLElement> & Partial<Record<Breakpoint, boolean | GridSize>>,
GridClassKey,
'hidden'
> {
alignContent?: GridContentAlignment;
alignItems?: GridItemsAlignment;
component?: string | React.ComponentType<Omit<GridProps, StrippedProps>>;
container?: boolean;
direction?: GridDirection;
spacing?: GridSpacing;
hidden?: HiddenProps;
item?: boolean;
justify?: GridJustification;
spacing?: GridSpacing;
wrap?: GridWrap;
}
@@ -46,6 +53,7 @@ export type GridClassKey =
| 'direction-xs-column-reverse'
| 'direction-xs-row-reverse'
| 'wrap-xs-nowrap'
| 'wrap-xs-wrap-reverse'
| 'align-items-xs-center'
| 'align-items-xs-flex-start'
| 'align-items-xs-flex-end'
@@ -75,9 +83,27 @@ export type GridClassKey =
| 'grid-xs-9'
| 'grid-xs-10'
| 'grid-xs-11'
| 'grid-xs-12'
;
| 'grid-xs-12';
declare const Grid: React.ComponentType<GridProps>;
export default Grid;
type StrippedProps =
| 'classes'
| 'className'
| 'component'
| 'container'
| 'item'
| 'alignContent'
| 'alignItems'
| 'direction'
| 'spacing'
| 'hidden'
| 'justify'
| 'wrap'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl';

View File

@@ -1,7 +1,5 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _extends from 'babel-runtime/helpers/extends';
// A grid component using the following libs as inspiration.
//
// For the implementation:
@@ -14,14 +12,13 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
// - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { keys as breakpointKeys } from '../styles/createBreakpoints';
import requirePropFactory from '../utils/requirePropFactory';
import Hidden from '../Hidden';
const GUTTERS = [0, 8, 16, 24, 40];
const GRID_SIZES = [true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
@@ -42,11 +39,11 @@ function generateGrid(globalStyles, theme, breakpoint) {
}
// Only keep 6 significant numbers.
const width = `${Math.round(size / 12 * Math.pow(10, 6)) / Math.pow(10, 4)}%`;
const width = `${Math.round(size / 12 * 10e6) / 10e4}%`;
/* eslint-disable max-len */
// Close to the bootstrap implementation:
// https://github.com/twbs/bootstrap/blob/b0508a975d711d6b24c01f57dd5445c22699fac4/scss/mixins/_grid.scss#L69
// https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
/* eslint-enable max-len */
styles[`grid-${breakpoint}-${size}`] = {
flexBasis: width,
@@ -101,6 +98,9 @@ export const styles = theme => _extends({
flex: '0 0 auto',
margin: '0' // For instance, it's useful when used with a `figure` element.
},
zeroMinWidth: {
minWidth: 0
},
'direction-xs-column': {
flexDirection: 'column'
},
@@ -113,6 +113,9 @@ export const styles = theme => _extends({
'wrap-xs-nowrap': {
flexWrap: 'nowrap'
},
'wrap-xs-wrap-reverse': {
flexWrap: 'wrap-reverse'
},
'align-items-xs-center': {
alignItems: 'center'
},
@@ -160,29 +163,31 @@ export const styles = theme => _extends({
function Grid(props) {
const {
classes,
className: classNameProp,
component: ComponentProp,
container,
item,
alignContent,
alignItems,
classes,
className: classNameProp,
component: Component,
container,
direction,
spacing,
hidden,
item,
justify,
wrap,
xs,
sm,
md,
lg,
xl
md,
zeroMinWidth,
sm,
spacing,
wrap,
xl,
xs
} = props,
other = _objectWithoutProperties(props, ['classes', 'className', 'component', 'container', 'item', 'alignContent', 'alignItems', 'direction', 'spacing', 'hidden', 'justify', 'wrap', 'xs', 'sm', 'md', 'lg', 'xl']);
other = _objectWithoutProperties(props, ['alignContent', 'alignItems', 'classes', 'className', 'component', 'container', 'direction', 'hidden', 'item', 'justify', 'lg', 'md', 'zeroMinWidth', 'sm', 'spacing', 'wrap', 'xl', 'xs']);
const className = classNames({
[classes.typeContainer]: container,
[classes.typeItem]: item,
[classes.zeroMinWidth]: zeroMinWidth,
[classes[`spacing-xs-${String(spacing)}`]]: container && spacing !== 0,
[classes[`direction-xs-${String(direction)}`]]: direction !== Grid.defaultProps.direction,
[classes[`wrap-xs-${String(wrap)}`]]: wrap !== Grid.defaultProps.wrap,
@@ -206,37 +211,130 @@ function Grid(props) {
return React.createElement(
Hidden,
hidden,
React.createElement(ComponentProp, gridProps)
React.createElement(Component, gridProps)
);
}
return React.createElement(ComponentProp, gridProps);
return React.createElement(Component, gridProps);
}
Grid.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Defines the `align-content` style property.
* It's applied for all screen sizes.
*/
alignContent: PropTypes.oneOf(['stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around']),
/**
* Defines the `align-items` style property.
* It's applied for all screen sizes.
*/
alignItems: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* If `true`, the component will have the flex *container* behavior.
* You should be wrapping *items* with a *container*.
*/
container: PropTypes.bool,
/**
* Defines the `flex-direction` style property.
* It is applied for all screen sizes.
*/
direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
/**
* If provided, will wrap with [Hidden](/api/hidden) component and given properties.
*/
hidden: PropTypes.object,
/**
* If `true`, the component will have the flex *item* behavior.
* You should be wrapping *items* with a *container*.
*/
item: PropTypes.bool,
/**
* Defines the `justify-content` style property.
* It is applied for all screen sizes.
*/
justify: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
/**
* Defines the number of grids the component is going to use.
* It's applied for the `lg` breakpoint and wider screens if not overridden.
*/
lg: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**
* Defines the number of grids the component is going to use.
* It's applied for the `md` breakpoint and wider screens if not overridden.
*/
md: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**
* Defines the number of grids the component is going to use.
* It's applied for the `sm` breakpoint and wider screens if not overridden.
*/
sm: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**
* Defines the space between the type `item` component.
* It can only be used on a type `container` component.
*/
spacing: PropTypes.oneOf(GUTTERS),
/**
* Defines the `flex-wrap` style property.
* It's applied for all screen sizes.
*/
wrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
/**
* Defines the number of grids the component is going to use.
* It's applied for the `xl` breakpoint and wider screens.
*/
xl: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**
* Defines the number of grids the component is going to use.
* It's applied for all the screen sizes with the lowest priority.
*/
xs: PropTypes.oneOf([true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
/**
* If `true`, it sets `min-width: 0` on the item.
* Refer to the limitations section of the documentation to better understand the use case.
*/
zeroMinWidth: PropTypes.bool
} : {};
Grid.defaultProps = {
alignContent: 'stretch',
alignItems: 'stretch',
component: 'div',
container: false,
direction: 'row',
hidden: undefined,
item: false,
justify: 'flex-start',
zeroMinWidth: false,
spacing: 16,
wrap: 'wrap'
};
// Add a wrapper component to generate some helper messages in the development
// environment.
/* eslint-disable react/no-multi-comp */
// eslint-disable-next-line import/no-mutable-exports
let GridWrapper = Grid;
if (process.env.NODE_ENV !== 'production') {
const requireProp = requirePropFactory('Grid');
GridWrapper = props => React.createElement(Grid, props);
// $FlowFixMe - cannot mix legacy propTypes with current HOC pattern - https://github.com/facebook/flow/issues/4644#issuecomment-332530909
const requireProp = requirePropFactory('Grid');
GridWrapper.propTypes = {
alignContent: requireProp('container'),
alignItems: requireProp('container'),
@@ -247,7 +345,8 @@ if (process.env.NODE_ENV !== 'production') {
sm: requireProp('item'),
spacing: requireProp('container'),
wrap: requireProp('container'),
xs: requireProp('item')
xs: requireProp('item'),
zeroMinWidth: requireProp('zeroMinWidth')
};
}

View File

@@ -1,19 +1,15 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface GridListProps extends StandardProps<
React.HTMLAttributes<HTMLUListElement>,
GridListClassKey
> {
export interface GridListProps
extends StandardProps<React.HTMLAttributes<HTMLUListElement>, GridListClassKey> {
cellHeight?: number | 'auto';
cols?: number;
component?: React.ReactType;
component?: React.ReactType<GridListProps>;
spacing?: number;
}
export type GridListClassKey =
| 'root'
;
export type GridListClassKey = 'root';
declare const GridList: React.ComponentType<GridListProps>;

View File

@@ -1,11 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// weak
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
@@ -22,19 +18,19 @@ export const styles = {
function GridList(props) {
const {
cols,
spacing,
cellHeight,
children,
classes,
className: classNameProp,
component: ComponentProp,
cols,
component: Component,
spacing,
style
} = props,
other = _objectWithoutProperties(props, ['cols', 'spacing', 'cellHeight', 'children', 'classes', 'className', 'component', 'style']);
other = _objectWithoutProperties(props, ['cellHeight', 'children', 'classes', 'className', 'cols', 'component', 'spacing', 'style']);
return React.createElement(
ComponentProp,
Component,
_extends({
className: classNames(classes.root, classNameProp),
style: _extends({ margin: -spacing / 2 }, style)
@@ -54,11 +50,48 @@ function GridList(props) {
);
}
GridList.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Number of px for one cell height.
* You can set `'auto'` if you want to let the children determine the height.
*/
cellHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
/**
* Grid Tiles that will be in Grid List.
*/
children: PropTypes.node.isRequired,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Number of columns.
*/
cols: PropTypes.number,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* Number of px for the spacing between tiles.
*/
spacing: PropTypes.number,
/**
* @ignore
*/
style: PropTypes.object
} : {};
GridList.defaultProps = {
cols: 2,
spacing: 4,
cellHeight: 180,
component: 'ul'
cols: 2,
component: 'ul',
spacing: 4
};
export default withStyles(styles, { name: 'MuiGridList' })(GridList);

View File

@@ -1,21 +1,14 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface GridListTileProps extends StandardProps<
React.HTMLAttributes<HTMLLIElement>,
GridListTileClassKey
> {
export interface GridListTileProps
extends StandardProps<React.HTMLAttributes<HTMLLIElement>, GridListTileClassKey> {
cols?: number;
component?: React.ReactType;
component?: React.ReactType<GridListTileProps>;
rows?: number;
}
export type GridListTileClassKey =
| 'root'
| 'tile'
| 'imgFullHeight'
| 'imgFullWidth'
;
export type GridListTileClassKey = 'root' | 'tile' | 'imgFullHeight' | 'imgFullWidth';
declare const GridListTile: React.ComponentType<GridListTileProps>;

View File

@@ -1,11 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// weak
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import EventListener from 'react-event-listener';
import debounce from 'lodash/debounce';
@@ -54,11 +50,11 @@ class GridListTile extends React.Component {
}
if (imgElement.width / imgElement.height > imgElement.parentNode.offsetWidth / imgElement.parentNode.offsetHeight) {
imgElement.classList.remove(this.props.classes.imgFullWidth);
imgElement.classList.add(this.props.classes.imgFullHeight);
imgElement.classList.remove(...this.props.classes.imgFullWidth.split(' '));
imgElement.classList.add(...this.props.classes.imgFullHeight.split(' '));
} else {
imgElement.classList.remove(this.props.classes.imgFullHeight);
imgElement.classList.add(this.props.classes.imgFullWidth);
imgElement.classList.remove(...this.props.classes.imgFullHeight.split(' '));
imgElement.classList.add(...this.props.classes.imgFullWidth.split(' '));
}
imgElement.removeEventListener('load', this.fit);
@@ -91,26 +87,18 @@ class GridListTile extends React.Component {
render() {
const _props = this.props,
{
children,
classes,
className,
cols,
// $FlowFixMe - no idea why it cannot find component on intersection
component: ComponentProp,
rows
} = _props,
{ children, classes, className, cols, component: Component, rows } = _props,
other = _objectWithoutProperties(_props, ['children', 'classes', 'className', 'cols', 'component', 'rows']);
return React.createElement(
ComponentProp,
Component,
_extends({ className: classNames(classes.root, className) }, other),
React.createElement(EventListener, { target: 'window', onResize: this.handleResize }),
React.createElement(
'div',
{ className: classes.tile },
React.Children.map(children, child => {
if (child.type === 'img') {
if (child && child.type === 'img') {
return React.cloneElement(child, {
key: 'img',
ref: node => {
@@ -126,9 +114,40 @@ class GridListTile extends React.Component {
}
}
GridListTile.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* Theoretically you can pass any node as children, but the main use case is to pass an img,
* in which case GridListTile takes care of making the image "cover" available space
* (similar to `background-size: cover` or to `object-fit: cover`).
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Width of the tile in number of grid cells.
*/
cols: PropTypes.number,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* Height of the tile in number of grid cells.
*/
rows: PropTypes.number
} : {};
GridListTile.defaultProps = {
cols: 1,
rows: 1,
component: 'li'
component: 'li',
rows: 1
};
export default withStyles(styles, { name: 'MuiGridListTile' })(GridListTile);

View File

@@ -1,8 +1,7 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface GridListTileBarProps extends StandardProps<{}, GridListTileBarClassKey>
{
export interface GridListTileBarProps extends StandardProps<{}, GridListTileBarClassKey> {
actionIcon?: React.ReactNode;
actionPosition?: 'left' | 'right';
subtitle?: React.ReactNode;
@@ -21,8 +20,7 @@ export type GridListTileBarClassKey =
| 'title'
| 'subtitle'
| 'actionIconPositionLeft'
| 'childImg'
;
| 'childImg';
declare const GridListTileBar: React.ComponentType<GridListTileBarProps>;

View File

@@ -1,11 +1,7 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// weak
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
@@ -33,7 +29,7 @@ export const styles = theme => ({
flexGrow: 1,
marginLeft: theme.mixins.gutters({}).paddingLeft,
marginRight: theme.mixins.gutters({}).paddingRight,
color: 'white',
color: theme.palette.common.white,
overflow: 'hidden'
},
titleWrapActionLeft: {
@@ -117,6 +113,38 @@ function GridListTileBar(props) {
);
}
GridListTileBar.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* An IconButton element to be used as secondary action target
* (primary action target is the tile itself).
*/
actionIcon: PropTypes.node,
/**
* Position of secondary action IconButton.
*/
actionPosition: PropTypes.oneOf(['left', 'right']),
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* String or element serving as subtitle (support text).
*/
subtitle: PropTypes.node,
/**
* Title to be displayed on tile.
*/
title: PropTypes.node,
/**
* Position of the title bar.
*/
titlePosition: PropTypes.oneOf(['top', 'bottom'])
} : {};
GridListTileBar.defaultProps = {
actionPosition: 'right',
titlePosition: 'bottom'

View File

@@ -1,7 +1,5 @@
export { default } from './GridList';
export * from './GridList';
export { default as GridList } from './GridList';
export * from './GridList';
export { default as GridListTile } from './GridListTile';
export * from './GridListTile';
export { default as GridListTileBar } from './GridListTileBar';

View File

@@ -1,4 +1,3 @@
export { default } from './GridList';
export { default as GridList } from './GridList';
export { default as GridListTile } from './GridListTile';
export { default as GridListTileBar } from './GridListTileBar';

View File

@@ -3,18 +3,19 @@ import { StandardProps } from '..';
import { Breakpoint } from '../styles/createBreakpoints';
export interface HiddenProps extends StandardProps<{}, never> {
only?: Breakpoint | Array<Breakpoint>;
xsUp?: boolean;
smUp?: boolean;
mdUp?: boolean;
implementation?: 'js' | 'css';
initialWidth?: Breakpoint;
lgDown?: boolean;
lgUp?: boolean;
mdDown?: boolean;
mdUp?: boolean;
only?: Breakpoint | Array<Breakpoint>;
smDown?: boolean;
smUp?: boolean;
xlDown?: boolean;
xlUp?: boolean;
xsDown?: boolean;
smDown?: boolean;
mdDown?: boolean;
lgDown?: boolean;
xlDown?: boolean;
implementation?: 'js' | 'css';
xsUp?: boolean;
}
declare const Hidden: React.ComponentType<HiddenProps>;

View File

@@ -1,11 +1,9 @@
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import HiddenJs from './HiddenJs';
import HiddenCss from './HiddenCss';
/**
* Responsively hides children based on the selected implementation.
*/
@@ -20,18 +18,90 @@ function Hidden(props) {
return React.createElement(HiddenCss, other);
}
Hidden.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Specify which implementation to use. 'js' is the default, 'css' works better for server
* side rendering.
*/
implementation: PropTypes.oneOf(['js', 'css']),
/**
* You can use this property when choosing the `js` implementation with server side rendering.
*
* As `window.innerWidth` is unavailable on the server,
* we default to rendering an empty componenent during the first mount.
* In some situation you might want to use an heristic to approximate
* the screen width of the client browser screen width.
*
* For instance, you could be using the user-agent or the client-hints.
* http://caniuse.com/#search=client%20hint
*/
initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
/**
* If true, screens this size and down will be hidden.
*/
lgDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
lgUp: PropTypes.bool,
/**
* If true, screens this size and down will be hidden.
*/
mdDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
mdUp: PropTypes.bool,
/**
* Hide the given breakpoint(s).
*/
only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
/**
* If true, screens this size and down will be hidden.
*/
smDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
smUp: PropTypes.bool,
/**
* If true, screens this size and down will be hidden.
*/
xlDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
xlUp: PropTypes.bool,
/**
* If true, screens this size and down will be hidden.
*/
xsDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
xsUp: PropTypes.bool
} : {};
Hidden.defaultProps = {
implementation: 'js',
xsUp: false,
smUp: false,
mdUp: false,
lgDown: false,
lgUp: false,
mdDown: false,
mdUp: false,
smDown: false,
smUp: false,
xlDown: false,
xlUp: false,
xsDown: false,
smDown: false,
mdDown: false,
lgDown: false,
xlDown: false
xsUp: false
};
export default Hidden;

View File

@@ -0,0 +1,20 @@
import * as React from 'react';
import { Breakpoint } from '../styles/createBreakpoints';
export interface HiddenCssProps {
lgDown?: boolean;
lgUp?: boolean;
mdDown?: boolean;
mdUp?: boolean;
only?: Breakpoint | Array<Breakpoint>;
smDown?: boolean;
smUp?: boolean;
xlDown?: boolean;
xlUp?: boolean;
xsDown?: boolean;
xsUp?: boolean;
}
declare const HiddenCss: React.ComponentType<HiddenCssProps>;
export default HiddenCss;

View File

@@ -1,36 +1,31 @@
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
/* eslint-disable flowtype/require-valid-file-annotation */
import _Object$keys from 'babel-runtime/core-js/object/keys';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import warning from 'warning';
import { keys as breakpointKeys } from '../styles/createBreakpoints';
import { capitalizeFirstLetter } from '../utils/helpers';
import { capitalize } from '../utils/helpers';
import withStyles from '../styles/withStyles';
function generateStyles(theme) {
const styles = theme => {
const hidden = {
display: 'none'
};
return breakpointKeys.reduce((styles, key) => {
styles[`only${capitalizeFirstLetter(key)}`] = {
return breakpointKeys.reduce((acc, key) => {
acc[`only${capitalize(key)}`] = {
[theme.breakpoints.only(key)]: hidden
};
styles[`${key}Up`] = {
acc[`${key}Up`] = {
[theme.breakpoints.up(key)]: hidden
};
styles[`${key}Down`] = {
acc[`${key}Down`] = {
[theme.breakpoints.down(key)]: hidden
};
return styles;
return acc;
}, {});
}
const styles = theme => generateStyles(theme);
};
/**
* @ignore - internal component.
@@ -39,23 +34,28 @@ function HiddenCss(props) {
const {
children,
classes,
only,
xsUp,
smUp,
mdUp,
className,
lgDown,
lgUp,
mdDown,
mdUp,
only,
smDown,
smUp,
xlDown,
xlUp,
xsDown,
smDown,
mdDown,
lgDown,
xlDown
xsUp
} = props,
other = _objectWithoutProperties(props, ['children', 'classes', 'only', 'xsUp', 'smUp', 'mdUp', 'lgUp', 'xlUp', 'xsDown', 'smDown', 'mdDown', 'lgDown', 'xlDown']);
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'lgDown', 'lgUp', 'mdDown', 'mdUp', 'only', 'smDown', 'smUp', 'xlDown', 'xlUp', 'xsDown', 'xsUp']);
warning(Object.keys(other).length === 0 || Object.keys(other).length === 1 && other.hasOwnProperty('ref'), `Material-UI: unsupported properties received ${Object.keys(other).join(', ')} by \`<Hidden />\`.`);
process.env.NODE_ENV !== "production" ? warning(_Object$keys(other).length === 0 || _Object$keys(other).length === 1 && other.hasOwnProperty('ref'), `Material-UI: unsupported properties received ${_Object$keys(other).join(', ')} by \`<Hidden />\`.`) : void 0;
const className = [];
const classNames = [];
if (className) {
classNames.push(className);
}
for (let i = 0; i < breakpointKeys.length; i += 1) {
const breakpoint = breakpointKeys[i];
@@ -63,22 +63,89 @@ function HiddenCss(props) {
const breakpointDown = props[`${breakpoint}Down`];
if (breakpointUp) {
className.push(classes[`${breakpoint}Up`]);
classNames.push(classes[`${breakpoint}Up`]);
}
if (breakpointDown) {
className.push(classes[`${breakpoint}Down`]);
classNames.push(classes[`${breakpoint}Down`]);
}
}
if (only) {
className.push(classes[`only${capitalizeFirstLetter(only)}`]);
const onlyBreakpoints = Array.isArray(only) ? only : [only];
onlyBreakpoints.forEach(breakpoint => {
classNames.push(classes[`only${capitalize(breakpoint)}`]);
});
}
return React.createElement(
'span',
{ className: className },
'div',
{ className: classNames.join(' ') },
children
);
}
HiddenCss.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Specify which implementation to use. 'js' is the default, 'css' works better for server
* side rendering.
*/
implementation: PropTypes.oneOf(['js', 'css']),
/**
* If true, screens this size and down will be hidden.
*/
lgDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
lgUp: PropTypes.bool,
/**
* If true, screens this size and down will be hidden.
*/
mdDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
mdUp: PropTypes.bool,
/**
* Hide the given breakpoint(s).
*/
only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
/**
* If true, screens this size and down will be hidden.
*/
smDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
smUp: PropTypes.bool,
/**
* If true, screens this size and down will be hidden.
*/
xlDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
xlUp: PropTypes.bool,
/**
* If true, screens this size and down will be hidden.
*/
xsDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
xsUp: PropTypes.bool
} : {};
export default withStyles(styles, { name: 'MuiHiddenCss' })(HiddenCss);

View File

@@ -2,17 +2,18 @@ import * as React from 'react';
import { Breakpoint } from '../styles/createBreakpoints';
export interface HiddenJsProps {
only?: Breakpoint | Array<Breakpoint>;
xsUp?: boolean;
smUp?: boolean;
mdUp?: boolean;
initialWidth?: Breakpoint;
lgDown?: boolean;
lgUp?: boolean;
mdDown?: boolean;
mdUp?: boolean;
only?: Breakpoint | Array<Breakpoint>;
smDown?: boolean;
smUp?: boolean;
xlDown?: boolean;
xlUp?: boolean;
xsDown?: boolean;
smDown?: boolean;
mdDown?: boolean;
lgDown?: boolean;
xlDown?: boolean;
xsUp?: boolean;
}
declare const HiddenJs: React.ComponentType<HiddenJsProps>;

View File

@@ -1,33 +1,13 @@
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import warning from 'warning';
import PropTypes from 'prop-types';
import { keys as breakpointKeys } from '../styles/createBreakpoints';
import withWidth, { isWidthDown, isWidthUp } from '../utils/withWidth';
import exactProp from '../utils/exactProp';
/**
* @ignore - internal component.
*/
function HiddenJs(props) {
const {
children,
only,
xsUp,
smUp,
mdUp,
lgUp,
xlUp,
xsDown,
smDown,
mdDown,
lgDown,
xlDown,
width
} = props,
other = _objectWithoutProperties(props, ['children', 'only', 'xsUp', 'smUp', 'mdUp', 'lgUp', 'xlUp', 'xsDown', 'smDown', 'mdDown', 'lgDown', 'xlDown', 'width']);
warning(Object.keys(other).length === 0, `Material-UI: unsupported properties received ${JSON.stringify(other)} by \`<Hidden />\`.`);
const { children, only, width } = props;
let visible = true;
@@ -67,4 +47,83 @@ function HiddenJs(props) {
return children;
}
HiddenJs.propTypes = {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* @ignore
*/
className: PropTypes.string,
/**
* Specify which implementation to use. 'js' is the default, 'css' works better for server
* side rendering.
*/
implementation: PropTypes.oneOf(['js', 'css']),
/**
* You can use this property when choosing the `js` implementation with server side rendering.
*
* As `window.innerWidth` is unavailable on the server,
* we default to rendering an empty componenent during the first mount.
* In some situation you might want to use an heristic to approximate
* the screen width of the client browser screen width.
*
* For instance, you could be using the user-agent or the client-hints.
* http://caniuse.com/#search=client%20hint
*/
initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
/**
* If true, screens this size and down will be hidden.
*/
lgDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
lgUp: PropTypes.bool,
/**
* If true, screens this size and down will be hidden.
*/
mdDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
mdUp: PropTypes.bool,
/**
* Hide the given breakpoint(s).
*/
only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']))]),
/**
* If true, screens this size and down will be hidden.
*/
smDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
smUp: PropTypes.bool,
/**
* @ignore
* width prop provided by withWidth decorator.
*/
width: PropTypes.string.isRequired,
/**
* If true, screens this size and down will be hidden.
*/
xlDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
xlUp: PropTypes.bool,
/**
* If true, screens this size and down will be hidden.
*/
xsDown: PropTypes.bool,
/**
* If true, screens this size and up will be hidden.
*/
xsUp: PropTypes.bool
};
HiddenJs.propTypes = exactProp(HiddenJs.propTypes, 'HiddenJs');
export default withWidth()(HiddenJs);

View File

@@ -1,4 +1,2 @@
export { default } from './Hidden';
export * from './Hidden';
export { default as HiddenJs } from './HiddenJs';
export * from './HiddenJs';

View File

@@ -1,2 +1 @@
export { default } from './Hidden';
export { default as HiddenJs } from './HiddenJs';
export { default } from './Hidden';

View File

@@ -1,22 +1,20 @@
import * as React from 'react';
import { StandardProps, PropTypes } from '..';
export interface IconProps extends StandardProps<
React.HTMLAttributes<HTMLSpanElement>,
IconClassKey
> {
color?: PropTypes.Color | 'action' | 'contrast' | 'disabled' | 'error';
export interface IconProps
extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, IconClassKey> {
color?: PropTypes.Color | 'action' | 'disabled' | 'error';
fontSize?: boolean;
}
export type IconClassKey =
| 'root'
| 'colorAccent'
| 'colorSecondary'
| 'colorAction'
| 'colorContrast'
| 'colorDisabled'
| 'colorError'
| 'colorPrimary'
;
| 'fontSize';
declare const Icon: React.ComponentType<IconProps>;

View File

@@ -1,43 +1,43 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
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 => ({
root: {
userSelect: 'none'
},
colorAccent: {
color: theme.palette.secondary.A200
colorPrimary: {
color: theme.palette.primary.main
},
colorSecondary: {
color: theme.palette.secondary.main
},
colorAction: {
color: theme.palette.action.active
},
colorContrast: {
color: theme.palette.getContrastText(theme.palette.primary[500])
},
colorDisabled: {
color: theme.palette.action.disabled
},
colorError: {
color: theme.palette.error[500]
color: theme.palette.error.main
},
colorPrimary: {
color: theme.palette.primary[500]
fontSize: {
width: '1em',
height: '1em'
}
});
function Icon(props) {
const { children, classes, className: classNameProp, color } = props,
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'color']);
const { children, classes, className: classNameProp, color, fontSize } = props,
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'color', 'fontSize']);
const className = classNames('material-icons', classes.root, {
[classes[`color${capitalizeFirstLetter(color)}`]]: color !== 'inherit'
[classes[`color${capitalize(color)}`]]: color !== 'inherit',
[classes.fontSize]: fontSize
}, classNameProp);
return React.createElement(
@@ -47,8 +47,32 @@ function Icon(props) {
);
}
Icon.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The name of the icon font ligature.
*/
children: PropTypes.node,
/**
* 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', 'secondary', 'action', 'disabled', 'error', 'primary']),
/**
* If `true`, the icon size will be determined by the font-size.
*/
fontSize: PropTypes.bool
} : {};
Icon.defaultProps = {
color: 'inherit'
color: 'inherit',
fontSize: false
};
Icon.muiName = 'Icon';

View File

@@ -2,26 +2,18 @@ import * as React from 'react';
import { StandardProps, PropTypes } from '..';
import { ButtonBaseProps, ButtonBaseClassKey } from '../ButtonBase';
export interface IconButtonProps extends StandardProps<
ButtonBaseProps,
IconButtonClassKey
> {
color?: PropTypes.Color | 'contrast';
export interface IconButtonProps extends StandardProps<ButtonBaseProps, IconButtonClassKey> {
color?: PropTypes.Color;
disabled?: boolean;
disableRipple?: boolean;
rootRef?: React.Ref<any>;
}
export type IconButtonClassKey =
| ButtonBaseClassKey
| 'colorAccent'
| 'colorContrast'
| 'colorPrimary'
| 'colorSecondary'
| 'colorInherit'
| 'label'
| 'icon'
| 'keyboardFocused'
;
| 'label';
declare const IconButton: React.ComponentType<IconButtonProps>;

View File

@@ -1,19 +1,15 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// weak
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
// @inheritedComponent ButtonBase
import React 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 '../SvgIcon'; // Ensure CSS specificity
import { capitalize } from '../utils/helpers';
import { isMuiElement } from '../utils/reactHelpers';
import '../SvgIcon'; // Ensure CSS specificity
export const styles = theme => ({
root: {
@@ -29,18 +25,15 @@ export const styles = theme => ({
duration: theme.transitions.duration.shortest
})
},
colorAccent: {
color: theme.palette.secondary.A200
},
colorContrast: {
color: theme.palette.getContrastText(theme.palette.primary[500])
},
colorPrimary: {
color: theme.palette.primary[500]
},
colorInherit: {
color: 'inherit'
},
colorPrimary: {
color: theme.palette.primary.main
},
colorSecondary: {
color: theme.palette.secondary.main
},
disabled: {
color: theme.palette.action.disabled
},
@@ -49,13 +42,6 @@ export const styles = theme => ({
display: 'flex',
alignItems: 'inherit',
justifyContent: 'inherit'
},
icon: {
width: '1em',
height: '1em'
},
keyboardFocused: {
backgroundColor: theme.palette.text.divider
}
});
@@ -64,43 +50,60 @@ export const styles = theme => ({
* regarding the available icon options.
*/
function IconButton(props) {
const { buttonRef, children, classes, className, color, disabled, rootRef } = props,
other = _objectWithoutProperties(props, ['buttonRef', 'children', 'classes', 'className', 'color', 'disabled', 'rootRef']);
const { children, classes, className, color, disabled } = props,
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'color', 'disabled']);
return React.createElement(
ButtonBase,
_extends({
className: classNames(classes.root, {
[classes[`color${capitalizeFirstLetter(color)}`]]: color !== 'default',
[classes[`color${capitalize(color)}`]]: color !== 'default',
[classes.disabled]: disabled
}, className),
centerRipple: true,
keyboardFocusedClassName: classes.keyboardFocused,
focusRipple: true,
disabled: disabled
}, other, {
rootRef: buttonRef,
ref: rootRef
}),
}, other),
React.createElement(
'span',
{ className: classes.label },
typeof children === 'string' ? React.createElement(
Icon,
{ className: classes.icon },
children
) : React.Children.map(children, child => {
React.Children.map(children, child => {
if (isMuiElement(child, ['Icon', 'SvgIcon'])) {
return React.cloneElement(child, {
className: classNames(classes.icon, child.props.className)
});
return React.cloneElement(child, { fontSize: true });
}
return child;
})
)
);
}
IconButton.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The icon element.
*/
children: PropTypes.node,
/**
* 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(['default', 'inherit', 'primary', 'secondary']),
/**
* If `true`, the button will be disabled.
*/
disabled: PropTypes.bool,
/**
* If `true`, the ripple will be disabled.
*/
disableRipple: PropTypes.bool
} : {};
IconButton.defaultProps = {
color: 'default',
disabled: false,

View File

@@ -1,14 +1,14 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface InputProps extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
InputClassKey,
'onChange' | 'onKeyUp' | 'onKeyDown' | 'defaultValue'
> {
export interface InputProps
extends StandardProps<
React.HTMLAttributes<HTMLDivElement>,
InputClassKey,
'onChange' | 'onKeyUp' | 'onKeyDown' | 'defaultValue'
> {
autoComplete?: string;
autoFocus?: boolean;
inputComponent?: React.ReactNode;
defaultValue?: string | number;
disabled?: boolean;
disableUnderline?: boolean;
@@ -16,6 +16,7 @@ export interface InputProps extends StandardProps<
error?: boolean;
fullWidth?: boolean;
id?: string;
inputComponent?: React.ReactType<InputProps>;
inputProps?:
| React.TextareaHTMLAttributes<HTMLTextAreaElement>
| React.InputHTMLAttributes<HTMLInputElement>;
@@ -28,7 +29,7 @@ export interface InputProps extends StandardProps<
rowsMax?: string | number;
startAdornment?: React.ReactNode;
type?: string;
value?: string | number;
value?: Array<string | number> | string | number;
onClean?: () => void;
onDirty?: () => void;
/**
@@ -59,8 +60,7 @@ export type InputClassKey =
| 'inputSingleline'
| 'inputSearch'
| 'inputMultiline'
| 'fullWidth'
;
| 'fullWidth';
declare const Input: React.ComponentType<InputProps>;

View File

@@ -1,15 +1,9 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
// weak
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { isMuiComponent } from '../utils/reactHelpers';
import Textarea from './Textarea';
// Supports determination of isControlled().
@@ -19,7 +13,7 @@ import Textarea from './Textarea';
// @param value
// @returns {boolean} true if string (including '') or number (including zero)
export function hasValue(value) {
return value !== undefined && value !== null && !(Array.isArray(value) && value.length === 0);
return value != null && !(Array.isArray(value) && value.length === 0);
}
// Determine if field is dirty (a.k.a. filled).
@@ -45,30 +39,31 @@ export function isAdornedStart(obj) {
}
export const styles = theme => {
const light = theme.palette.type === 'light';
const placeholder = {
color: 'currentColor',
opacity: theme.palette.type === 'light' ? 0.42 : 0.5,
opacity: light ? 0.42 : 0.5,
transition: theme.transitions.create('opacity', {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.ease
duration: theme.transitions.duration.shorter
})
};
const placeholderHidden = {
opacity: 0
};
const placeholderVisible = {
opacity: theme.palette.type === 'light' ? 0.42 : 0.5
opacity: light ? 0.42 : 0.5
};
const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
return {
root: {
// Mimics the default input display property used by browsers for an input.
display: 'inline-flex',
alignItems: 'baseline',
position: 'relative',
fontFamily: theme.typography.fontFamily,
color: theme.palette.input.inputText,
fontSize: theme.typography.pxToRem(16)
color: light ? 'rgba(0, 0, 0, 0.87)' : theme.palette.common.white,
fontSize: theme.typography.pxToRem(16),
lineHeight: '1.1875em' // Reset (19px), match the native input line-height
},
formControl: {
'label + &': {
@@ -77,7 +72,7 @@ export const styles = theme => {
},
inkbar: {
'&:after': {
backgroundColor: theme.palette.primary[theme.palette.type === 'light' ? 'A700' : 'A200'],
backgroundColor: theme.palette.primary[light ? 'dark' : 'light'],
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -98,21 +93,61 @@ export const styles = theme => {
},
error: {
'&:after': {
backgroundColor: theme.palette.error.A400,
backgroundColor: theme.palette.error.main,
transform: 'scaleX(1)' // error is always underlined in red
}
},
focused: {},
disabled: {
color: theme.palette.text.disabled
},
underline: {
'&:before': {
backgroundColor: bottomLineColor,
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
content: '""',
height: 1,
position: 'absolute',
right: 0,
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shorter
}),
pointerEvents: 'none' // Transparent to the hover style.
},
'&:hover:not($disabled):before': {
backgroundColor: theme.palette.text.primary,
height: 2
},
'&$disabled:before': {
background: 'transparent',
backgroundImage: `linear-gradient(to right, ${bottomLineColor} 33%, transparent 0%)`,
backgroundPosition: 'left top',
backgroundRepeat: 'repeat-x',
backgroundSize: '5px 1px'
}
},
multiline: {
padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`
},
fullWidth: {
width: '100%'
},
input: {
font: 'inherit',
color: 'currentColor',
// slight alteration to spec spacing to match visual spec result
padding: `${theme.spacing.unit - 1}px 0 ${theme.spacing.unit + 1}px`,
padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
border: 0,
boxSizing: 'content-box',
verticalAlign: 'middle',
background: 'none',
margin: 0, // Reset for Safari
// Remove grey highlight
WebkitTapHighlightColor: 'transparent',
display: 'block',
// Make the flex item shrink with Firefox
minWidth: 0,
width: '100%',
'&::-webkit-input-placeholder': placeholder,
'&::-moz-placeholder': placeholder, // Firefox 19+
@@ -127,7 +162,7 @@ export const styles = theme => {
},
'&::-webkit-search-decoration': {
// Remove the padding when type=search.
appearance: 'none'
'-webkit-appearance': 'none'
},
// Show and hide the placeholder logic
'label[data-shrink=false] + $formControl &': {
@@ -142,62 +177,53 @@ export const styles = theme => {
}
},
inputDense: {
paddingTop: theme.spacing.unit / 2
},
disabled: {
color: theme.palette.text.disabled
},
focused: {},
underline: {
'&:before': {
backgroundColor: theme.palette.input.bottomLine,
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
content: '""',
height: 1,
position: 'absolute',
right: 0,
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.ease
}),
pointerEvents: 'none' // Transparent to the hover style.
},
'&:hover:not($disabled):before': {
backgroundColor: theme.palette.text.primary,
height: 2
},
'&$disabled:before': {
background: 'transparent',
backgroundImage: `linear-gradient(to right, ${theme.palette.input.bottomLine} 33%, transparent 0%)`,
backgroundPosition: 'left top',
backgroundRepeat: 'repeat-x',
backgroundSize: '5px 1px'
}
},
multiline: {
padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`
paddingTop: theme.spacing.unit / 2 - 1
},
inputDisabled: {
opacity: 1 // Reset iOS opacity
},
inputSingleline: {
height: '1em'
},
inputSearch: {
appearance: 'textfield' // Improve type search style.
inputType: {
// type="date" or type="time", etc. have specific styles we need to reset.
height: '1.1875em' // Reset (19px), match the native input line-height
},
inputMultiline: {
resize: 'none',
padding: 0
},
fullWidth: {
width: '100%'
inputSearch: {
// Improve type search style.
'-moz-appearance': 'textfield',
'-webkit-appearance': 'textfield'
}
};
};
function formControlState(props, context) {
let disabled = props.disabled;
let error = props.error;
let margin = props.margin;
if (context && context.muiFormControl) {
if (typeof disabled === 'undefined') {
disabled = context.muiFormControl.disabled;
}
if (typeof error === 'undefined') {
error = context.muiFormControl.error;
}
if (typeof margin === 'undefined') {
margin = context.muiFormControl.margin;
}
}
return {
disabled,
error,
margin
};
}
class Input extends React.Component {
constructor(...args) {
var _temp;
@@ -205,6 +231,13 @@ class Input extends React.Component {
return _temp = super(...args), this.state = {
focused: false
}, this.input = null, this.handleFocus = event => {
// Fix an bug with IE11 where the focus/blur events are triggered
// while the input is disabled.
if (formControlState(this.props, this.context).disabled) {
event.stopPropagation();
return;
}
this.setState({ focused: true });
if (this.props.onFocus) {
this.props.onFocus(event);
@@ -215,7 +248,7 @@ class Input extends React.Component {
this.props.onBlur(event);
}
}, this.handleChange = event => {
if (!this.isControlled()) {
if (!this.isControlled) {
this.checkDirty(this.input);
}
@@ -225,41 +258,54 @@ class Input extends React.Component {
}
}, this.handleRefInput = node => {
this.input = node;
if (this.props.inputRef) {
this.props.inputRef(node);
} else if (this.props.inputProps && this.props.inputProps.ref) {
this.props.inputProps.ref(node);
}
}, _temp;
}
getChildContext() {
// We are consuming the parent muiFormControl context.
// We don't want a child to consume it a second time.
return {
muiFormControl: null
};
}
componentWillMount() {
if (this.isControlled()) {
this.isControlled = this.props.value != null;
if (this.isControlled) {
this.checkDirty(this.props);
}
}
componentDidMount() {
if (!this.isControlled()) {
if (!this.isControlled) {
this.checkDirty(this.input);
}
}
componentWillReceiveProps(nextProps) {
componentWillReceiveProps(nextProps, nextContext) {
// The blur won't fire when the disabled state is set on a focused input.
// We need to book keep the focused state manually.
if (!this.props.disabled && nextProps.disabled) {
if (!formControlState(this.props, this.context).disabled && formControlState(nextProps, nextContext).disabled) {
this.setState({
focused: false
});
}
}
componentWillUpdate(nextProps) {
if (this.isControlled(nextProps)) {
componentWillUpdate(nextProps, nextState, nextContext) {
if (this.isControlled) {
this.checkDirty(nextProps);
} // else performed in the onChange
// Book keep the focused state.
if (!this.props.disabled && nextProps.disabled) {
if (!formControlState(this.props, this.context).disabled && formControlState(nextProps, nextContext).disabled) {
const { muiFormControl } = this.context;
if (muiFormControl && muiFormControl.onBlur) {
muiFormControl.onBlur();
@@ -270,14 +316,6 @@ class Input extends React.Component {
// Holds the input reference
// A controlled input accepts its current value as a prop.
//
// @see https://facebook.github.io/react/docs/forms.html#controlled-components
// @returns {boolean} true if string (including '') or number (including zero)
isControlled(props = this.props) {
return hasValue(props.value);
}
checkDirty(obj) {
const { muiFormControl } = this.context;
@@ -318,44 +356,27 @@ class Input extends React.Component {
inputRef,
margin: marginProp,
multiline,
name,
onBlur,
onFocus,
onChange,
onClean,
onDirty,
onFocus,
onKeyDown,
onKeyUp,
placeholder,
name,
readOnly,
rows,
rowsMax,
startAdornment,
type,
// $FlowFixMe
value
} = _props,
inputPropsProp = _objectWithoutProperties(_props.inputProps, ['className']),
other = _objectWithoutProperties(_props, ['autoComplete', 'autoFocus', 'classes', 'className', 'defaultValue', 'disabled', 'disableUnderline', 'endAdornment', 'error', 'fullWidth', 'id', 'inputComponent', 'inputProps', 'inputRef', 'margin', 'multiline', 'onBlur', 'onFocus', 'onChange', 'onClean', 'onDirty', 'onKeyDown', 'onKeyUp', 'placeholder', 'name', 'readOnly', 'rows', 'rowsMax', 'startAdornment', 'type', 'value']);
other = _objectWithoutProperties(_props, ['autoComplete', 'autoFocus', 'classes', 'className', 'defaultValue', 'disabled', 'disableUnderline', 'endAdornment', 'error', 'fullWidth', 'id', 'inputComponent', 'inputProps', 'inputRef', 'margin', 'multiline', 'name', 'onBlur', 'onChange', 'onClean', 'onDirty', 'onFocus', 'onKeyDown', 'onKeyUp', 'placeholder', 'readOnly', 'rows', 'rowsMax', 'startAdornment', 'type', 'value']);
const { muiFormControl } = this.context;
let disabled = disabledProp;
let error = errorProp;
let margin = marginProp;
if (muiFormControl) {
if (typeof disabled === 'undefined') {
disabled = muiFormControl.disabled;
}
if (typeof error === 'undefined') {
error = muiFormControl.error;
}
if (typeof margin === 'undefined') {
margin = muiFormControl.margin;
}
}
const { disabled, error, margin } = formControlState(this.props, this.context);
const className = classNames(classes.root, {
[classes.disabled]: disabled,
@@ -370,29 +391,28 @@ class Input extends React.Component {
const inputClassName = classNames(classes.input, {
[classes.inputDisabled]: disabled,
[classes.inputSingleline]: !multiline,
[classes.inputSearch]: type === 'search',
[classes.inputType]: type !== 'text',
[classes.inputMultiline]: multiline,
[classes.inputSearch]: type === 'search',
[classes.inputDense]: margin === 'dense'
}, inputPropsClassName);
const required = muiFormControl && muiFormControl.required === true;
let InputComponent = 'input';
let inputProps = _extends({
let inputProps = _extends({}, inputPropsProp, {
ref: this.handleRefInput
}, inputPropsProp);
});
if (inputComponent) {
InputComponent = inputComponent;
if (isMuiComponent(InputComponent, ['SelectInput'])) {
inputProps = _extends({
selectRef: this.handleRefInput
}, inputProps, {
ref: null
});
}
inputProps = _extends({
// Rename ref to inputRef as we don't know the
// provided `inputComponent` structure.
inputRef: this.handleRefInput
}, inputProps, {
ref: null
});
} else if (multiline) {
if (rows && !rowsMax) {
InputComponent = 'textarea';
@@ -427,22 +447,165 @@ class Input extends React.Component {
placeholder: placeholder,
type: type,
readOnly: readOnly,
rows: rows
rows: rows,
'aria-required': required,
'aria-invalid': error
}, inputProps)),
endAdornment
);
}
}
Input.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* This property helps users to fill forms faster, especially on mobile devices.
* The name can be confusing, as it's more like an autofill.
* You can learn more about it here:
* https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
*/
autoComplete: PropTypes.string,
/**
* If `true`, the input will be focused during the first mount.
*/
autoFocus: PropTypes.bool,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* The CSS class name of the wrapper element.
*/
className: PropTypes.string,
/**
* The default input value, useful when not controlling the component.
*/
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* If `true`, the input will be disabled.
*/
disabled: PropTypes.bool,
/**
* If `true`, the input will not have an underline.
*/
disableUnderline: PropTypes.bool,
/**
* End `InputAdornment` for this component.
*/
endAdornment: PropTypes.node,
/**
* If `true`, the input will indicate an error. This is normally obtained via context from
* FormControl.
*/
error: PropTypes.bool,
/**
* If `true`, the input will take up the full width of its container.
*/
fullWidth: PropTypes.bool,
/**
* The id of the `input` element.
*/
id: PropTypes.string,
/**
* The component used for the native input.
* Either a string to use a DOM element or a component.
*/
inputComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* Properties applied to the `input` element.
*/
inputProps: PropTypes.object,
/**
* Use that property to pass a ref callback to the native input component.
*/
inputRef: PropTypes.func,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin: PropTypes.oneOf(['dense', 'none']),
/**
* If `true`, a textarea element will be rendered.
*/
multiline: PropTypes.bool,
/**
* Name attribute of the `input` element.
*/
name: PropTypes.string,
/**
* @ignore
*/
onBlur: PropTypes.func,
/**
* Callback fired when the value is changed.
*
* @param {object} event The event source of the callback
*/
onChange: PropTypes.func,
/**
* TODO
*/
onClean: PropTypes.func,
/**
* TODO
*/
onDirty: PropTypes.func,
/**
* @ignore
*/
onFocus: PropTypes.func,
/**
* @ignore
*/
onKeyDown: PropTypes.func,
/**
* @ignore
*/
onKeyUp: PropTypes.func,
/**
* The short hint displayed in the input before the user enters a value.
*/
placeholder: PropTypes.string,
/**
* @ignore
*/
readOnly: PropTypes.bool,
/**
* Number of rows to display when multiline option is set to true.
*/
rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Maximum number of rows to display when multiline option is set to true.
*/
rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Start `InputAdornment` for this component.
*/
startAdornment: PropTypes.node,
/**
* Type of the input element. It should be a valid HTML5 input type.
*/
type: PropTypes.string,
/**
* The input value, required for a controlled component.
*/
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))])
} : {};
Input.muiName = 'Input';
Input.defaultProps = {
disableUnderline: false,
fullWidth: false,
multiline: false,
type: 'text'
};
Input.contextTypes = {
muiFormControl: PropTypes.object
};
Input.childContextTypes = {
muiFormControl: PropTypes.object
};
export default withStyles(styles, { name: 'MuiInput' })(Input);

View File

@@ -2,16 +2,12 @@ import * as React from 'react';
import { StandardProps } from '..';
export interface InputAdornmentProps extends StandardProps<{}, InputAdornmentClassKey> {
component?: React.ReactType;
component?: React.ReactType<InputAdornmentProps>;
disableTypography?: boolean;
position: 'start' | 'end';
}
export type InputAdornmentClassKey =
| 'root'
| 'positionStart'
| 'positionEnd'
;
export type InputAdornmentClassKey = 'root' | 'positionStart' | 'positionEnd';
declare const InputAdornment: React.ComponentType<InputAdornmentProps>;

View File

@@ -1,18 +1,16 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Typography from '../Typography';
import withStyles from '../styles/withStyles';
export const styles = theme => ({
root: {
'label + div > &': {
marginTop: -theme.spacing.unit * 2
}
display: 'flex',
maxHeight: '2em',
alignItems: 'center'
},
positionStart: {
marginRight: theme.spacing.unit
@@ -43,12 +41,40 @@ function InputAdornment(props) {
}, other),
typeof children === 'string' && !disableTypography ? React.createElement(
Typography,
{ color: 'secondary' },
{ color: 'textSecondary' },
children
) : children
);
}
InputAdornment.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The content of the component, normally an `IconButton` or string.
*/
children: PropTypes.node.isRequired,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
/**
* If children is a string then disable wrapping in a Typography component.
*/
disableTypography: PropTypes.bool,
/**
* The position this adornment should appear relative to the `Input`.
*/
position: PropTypes.oneOf(['start', 'end'])
} : {};
InputAdornment.defaultProps = {
component: 'div',
disableTypography: false

View File

@@ -1,14 +1,13 @@
import * as React from 'react';
import { StandardProps } from '..';
import { FormLabelProps, FormLabelClassKey } from '../Form/FormLabel';
import { ClassNameMap } from '../styles/withStyles';
export interface InputLabelProps extends StandardProps<
FormLabelProps,
InputLabelClassKey
> {
export interface InputLabelProps extends StandardProps<FormLabelProps, InputLabelClassKey> {
disableAnimation?: boolean;
disabled?: boolean;
error?: boolean;
FormControlClasses?: Partial<ClassNameMap<FormLabelClassKey>>;
focused?: boolean;
required?: boolean;
shrink?: boolean;
@@ -19,8 +18,7 @@ export type InputLabelClassKey =
| 'formControl'
| 'labelDense'
| 'shrink'
| 'animated'
;
| 'animated';
declare const InputLabel: React.ComponentType<InputLabelProps>;

View File

@@ -1,9 +1,8 @@
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
// @inheritedComponent FormLabel
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
@@ -11,14 +10,14 @@ import { FormLabel } from '../Form';
export const styles = theme => ({
root: {
transformOrigin: `top ${theme.direction === 'ltr' ? 'left' : 'right'}`
transformOrigin: 'top left'
},
formControl: {
position: 'absolute',
left: 0,
top: 0,
// slight alteration to spec spacing to match visual spec result
transform: `translate(0, ${theme.spacing.unit * 3 - 1}px) scale(1)`
transform: `translate(0, ${theme.spacing.unit * 3}px) scale(1)`
},
labelDense: {
// Compensation for the `Input.inputDense` style.
@@ -26,7 +25,7 @@ export const styles = theme => ({
},
shrink: {
transform: 'translate(0, 1.5px) scale(0.75)',
transformOrigin: `top ${theme.direction === 'ltr' ? 'left' : 'right'}`
transformOrigin: 'top left'
},
animated: {
transition: theme.transitions.create('transform', {
@@ -35,22 +34,22 @@ export const styles = theme => ({
})
},
disabled: {
color: theme.palette.input.disabled
color: theme.palette.text.disabled
}
});
function InputLabel(props, context) {
const {
disabled,
disableAnimation,
children,
classes,
className: classNameProp,
disableAnimation,
disabled,
FormControlClasses,
shrink: shrinkProp,
margin: marginProp
margin: marginProp,
shrink: shrinkProp
} = props,
other = _objectWithoutProperties(props, ['disabled', 'disableAnimation', 'children', 'classes', 'className', 'FormControlClasses', 'shrink', 'margin']);
other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'disableAnimation', 'disabled', 'FormControlClasses', 'margin', 'shrink']);
const { muiFormControl } = context;
let shrink = shrinkProp;
@@ -79,6 +78,54 @@ function InputLabel(props, context) {
);
}
InputLabel.propTypes = process.env.NODE_ENV !== "production" ? {
/**
* The contents of the `InputLabel`.
*/
children: PropTypes.node,
/**
* Useful to extend the style applied to components.
*/
classes: PropTypes.object.isRequired,
/**
* @ignore
*/
className: PropTypes.string,
/**
* If `true`, the transition animation is disabled.
*/
disableAnimation: PropTypes.bool,
/**
* If `true`, apply disabled class.
*/
disabled: PropTypes.bool,
/**
* If `true`, the label will be displayed in an error state.
*/
error: PropTypes.bool,
/**
* If `true`, the input of this label is focused.
*/
focused: PropTypes.bool,
/**
* `classes` property applied to the `FormControl` element.
*/
FormControlClasses: PropTypes.object,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin: PropTypes.oneOf(['dense']),
/**
* if `true`, the label will indicate that the input is required.
*/
required: PropTypes.bool,
/**
* If `true`, the label is shrunk.
*/
shrink: PropTypes.bool
} : {};
InputLabel.defaultProps = {
disabled: false,
disableAnimation: false

View File

@@ -1,11 +1,12 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface TextareaProps extends StandardProps<
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
TextareaClassKey,
'rows'
> {
export interface TextareaProps
extends StandardProps<
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
TextareaClassKey,
'rows'
> {
defaultValue?: any;
disabled?: boolean;
rows?: string | number;
@@ -14,11 +15,7 @@ export interface TextareaProps extends StandardProps<
value?: string;
}
export type TextareaClassKey =
| 'root'
| 'shadow'
| 'textarea'
;
export type TextareaClassKey = 'root' | 'shadow' | 'textarea';
declare const Textarea: React.ComponentType<TextareaProps>;

Some files were not shown because too many files have changed in this diff Show More