index.js 3.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. var __assign = (this && this.__assign) || function () {
  2. __assign = Object.assign || function(t) {
  3. for (var s, i = 1, n = arguments.length; i < n; i++) {
  4. s = arguments[i];
  5. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
  6. t[p] = s[p];
  7. }
  8. return t;
  9. };
  10. return __assign.apply(this, arguments);
  11. };
  12. import { useComponent, useEvent, useEffect, useState, } from 'functional-mini/component';
  13. import '../_util/assert-component2';
  14. import { mountComponent } from '../_util/component';
  15. import { useComponentEvent } from '../_util/hooks/useComponentEvent';
  16. import { hasValue, useMergedState } from '../_util/hooks/useMergedState';
  17. import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
  18. import { getSystemInfo } from '../_util/jsapi/get-system-info';
  19. import { getPopoverStyle } from './utils';
  20. var Popover = function (props) {
  21. var _a = useMergedState(props.defaultVisible, {
  22. value: props.visible,
  23. }), value = _a[0], updateValue = _a[1];
  24. var _b = useState({
  25. popoverContentStyle: '',
  26. adjustedPlacement: '',
  27. }), popoverStyle = _b[0], setPopoverStyle = _b[1];
  28. var isControl = hasValue(props.visible);
  29. var instance = useComponent();
  30. function getInstance() {
  31. if (instance.$id) {
  32. return my;
  33. }
  34. return instance;
  35. }
  36. var triggerEvent = useComponentEvent(props).triggerEvent;
  37. useEffect(function () {
  38. if (!value) {
  39. setPopoverStyle(function (old) { return (__assign(__assign({}, old), { adjustedPlacement: '' })); });
  40. return;
  41. }
  42. var placement = props.placement, autoAdjustOverflow = props.autoAdjustOverflow;
  43. Promise.all([
  44. getInstanceBoundingClientRect(getInstance(), "#ant-popover-children".concat(instance.$id ? "-".concat(instance.$id) : '')),
  45. getInstanceBoundingClientRect(getInstance(), instance.$id
  46. ? "#ant-popover-children-".concat(instance.$id, " > *")
  47. : "#ant-popover-children-container"),
  48. getInstanceBoundingClientRect(getInstance(), instance.$id
  49. ? "#ant-popover-content-".concat(instance.$id)
  50. : '#ant-popover-content'),
  51. getSystemInfo(),
  52. ]).then(function (res) {
  53. var containerRect = res[0], childrenRect = res[1], contentRect = res[2], systemInfo = res[3];
  54. var _a = getPopoverStyle(placement, autoAdjustOverflow, {
  55. containerRect: containerRect,
  56. childrenRect: childrenRect,
  57. contentRect: contentRect,
  58. systemInfo: systemInfo,
  59. }), popoverContentStyle = _a.popoverContentStyle, adjustedPlacement = _a.adjustedPlacement;
  60. setPopoverStyle({
  61. popoverContentStyle: popoverContentStyle,
  62. adjustedPlacement: adjustedPlacement,
  63. });
  64. });
  65. }, [value, props.autoAdjustOverflow, props.placement]);
  66. useEvent('onVisibleChange', function (e) {
  67. var newValue = !value;
  68. if (!isControl) {
  69. updateValue(newValue);
  70. }
  71. triggerEvent('visibleChange', newValue, e);
  72. });
  73. return {
  74. adjustedPlacement: popoverStyle.adjustedPlacement,
  75. popoverContentStyle: popoverStyle.popoverContentStyle,
  76. mixin: {
  77. value: value,
  78. },
  79. };
  80. };
  81. mountComponent(Popover, {
  82. visible: null,
  83. defaultVisible: false,
  84. destroyOnClose: false,
  85. showMask: true,
  86. placement: 'top',
  87. autoAdjustOverflow: true,
  88. maskClassName: '',
  89. maskStyle: '',
  90. content: '',
  91. contentClassName: '',
  92. contentStyle: '',
  93. color: '',
  94. });