bc518174
 王天杨
提交两个项目文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { createPopper as defaultCreatePopper } from '@popperjs/core';
import isEqual from 'react-fast-compare';
import { fromEntries, useIsomorphicLayoutEffect } from './utils';
var EMPTY_MODIFIERS = [];
export var usePopper = function usePopper(referenceElement, popperElement, options) {
if (options === void 0) {
options = {};
}
var prevOptions = React.useRef(null);
var optionsWithDefaults = {
onFirstUpdate: options.onFirstUpdate,
placement: options.placement || 'bottom',
strategy: options.strategy || 'absolute',
modifiers: options.modifiers || EMPTY_MODIFIERS
};
var _React$useState = React.useState({
styles: {
popper: {
position: optionsWithDefaults.strategy,
left: '0',
top: '0'
},
arrow: {
position: 'absolute'
}
},
attributes: {}
}),
state = _React$useState[0],
setState = _React$useState[1];
var updateStateModifier = React.useMemo(function () {
return {
name: 'updateState',
enabled: true,
phase: 'write',
fn: function fn(_ref) {
var state = _ref.state;
var elements = Object.keys(state.elements);
ReactDOM.flushSync(function () {
setState({
styles: fromEntries(elements.map(function (element) {
return [element, state.styles[element] || {}];
})),
attributes: fromEntries(elements.map(function (element) {
return [element, state.attributes[element]];
}))
});
});
},
requires: ['computeStyles']
};
}, []);
var popperOptions = React.useMemo(function () {
var newOptions = {
onFirstUpdate: optionsWithDefaults.onFirstUpdate,
placement: optionsWithDefaults.placement,
strategy: optionsWithDefaults.strategy,
modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, {
name: 'applyStyles',
enabled: false
}])
};
if (isEqual(prevOptions.current, newOptions)) {
return prevOptions.current || newOptions;
} else {
prevOptions.current = newOptions;
return newOptions;
}
}, [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]);
var popperInstanceRef = React.useRef();
useIsomorphicLayoutEffect(function () {
if (popperInstanceRef.current) {
popperInstanceRef.current.setOptions(popperOptions);
}
}, [popperOptions]);
useIsomorphicLayoutEffect(function () {
if (referenceElement == null || popperElement == null) {
return;
}
var createPopper = options.createPopper || defaultCreatePopper;
var popperInstance = createPopper(referenceElement, popperElement, popperOptions);
popperInstanceRef.current = popperInstance;
return function () {
popperInstance.destroy();
popperInstanceRef.current = null;
};
}, [referenceElement, popperElement, options.createPopper]);
return {
state: popperInstanceRef.current ? popperInstanceRef.current.state : null,
styles: state.styles,
attributes: state.attributes,
update: popperInstanceRef.current ? popperInstanceRef.current.update : null,
forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null
};
};
|
