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