123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- import { __assign } from "tslib";
- import { useComponent, useEvent, useEffect, useState, } from 'functional-mini/component';
- import '../_util/assert-component2';
- import { mountComponent } from '../_util/component';
- import { useComponentEvent } from '../_util/hooks/useComponentEvent';
- import { hasValue, useMergedState } from '../_util/hooks/useMergedState';
- import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
- import { getSystemInfo } from '../_util/jsapi/get-system-info';
- import { getPopoverStyle } from './utils';
- var Popover = function (props) {
- var _a = useMergedState(props.defaultVisible, {
- value: props.visible,
- }), value = _a[0], updateValue = _a[1];
- var _b = useState({
- popoverContentStyle: '',
- adjustedPlacement: '',
- }), popoverStyle = _b[0], setPopoverStyle = _b[1];
- var isControl = hasValue(props.visible);
- var instance = useComponent();
- function getInstance() {
- if (instance.$id) {
- return my;
- }
- return instance;
- }
- var triggerEvent = useComponentEvent(props).triggerEvent;
- useEffect(function () {
- if (!value) {
- setPopoverStyle(function (old) { return (__assign(__assign({}, old), { adjustedPlacement: '' })); });
- return;
- }
- var placement = props.placement, autoAdjustOverflow = props.autoAdjustOverflow;
- Promise.all([
- getInstanceBoundingClientRect(getInstance(), "#ant-popover-children".concat(instance.$id ? "-".concat(instance.$id) : '')),
- getInstanceBoundingClientRect(getInstance(), instance.$id
- ? "#ant-popover-children-".concat(instance.$id, " > *")
- : "#ant-popover-children-container"),
- getInstanceBoundingClientRect(getInstance(), instance.$id
- ? "#ant-popover-content-".concat(instance.$id)
- : '#ant-popover-content'),
- getSystemInfo(),
- ]).then(function (res) {
- var containerRect = res[0], childrenRect = res[1], contentRect = res[2], systemInfo = res[3];
- var _a = getPopoverStyle(placement, autoAdjustOverflow, {
- containerRect: containerRect,
- childrenRect: childrenRect,
- contentRect: contentRect,
- systemInfo: systemInfo,
- }), popoverContentStyle = _a.popoverContentStyle, adjustedPlacement = _a.adjustedPlacement;
- setPopoverStyle({
- popoverContentStyle: popoverContentStyle,
- adjustedPlacement: adjustedPlacement,
- });
- });
- }, [value, props.autoAdjustOverflow, props.placement]);
- useEvent('onVisibleChange', function (e) {
- if (!value && e.target.id && e.target.id.indexOf('ant-popover-') === 0) {
- return;
- }
- var newValue = !value;
- if (!isControl) {
- updateValue(newValue);
- }
- triggerEvent('visibleChange', newValue, e);
- }, [value, isControl]);
- return {
- adjustedPlacement: popoverStyle.adjustedPlacement,
- popoverContentStyle: popoverStyle.popoverContentStyle,
- mixin: {
- value: value,
- },
- };
- };
- mountComponent(Popover, {
- visible: null,
- defaultVisible: false,
- destroyOnClose: false,
- showMask: true,
- placement: 'top',
- autoAdjustOverflow: true,
- maskClassName: '',
- maskStyle: '',
- content: '',
- contentClassName: '',
- contentStyle: '',
- color: '',
- });
|