1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | exports.__esModule = true;
|
6 | exports.DrawerCloseButton = exports.DrawerOverlay = exports.DrawerContent = exports.Drawer = void 0;
|
7 |
|
8 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9 |
|
10 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11 |
|
12 | var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
13 |
|
14 | var _core = require("@emotion/core");
|
15 |
|
16 | var _react = require("react");
|
17 |
|
18 | var _Modal = require("../Modal");
|
19 |
|
20 | exports.DrawerBody = _Modal.ModalBody;
|
21 | exports.DrawerFooter = _Modal.ModalFooter;
|
22 | exports.DrawerHeader = _Modal.ModalHeader;
|
23 |
|
24 | var _Transition = require("../Transition");
|
25 |
|
26 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
27 |
|
28 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
29 |
|
30 | var DrawerContext = (0, _react.createContext)({});
|
31 |
|
32 | var useDrawerContext = function useDrawerContext() {
|
33 | return (0, _react.useContext)(DrawerContext);
|
34 | };
|
35 |
|
36 | var Drawer = function Drawer(_ref) {
|
37 | var isOpen = _ref.isOpen,
|
38 | onClose = _ref.onClose,
|
39 | isFullHeight = _ref.isFullHeight,
|
40 | _ref$placement = _ref.placement,
|
41 | placement = _ref$placement === void 0 ? "right" : _ref$placement,
|
42 | finalFocusRef = _ref.finalFocusRef,
|
43 | _ref$size = _ref.size,
|
44 | size = _ref$size === void 0 ? "xs" : _ref$size,
|
45 | props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["isOpen", "onClose", "isFullHeight", "placement", "finalFocusRef", "size"]);
|
46 | return (0, _core.jsx)(_Transition.Slide, {
|
47 | "in": isOpen,
|
48 | from: placement,
|
49 | finalHeight: isFullHeight ? "100vh" : "auto"
|
50 | }, function (styles) {
|
51 | return (0, _core.jsx)(DrawerContext.Provider, {
|
52 | value: {
|
53 | styles: styles,
|
54 | size: size
|
55 | }
|
56 | }, (0, _core.jsx)(_Modal.Modal, (0, _extends2["default"])({
|
57 | isOpen: true,
|
58 | onClose: onClose,
|
59 | finalFocusRef: finalFocusRef,
|
60 | formatIds: function formatIds(id) {
|
61 | return {
|
62 | content: "drawer-" + id,
|
63 | header: "drawer-" + id + "-header",
|
64 | body: "drawer-" + id + "-body"
|
65 | };
|
66 | }
|
67 | }, props)));
|
68 | });
|
69 | };
|
70 |
|
71 | exports.Drawer = Drawer;
|
72 | var drawerSizes = {
|
73 | xs: "xs",
|
74 | sm: "md",
|
75 | md: "lg",
|
76 | lg: "2xl",
|
77 | xl: "4xl",
|
78 | full: "100vw"
|
79 | };
|
80 | var DrawerContent = (0, _react.forwardRef)(function (props, ref) {
|
81 | var _useDrawerContext = useDrawerContext(),
|
82 | _useDrawerContext$sty = _useDrawerContext.styles,
|
83 | opacity = _useDrawerContext$sty.opacity,
|
84 | placementStyles = (0, _objectWithoutPropertiesLoose2["default"])(_useDrawerContext$sty, ["opacity"]),
|
85 | size = _useDrawerContext.size;
|
86 |
|
87 | var _size = size in drawerSizes ? drawerSizes[size] : size;
|
88 |
|
89 | return (0, _core.jsx)(_Modal.ModalContent, (0, _extends2["default"])({
|
90 | ref: ref,
|
91 | noStyles: true,
|
92 | pos: "fixed",
|
93 | maxWidth: _size
|
94 | }, props, {
|
95 | style: _objectSpread({}, props.styles, {}, placementStyles)
|
96 | }));
|
97 | });
|
98 | exports.DrawerContent = DrawerContent;
|
99 | DrawerContent.displayName = "DrawerContent";
|
100 | var DrawerOverlay = (0, _react.forwardRef)(function (props, ref) {
|
101 | var _useDrawerContext2 = useDrawerContext(),
|
102 | styles = _useDrawerContext2.styles;
|
103 |
|
104 | return (0, _core.jsx)(_Modal.ModalOverlay, (0, _extends2["default"])({
|
105 | ref: ref,
|
106 | opacity: styles.opacity
|
107 | }, props));
|
108 | });
|
109 | exports.DrawerOverlay = DrawerOverlay;
|
110 | DrawerOverlay.displayName = "DrawerOverlay";
|
111 | var DrawerCloseButton = (0, _react.forwardRef)(function (_ref2, ref) {
|
112 | var onClick = _ref2.onClick,
|
113 | rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["onClick"]);
|
114 | return (0, _core.jsx)(_Modal.ModalCloseButton, (0, _extends2["default"])({
|
115 | ref: ref,
|
116 | position: "fixed",
|
117 | zIndex: "1"
|
118 | }, rest));
|
119 | });
|
120 | exports.DrawerCloseButton = DrawerCloseButton;
|
121 | DrawerCloseButton.displayName = "DrawerCloseButton"; |
\ | No newline at end of file |