Added logging, changed some directory structure

This commit is contained in:
2018-01-13 21:33:40 -05:00
parent f079a5f067
commit 8e72ffb917
73656 changed files with 35284 additions and 53718 deletions

View File

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

View File

@@ -0,0 +1,146 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref; // weak
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _withStyles = require('../styles/withStyles');
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',
flexWrap: 'wrap',
overflowY: 'auto',
listStyle: 'none',
padding: 0,
WebkitOverflowScrolling: 'touch' // Add iOS momentum scrolling.
}
};
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,
children = props.children,
classes = props.classes,
classNameProp = props.className,
ComponentProp = props.component,
style = props.style,
other = (0, _objectWithoutProperties3.default)(props, ['cols', 'spacing', 'cellHeight', 'children', 'classes', 'className', 'component', 'style']);
return _react2.default.createElement(
ComponentProp,
(0, _extends3.default)({
className: (0, _classnames2.default)(classes.root, classNameProp),
style: (0, _extends3.default)({ margin: -spacing / 2 }, style)
}, other),
_react2.default.Children.map(children, function (currentChild) {
var childCols = currentChild.props.cols || 1;
var childRows = currentChild.props.rows || 1;
return _react2.default.cloneElement(currentChild, {
style: (0, _extends3.default)({
width: 100 / cols * childCols + '%',
height: cellHeight === 'auto' ? 'auto' : cellHeight * childRows + spacing,
padding: spacing / 2
}, currentChild.props.style)
});
})
);
}
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.defaultProps = {
cols: 2,
spacing: 4,
cellHeight: 180,
component: 'ul'
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiGridList' })(GridList);

View File

@@ -0,0 +1,112 @@
// @flow weak
import React from 'react';
import type { ElementType, Node } from 'react';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
export const styles = {
root: {
display: 'flex',
flexWrap: 'wrap',
overflowY: 'auto',
listStyle: 'none',
padding: 0,
WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
},
};
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) {
const {
cols,
spacing,
cellHeight,
children,
classes,
className: classNameProp,
component: ComponentProp,
style,
...other
} = props;
return (
<ComponentProp
className={classNames(classes.root, classNameProp)}
style={{ margin: -spacing / 2, ...style }}
{...other}
>
{React.Children.map(children, currentChild => {
const childCols = currentChild.props.cols || 1;
const childRows = currentChild.props.rows || 1;
return React.cloneElement(currentChild, {
style: Object.assign(
{
width: `${100 / cols * childCols}%`,
height: cellHeight === 'auto' ? 'auto' : cellHeight * childRows + spacing,
padding: spacing / 2,
},
currentChild.props.style,
),
});
})}
</ComponentProp>
);
}
GridList.defaultProps = {
cols: 2,
spacing: 4,
cellHeight: 180,
component: 'ul',
};
export default withStyles(styles, { name: 'MuiGridList' })(GridList);

View File

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

View File

