@braineet/ui
Version:
Braineet design system
169 lines (168 loc) • 6.63 kB
JavaScript
;
exports.__esModule = true;
exports.useDrawerContext = exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _bodyScrollLock = require("body-scroll-lock");
var _reactSpring = require("react-spring");
var _box = _interopRequireDefault(require("../box"));
var _transition = require("../transition");
var _styles = require("./styles");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["width", "innerStyles"];
/* eslint-disable no-param-reassign */
/* eslint-disable no-underscore-dangle */
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var disableContainerScroll = function disableContainerScroll(containerRef) {
if (containerRef.current) {
containerRef.current.style.overflow = 'hidden';
}
};
var enableContainerScroll = function enableContainerScroll(containerRef) {
if (containerRef.current) {
containerRef.current.style.overflow = '';
}
};
var DrawerContext = /*#__PURE__*/(0, _react.createContext)({});
var useDrawerContext = exports.useDrawerContext = function useDrawerContext() {
return (0, _react.useContext)(DrawerContext);
};
var Drawer = function Drawer(_ref) {
var children = _ref.children,
isOpen = _ref.isOpen,
onClose = _ref.onClose,
isFullHeight = _ref.isFullHeight,
initialFocusRef = _ref.initialFocusRef,
container = _ref.container,
placement = _ref.placement,
forceUpdate = _ref.forceUpdate,
strategy = _ref.strategy,
zIndex = _ref.zIndex;
var contentRef = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
var func = function func(event) {
if (event.key === 'Escape') {
onClose();
}
};
if (isOpen && initialFocusRef && initialFocusRef.current) {
initialFocusRef.current.focus();
}
if (isOpen) {
document.addEventListener('keydown', func);
}
return function () {
document.removeEventListener('keydown', func);
};
}, [isOpen, onClose, forceUpdate]);
(0, _react.useEffect)(function () {
var drawerNode = contentRef.current;
if (isOpen) {
if (container && container.current) {
disableContainerScroll(container);
} else {
(0, _bodyScrollLock.disableBodyScroll)(drawerNode);
}
}
return function () {
if (container && container.current) {
enableContainerScroll(container);
} else {
(0, _bodyScrollLock.enableBodyScroll)(drawerNode);
}
};
}, [isOpen]);
var drawerContext = _react.default.useMemo(function () {
return {
container: container,
contentRef: contentRef,
isOpen: isOpen,
placement: placement,
onClose: onClose,
finalHeight: isFullHeight ? '100%' : 'auto',
zIndex: zIndex,
strategy: strategy
};
}, [container, contentRef, isOpen, placement, onClose, isFullHeight, zIndex, strategy]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerContext.Provider, {
value: drawerContext,
children: children
});
};
var DrawerWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
var width = _ref2.width,
innerStyles = _ref2.innerStyles,
restProps = _objectWithoutPropertiesLoose(_ref2, _excluded);
var _useDrawerContext = useDrawerContext(),
strategy = _useDrawerContext.strategy,
zIndex = _useDrawerContext.zIndex,
contentRef = _useDrawerContext.contentRef,
isOpen = _useDrawerContext.isOpen,
placement = _useDrawerContext.placement,
finalHeight = _useDrawerContext.finalHeight;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_transition.Slide, {
isOpen: isOpen,
placement: placement,
finalHeight: finalHeight,
width: width,
children: function children(_ref3) {
var stylesProps = _ref3.stylesProps;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Wrapper, {
ref: contentRef,
$position: strategy,
$zIndex: zIndex,
style: stylesProps,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_box.default, {
ref: ref,
height: "100%",
width: width,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Content, _extends({
innerStyles: innerStyles
}, restProps))
})
});
}
});
});
var DrawerOverlay = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var _useDrawerContext2 = useDrawerContext(),
isOpen = _useDrawerContext2.isOpen,
onClose = _useDrawerContext2.onClose,
zIndex = _useDrawerContext2.zIndex;
var stylesProps = (0, _reactSpring.useSpring)({
opacity: isOpen ? 1 : 0,
display: isOpen ? 'block' : 'none'
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, _extends({
ref: ref,
$zIndex: zIndex,
onClick: onClose
}, props, {
style: stylesProps
}));
});
DrawerOverlay.defaultProps = {
onClose: function onClose() {}
};
DrawerWrapper.defaultProps = {
width: '100%',
innerStyles: {}
};
Drawer.defaultProps = {
initialFocusRef: null,
container: null,
isOpen: false,
forceUpdate: false,
placement: 'right',
strategy: 'absolute',
isFullHeight: true,
onClose: function onClose() {}
};
Drawer.Wrapper = DrawerWrapper;
Drawer.Body = _styles.Body;
Drawer.Footer = _styles.Footer;
Drawer.Overlay = DrawerOverlay;
var _default = exports.default = Drawer;