1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 |
|
4 |
|
5 | import * as React from 'react';
|
6 | import PropTypes from 'prop-types';
|
7 | import clsx from 'clsx';
|
8 | import ButtonBase from '../ButtonBase';
|
9 | import IconButton from '../IconButton';
|
10 | import withStyles from '../styles/withStyles';
|
11 | import ExpansionPanelContext from '../ExpansionPanel/ExpansionPanelContext';
|
12 | export const styles = theme => {
|
13 | const transition = {
|
14 | duration: theme.transitions.duration.shortest
|
15 | };
|
16 | return {
|
17 |
|
18 | root: {
|
19 | display: 'flex',
|
20 | minHeight: 8 * 6,
|
21 | transition: theme.transitions.create(['min-height', 'background-color'], transition),
|
22 | padding: theme.spacing(0, 2),
|
23 | '&:hover:not($disabled)': {
|
24 | cursor: 'pointer'
|
25 | },
|
26 | '&$expanded': {
|
27 | minHeight: 64
|
28 | },
|
29 | '&$focused': {
|
30 | backgroundColor: theme.palette.action.focus
|
31 | },
|
32 | '&$disabled': {
|
33 | opacity: theme.palette.action.disabledOpacity
|
34 | }
|
35 | },
|
36 |
|
37 |
|
38 | expanded: {},
|
39 |
|
40 |
|
41 | focused: {},
|
42 |
|
43 |
|
44 | disabled: {},
|
45 |
|
46 |
|
47 | content: {
|
48 | display: 'flex',
|
49 | flexGrow: 1,
|
50 | transition: theme.transitions.create(['margin'], transition),
|
51 | margin: '12px 0',
|
52 | '&$expanded': {
|
53 | margin: '20px 0'
|
54 | }
|
55 | },
|
56 |
|
57 |
|
58 | expandIcon: {
|
59 | transform: 'rotate(0deg)',
|
60 | transition: theme.transitions.create('transform', transition),
|
61 | '&:hover': {
|
62 |
|
63 |
|
64 |
|
65 | backgroundColor: 'transparent'
|
66 | },
|
67 | '&$expanded': {
|
68 | transform: 'rotate(180deg)'
|
69 | }
|
70 | }
|
71 | };
|
72 | };
|
73 | let warnedOnce = false;
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 | const ExpansionPanelSummary = React.forwardRef(function ExpansionPanelSummary(props, ref) {
|
82 | if (process.env.NODE_ENV !== 'production') {
|
83 | if (!warnedOnce) {
|
84 | warnedOnce = true;
|
85 | console.error(['Material-UI: the ExpansionPanelSummary component was renamed to AccordionSummary to use a more common naming convention.', '', "You should use `import { AccordionSummary } from '@material-ui/core'`", "or `import AccordionSummary from '@material-ui/core/AccordionSummary'`"].join('\n'));
|
86 | }
|
87 | }
|
88 |
|
89 | const {
|
90 | children,
|
91 | classes,
|
92 | className,
|
93 | expandIcon,
|
94 | IconButtonProps,
|
95 | onBlur,
|
96 | onClick,
|
97 | onFocusVisible
|
98 | } = props,
|
99 | other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "expandIcon", "IconButtonProps", "onBlur", "onClick", "onFocusVisible"]);
|
100 |
|
101 | const [focusedState, setFocusedState] = React.useState(false);
|
102 |
|
103 | const handleFocusVisible = event => {
|
104 | setFocusedState(true);
|
105 |
|
106 | if (onFocusVisible) {
|
107 | onFocusVisible(event);
|
108 | }
|
109 | };
|
110 |
|
111 | const handleBlur = event => {
|
112 | setFocusedState(false);
|
113 |
|
114 | if (onBlur) {
|
115 | onBlur(event);
|
116 | }
|
117 | };
|
118 |
|
119 | const {
|
120 | disabled = false,
|
121 | expanded,
|
122 | toggle
|
123 | } = React.useContext(ExpansionPanelContext);
|
124 |
|
125 | const handleChange = event => {
|
126 | if (toggle) {
|
127 | toggle(event);
|
128 | }
|
129 |
|
130 | if (onClick) {
|
131 | onClick(event);
|
132 | }
|
133 | };
|
134 |
|
135 | return React.createElement(ButtonBase, _extends({
|
136 | focusRipple: false,
|
137 | disableRipple: true,
|
138 | disabled: disabled,
|
139 | component: "div",
|
140 | "aria-expanded": expanded,
|
141 | className: clsx(classes.root, className, disabled && classes.disabled, expanded && classes.expanded, focusedState && classes.focused),
|
142 | onFocusVisible: handleFocusVisible,
|
143 | onBlur: handleBlur,
|
144 | onClick: handleChange,
|
145 | ref: ref
|
146 | }, other), React.createElement("div", {
|
147 | className: clsx(classes.content, expanded && classes.expanded)
|
148 | }, children), expandIcon && React.createElement(IconButton, _extends({
|
149 | className: clsx(classes.expandIcon, expanded && classes.expanded),
|
150 | edge: "end",
|
151 | component: "div",
|
152 | tabIndex: null,
|
153 | role: null,
|
154 | "aria-hidden": true
|
155 | }, IconButtonProps), expandIcon));
|
156 | });
|
157 | process.env.NODE_ENV !== "production" ? ExpansionPanelSummary.propTypes = {
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 | |
164 |
|
165 |
|
166 | children: PropTypes.node,
|
167 |
|
168 | |
169 |
|
170 |
|
171 |
|
172 | classes: PropTypes.object,
|
173 |
|
174 | |
175 |
|
176 |
|
177 | className: PropTypes.string,
|
178 |
|
179 | |
180 |
|
181 |
|
182 | expandIcon: PropTypes.node,
|
183 |
|
184 | |
185 |
|
186 |
|
187 | IconButtonProps: PropTypes.object,
|
188 |
|
189 | |
190 |
|
191 |
|
192 | onBlur: PropTypes.func,
|
193 |
|
194 | |
195 |
|
196 |
|
197 | onClick: PropTypes.func,
|
198 |
|
199 | |
200 |
|
201 |
|
202 |
|
203 | onFocusVisible: PropTypes.func
|
204 | } : void 0;
|
205 | export default withStyles(styles, {
|
206 | name: 'MuiExpansionPanelSummary'
|
207 | })(ExpansionPanelSummary); |
\ | No newline at end of file |