Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

203 строки
7.2 KiB

  1. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
  2. import _extends from "@babel/runtime/helpers/extends";
  3. import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
  4. import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
  5. import _defineProperty from "@babel/runtime/helpers/defineProperty";
  6. import deepEqual from "deep-equal";
  7. import * as React from 'react';
  8. import PopperJS from 'popper.js';
  9. import { ManagerReferenceNodeContext } from './Manager';
  10. import { unwrapArray, setRef, shallowEqual } from './utils';
  11. var initialStyle = {
  12. position: 'absolute',
  13. top: 0,
  14. left: 0,
  15. opacity: 0,
  16. pointerEvents: 'none'
  17. };
  18. var initialArrowStyle = {};
  19. export var InnerPopper =
  20. /*#__PURE__*/
  21. function (_React$Component) {
  22. _inheritsLoose(InnerPopper, _React$Component);
  23. function InnerPopper() {
  24. var _this;
  25. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  26. args[_key] = arguments[_key];
  27. }
  28. _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
  29. _defineProperty(_assertThisInitialized(_this), "state", {
  30. data: undefined,
  31. placement: undefined
  32. });
  33. _defineProperty(_assertThisInitialized(_this), "popperInstance", void 0);
  34. _defineProperty(_assertThisInitialized(_this), "popperNode", null);
  35. _defineProperty(_assertThisInitialized(_this), "arrowNode", null);
  36. _defineProperty(_assertThisInitialized(_this), "setPopperNode", function (popperNode) {
  37. if (!popperNode || _this.popperNode === popperNode) return;
  38. setRef(_this.props.innerRef, popperNode);
  39. _this.popperNode = popperNode;
  40. _this.updatePopperInstance();
  41. });
  42. _defineProperty(_assertThisInitialized(_this), "setArrowNode", function (arrowNode) {
  43. _this.arrowNode = arrowNode;
  44. });
  45. _defineProperty(_assertThisInitialized(_this), "updateStateModifier", {
  46. enabled: true,
  47. order: 900,
  48. fn: function fn(data) {
  49. var placement = data.placement;
  50. _this.setState({
  51. data: data,
  52. placement: placement
  53. });
  54. return data;
  55. }
  56. });
  57. _defineProperty(_assertThisInitialized(_this), "getOptions", function () {
  58. return {
  59. placement: _this.props.placement,
  60. eventsEnabled: _this.props.eventsEnabled,
  61. positionFixed: _this.props.positionFixed,
  62. modifiers: _extends({}, _this.props.modifiers, {
  63. arrow: _extends({}, _this.props.modifiers && _this.props.modifiers.arrow, {
  64. enabled: !!_this.arrowNode,
  65. element: _this.arrowNode
  66. }),
  67. applyStyle: {
  68. enabled: false
  69. },
  70. updateStateModifier: _this.updateStateModifier
  71. })
  72. };
  73. });
  74. _defineProperty(_assertThisInitialized(_this), "getPopperStyle", function () {
  75. return !_this.popperNode || !_this.state.data ? initialStyle : _extends({
  76. position: _this.state.data.offsets.popper.position
  77. }, _this.state.data.styles);
  78. });
  79. _defineProperty(_assertThisInitialized(_this), "getPopperPlacement", function () {
  80. return !_this.state.data ? undefined : _this.state.placement;
  81. });
  82. _defineProperty(_assertThisInitialized(_this), "getArrowStyle", function () {
  83. return !_this.arrowNode || !_this.state.data ? initialArrowStyle : _this.state.data.arrowStyles;
  84. });
  85. _defineProperty(_assertThisInitialized(_this), "getOutOfBoundariesState", function () {
  86. return _this.state.data ? _this.state.data.hide : undefined;
  87. });
  88. _defineProperty(_assertThisInitialized(_this), "destroyPopperInstance", function () {
  89. if (!_this.popperInstance) return;
  90. _this.popperInstance.destroy();
  91. _this.popperInstance = null;
  92. });
  93. _defineProperty(_assertThisInitialized(_this), "updatePopperInstance", function () {
  94. _this.destroyPopperInstance();
  95. var _assertThisInitialize = _assertThisInitialized(_this),
  96. popperNode = _assertThisInitialize.popperNode;
  97. var referenceElement = _this.props.referenceElement;
  98. if (!referenceElement || !popperNode) return;
  99. _this.popperInstance = new PopperJS(referenceElement, popperNode, _this.getOptions());
  100. });
  101. _defineProperty(_assertThisInitialized(_this), "scheduleUpdate", function () {
  102. if (_this.popperInstance) {
  103. _this.popperInstance.scheduleUpdate();
  104. }
  105. });
  106. return _this;
  107. }
  108. var _proto = InnerPopper.prototype;
  109. _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
  110. // If the Popper.js options have changed, update the instance (destroy + create)
  111. if (this.props.placement !== prevProps.placement || this.props.referenceElement !== prevProps.referenceElement || this.props.positionFixed !== prevProps.positionFixed || !deepEqual(this.props.modifiers, prevProps.modifiers, {
  112. strict: true
  113. })) {
  114. // develop only check that modifiers isn't being updated needlessly
  115. if (process.env.NODE_ENV === "development") {
  116. if (this.props.modifiers !== prevProps.modifiers && this.props.modifiers != null && prevProps.modifiers != null && shallowEqual(this.props.modifiers, prevProps.modifiers)) {
  117. console.warn("'modifiers' prop reference updated even though all values appear the same.\nConsider memoizing the 'modifiers' object to avoid needless rendering.");
  118. }
  119. }
  120. this.updatePopperInstance();
  121. } else if (this.props.eventsEnabled !== prevProps.eventsEnabled && this.popperInstance) {
  122. this.props.eventsEnabled ? this.popperInstance.enableEventListeners() : this.popperInstance.disableEventListeners();
  123. } // A placement difference in state means popper determined a new placement
  124. // apart from the props value. By the time the popper element is rendered with
  125. // the new position Popper has already measured it, if the place change triggers
  126. // a size change it will result in a misaligned popper. So we schedule an update to be sure.
  127. if (prevState.placement !== this.state.placement) {
  128. this.scheduleUpdate();
  129. }
  130. };
  131. _proto.componentWillUnmount = function componentWillUnmount() {
  132. setRef(this.props.innerRef, null);
  133. this.destroyPopperInstance();
  134. };
  135. _proto.render = function render() {
  136. return unwrapArray(this.props.children)({
  137. ref: this.setPopperNode,
  138. style: this.getPopperStyle(),
  139. placement: this.getPopperPlacement(),
  140. outOfBoundaries: this.getOutOfBoundariesState(),
  141. scheduleUpdate: this.scheduleUpdate,
  142. arrowProps: {
  143. ref: this.setArrowNode,
  144. style: this.getArrowStyle()
  145. }
  146. });
  147. };
  148. return InnerPopper;
  149. }(React.Component);
  150. _defineProperty(InnerPopper, "defaultProps", {
  151. placement: 'bottom',
  152. eventsEnabled: true,
  153. referenceElement: undefined,
  154. positionFixed: false
  155. });
  156. var placements = PopperJS.placements;
  157. export { placements };
  158. export default function Popper(_ref) {
  159. var referenceElement = _ref.referenceElement,
  160. props = _objectWithoutPropertiesLoose(_ref, ["referenceElement"]);
  161. return React.createElement(ManagerReferenceNodeContext.Consumer, null, function (referenceNode) {
  162. return React.createElement(InnerPopper, _extends({
  163. referenceElement: referenceElement !== undefined ? referenceElement : referenceNode
  164. }, props));
  165. });
  166. }