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,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

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
});
exports.styles = undefined;
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
@@ -17,12 +13,14 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref; // weak
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
@@ -33,10 +31,6 @@ var _withStyles2 = _interopRequireDefault(_withStyles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
var babelPluginFlowReactPropTypes_proptype_ElementType = require('react').babelPluginFlowReactPropTypes_proptype_ElementType || require('prop-types').any;
var styles = exports.styles = {
root: {
display: 'flex',
@@ -48,68 +42,20 @@ var styles = exports.styles = {
}
};
var babelPluginFlowReactPropTypes_proptype_CellHeight = require('prop-types').oneOfType([require('prop-types').number, require('prop-types').oneOf(['auto'])]);
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* Number of px for one cell height.
* You can set `'auto'` if you want to let the children determine the height.
*/
cellHeight: require('prop-types').oneOfType([require('prop-types').number, require('prop-types').oneOf(['auto'])]),
/**
* Grid Tiles that will be in Grid List.
*/
children: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node.isRequired ? babelPluginFlowReactPropTypes_proptype_Node.isRequired : babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node).isRequired,
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* Number of columns.
*/
cols: require('prop-types').number,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
* By default we map the type to a good default headline component.
*/
component: typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType),
/**
* Number of px for the spacing between tiles.
*/
spacing: require('prop-types').number,
/**
* @ignore
*/
style: require('prop-types').object
};
function GridList(props) {
var cols = props.cols,
spacing = props.spacing,
cellHeight = props.cellHeight,
var cellHeight = props.cellHeight,
children = props.children,
classes = props.classes,
classNameProp = props.className,
ComponentProp = props.component,
cols = props.cols,
Component = props.component,
spacing = props.spacing,
style = props.style,
other = (0, _objectWithoutProperties3.default)(props, ['cols', 'spacing', 'cellHeight', 'children', 'classes', 'className', 'component', 'style']);
other = (0, _objectWithoutProperties3.default)(props, ['cellHeight', 'children', 'classes', 'className', 'cols', 'component', 'spacing', 'style']);
return _react2.default.createElement(
ComponentProp,
Component,
(0, _extends3.default)({
className: (0, _classnames2.default)(classes.root, classNameProp),
style: (0, _extends3.default)({ margin: -spacing / 2 }, style)
@@ -129,18 +75,48 @@ function GridList(props) {
);
}
GridList.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
classes: require('prop-types').object.isRequired,
cols: require('prop-types').number.isRequired,
spacing: require('prop-types').number.isRequired,
cellHeight: require('prop-types').oneOfType([require('prop-types').number, require('prop-types').oneOf(['auto'])]).isRequired,
component: typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType.isRequired ? babelPluginFlowReactPropTypes_proptype_ElementType.isRequired : babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType).isRequired
}, (0, _defineProperty3.default)(_ref, 'cellHeight', require('prop-types').oneOfType([require('prop-types').number, require('prop-types').oneOf(['auto'])])), (0, _defineProperty3.default)(_ref, 'children', typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node.isRequired ? babelPluginFlowReactPropTypes_proptype_Node.isRequired : babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node).isRequired), (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'cols', require('prop-types').number), (0, _defineProperty3.default)(_ref, 'component', typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType)), (0, _defineProperty3.default)(_ref, 'spacing', require('prop-types').number), (0, _defineProperty3.default)(_ref, 'style', require('prop-types').object), _ref) : {};
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: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf(['auto'])]),
/**
* Grid Tiles that will be in Grid List.
*/
children: _propTypes2.default.node.isRequired,
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* Number of columns.
*/
cols: _propTypes2.default.number,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
/**
* Number of px for the spacing between tiles.
*/
spacing: _propTypes2.default.number,
/**
* @ignore
*/
style: _propTypes2.default.object
} : {};
GridList.defaultProps = {
cols: 2,
spacing: 4,
cellHeight: 180,
component: 'ul'
cols: 2,
component: 'ul',
spacing: 4
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiGridList' })(GridList);

View File

@@ -1,7 +1,5 @@
// @flow weak
import React from 'react';
import type { ElementType, Node } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
@@ -16,69 +14,21 @@ export const styles = {
},
};
export type CellHeight = number | 'auto';
type ProvidedProps = {
classes: Object,
cols: number,
spacing: number,
cellHeight: CellHeight,
component: ElementType,
};
export type Props = {
/**
* Number of px for one cell height.
* You can set `'auto'` if you want to let the children determine the height.
*/
cellHeight?: CellHeight,
/**
* Grid Tiles that will be in Grid List.
*/
children: Node,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* Number of columns.
*/
cols?: number,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
* By default we map the type to a good default headline component.
*/
component?: ElementType,
/**
* Number of px for the spacing between tiles.
*/
spacing?: number,
/**
* @ignore
*/
style?: Object,
};
function GridList(props: ProvidedProps & Props) {
function GridList(props) {
const {
cols,
spacing,
cellHeight,
children,
classes,
className: classNameProp,
component: ComponentProp,
cols,
component: Component,
spacing,
style,
...other
} = props;
return (
<ComponentProp
<Component
className={classNames(classes.root, classNameProp)}
style={{ margin: -spacing / 2, ...style }}
{...other}
@@ -98,15 +48,52 @@ function GridList(props: ProvidedProps & Props) {
),
});
})}
</ComponentProp>
</Component>
);
}
GridList.propTypes = {
/**
* 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,
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

@@ -13,6 +13,10 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -37,6 +41,10 @@ var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
@@ -55,10 +63,6 @@ var _withStyles2 = _interopRequireDefault(_withStyles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any; // weak
var babelPluginFlowReactPropTypes_proptype_ElementType = require('react').babelPluginFlowReactPropTypes_proptype_ElementType || require('prop-types').any;
var styles = exports.styles = {
root: {
boxSizing: 'border-box',
@@ -84,41 +88,6 @@ var styles = exports.styles = {
}
};
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* 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: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* Width of the tile in number of grid cells.
*/
cols: require('prop-types').number,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: typeof babelPluginFlowReactPropTypes_proptype_ElementType === 'function' ? babelPluginFlowReactPropTypes_proptype_ElementType : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_ElementType),
/**
* Height of the tile in number of grid cells.
*/
rows: require('prop-types').number
};
var GridListTile = function (_React$Component) {
(0, _inherits3.default)(GridListTile, _React$Component);
@@ -147,11 +116,15 @@ var GridListTile = function (_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);
var _imgElement$classList, _imgElement$classList2;
(_imgElement$classList = imgElement.classList).remove.apply(_imgElement$classList, (0, _toConsumableArray3.default)(_this.props.classes.imgFullWidth.split(' ')));
(_imgElement$classList2 = imgElement.classList).add.apply(_imgElement$classList2, (0, _toConsumableArray3.default)(_this.props.classes.imgFullHeight.split(' ')));
} else {
imgElement.classList.remove(_this.props.classes.imgFullHeight);
imgElement.classList.add(_this.props.classes.imgFullWidth);
var _imgElement$classList3, _imgElement$classList4;
(_imgElement$classList3 = imgElement.classList).remove.apply(_imgElement$classList3, (0, _toConsumableArray3.default)(_this.props.classes.imgFullHeight.split(' ')));
(_imgElement$classList4 = imgElement.classList).add.apply(_imgElement$classList4, (0, _toConsumableArray3.default)(_this.props.classes.imgFullWidth.split(' ')));
}
imgElement.removeEventListener('load', _this.fit);
@@ -196,20 +169,20 @@ var GridListTile = function (_React$Component) {
classes = _props.classes,
className = _props.className,
cols = _props.cols,
ComponentProp = _props.component,
Component = _props.component,
rows = _props.rows,
other = (0, _objectWithoutProperties3.default)(_props, ['children', 'classes', 'className', 'cols', 'component', 'rows']);
return _react2.default.createElement(
ComponentProp,
Component,
(0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, className) }, other),
_react2.default.createElement(_reactEventListener2.default, { target: 'window', onResize: this.handleResize }),
_react2.default.createElement(
'div',
{ className: classes.tile },
_react2.default.Children.map(children, function (child) {
if (child.type === 'img') {
if (child && child.type === 'img') {
return _react2.default.cloneElement(child, {
key: 'img',
ref: function ref(node) {
@@ -227,9 +200,40 @@ var GridListTile = function (_React$Component) {
return GridListTile;
}(_react2.default.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: _propTypes2.default.node,
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* Width of the tile in number of grid cells.
*/
cols: _propTypes2.default.number,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
/**
* Height of the tile in number of grid cells.
*/
rows: _propTypes2.default.number
} : {};
GridListTile.defaultProps = {
cols: 1,
rows: 1,
component: 'li'
component: 'li',
rows: 1
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiGridListTile' })(GridListTile);

View File

@@ -1,7 +1,5 @@
// @flow weak
import React from 'react';
import type { ElementType, Node } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import EventListener from 'react-event-listener';
import debounce from 'lodash/debounce';
@@ -32,47 +30,7 @@ export const styles = {
},
};
type ProvidedProps = {
classes: Object,
};
export type Props = {
/**
* 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?: Node,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* Width of the tile in number of grid cells.
*/
cols?: number,
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
*/
component?: ElementType,
/**
* Height of the tile in number of grid cells.
*/
rows?: number,
};
class GridListTile extends React.Component<ProvidedProps & Props> {
static defaultProps = {
cols: 1,
rows: 1,
component: 'li',
};
class GridListTile extends React.Component {
componentDidMount() {
this.ensureImageCover();
}
@@ -106,11 +64,11 @@ class GridListTile extends React.Component<ProvidedProps & Props> {
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);
@@ -129,23 +87,14 @@ class GridListTile extends React.Component<ProvidedProps & Props> {
}
render() {
const {
children,
classes,
className,
cols,
// $FlowFixMe - no idea why it cannot find component on intersection
component: ComponentProp,
rows,
...other
} = this.props;
const { children, classes, className, cols, component: Component, rows, ...other } = this.props;
return (
<ComponentProp className={classNames(classes.root, className)} {...other}>
<Component className={classNames(classes.root, className)} {...other}>
<EventListener target="window" onResize={this.handleResize} />
<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 => {
@@ -157,9 +106,45 @@ class GridListTile extends React.Component<ProvidedProps & Props> {
return child;
})}
</div>
</ComponentProp>
</Component>
);
}
}
GridListTile.propTypes = {
/**
* 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,
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

@@ -17,12 +17,14 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref; // weak
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
@@ -33,8 +35,6 @@ var _withStyles2 = _interopRequireDefault(_withStyles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var babelPluginFlowReactPropTypes_proptype_Node = require('react').babelPluginFlowReactPropTypes_proptype_Node || require('prop-types').any;
var styles = exports.styles = function styles(theme) {
return {
root: {
@@ -60,7 +60,7 @@ var styles = exports.styles = function styles(theme) {
flexGrow: 1,
marginLeft: theme.mixins.gutters({}).paddingLeft,
marginRight: theme.mixins.gutters({}).paddingRight,
color: 'white',
color: theme.palette.common.white,
overflow: 'hidden'
},
titleWrapActionLeft: {
@@ -95,49 +95,6 @@ var styles = exports.styles = function styles(theme) {
};
};
var babelPluginFlowReactPropTypes_proptype_TitlePosition = require('prop-types').oneOf(['top', 'bottom']);
var babelPluginFlowReactPropTypes_proptype_ActionPosition = require('prop-types').oneOf(['left', 'right']);
var babelPluginFlowReactPropTypes_proptype_Props = {
/**
* An IconButton element to be used as secondary action target
* (primary action target is the tile itself).
*/
actionIcon: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* Position of secondary action IconButton.
*/
actionPosition: require('prop-types').oneOf(['left', 'right']),
/**
* Useful to extend the style applied to components.
*/
classes: require('prop-types').object,
/**
* @ignore
*/
className: require('prop-types').string,
/**
* String or element serving as subtitle (support text).
*/
subtitle: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node),
/**
* Title to be displayed on tile.
*/
title: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node.isRequired ? babelPluginFlowReactPropTypes_proptype_Node.isRequired : babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node).isRequired,
/**
* Position of the title bar.
*/
titlePosition: require('prop-types').oneOf(['top', 'bottom'])
};
function GridListTileBar(props) {
var _classNames, _classNames2;
@@ -182,12 +139,38 @@ function GridListTileBar(props) {
);
}
GridListTileBar.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
actionPosition: require('prop-types').oneOf(['left', 'right']).isRequired,
classes: require('prop-types').object.isRequired,
titlePosition: require('prop-types').oneOf(['top', 'bottom']).isRequired,
actionIcon: typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)
}, (0, _defineProperty3.default)(_ref, 'actionPosition', require('prop-types').oneOf(['left', 'right'])), (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'subtitle', typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node)), (0, _defineProperty3.default)(_ref, 'title', typeof babelPluginFlowReactPropTypes_proptype_Node === 'function' ? babelPluginFlowReactPropTypes_proptype_Node.isRequired ? babelPluginFlowReactPropTypes_proptype_Node.isRequired : babelPluginFlowReactPropTypes_proptype_Node : require('prop-types').shape(babelPluginFlowReactPropTypes_proptype_Node).isRequired), (0, _defineProperty3.default)(_ref, 'titlePosition', require('prop-types').oneOf(['top', 'bottom'])), _ref) : {};
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: _propTypes2.default.node,
/**
* Position of secondary action IconButton.
*/
actionPosition: _propTypes2.default.oneOf(['left', 'right']),
/**
* Useful to extend the style applied to components.
*/
classes: _propTypes2.default.object.isRequired,
/**
* @ignore
*/
className: _propTypes2.default.string,
/**
* String or element serving as subtitle (support text).
*/
subtitle: _propTypes2.default.node,
/**
* Title to be displayed on tile.
*/
title: _propTypes2.default.node,
/**
* Position of the title bar.
*/
titlePosition: _propTypes2.default.oneOf(['top', 'bottom'])
} : {};
GridListTileBar.defaultProps = {
actionPosition: 'right',
titlePosition: 'bottom'

View File

@@ -1,11 +1,9 @@
// @flow weak
import React from 'react';
import type { Node } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
export const styles = (theme: Object) => ({
export const styles = theme => ({
root: {
position: 'absolute',
left: 0,
@@ -29,7 +27,7 @@ export const styles = (theme: Object) => ({
flexGrow: 1,
marginLeft: theme.mixins.gutters({}).paddingLeft,
marginRight: theme.mixins.gutters({}).paddingRight,
color: 'white',
color: theme.palette.common.white,
overflow: 'hidden',
},
titleWrapActionLeft: {
@@ -63,48 +61,7 @@ export const styles = (theme: Object) => ({
},
});
export type TitlePosition = 'top' | 'bottom';
export type ActionPosition = 'left' | 'right';
type ProvidedProps = {
actionPosition: ActionPosition,
classes: Object,
titlePosition: TitlePosition,
};
export type Props = {
/**
* An IconButton element to be used as secondary action target
* (primary action target is the tile itself).
*/
actionIcon?: Node,
/**
* Position of secondary action IconButton.
*/
actionPosition?: ActionPosition,
/**
* Useful to extend the style applied to components.
*/
classes?: Object,
/**
* @ignore
*/
className?: string,
/**
* String or element serving as subtitle (support text).
*/
subtitle?: Node,
/**
* Title to be displayed on tile.
*/
title: Node,
/**
* Position of the title bar.
*/
titlePosition?: TitlePosition,
};
function GridListTileBar(props: ProvidedProps & Props) {
function GridListTileBar(props) {
const {
actionIcon,
actionPosition,
@@ -148,6 +105,38 @@ function GridListTileBar(props: ProvidedProps & Props) {
);
}
GridListTileBar.propTypes = {
/**
* 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

@@ -12,12 +12,6 @@ Object.defineProperty(exports, 'default', {
return _interopRequireDefault(_GridList).default;
}
});
Object.defineProperty(exports, 'GridList', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_GridList).default;
}
});
var _GridListTile = require('./GridListTile');

View File

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