1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | const _excluded = ["children", "className", "cols", "component", "rowHeight", "gap", "style", "variant"];
|
4 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
5 | import { integerPropType } from '@mui/utils';
|
6 | import clsx from 'clsx';
|
7 | import PropTypes from 'prop-types';
|
8 | import * as React from 'react';
|
9 | import styled from '../styles/styled';
|
10 | import useThemeProps from '../styles/useThemeProps';
|
11 | import { getImageListUtilityClass } from './imageListClasses';
|
12 | import ImageListContext from './ImageListContext';
|
13 | import { jsx as _jsx } from "react/jsx-runtime";
|
14 |
|
15 | const useUtilityClasses = ownerState => {
|
16 | const {
|
17 | classes,
|
18 | variant
|
19 | } = ownerState;
|
20 | const slots = {
|
21 | root: ['root', variant]
|
22 | };
|
23 | return composeClasses(slots, getImageListUtilityClass, classes);
|
24 | };
|
25 |
|
26 | const ImageListRoot = styled('ul', {
|
27 | name: 'MuiImageList',
|
28 | slot: 'Root',
|
29 | overridesResolver: (props, styles) => {
|
30 | const {
|
31 | ownerState
|
32 | } = props;
|
33 | return [styles.root, styles[ownerState.variant]];
|
34 | }
|
35 | })(({
|
36 | ownerState
|
37 | }) => {
|
38 | return _extends({
|
39 | display: 'grid',
|
40 | overflowY: 'auto',
|
41 | listStyle: 'none',
|
42 | padding: 0,
|
43 |
|
44 | WebkitOverflowScrolling: 'touch'
|
45 | }, ownerState.variant === 'masonry' && {
|
46 | display: 'block'
|
47 | });
|
48 | });
|
49 | const ImageList = React.forwardRef(function ImageList(inProps, ref) {
|
50 | const props = useThemeProps({
|
51 | props: inProps,
|
52 | name: 'MuiImageList'
|
53 | });
|
54 |
|
55 | const {
|
56 | children,
|
57 | className,
|
58 | cols = 2,
|
59 | component = 'ul',
|
60 | rowHeight = 'auto',
|
61 | gap = 4,
|
62 | style: styleProp,
|
63 | variant = 'standard'
|
64 | } = props,
|
65 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
66 |
|
67 | const contextValue = React.useMemo(() => ({
|
68 | rowHeight,
|
69 | gap,
|
70 | variant
|
71 | }), [rowHeight, gap, variant]);
|
72 | React.useEffect(() => {
|
73 | if (process.env.NODE_ENV !== 'production') {
|
74 |
|
75 | if (document !== undefined && 'objectFit' in document.documentElement.style === false) {
|
76 | console.error(['MUI: ImageList v5+ no longer natively supports Internet Explorer.', 'Use v4 of this component instead, or polyfill CSS object-fit.'].join('\n'));
|
77 | }
|
78 | }
|
79 | }, []);
|
80 | const style = variant === 'masonry' ? _extends({
|
81 | columnCount: cols,
|
82 | columnGap: gap
|
83 | }, styleProp) : _extends({
|
84 | gridTemplateColumns: `repeat(${cols}, 1fr)`,
|
85 | gap
|
86 | }, styleProp);
|
87 |
|
88 | const ownerState = _extends({}, props, {
|
89 | component,
|
90 | gap,
|
91 | rowHeight,
|
92 | variant
|
93 | });
|
94 |
|
95 | const classes = useUtilityClasses(ownerState);
|
96 | return _jsx(ImageListRoot, _extends({
|
97 | as: component,
|
98 | className: clsx(classes.root, classes[variant], className),
|
99 | ref: ref,
|
100 | style: style,
|
101 | ownerState: ownerState
|
102 | }, other, {
|
103 | children: _jsx(ImageListContext.Provider, {
|
104 | value: contextValue,
|
105 | children: children
|
106 | })
|
107 | }));
|
108 | });
|
109 | process.env.NODE_ENV !== "production" ? ImageList.propTypes
|
110 |
|
111 | = {
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 | |
118 |
|
119 |
|
120 | children: PropTypes
|
121 |
|
122 | .node.isRequired,
|
123 |
|
124 | |
125 |
|
126 |
|
127 | classes: PropTypes.object,
|
128 |
|
129 | |
130 |
|
131 |
|
132 | className: PropTypes.string,
|
133 |
|
134 | |
135 |
|
136 |
|
137 |
|
138 | cols: integerPropType,
|
139 |
|
140 | |
141 |
|
142 |
|
143 |
|
144 | component: PropTypes.elementType,
|
145 |
|
146 | |
147 |
|
148 |
|
149 |
|
150 | gap: PropTypes.number,
|
151 |
|
152 | |
153 |
|
154 |
|
155 |
|
156 | rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
|
157 |
|
158 | |
159 |
|
160 |
|
161 | style: PropTypes.object,
|
162 |
|
163 | |
164 |
|
165 |
|
166 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
167 |
|
168 | |
169 |
|
170 |
|
171 |
|
172 | variant: PropTypes
|
173 |
|
174 | .oneOfType([PropTypes.oneOf(['masonry', 'quilted', 'standard', 'woven']), PropTypes.string])
|
175 | } : void 0;
|
176 | export default ImageList; |
\ | No newline at end of file |