PurePanel.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. "use client";
  2. import * as React from 'react';
  3. import useMergedState from "rc-util/es/hooks/useMergedState";
  4. import ConfigProvider, { ConfigContext } from '../config-provider';
  5. export function withPureRenderTheme(Component) {
  6. return props => (/*#__PURE__*/React.createElement(ConfigProvider, {
  7. theme: {
  8. token: {
  9. motion: false,
  10. zIndexPopupBase: 0
  11. }
  12. }
  13. }, /*#__PURE__*/React.createElement(Component, Object.assign({}, props))));
  14. }
  15. /* istanbul ignore next */
  16. const genPurePanel = (Component, alignPropName, postProps, defaultPrefixCls, getDropdownCls) => {
  17. const PurePanel = props => {
  18. const {
  19. prefixCls: customizePrefixCls,
  20. style
  21. } = props;
  22. const holderRef = React.useRef(null);
  23. const [popupHeight, setPopupHeight] = React.useState(0);
  24. const [popupWidth, setPopupWidth] = React.useState(0);
  25. const [open, setOpen] = useMergedState(false, {
  26. value: props.open
  27. });
  28. const {
  29. getPrefixCls
  30. } = React.useContext(ConfigContext);
  31. const prefixCls = getPrefixCls(defaultPrefixCls || 'select', customizePrefixCls);
  32. React.useEffect(() => {
  33. // We do not care about ssr
  34. setOpen(true);
  35. if (typeof ResizeObserver !== 'undefined') {
  36. const resizeObserver = new ResizeObserver(entries => {
  37. const element = entries[0].target;
  38. setPopupHeight(element.offsetHeight + 8);
  39. setPopupWidth(element.offsetWidth);
  40. });
  41. const interval = setInterval(() => {
  42. var _a;
  43. const dropdownCls = getDropdownCls ? `.${getDropdownCls(prefixCls)}` : `.${prefixCls}-dropdown`;
  44. const popup = (_a = holderRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(dropdownCls);
  45. if (popup) {
  46. clearInterval(interval);
  47. resizeObserver.observe(popup);
  48. }
  49. }, 10);
  50. return () => {
  51. clearInterval(interval);
  52. resizeObserver.disconnect();
  53. };
  54. }
  55. }, []);
  56. let mergedProps = Object.assign(Object.assign({}, props), {
  57. style: Object.assign(Object.assign({}, style), {
  58. margin: 0
  59. }),
  60. open,
  61. visible: open,
  62. getPopupContainer: () => holderRef.current
  63. });
  64. if (postProps) {
  65. mergedProps = postProps(mergedProps);
  66. }
  67. if (alignPropName) {
  68. Object.assign(mergedProps, {
  69. [alignPropName]: {
  70. overflow: {
  71. adjustX: false,
  72. adjustY: false
  73. }
  74. }
  75. });
  76. }
  77. const mergedStyle = {
  78. paddingBottom: popupHeight,
  79. position: 'relative',
  80. minWidth: popupWidth
  81. };
  82. return /*#__PURE__*/React.createElement("div", {
  83. ref: holderRef,
  84. style: mergedStyle
  85. }, /*#__PURE__*/React.createElement(Component, Object.assign({}, mergedProps)));
  86. };
  87. return withPureRenderTheme(PurePanel);
  88. };
  89. export default genPurePanel;