1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | exports.__esModule = true;
|
6 | exports.AccordionPanel = exports.AccordionHeader = exports.AccordionIcon = exports.AccordionItem = exports.Accordion = void 0;
|
7 |
|
8 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9 |
|
10 | var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
11 |
|
12 | var _core = require("@emotion/core");
|
13 |
|
14 | var _autoId = require("@reach/auto-id");
|
15 |
|
16 | var _react = require("react");
|
17 |
|
18 | var _Box = _interopRequireDefault(require("../Box"));
|
19 |
|
20 | var _Collapse = _interopRequireDefault(require("../Collapse"));
|
21 |
|
22 | var _Icon = _interopRequireDefault(require("../Icon"));
|
23 |
|
24 | var _PseudoBox = _interopRequireDefault(require("../PseudoBox"));
|
25 |
|
26 | var _utils = require("../utils");
|
27 |
|
28 |
|
29 | var Accordion = function Accordion(_ref) {
|
30 | var allowMultiple = _ref.allowMultiple,
|
31 | allowToggle = _ref.allowToggle,
|
32 | index = _ref.index,
|
33 | defaultIndex = _ref.defaultIndex,
|
34 | _onChange = _ref.onChange,
|
35 | children = _ref.children,
|
36 | rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["allowMultiple", "allowToggle", "index", "defaultIndex", "onChange", "children"]);
|
37 |
|
38 | var initializeState = function initializeState() {
|
39 | if (allowMultiple) {
|
40 | return defaultIndex || [];
|
41 | } else {
|
42 | return defaultIndex || 0;
|
43 | }
|
44 | };
|
45 |
|
46 | var getExpandCondition = function getExpandCondition(index, itemIndex) {
|
47 | if (Array.isArray(index)) {
|
48 | return index.includes(itemIndex);
|
49 | }
|
50 |
|
51 | return index === itemIndex;
|
52 | };
|
53 |
|
54 | var _useState = (0, _react.useState)(initializeState),
|
55 | expandedIndex = _useState[0],
|
56 | setExpandedIndex = _useState[1];
|
57 |
|
58 | var _useRef = (0, _react.useRef)(index != null),
|
59 | isControlled = _useRef.current;
|
60 |
|
61 | var _index = isControlled ? index : expandedIndex;
|
62 |
|
63 | var validChildren = (0, _utils.cleanChildren)(children);
|
64 | var clones = validChildren.map(function (child, childIndex) {
|
65 | return (0, _react.cloneElement)(child, {
|
66 | isOpen: getExpandCondition(_index, childIndex),
|
67 | onChange: function onChange(isExpanded) {
|
68 | if (allowMultiple) {
|
69 | if (isExpanded) {
|
70 | var newIndexes = [].concat(_index, [childIndex]);
|
71 | !isControlled && setExpandedIndex(newIndexes);
|
72 | _onChange && _onChange(newIndexes);
|
73 | } else {
|
74 | var _newIndexes = _index.filter(function (itemIndex) {
|
75 | return itemIndex !== childIndex;
|
76 | });
|
77 |
|
78 | !isControlled && setExpandedIndex(_newIndexes);
|
79 | _onChange && _onChange(_newIndexes);
|
80 | }
|
81 | } else {
|
82 | if (isExpanded) {
|
83 | !isControlled && setExpandedIndex(childIndex);
|
84 | _onChange && _onChange(childIndex);
|
85 | } else {
|
86 | if (allowToggle) {
|
87 | !isControlled && setExpandedIndex(null);
|
88 | _onChange && _onChange(null);
|
89 | }
|
90 | }
|
91 | }
|
92 | }
|
93 | });
|
94 | });
|
95 | return (0, _core.jsx)(_Box["default"], (0, _extends2["default"])({
|
96 | "data-accordion": ""
|
97 | }, rest), clones);
|
98 | };
|
99 |
|
100 | exports.Accordion = Accordion;
|
101 | var AccordionItemContext = (0, _react.createContext)();
|
102 |
|
103 | var useAccordionItemContext = function useAccordionItemContext() {
|
104 | return (0, _react.useContext)(AccordionItemContext);
|
105 | };
|
106 |
|
107 | var AccordionItem = (0, _react.forwardRef)(function (_ref2, ref) {
|
108 | var isOpen = _ref2.isOpen,
|
109 | defaultIsOpen = _ref2.defaultIsOpen,
|
110 | id = _ref2.id,
|
111 | isDisabled = _ref2.isDisabled,
|
112 | onChange = _ref2.onChange,
|
113 | children = _ref2.children,
|
114 | rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["isOpen", "defaultIsOpen", "id", "isDisabled", "onChange", "children"]);
|
115 |
|
116 | var _useState2 = (0, _react.useState)(defaultIsOpen || false),
|
117 | isExpanded = _useState2[0],
|
118 | setIsExpanded = _useState2[1];
|
119 |
|
120 | var _useRef2 = (0, _react.useRef)(isOpen != null),
|
121 | isControlled = _useRef2.current;
|
122 |
|
123 | var _isExpanded = isControlled ? isOpen : isExpanded;
|
124 |
|
125 | var onToggle = function onToggle() {
|
126 | onChange && onChange(!_isExpanded);
|
127 | !isControlled && setIsExpanded(!isExpanded);
|
128 | };
|
129 |
|
130 | var uuid = (0, _autoId.useId)();
|
131 | var uniqueId = id || uuid;
|
132 | var headerId = "accordion-header-" + uniqueId;
|
133 | var panelId = "accordion-panel-" + uniqueId;
|
134 | return (0, _core.jsx)(AccordionItemContext.Provider, {
|
135 | value: {
|
136 | isExpanded: _isExpanded,
|
137 | isDisabled: isDisabled,
|
138 | headerId: headerId,
|
139 | panelId: panelId,
|
140 | onToggle: onToggle
|
141 | }
|
142 | }, (0, _core.jsx)(_PseudoBox["default"], (0, _extends2["default"])({
|
143 | borderTopWidth: "1px",
|
144 | _last: {
|
145 | borderBottomWidth: "1px"
|
146 | },
|
147 | "data-accordion-item": "",
|
148 | ref: ref
|
149 | }, rest), typeof children === "function" ? children({
|
150 | isExpanded: _isExpanded,
|
151 | isDisabled: isDisabled
|
152 | }) : children));
|
153 | });
|
154 | exports.AccordionItem = AccordionItem;
|
155 | AccordionItem.displayName = "AccordionItem";
|
156 |
|
157 | var AccordionHeader = (0, _react.forwardRef)(function (_ref3, ref) {
|
158 | var _onClick = _ref3.onClick,
|
159 | props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, ["onClick"]);
|
160 |
|
161 | var _useAccordionItemCont = useAccordionItemContext(),
|
162 | isExpanded = _useAccordionItemCont.isExpanded,
|
163 | panelId = _useAccordionItemCont.panelId,
|
164 | headerId = _useAccordionItemCont.headerId,
|
165 | isDisabled = _useAccordionItemCont.isDisabled,
|
166 | onToggle = _useAccordionItemCont.onToggle;
|
167 |
|
168 | return (0, _core.jsx)(_PseudoBox["default"], (0, _extends2["default"])({
|
169 | ref: ref,
|
170 | display: "flex",
|
171 | alignItems: "center",
|
172 | width: "100%",
|
173 | transition: "all 0.2s",
|
174 | _focus: {
|
175 | boxShadow: "outline"
|
176 | },
|
177 | _hover: {
|
178 | bg: "blackAlpha.50"
|
179 | },
|
180 | _disabled: {
|
181 | opacity: "0.4",
|
182 | cursor: "not-allowed"
|
183 | },
|
184 | as: "button",
|
185 | type: "button",
|
186 | outline: "0",
|
187 | disabled: isDisabled,
|
188 | "aria-disabled": isDisabled,
|
189 | "aria-expanded": isExpanded,
|
190 | onClick: function onClick(event) {
|
191 | onToggle();
|
192 |
|
193 | if (_onClick) {
|
194 | _onClick(event);
|
195 | }
|
196 | },
|
197 | id: headerId,
|
198 | "aria-controls": panelId,
|
199 | px: 4,
|
200 | py: 2
|
201 | }, props));
|
202 | });
|
203 | exports.AccordionHeader = AccordionHeader;
|
204 | AccordionHeader.displayName = "AccordionHeader";
|
205 |
|
206 | var AccordionPanel = (0, _react.forwardRef)(function (props, ref) {
|
207 | var _useAccordionItemCont2 = useAccordionItemContext(),
|
208 | isExpanded = _useAccordionItemCont2.isExpanded,
|
209 | panelId = _useAccordionItemCont2.panelId,
|
210 | headerId = _useAccordionItemCont2.headerId;
|
211 |
|
212 | return (0, _core.jsx)(_Collapse["default"], (0, _extends2["default"])({
|
213 | ref: ref,
|
214 | "data-accordion-panel": "",
|
215 | role: "region",
|
216 | id: panelId,
|
217 | "aria-labelledby": headerId,
|
218 | "aria-hidden": !isExpanded,
|
219 | isOpen: isExpanded,
|
220 | pt: 2,
|
221 | px: 4,
|
222 | pb: 5
|
223 | }, props));
|
224 | });
|
225 | exports.AccordionPanel = AccordionPanel;
|
226 | AccordionPanel.displayName = "AccordionPanel";
|
227 |
|
228 | var AccordionIcon = function AccordionIcon(props) {
|
229 | var _useAccordionItemCont3 = useAccordionItemContext(),
|
230 | isExpanded = _useAccordionItemCont3.isExpanded,
|
231 | isDisabled = _useAccordionItemCont3.isDisabled;
|
232 |
|
233 | return (0, _core.jsx)(_Icon["default"], (0, _extends2["default"])({
|
234 | "aria-hidden": true,
|
235 | focusable: "false",
|
236 | size: "1.25em",
|
237 | name: "chevron-down",
|
238 | opacity: isDisabled ? 0.4 : 1,
|
239 | transform: isExpanded ? "rotate(-180deg)" : null,
|
240 | transition: "transform 0.2s",
|
241 | transformOrigin: "center"
|
242 | }, props));
|
243 | };
|
244 |
|
245 | exports.AccordionIcon = AccordionIcon; |
\ | No newline at end of file |