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