1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | const _excluded = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
|
4 | import * as React from 'react';
|
5 | import { isFragment } from 'react-is';
|
6 | import PropTypes from 'prop-types';
|
7 | import clsx from 'clsx';
|
8 | import { chainPropTypes } from '@mui/utils';
|
9 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
10 | import styled from '../styles/styled';
|
11 | import useThemeProps from '../styles/useThemeProps';
|
12 | import Collapse from '../Collapse';
|
13 | import Paper from '../Paper';
|
14 | import AccordionContext from './AccordionContext';
|
15 | import useControlled from '../utils/useControlled';
|
16 | import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
|
17 | import { jsx as _jsx } from "react/jsx-runtime";
|
18 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
19 |
|
20 | const useUtilityClasses = ownerState => {
|
21 | const {
|
22 | classes,
|
23 | square,
|
24 | expanded,
|
25 | disabled,
|
26 | disableGutters
|
27 | } = ownerState;
|
28 | const slots = {
|
29 | root: ['root', !square && 'rounded', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'],
|
30 | region: ['region']
|
31 | };
|
32 | return composeClasses(slots, getAccordionUtilityClass, classes);
|
33 | };
|
34 |
|
35 | const AccordionRoot = styled(Paper, {
|
36 | name: 'MuiAccordion',
|
37 | slot: 'Root',
|
38 | overridesResolver: (props, styles) => {
|
39 | const {
|
40 | ownerState
|
41 | } = props;
|
42 | return [{
|
43 | [`& .${accordionClasses.region}`]: styles.region
|
44 | }, styles.root, !ownerState.square && styles.rounded, !ownerState.disableGutters && styles.gutters];
|
45 | }
|
46 | })(({
|
47 | theme
|
48 | }) => {
|
49 | const transition = {
|
50 | duration: theme.transitions.duration.shortest
|
51 | };
|
52 | return {
|
53 | position: 'relative',
|
54 | transition: theme.transitions.create(['margin'], transition),
|
55 | overflowAnchor: 'none',
|
56 |
|
57 | '&:before': {
|
58 | position: 'absolute',
|
59 | left: 0,
|
60 | top: -1,
|
61 | right: 0,
|
62 | height: 1,
|
63 | content: '""',
|
64 | opacity: 1,
|
65 | backgroundColor: (theme.vars || theme).palette.divider,
|
66 | transition: theme.transitions.create(['opacity', 'background-color'], transition)
|
67 | },
|
68 | '&:first-of-type': {
|
69 | '&:before': {
|
70 | display: 'none'
|
71 | }
|
72 | },
|
73 | [`&.${accordionClasses.expanded}`]: {
|
74 | '&:before': {
|
75 | opacity: 0
|
76 | },
|
77 | '&:first-of-type': {
|
78 | marginTop: 0
|
79 | },
|
80 | '&:last-of-type': {
|
81 | marginBottom: 0
|
82 | },
|
83 | '& + &': {
|
84 | '&:before': {
|
85 | display: 'none'
|
86 | }
|
87 | }
|
88 | },
|
89 | [`&.${accordionClasses.disabled}`]: {
|
90 | backgroundColor: (theme.vars || theme).palette.action.disabledBackground
|
91 | }
|
92 | };
|
93 | }, ({
|
94 | theme,
|
95 | ownerState
|
96 | }) => _extends({}, !ownerState.square && {
|
97 | borderRadius: 0,
|
98 | '&:first-of-type': {
|
99 | borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
|
100 | borderTopRightRadius: (theme.vars || theme).shape.borderRadius
|
101 | },
|
102 | '&:last-of-type': {
|
103 | borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
|
104 | borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
|
105 |
|
106 | '@supports (-ms-ime-align: auto)': {
|
107 | borderBottomLeftRadius: 0,
|
108 | borderBottomRightRadius: 0
|
109 | }
|
110 | }
|
111 | }, !ownerState.disableGutters && {
|
112 | [`&.${accordionClasses.expanded}`]: {
|
113 | margin: '16px 0'
|
114 | }
|
115 | }));
|
116 | const Accordion = React.forwardRef(function Accordion(inProps, ref) {
|
117 | const props = useThemeProps({
|
118 | props: inProps,
|
119 | name: 'MuiAccordion'
|
120 | });
|
121 |
|
122 | const {
|
123 | children: childrenProp,
|
124 | className,
|
125 | defaultExpanded = false,
|
126 | disabled = false,
|
127 | disableGutters = false,
|
128 | expanded: expandedProp,
|
129 | onChange,
|
130 | square = false,
|
131 | TransitionComponent = Collapse,
|
132 | TransitionProps
|
133 | } = props,
|
134 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
135 |
|
136 | const [expanded, setExpandedState] = useControlled({
|
137 | controlled: expandedProp,
|
138 | default: defaultExpanded,
|
139 | name: 'Accordion',
|
140 | state: 'expanded'
|
141 | });
|
142 | const handleChange = React.useCallback(event => {
|
143 | setExpandedState(!expanded);
|
144 |
|
145 | if (onChange) {
|
146 | onChange(event, !expanded);
|
147 | }
|
148 | }, [expanded, onChange, setExpandedState]);
|
149 | const [summary, ...children] = React.Children.toArray(childrenProp);
|
150 | const contextValue = React.useMemo(() => ({
|
151 | expanded,
|
152 | disabled,
|
153 | disableGutters,
|
154 | toggle: handleChange
|
155 | }), [expanded, disabled, disableGutters, handleChange]);
|
156 |
|
157 | const ownerState = _extends({}, props, {
|
158 | square,
|
159 | disabled,
|
160 | disableGutters,
|
161 | expanded
|
162 | });
|
163 |
|
164 | const classes = useUtilityClasses(ownerState);
|
165 | return _jsxs(AccordionRoot, _extends({
|
166 | className: clsx(classes.root, className),
|
167 | ref: ref,
|
168 | ownerState: ownerState,
|
169 | square: square
|
170 | }, other, {
|
171 | children: [_jsx(AccordionContext.Provider, {
|
172 | value: contextValue,
|
173 | children: summary
|
174 | }), _jsx(TransitionComponent, _extends({
|
175 | in: expanded,
|
176 | timeout: "auto"
|
177 | }, TransitionProps, {
|
178 | children: _jsx("div", {
|
179 | "aria-labelledby": summary.props.id,
|
180 | id: summary.props['aria-controls'],
|
181 | role: "region",
|
182 | className: classes.region,
|
183 | children: children
|
184 | })
|
185 | }))]
|
186 | }));
|
187 | });
|
188 | process.env.NODE_ENV !== "production" ? Accordion.propTypes
|
189 |
|
190 | = {
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 | |
197 |
|
198 |
|
199 | children: chainPropTypes(PropTypes.node.isRequired, props => {
|
200 | const summary = React.Children.toArray(props.children)[0];
|
201 |
|
202 | if (isFragment(summary)) {
|
203 | return new Error("MUI: The Accordion doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
|
204 | }
|
205 |
|
206 | if (! React.isValidElement(summary)) {
|
207 | return new Error('MUI: Expected the first child of Accordion to be a valid element.');
|
208 | }
|
209 |
|
210 | return null;
|
211 | }),
|
212 |
|
213 | |
214 |
|
215 |
|
216 | classes: PropTypes.object,
|
217 |
|
218 | |
219 |
|
220 |
|
221 | className: PropTypes.string,
|
222 |
|
223 | |
224 |
|
225 |
|
226 |
|
227 | defaultExpanded: PropTypes.bool,
|
228 |
|
229 | |
230 |
|
231 |
|
232 |
|
233 | disabled: PropTypes.bool,
|
234 |
|
235 | |
236 |
|
237 |
|
238 |
|
239 | disableGutters: PropTypes.bool,
|
240 |
|
241 | |
242 |
|
243 |
|
244 |
|
245 | expanded: PropTypes.bool,
|
246 |
|
247 | |
248 |
|
249 |
|
250 |
|
251 |
|
252 |
|
253 | onChange: PropTypes.func,
|
254 |
|
255 | |
256 |
|
257 |
|
258 |
|
259 | square: PropTypes.bool,
|
260 |
|
261 | |
262 |
|
263 |
|
264 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
265 |
|
266 | |
267 |
|
268 |
|
269 |
|
270 |
|
271 | TransitionComponent: PropTypes.elementType,
|
272 |
|
273 | |
274 |
|
275 |
|
276 |
|
277 | TransitionProps: PropTypes.object
|
278 | } : void 0;
|
279 | export default Accordion; |
\ | No newline at end of file |