@@ -0,0 +1,235 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.styles = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _reactEventListener = require('react-event-listener');
var _reactEventListener2 = _interopRequireDefault(_reactEventListener);
var _debounce = require('lodash/debounce');
var _debounce2 = _interopRequireDefault(_debounce);
var _withStyles = require('../styles/withStyles');
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',
flexShrink: 0
},
tile: {
position: 'relative',
display: 'block', // In case it's not renderd with a div.
height: '100%',
overflow: 'hidden'
},
imgFullHeight: {
height: '100%',
transform: 'translateX(-50%)',
position: 'relative',
left: '50%'
},
imgFullWidth: {
width: '100%',
position: 'relative',
transform: 'translateY(-50%)',
top: '50%'
}
};
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);
function GridListTile() {
var _ref;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, GridListTile);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = GridListTile.__proto__ || (0, _getPrototypeOf2.default)(GridListTile)).call.apply(_ref, [this].concat(args))), _this), _this.imgElement = null, _this.handleResize = (0, _debounce2.default)(function () {
_this.fit();
}, 166), _this.fit = function () {
var imgElement = _this.imgElement;
if (!imgElement) {
return;
}
if (!imgElement.complete) {
return;
}
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);
} else {
imgElement.classList.remove(_this.props.classes.imgFullHeight);
imgElement.classList.add(_this.props.classes.imgFullWidth);
}
imgElement.removeEventListener('load', _this.fit);
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(GridListTile, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.ensureImageCover();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
this.ensureImageCover();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.handleResize.cancel();
}
}, {
key: 'ensureImageCover',
value: function ensureImageCover() {
if (!this.imgElement) {
return;
}
if (this.imgElement.complete) {
this.fit();
} else {
this.imgElement.addEventListener('load', this.fit);
}
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
children = _props.children,
classes = _props.classes,
className = _props.className,
cols = _props.cols,
ComponentProp = _props.component,
rows = _props.rows,
other = (0, _objectWithoutProperties3.default)(_props, ['children', 'classes', 'className', 'cols', 'component', 'rows']);
return _react2.default.createElement(
ComponentProp,
(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') {
return _react2.default.cloneElement(child, {
key: 'img',
ref: function ref(node) {
_this2.imgElement = node;
}
});
}
return child;
})
)
);
}
}]);
return GridListTile;
}(_react2.default.Component);
GridListTile.defaultProps = {
cols: 1,
rows: 1,
component: 'li'
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiGridListTile' })(GridListTile);

View File

@@ -0,0 +1,165 @@
// @flow weak
import React from 'react';
import type { ElementType, Node } from 'react';
import classNames from 'classnames';
import EventListener from 'react-event-listener';
import debounce from 'lodash/debounce';
import withStyles from '../styles/withStyles';
export const styles = {
root: {
boxSizing: 'border-box',
flexShrink: 0,
},
tile: {
position: 'relative',
display: 'block', // In case it's not renderd with a div.
height: '100%',
overflow: 'hidden',
},
imgFullHeight: {
height: '100%',
transform: 'translateX(-50%)',
position: 'relative',
left: '50%',
},
imgFullWidth: {
width: '100%',
position: 'relative',
transform: 'translateY(-50%)',
top: '50%',
},
};
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',
};
componentDidMount() {
this.ensureImageCover();
}
componentDidUpdate() {
this.ensureImageCover();
}
componentWillUnmount() {
this.handleResize.cancel();
}
imgElement = null;
handleResize = debounce(() => {
this.fit();
}, 166);
fit = () => {
const imgElement = this.imgElement;
if (!imgElement) {
return;
}
if (!imgElement.complete) {
return;
}
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);
} else {
imgElement.classList.remove(this.props.classes.imgFullHeight);
imgElement.classList.add(this.props.classes.imgFullWidth);
}
imgElement.removeEventListener('load', this.fit);
};
ensureImageCover() {
if (!this.imgElement) {
return;
}
if (this.imgElement.complete) {
this.fit();
} else {
this.imgElement.addEventListener('load', this.fit);
}
}
render() {
const {
children,
classes,
className,
cols,
// $FlowFixMe - no idea why it cannot find component on intersection
component: ComponentProp,
rows,
...other
} = this.props;
return (
<ComponentProp 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') {
return React.cloneElement(child, {
key: 'img',
ref: node => {
this.imgElement = node;
},
});
}
return child;
})}
</div>
</ComponentProp>
);
}
}
export default withStyles(styles, { name: 'MuiGridListTile' })(GridListTile);

View File

@@ -0,0 +1,29 @@
import * as React from 'react';
import { StandardProps } from '..';
export interface GridListTileBarProps extends StandardProps<{}, GridListTileBarClassKey>
{
actionIcon?: React.ReactNode;
actionPosition?: 'left' | 'right';
subtitle?: React.ReactNode;
title?: React.ReactNode;
titlePosition?: 'top' | 'bottom';
}
export type GridListTileBarClassKey =
| 'root'
| 'rootBottom'
| 'rootTop'
| 'rootWithSubtitle'
| 'titleWrap'
| 'titleWrapActionLeft'
| 'titleWrapActionRight'
| 'title'
| 'subtitle'
| 'actionIconPositionLeft'
| 'childImg'
;
declare const GridListTileBar: React.ComponentType<GridListTileBarProps>;
export default GridListTileBar;

View File

