index.js 3.4 KB

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