Dashboard sipadu mbip
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

Popper.js 7.1KB

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