@@ -0,0 +1,196 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.styles = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _ref; // weak
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _withStyles = require('../styles/withStyles');
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: {
position: 'absolute',
left: 0,
right: 0,
height: 48,
background: 'rgba(0, 0, 0, 0.4)',
display: 'flex',
alignItems: 'center',
fontFamily: theme.typography.fontFamily
},
rootBottom: {
bottom: 0
},
rootTop: {
top: 0
},
rootWithSubtitle: {
height: 68
},
titleWrap: {
flexGrow: 1,
marginLeft: theme.mixins.gutters({}).paddingLeft,
marginRight: theme.mixins.gutters({}).paddingRight,
color: 'white',
overflow: 'hidden'
},
titleWrapActionLeft: {
marginLeft: 0
},
titleWrapActionRight: {
marginRight: 0
},
title: {
fontSize: theme.typography.pxToRem(16),
lineHeight: '24px',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap'
},
subtitle: {
fontSize: theme.typography.pxToRem(12),
lineHeight: 1,
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap'
},
actionIconPositionLeft: {
order: -1
},
childImg: {
height: '100%',
transform: 'translateX(-50%)',
position: 'relative',
left: '50%'
}
};
};
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;
var actionIcon = props.actionIcon,
actionPosition = props.actionPosition,
classes = props.classes,
classNameProp = props.className,
subtitle = props.subtitle,
title = props.title,
titlePosition = props.titlePosition,
other = (0, _objectWithoutProperties3.default)(props, ['actionIcon', 'actionPosition', 'classes', 'className', 'subtitle', 'title', 'titlePosition']);
var actionPos = actionIcon && actionPosition;
var className = (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.rootBottom, titlePosition === 'bottom'), (0, _defineProperty3.default)(_classNames, classes.rootTop, titlePosition === 'top'), (0, _defineProperty3.default)(_classNames, classes.rootWithSubtitle, subtitle), _classNames), classNameProp);
// Remove the margin between the title / subtitle wrapper, and the Action Icon
var titleWrapClassName = (0, _classnames2.default)(classes.titleWrap, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.titleWrapActionLeft, actionPos === 'left'), (0, _defineProperty3.default)(_classNames2, classes.titleWrapActionRight, actionPos === 'right'), _classNames2));
return _react2.default.createElement(
'div',
(0, _extends3.default)({ className: className }, other),
_react2.default.createElement(
'div',
{ className: titleWrapClassName },
_react2.default.createElement(
'div',
{ className: classes.title },
title
),
subtitle ? _react2.default.createElement(
'div',
{ className: classes.subtitle },
subtitle
) : null
),
actionIcon ? _react2.default.createElement(
'div',
{ className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.actionIconPositionLeft, actionPos === 'left')) },
actionIcon
) : null
);
}
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.defaultProps = {
actionPosition: 'right',
titlePosition: 'bottom'
};
exports.default = (0, _withStyles2.default)(styles, { name: 'MuiGridListTileBar' })(GridListTileBar);

View File

@@ -0,0 +1,156 @@
// @flow weak
import React from 'react';
import type { Node } from 'react';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
export const styles = (theme: Object) => ({
root: {
position: 'absolute',
left: 0,
right: 0,
height: 48,
background: 'rgba(0, 0, 0, 0.4)',
display: 'flex',
alignItems: 'center',
fontFamily: theme.typography.fontFamily,
},
rootBottom: {
bottom: 0,
},
rootTop: {
top: 0,
},
rootWithSubtitle: {
height: 68,
},
titleWrap: {
flexGrow: 1,
marginLeft: theme.mixins.gutters({}).paddingLeft,
marginRight: theme.mixins.gutters({}).paddingRight,
color: 'white',
overflow: 'hidden',
},
titleWrapActionLeft: {
marginLeft: 0,
},
titleWrapActionRight: {
marginRight: 0,
},
title: {
fontSize: theme.typography.pxToRem(16),
lineHeight: '24px',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
},
subtitle: {
fontSize: theme.typography.pxToRem(12),
lineHeight: 1,
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
},
actionIconPositionLeft: {
order: -1,
},
childImg: {
height: '100%',
transform: 'translateX(-50%)',
position: 'relative',
left: '50%',
},
});
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) {
const {
actionIcon,
actionPosition,
classes,
className: classNameProp,
subtitle,
title,
titlePosition,
...other
} = props;
const actionPos = actionIcon && actionPosition;
const className = classNames(
classes.root,
{
[classes.rootBottom]: titlePosition === 'bottom',
[classes.rootTop]: titlePosition === 'top',
[classes.rootWithSubtitle]: subtitle,
},
classNameProp,
);
// Remove the margin between the title / subtitle wrapper, and the Action Icon
const titleWrapClassName = classNames(classes.titleWrap, {
[classes.titleWrapActionLeft]: actionPos === 'left',
[classes.titleWrapActionRight]: actionPos === 'right',
});
return (
<div className={className} {...other}>
<div className={titleWrapClassName}>
<div className={classes.title}>{title}</div>
{subtitle ? <div className={classes.subtitle}>{subtitle}</div> : null}
</div>
{actionIcon ? (
<div className={classNames({ [classes.actionIconPositionLeft]: actionPos === 'left' })}>
{actionIcon}
</div>
) : null}
</div>
);
}
GridListTileBar.defaultProps = {
actionPosition: 'right',
titlePosition: 'bottom',
};
export default withStyles(styles, { name: 'MuiGridListTileBar' })(GridListTileBar);

View File

@@ -0,0 +1,8 @@
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';
export * from './GridListTileBar';

View File

@@ -0,0 +1,40 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _GridList = require('./GridList');
Object.defineProperty(exports, 'default', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_GridList).default;
}
});
Object.defineProperty(exports, 'GridList', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_GridList).default;
}
});
var _GridListTile = require('./GridListTile');
Object.defineProperty(exports, 'GridListTile', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_GridListTile).default;
}
});
var _GridListTileBar = require('./GridListTileBar');
Object.defineProperty(exports, 'GridListTileBar', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_GridListTileBar).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

View File

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