UNPKG

7.36 kBJavaScriptView Raw
1import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
3import _extends from "@babel/runtime/helpers/esm/extends";
4import * as React from 'react';
5import PropTypes from 'prop-types';
6import clsx from 'clsx';
7import { unstable_composeClasses as composeClasses } from '@mui/base';
8import styled from '../styles/styled';
9import useThemeProps from '../styles/useThemeProps';
10import ButtonBase from '../ButtonBase';
11import AccordionContext from '../Accordion/AccordionContext';
12import accordionSummaryClasses, { getAccordionSummaryUtilityClass } from './accordionSummaryClasses';
13import { jsx as _jsx } from "react/jsx-runtime";
14import { jsxs as _jsxs } from "react/jsx-runtime";
15
16var useUtilityClasses = function useUtilityClasses(ownerState) {
17 var classes = ownerState.classes,
18 expanded = ownerState.expanded,
19 disabled = ownerState.disabled,
20 disableGutters = ownerState.disableGutters;
21 var slots = {
22 root: ['root', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'],
23 focusVisible: ['focusVisible'],
24 content: ['content', expanded && 'expanded', !disableGutters && 'contentGutters'],
25 expandIconWrapper: ['expandIconWrapper', expanded && 'expanded']
26 };
27 return composeClasses(slots, getAccordionSummaryUtilityClass, classes);
28};
29
30var AccordionSummaryRoot = styled(ButtonBase, {
31 name: 'MuiAccordionSummary',
32 slot: 'Root',
33 overridesResolver: function overridesResolver(props, styles) {
34 return styles.root;
35 }
36})(function (_ref) {
37 var _extends2;
38
39 var theme = _ref.theme,
40 ownerState = _ref.ownerState;
41 var transition = {
42 duration: theme.transitions.duration.shortest
43 };
44 return _extends((_extends2 = {
45 display: 'flex',
46 minHeight: 48,
47 padding: theme.spacing(0, 2),
48 transition: theme.transitions.create(['min-height', 'background-color'], transition)
49 }, _defineProperty(_extends2, "&.".concat(accordionSummaryClasses.focusVisible), {
50 backgroundColor: (theme.vars || theme).palette.action.focus
51 }), _defineProperty(_extends2, "&.".concat(accordionSummaryClasses.disabled), {
52 opacity: (theme.vars || theme).palette.action.disabledOpacity
53 }), _defineProperty(_extends2, "&:hover:not(.".concat(accordionSummaryClasses.disabled, ")"), {
54 cursor: 'pointer'
55 }), _extends2), !ownerState.disableGutters && _defineProperty({}, "&.".concat(accordionSummaryClasses.expanded), {
56 minHeight: 64
57 }));
58});
59var AccordionSummaryContent = styled('div', {
60 name: 'MuiAccordionSummary',
61 slot: 'Content',
62 overridesResolver: function overridesResolver(props, styles) {
63 return styles.content;
64 }
65})(function (_ref3) {
66 var theme = _ref3.theme,
67 ownerState = _ref3.ownerState;
68 return _extends({
69 display: 'flex',
70 flexGrow: 1,
71 margin: '12px 0'
72 }, !ownerState.disableGutters && _defineProperty({
73 transition: theme.transitions.create(['margin'], {
74 duration: theme.transitions.duration.shortest
75 })
76 }, "&.".concat(accordionSummaryClasses.expanded), {
77 margin: '20px 0'
78 }));
79});
80var AccordionSummaryExpandIconWrapper = styled('div', {
81 name: 'MuiAccordionSummary',
82 slot: 'ExpandIconWrapper',
83 overridesResolver: function overridesResolver(props, styles) {
84 return styles.expandIconWrapper;
85 }
86})(function (_ref5) {
87 var theme = _ref5.theme;
88 return _defineProperty({
89 display: 'flex',
90 color: (theme.vars || theme).palette.action.active,
91 transform: 'rotate(0deg)',
92 transition: theme.transitions.create('transform', {
93 duration: theme.transitions.duration.shortest
94 })
95 }, "&.".concat(accordionSummaryClasses.expanded), {
96 transform: 'rotate(180deg)'
97 });
98});
99var AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary(inProps, ref) {
100 var props = useThemeProps({
101 props: inProps,
102 name: 'MuiAccordionSummary'
103 });
104
105 var children = props.children,
106 className = props.className,
107 expandIcon = props.expandIcon,
108 focusVisibleClassName = props.focusVisibleClassName,
109 onClick = props.onClick,
110 other = _objectWithoutProperties(props, ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"]);
111
112 var _React$useContext = React.useContext(AccordionContext),
113 _React$useContext$dis = _React$useContext.disabled,
114 disabled = _React$useContext$dis === void 0 ? false : _React$useContext$dis,
115 disableGutters = _React$useContext.disableGutters,
116 expanded = _React$useContext.expanded,
117 toggle = _React$useContext.toggle;
118
119 var handleChange = function handleChange(event) {
120 if (toggle) {
121 toggle(event);
122 }
123
124 if (onClick) {
125 onClick(event);
126 }
127 };
128
129 var ownerState = _extends({}, props, {
130 expanded: expanded,
131 disabled: disabled,
132 disableGutters: disableGutters
133 });
134
135 var classes = useUtilityClasses(ownerState);
136 return /*#__PURE__*/_jsxs(AccordionSummaryRoot, _extends({
137 focusRipple: false,
138 disableRipple: true,
139 disabled: disabled,
140 component: "div",
141 "aria-expanded": expanded,
142 className: clsx(classes.root, className),
143 focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
144 onClick: handleChange,
145 ref: ref,
146 ownerState: ownerState
147 }, other, {
148 children: [/*#__PURE__*/_jsx(AccordionSummaryContent, {
149 className: classes.content,
150 ownerState: ownerState,
151 children: children
152 }), expandIcon && /*#__PURE__*/_jsx(AccordionSummaryExpandIconWrapper, {
153 className: classes.expandIconWrapper,
154 ownerState: ownerState,
155 children: expandIcon
156 })]
157 }));
158});
159process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes
160/* remove-proptypes */
161= {
162 // ----------------------------- Warning --------------------------------
163 // | These PropTypes are generated from the TypeScript type definitions |
164 // | To update them edit the d.ts file and run "yarn proptypes" |
165 // ----------------------------------------------------------------------
166
167 /**
168 * The content of the component.
169 */
170 children: PropTypes.node,
171
172 /**
173 * Override or extend the styles applied to the component.
174 */
175 classes: PropTypes.object,
176
177 /**
178 * @ignore
179 */
180 className: PropTypes.string,
181
182 /**
183 * The icon to display as the expand indicator.
184 */
185 expandIcon: PropTypes.node,
186
187 /**
188 * This prop can help identify which element has keyboard focus.
189 * The class name will be applied when the element gains the focus through keyboard interaction.
190 * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
191 * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
192 * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
193 * if needed.
194 */
195 focusVisibleClassName: PropTypes.string,
196
197 /**
198 * @ignore
199 */
200 onClick: PropTypes.func,
201
202 /**
203 * The system prop that allows defining system overrides as well as additional CSS styles.
204 */
205 sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
206} : void 0;
207export default AccordionSummary;
\No newline at end of file