UNPKG

6.4 kBJavaScriptView Raw
1"use strict";
2
3var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
5var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
7Object.defineProperty(exports, "__esModule", {
8 value: true
9});
10exports.default = exports.styles = void 0;
11
12var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
14var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
16var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
17
18var React = _interopRequireWildcard(require("react"));
19
20var _propTypes = _interopRequireDefault(require("prop-types"));
21
22var _clsx = _interopRequireDefault(require("clsx"));
23
24var _debounce = _interopRequireDefault(require("../utils/debounce"));
25
26var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
27
28var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
29
30var styles = {
31 /* Styles applied to the root element. */
32 root: {
33 boxSizing: 'border-box',
34 flexShrink: 0
35 },
36
37 /* Styles applied to the `div` element that wraps the children. */
38 tile: {
39 position: 'relative',
40 display: 'block',
41 // In case it's not rendered with a div.
42 height: '100%',
43 overflow: 'hidden'
44 },
45
46 /* Styles applied to an `img` element child, if needed to ensure it covers the tile. */
47 imgFullHeight: {
48 height: '100%',
49 transform: 'translateX(-50%)',
50 position: 'relative',
51 left: '50%'
52 },
53
54 /* Styles applied to an `img` element child, if needed to ensure it covers the tile. */
55 imgFullWidth: {
56 width: '100%',
57 position: 'relative',
58 transform: 'translateY(-50%)',
59 top: '50%'
60 }
61};
62exports.styles = styles;
63
64var fit = function fit(imgEl, classes) {
65 if (!imgEl || !imgEl.complete) {
66 return;
67 }
68
69 if (imgEl.width / imgEl.height > imgEl.parentElement.offsetWidth / imgEl.parentElement.offsetHeight) {
70 var _imgEl$classList, _imgEl$classList2;
71
72 (_imgEl$classList = imgEl.classList).remove.apply(_imgEl$classList, (0, _toConsumableArray2.default)(classes.imgFullWidth.split(' ')));
73
74 (_imgEl$classList2 = imgEl.classList).add.apply(_imgEl$classList2, (0, _toConsumableArray2.default)(classes.imgFullHeight.split(' ')));
75 } else {
76 var _imgEl$classList3, _imgEl$classList4;
77
78 (_imgEl$classList3 = imgEl.classList).remove.apply(_imgEl$classList3, (0, _toConsumableArray2.default)(classes.imgFullHeight.split(' ')));
79
80 (_imgEl$classList4 = imgEl.classList).add.apply(_imgEl$classList4, (0, _toConsumableArray2.default)(classes.imgFullWidth.split(' ')));
81 }
82};
83
84function ensureImageCover(imgEl, classes) {
85 if (!imgEl) {
86 return;
87 }
88
89 if (imgEl.complete) {
90 fit(imgEl, classes);
91 } else {
92 imgEl.addEventListener('load', function () {
93 fit(imgEl, classes);
94 });
95 }
96}
97
98var warnedOnce = false;
99/**
100 * ⚠️ The GridList component was renamed to ImageList to align with the current Material Design naming.
101 *
102 * You should use `import { ImageListTile } from '@material-ui/core'`
103 * or `import ImageListTile from '@material-ui/core/ImageListTile'`.
104 */
105
106var GridListTile = /*#__PURE__*/React.forwardRef(function GridListTile(props, ref) {
107 if (process.env.NODE_ENV !== 'production') {
108 if (!warnedOnce) {
109 warnedOnce = true;
110 console.error(['Material-UI: The GridListTile component was renamed to ImageListTile to align with the current Material Design naming.', '', "You should use `import { ImageListTile } from '@material-ui/core'`", "or `import ImageListTile from '@material-ui/core/ImageListTile'`."].join('\n'));
111 }
112 } // cols rows default values are for docs only
113
114
115 var children = props.children,
116 classes = props.classes,
117 className = props.className,
118 _props$cols = props.cols,
119 cols = _props$cols === void 0 ? 1 : _props$cols,
120 _props$component = props.component,
121 Component = _props$component === void 0 ? 'li' : _props$component,
122 _props$rows = props.rows,
123 rows = _props$rows === void 0 ? 1 : _props$rows,
124 other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "cols", "component", "rows"]);
125 var imgRef = React.useRef(null);
126 React.useEffect(function () {
127 ensureImageCover(imgRef.current, classes);
128 });
129 React.useEffect(function () {
130 var handleResize = (0, _debounce.default)(function () {
131 fit(imgRef.current, classes);
132 });
133 window.addEventListener('resize', handleResize);
134 return function () {
135 handleResize.clear();
136 window.removeEventListener('resize', handleResize);
137 };
138 }, [classes]);
139 return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({
140 className: (0, _clsx.default)(classes.root, className),
141 ref: ref
142 }, other), /*#__PURE__*/React.createElement("div", {
143 className: classes.tile
144 }, React.Children.map(children, function (child) {
145 if (! /*#__PURE__*/React.isValidElement(child)) {
146 return null;
147 }
148
149 if (child.type === 'img' || (0, _isMuiElement.default)(child, ['Image'])) {
150 return /*#__PURE__*/React.cloneElement(child, {
151 ref: imgRef
152 });
153 }
154
155 return child;
156 })));
157});
158process.env.NODE_ENV !== "production" ? GridListTile.propTypes = {
159 /**
160 * Theoretically you can pass any node as children, but the main use case is to pass an img,
161 * in which case GridListTile takes care of making the image "cover" available space
162 * (similar to `background-size: cover` or to `object-fit: cover`).
163 */
164 children: _propTypes.default.node,
165
166 /**
167 * Override or extend the styles applied to the component.
168 * See [CSS API](#css) below for more details.
169 */
170 classes: _propTypes.default.object.isRequired,
171
172 /**
173 * @ignore
174 */
175 className: _propTypes.default.string,
176
177 /**
178 * Width of the tile in number of grid cells.
179 */
180 cols: _propTypes.default.number,
181
182 /**
183 * The component used for the root node.
184 * Either a string to use a HTML element or a component.
185 */
186 component: _propTypes.default
187 /* @typescript-to-proptypes-ignore */
188 .elementType,
189
190 /**
191 * Height of the tile in number of grid cells.
192 */
193 rows: _propTypes.default.number
194} : void 0;
195
196var _default = (0, _withStyles.default)(styles, {
197 name: 'MuiGridListTile'
198})(GridListTile);
199
200exports.default = _default;
\No newline at end of file