Drawer.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  3. import Portal from '@rc-component/portal';
  4. import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
  5. import * as React from 'react';
  6. import { RefContext } from "./context";
  7. import DrawerPopup from "./DrawerPopup";
  8. import { warnCheck } from "./util";
  9. var Drawer = function Drawer(props) {
  10. var _props$open = props.open,
  11. open = _props$open === void 0 ? false : _props$open,
  12. _props$prefixCls = props.prefixCls,
  13. prefixCls = _props$prefixCls === void 0 ? 'rc-drawer' : _props$prefixCls,
  14. _props$placement = props.placement,
  15. placement = _props$placement === void 0 ? 'right' : _props$placement,
  16. _props$autoFocus = props.autoFocus,
  17. autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
  18. _props$keyboard = props.keyboard,
  19. keyboard = _props$keyboard === void 0 ? true : _props$keyboard,
  20. _props$width = props.width,
  21. width = _props$width === void 0 ? 378 : _props$width,
  22. _props$mask = props.mask,
  23. mask = _props$mask === void 0 ? true : _props$mask,
  24. _props$maskClosable = props.maskClosable,
  25. maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
  26. getContainer = props.getContainer,
  27. forceRender = props.forceRender,
  28. afterOpenChange = props.afterOpenChange,
  29. destroyOnClose = props.destroyOnClose,
  30. onMouseEnter = props.onMouseEnter,
  31. onMouseOver = props.onMouseOver,
  32. onMouseLeave = props.onMouseLeave,
  33. onClick = props.onClick,
  34. onKeyDown = props.onKeyDown,
  35. onKeyUp = props.onKeyUp,
  36. panelRef = props.panelRef;
  37. var _React$useState = React.useState(false),
  38. _React$useState2 = _slicedToArray(_React$useState, 2),
  39. animatedVisible = _React$useState2[0],
  40. setAnimatedVisible = _React$useState2[1];
  41. // ============================= Warn =============================
  42. if (process.env.NODE_ENV !== 'production') {
  43. warnCheck(props);
  44. }
  45. // ============================= Open =============================
  46. var _React$useState3 = React.useState(false),
  47. _React$useState4 = _slicedToArray(_React$useState3, 2),
  48. mounted = _React$useState4[0],
  49. setMounted = _React$useState4[1];
  50. useLayoutEffect(function () {
  51. setMounted(true);
  52. }, []);
  53. var mergedOpen = mounted ? open : false;
  54. // ============================ Focus =============================
  55. var popupRef = React.useRef();
  56. var lastActiveRef = React.useRef();
  57. useLayoutEffect(function () {
  58. if (mergedOpen) {
  59. lastActiveRef.current = document.activeElement;
  60. }
  61. }, [mergedOpen]);
  62. // ============================= Open =============================
  63. var internalAfterOpenChange = function internalAfterOpenChange(nextVisible) {
  64. var _popupRef$current;
  65. setAnimatedVisible(nextVisible);
  66. afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(nextVisible);
  67. if (!nextVisible && lastActiveRef.current && !((_popupRef$current = popupRef.current) !== null && _popupRef$current !== void 0 && _popupRef$current.contains(lastActiveRef.current))) {
  68. var _lastActiveRef$curren;
  69. (_lastActiveRef$curren = lastActiveRef.current) === null || _lastActiveRef$curren === void 0 || _lastActiveRef$curren.focus({
  70. preventScroll: true
  71. });
  72. }
  73. };
  74. // =========================== Context ============================
  75. var refContext = React.useMemo(function () {
  76. return {
  77. panel: panelRef
  78. };
  79. }, [panelRef]);
  80. // ============================ Render ============================
  81. if (!forceRender && !animatedVisible && !mergedOpen && destroyOnClose) {
  82. return null;
  83. }
  84. var eventHandlers = {
  85. onMouseEnter: onMouseEnter,
  86. onMouseOver: onMouseOver,
  87. onMouseLeave: onMouseLeave,
  88. onClick: onClick,
  89. onKeyDown: onKeyDown,
  90. onKeyUp: onKeyUp
  91. };
  92. var drawerPopupProps = _objectSpread(_objectSpread({}, props), {}, {
  93. open: mergedOpen,
  94. prefixCls: prefixCls,
  95. placement: placement,
  96. autoFocus: autoFocus,
  97. keyboard: keyboard,
  98. width: width,
  99. mask: mask,
  100. maskClosable: maskClosable,
  101. inline: getContainer === false,
  102. afterOpenChange: internalAfterOpenChange,
  103. ref: popupRef
  104. }, eventHandlers);
  105. return /*#__PURE__*/React.createElement(RefContext.Provider, {
  106. value: refContext
  107. }, /*#__PURE__*/React.createElement(Portal, {
  108. open: mergedOpen || forceRender || animatedVisible,
  109. autoDestroy: false,
  110. getContainer: getContainer,
  111. autoLock: mask && (mergedOpen || animatedVisible)
  112. }, /*#__PURE__*/React.createElement(DrawerPopup, drawerPopupProps)));
  113. };
  114. if (process.env.NODE_ENV !== 'production') {
  115. Drawer.displayName = 'Drawer';
  116. }
  117. export default Drawer;