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 AccordionContext from '../Accordion/AccordionContext';
|
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 | const AccordionSummary = React.forwardRef(function AccordionSummary(props, ref) {
|
74 | const {
|
75 | children,
|
76 | classes,
|
77 | className,
|
78 | expandIcon,
|
79 | IconButtonProps,
|
80 | onBlur,
|
81 | onClick,
|
82 | onFocusVisible
|
83 | } = props,
|
84 | other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "expandIcon", "IconButtonProps", "onBlur", "onClick", "onFocusVisible"]);
|
85 |
|
86 | const [focusedState, setFocusedState] = React.useState(false);
|
87 |
|
88 | const handleFocusVisible = event => {
|
89 | setFocusedState(true);
|
90 |
|
91 | if (onFocusVisible) {
|
92 | onFocusVisible(event);
|
93 | }
|
94 | };
|
95 |
|
96 | const handleBlur = event => {
|
97 | setFocusedState(false);
|
98 |
|
99 | if (onBlur) {
|
100 | onBlur(event);
|
101 | }
|
102 | };
|
103 |
|
104 | const {
|
105 | disabled = false,
|
106 | expanded,
|
107 | toggle
|
108 | } = React.useContext(AccordionContext);
|
109 |
|
110 | const handleChange = event => {
|
111 | if (toggle) {
|
112 | toggle(event);
|
113 | }
|
114 |
|
115 | if (onClick) {
|
116 | onClick(event);
|
117 | }
|
118 | };
|
119 |
|
120 | return React.createElement(ButtonBase, _extends({
|
121 | focusRipple: false,
|
122 | disableRipple: true,
|
123 | disabled: disabled,
|
124 | component: "div",
|
125 | "aria-expanded": expanded,
|
126 | className: clsx(classes.root, className, disabled && classes.disabled, expanded && classes.expanded, focusedState && classes.focused),
|
127 | onFocusVisible: handleFocusVisible,
|
128 | onBlur: handleBlur,
|
129 | onClick: handleChange,
|
130 | ref: ref
|
131 | }, other), React.createElement("div", {
|
132 | className: clsx(classes.content, expanded && classes.expanded)
|
133 | }, children), expandIcon && React.createElement(IconButton, _extends({
|
134 | className: clsx(classes.expandIcon, expanded && classes.expanded),
|
135 | edge: "end",
|
136 | component: "div",
|
137 | tabIndex: null,
|
138 | role: null,
|
139 | "aria-hidden": true
|
140 | }, IconButtonProps), expandIcon));
|
141 | });
|
142 | process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes = {
|
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 | |
149 |
|
150 |
|
151 | children: PropTypes.node,
|
152 |
|
153 | |
154 |
|
155 |
|
156 |
|
157 | classes: PropTypes.object,
|
158 |
|
159 | |
160 |
|
161 |
|
162 | className: PropTypes.string,
|
163 |
|
164 | |
165 |
|
166 |
|
167 | expandIcon: PropTypes.node,
|
168 |
|
169 | |
170 |
|
171 |
|
172 | IconButtonProps: PropTypes.object,
|
173 |
|
174 | |
175 |
|
176 |
|
177 | onBlur: PropTypes.func,
|
178 |
|
179 | |
180 |
|
181 |
|
182 | onClick: PropTypes.func,
|
183 |
|
184 | |
185 |
|
186 |
|
187 | onFocusVisible: PropTypes.func
|
188 | } : void 0;
|
189 | export default withStyles(styles, {
|
190 | name: 'MuiAccordionSummary'
|
191 | })(AccordionSummary); |
\ | No newline at end of file |