1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports.isHorizontal = isHorizontal;
|
11 | exports.getAnchor = getAnchor;
|
12 | exports.default = exports.styles = void 0;
|
13 |
|
14 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
15 |
|
16 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
17 |
|
18 | var React = _interopRequireWildcard(require("react"));
|
19 |
|
20 | var _propTypes = _interopRequireDefault(require("prop-types"));
|
21 |
|
22 | var _clsx = _interopRequireDefault(require("clsx"));
|
23 |
|
24 | var _Modal = _interopRequireDefault(require("../Modal"));
|
25 |
|
26 | var _Backdrop = _interopRequireDefault(require("../Backdrop"));
|
27 |
|
28 | var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
|
29 |
|
30 | var _Slide = _interopRequireDefault(require("../Slide"));
|
31 |
|
32 | var _Paper = _interopRequireDefault(require("../Paper"));
|
33 |
|
34 | var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
|
35 |
|
36 | var _transitions = require("../styles/transitions");
|
37 |
|
38 | var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
|
39 |
|
40 | var styles = function styles(theme) {
|
41 | return {
|
42 |
|
43 | root: {},
|
44 |
|
45 |
|
46 | docked: {
|
47 | flex: '0 0 auto'
|
48 | },
|
49 |
|
50 |
|
51 | paper: {
|
52 | overflowY: 'auto',
|
53 | display: 'flex',
|
54 | flexDirection: 'column',
|
55 | height: '100%',
|
56 | flex: '1 0 auto',
|
57 | zIndex: theme.zIndex.drawer,
|
58 | WebkitOverflowScrolling: 'touch',
|
59 |
|
60 |
|
61 | position: 'fixed',
|
62 | top: 0,
|
63 |
|
64 |
|
65 |
|
66 | outline: 0
|
67 | },
|
68 |
|
69 |
|
70 | paperAnchorLeft: {
|
71 | left: 0,
|
72 | right: 'auto'
|
73 | },
|
74 |
|
75 |
|
76 | paperAnchorRight: {
|
77 | left: 'auto',
|
78 | right: 0
|
79 | },
|
80 |
|
81 |
|
82 | paperAnchorTop: {
|
83 | top: 0,
|
84 | left: 0,
|
85 | bottom: 'auto',
|
86 | right: 0,
|
87 | height: 'auto',
|
88 | maxHeight: '100%'
|
89 | },
|
90 |
|
91 |
|
92 | paperAnchorBottom: {
|
93 | top: 'auto',
|
94 | left: 0,
|
95 | bottom: 0,
|
96 | right: 0,
|
97 | height: 'auto',
|
98 | maxHeight: '100%'
|
99 | },
|
100 |
|
101 |
|
102 | paperAnchorDockedLeft: {
|
103 | borderRight: "1px solid ".concat(theme.palette.divider)
|
104 | },
|
105 |
|
106 |
|
107 | paperAnchorDockedTop: {
|
108 | borderBottom: "1px solid ".concat(theme.palette.divider)
|
109 | },
|
110 |
|
111 |
|
112 | paperAnchorDockedRight: {
|
113 | borderLeft: "1px solid ".concat(theme.palette.divider)
|
114 | },
|
115 |
|
116 |
|
117 | paperAnchorDockedBottom: {
|
118 | borderTop: "1px solid ".concat(theme.palette.divider)
|
119 | },
|
120 |
|
121 |
|
122 | modal: {}
|
123 | };
|
124 | };
|
125 |
|
126 | exports.styles = styles;
|
127 | var oppositeDirection = {
|
128 | left: 'right',
|
129 | right: 'left',
|
130 | top: 'down',
|
131 | bottom: 'up'
|
132 | };
|
133 |
|
134 | function isHorizontal(anchor) {
|
135 | return ['left', 'right'].indexOf(anchor) !== -1;
|
136 | }
|
137 |
|
138 | function getAnchor(theme, anchor) {
|
139 | return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
|
140 | }
|
141 |
|
142 | var defaultTransitionDuration = {
|
143 | enter: _transitions.duration.enteringScreen,
|
144 | exit: _transitions.duration.leavingScreen
|
145 | };
|
146 |
|
147 |
|
148 |
|
149 |
|
150 |
|
151 | var Drawer = React.forwardRef(function Drawer(props, ref) {
|
152 | var _props$anchor = props.anchor,
|
153 | anchorProp = _props$anchor === void 0 ? 'left' : _props$anchor,
|
154 | BackdropProps = props.BackdropProps,
|
155 | children = props.children,
|
156 | classes = props.classes,
|
157 | className = props.className,
|
158 | _props$elevation = props.elevation,
|
159 | elevation = _props$elevation === void 0 ? 16 : _props$elevation,
|
160 | _props$ModalProps = props.ModalProps;
|
161 | _props$ModalProps = _props$ModalProps === void 0 ? {} : _props$ModalProps;
|
162 | var BackdropPropsProp = _props$ModalProps.BackdropProps,
|
163 | ModalProps = (0, _objectWithoutProperties2.default)(_props$ModalProps, ["BackdropProps"]),
|
164 | onClose = props.onClose,
|
165 | _props$open = props.open,
|
166 | open = _props$open === void 0 ? false : _props$open,
|
167 | _props$PaperProps = props.PaperProps,
|
168 | PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
|
169 | SlideProps = props.SlideProps,
|
170 | _props$TransitionComp = props.TransitionComponent,
|
171 | TransitionComponent = _props$TransitionComp === void 0 ? _Slide.default : _props$TransitionComp,
|
172 | _props$transitionDura = props.transitionDuration,
|
173 | transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,
|
174 | _props$variant = props.variant,
|
175 | variant = _props$variant === void 0 ? 'temporary' : _props$variant,
|
176 | other = (0, _objectWithoutProperties2.default)(props, ["anchor", "BackdropProps", "children", "classes", "className", "elevation", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"]);
|
177 | var theme = (0, _useTheme.default)();
|
178 |
|
179 |
|
180 |
|
181 | var mounted = React.useRef(false);
|
182 | React.useEffect(function () {
|
183 | mounted.current = true;
|
184 | }, []);
|
185 | var anchor = getAnchor(theme, anchorProp);
|
186 | var drawer = React.createElement(_Paper.default, (0, _extends2.default)({
|
187 | elevation: variant === 'temporary' ? elevation : 0,
|
188 | square: true
|
189 | }, PaperProps, {
|
190 | className: (0, _clsx.default)(classes.paper, classes["paperAnchor".concat((0, _capitalize.default)(anchor))], PaperProps.className, variant !== 'temporary' && classes["paperAnchorDocked".concat((0, _capitalize.default)(anchor))])
|
191 | }), children);
|
192 |
|
193 | if (variant === 'permanent') {
|
194 | return React.createElement("div", (0, _extends2.default)({
|
195 | className: (0, _clsx.default)(classes.root, classes.docked, className),
|
196 | ref: ref
|
197 | }, other), drawer);
|
198 | }
|
199 |
|
200 | var slidingDrawer = React.createElement(TransitionComponent, (0, _extends2.default)({
|
201 | in: open,
|
202 | direction: oppositeDirection[anchor],
|
203 | timeout: transitionDuration,
|
204 | appear: mounted.current
|
205 | }, SlideProps), drawer);
|
206 |
|
207 | if (variant === 'persistent') {
|
208 | return React.createElement("div", (0, _extends2.default)({
|
209 | className: (0, _clsx.default)(classes.root, classes.docked, className),
|
210 | ref: ref
|
211 | }, other), slidingDrawer);
|
212 | }
|
213 |
|
214 |
|
215 | return React.createElement(_Modal.default, (0, _extends2.default)({
|
216 | BackdropProps: (0, _extends2.default)({}, BackdropProps, BackdropPropsProp, {
|
217 | transitionDuration: transitionDuration
|
218 | }),
|
219 | BackdropComponent: _Backdrop.default,
|
220 | className: (0, _clsx.default)(classes.root, classes.modal, className),
|
221 | open: open,
|
222 | onClose: onClose,
|
223 | ref: ref
|
224 | }, other, ModalProps), slidingDrawer);
|
225 | });
|
226 | process.env.NODE_ENV !== "production" ? Drawer.propTypes = {
|
227 |
|
228 |
|
229 |
|
230 |
|
231 |
|
232 | |
233 |
|
234 |
|
235 | anchor: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
|
236 |
|
237 | |
238 |
|
239 |
|
240 | BackdropProps: _propTypes.default.object,
|
241 |
|
242 | |
243 |
|
244 |
|
245 | children: _propTypes.default.node,
|
246 |
|
247 | |
248 |
|
249 |
|
250 |
|
251 | classes: _propTypes.default.object,
|
252 |
|
253 | |
254 |
|
255 |
|
256 | className: _propTypes.default.string,
|
257 |
|
258 | |
259 |
|
260 |
|
261 | elevation: _propTypes.default.number,
|
262 |
|
263 | |
264 |
|
265 |
|
266 | ModalProps: _propTypes.default.object,
|
267 |
|
268 | |
269 |
|
270 |
|
271 |
|
272 |
|
273 | onClose: _propTypes.default.func,
|
274 |
|
275 | |
276 |
|
277 |
|
278 | open: _propTypes.default.bool,
|
279 |
|
280 | |
281 |
|
282 |
|
283 | PaperProps: _propTypes.default.object,
|
284 |
|
285 | |
286 |
|
287 |
|
288 | SlideProps: _propTypes.default.object,
|
289 |
|
290 | |
291 |
|
292 |
|
293 |
|
294 | transitionDuration: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
|
295 | appear: _propTypes.default.number,
|
296 | enter: _propTypes.default.number,
|
297 | exit: _propTypes.default.number
|
298 | })]),
|
299 |
|
300 | |
301 |
|
302 |
|
303 | variant: _propTypes.default.oneOf(['permanent', 'persistent', 'temporary'])
|
304 | } : void 0;
|
305 |
|
306 | var _default = (0, _withStyles.default)(styles, {
|
307 | name: 'MuiDrawer',
|
308 | flip: false
|
309 | })(Drawer);
|
310 |
|
311 | exports.default = _default; |
\ | No newline at end of file |