1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import { isFragment } from 'react-is';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import withStyles from '../styles/withStyles';
|
8 | export const styles = {
|
9 |
|
10 | root: {
|
11 | display: 'flex',
|
12 | flexWrap: 'wrap',
|
13 | overflowY: 'auto',
|
14 | listStyle: 'none',
|
15 | padding: 0,
|
16 | WebkitOverflowScrolling: 'touch'
|
17 |
|
18 | }
|
19 | };
|
20 | let warnedOnce = false;
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 | const GridList = React.forwardRef(function GridList(props, ref) {
|
29 | if (process.env.NODE_ENV !== 'production') {
|
30 | if (!warnedOnce) {
|
31 | warnedOnce = true;
|
32 | console.error(['Material-UI: The GridList component was renamed to ImageList to align with the current Material Design naming.', '', "You should use `import { ImageList } from '@material-ui/core'`", "or `import ImageList from '@material-ui/core/ImageList'`."].join('\n'));
|
33 | }
|
34 | }
|
35 |
|
36 | const {
|
37 | cellHeight = 180,
|
38 | children,
|
39 | classes,
|
40 | className,
|
41 | cols = 2,
|
42 | component: Component = 'ul',
|
43 | spacing = 4,
|
44 | style
|
45 | } = props,
|
46 | other = _objectWithoutPropertiesLoose(props, ["cellHeight", "children", "classes", "className", "cols", "component", "spacing", "style"]);
|
47 |
|
48 | return React.createElement(Component, _extends({
|
49 | className: clsx(classes.root, className),
|
50 | ref: ref,
|
51 | style: _extends({
|
52 | margin: -spacing / 2
|
53 | }, style)
|
54 | }, other), React.Children.map(children, child => {
|
55 | if (! React.isValidElement(child)) {
|
56 | return null;
|
57 | }
|
58 |
|
59 | if (process.env.NODE_ENV !== 'production') {
|
60 | if (isFragment(child)) {
|
61 | console.error(["Material-UI: The GridList component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
|
62 | }
|
63 | }
|
64 |
|
65 | const childCols = child.props.cols || 1;
|
66 | const childRows = child.props.rows || 1;
|
67 | return React.cloneElement(child, {
|
68 | style: _extends({
|
69 | width: `${100 / cols * childCols}%`,
|
70 | height: cellHeight === 'auto' ? 'auto' : cellHeight * childRows + spacing,
|
71 | padding: spacing / 2
|
72 | }, child.props.style)
|
73 | });
|
74 | }));
|
75 | });
|
76 | process.env.NODE_ENV !== "production" ? GridList.propTypes = {
|
77 | |
78 |
|
79 |
|
80 |
|
81 | cellHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
|
82 |
|
83 | |
84 |
|
85 |
|
86 | children: PropTypes.node.isRequired,
|
87 |
|
88 | |
89 |
|
90 |
|
91 |
|
92 | classes: PropTypes.object.isRequired,
|
93 |
|
94 | |
95 |
|
96 |
|
97 | className: PropTypes.string,
|
98 |
|
99 | |
100 |
|
101 |
|
102 | cols: PropTypes.number,
|
103 |
|
104 | |
105 |
|
106 |
|
107 |
|
108 | component: PropTypes
|
109 |
|
110 | .elementType,
|
111 |
|
112 | |
113 |
|
114 |
|
115 | spacing: PropTypes.number,
|
116 |
|
117 | |
118 |
|
119 |
|
120 | style: PropTypes.object
|
121 | } : void 0;
|
122 | export default withStyles(styles, {
|
123 | name: 'MuiGridList'
|
124 | })(GridList); |
\ | No newline at end of file |