Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

PopperContent.js 5.8 KiB

vor 3 Jahren
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
  3. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  4. import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
  5. import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
  6. import React from 'react';
  7. import PropTypes from 'prop-types';
  8. import ReactDOM from 'react-dom';
  9. import classNames from 'classnames';
  10. import { Arrow, Popper as ReactPopper } from 'react-popper';
  11. import { getTarget, targetPropType, mapToCssModules, DOMElement, tagPropType } from './utils';
  12. var propTypes = {
  13. children: PropTypes.node.isRequired,
  14. className: PropTypes.string,
  15. placement: PropTypes.string,
  16. placementPrefix: PropTypes.string,
  17. arrowClassName: PropTypes.string,
  18. hideArrow: PropTypes.bool,
  19. tag: tagPropType,
  20. isOpen: PropTypes.bool.isRequired,
  21. cssModule: PropTypes.object,
  22. offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  23. fallbackPlacement: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  24. flip: PropTypes.bool,
  25. container: targetPropType,
  26. target: targetPropType.isRequired,
  27. modifiers: PropTypes.object,
  28. boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement])
  29. };
  30. var defaultProps = {
  31. boundariesElement: 'scrollParent',
  32. placement: 'auto',
  33. hideArrow: false,
  34. isOpen: false,
  35. offset: 0,
  36. fallbackPlacement: 'flip',
  37. flip: true,
  38. container: 'body',
  39. modifiers: {}
  40. };
  41. var childContextTypes = {
  42. popperManager: PropTypes.object.isRequired
  43. };
  44. var PopperContent =
  45. /*#__PURE__*/
  46. function (_React$Component) {
  47. _inheritsLoose(PopperContent, _React$Component);
  48. function PopperContent(props) {
  49. var _this;
  50. _this = _React$Component.call(this, props) || this;
  51. _this.handlePlacementChange = _this.handlePlacementChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
  52. _this.setTargetNode = _this.setTargetNode.bind(_assertThisInitialized(_assertThisInitialized(_this)));
  53. _this.getTargetNode = _this.getTargetNode.bind(_assertThisInitialized(_assertThisInitialized(_this)));
  54. _this.getRef = _this.getRef.bind(_assertThisInitialized(_assertThisInitialized(_this)));
  55. _this.state = {};
  56. return _this;
  57. }
  58. var _proto = PopperContent.prototype;
  59. _proto.getChildContext = function getChildContext() {
  60. return {
  61. popperManager: {
  62. setTargetNode: this.setTargetNode,
  63. getTargetNode: this.getTargetNode
  64. }
  65. };
  66. };
  67. _proto.componentDidUpdate = function componentDidUpdate() {
  68. if (this._element && this._element.childNodes && this._element.childNodes[0] && this._element.childNodes[0].focus) {
  69. this._element.childNodes[0].focus();
  70. }
  71. };
  72. _proto.setTargetNode = function setTargetNode(node) {
  73. this.targetNode = node;
  74. };
  75. _proto.getTargetNode = function getTargetNode() {
  76. return this.targetNode;
  77. };
  78. _proto.getContainerNode = function getContainerNode() {
  79. return getTarget(this.props.container);
  80. };
  81. _proto.getRef = function getRef(ref) {
  82. this._element = ref;
  83. };
  84. _proto.handlePlacementChange = function handlePlacementChange(data) {
  85. if (this.state.placement !== data.placement) {
  86. this.setState({
  87. placement: data.placement
  88. });
  89. }
  90. return data;
  91. };
  92. _proto.renderChildren = function renderChildren() {
  93. var _this$props = this.props,
  94. cssModule = _this$props.cssModule,
  95. children = _this$props.children,
  96. isOpen = _this$props.isOpen,
  97. flip = _this$props.flip,
  98. target = _this$props.target,
  99. offset = _this$props.offset,
  100. fallbackPlacement = _this$props.fallbackPlacement,
  101. placementPrefix = _this$props.placementPrefix,
  102. _arrowClassName = _this$props.arrowClassName,
  103. hideArrow = _this$props.hideArrow,
  104. className = _this$props.className,
  105. tag = _this$props.tag,
  106. container = _this$props.container,
  107. modifiers = _this$props.modifiers,
  108. boundariesElement = _this$props.boundariesElement,
  109. attrs = _objectWithoutPropertiesLoose(_this$props, ["cssModule", "children", "isOpen", "flip", "target", "offset", "fallbackPlacement", "placementPrefix", "arrowClassName", "hideArrow", "className", "tag", "container", "modifiers", "boundariesElement"]);
  110. var arrowClassName = mapToCssModules(classNames('arrow', _arrowClassName), cssModule);
  111. var placement = (this.state.placement || attrs.placement).split('-')[0];
  112. var popperClassName = mapToCssModules(classNames(className, placementPrefix ? placementPrefix + "-" + placement : placement), this.props.cssModule);
  113. var extendedModifiers = _objectSpread({
  114. offset: {
  115. offset: offset
  116. },
  117. flip: {
  118. enabled: flip,
  119. behavior: fallbackPlacement
  120. },
  121. preventOverflow: {
  122. boundariesElement: boundariesElement
  123. },
  124. update: {
  125. enabled: true,
  126. order: 950,
  127. fn: this.handlePlacementChange
  128. }
  129. }, modifiers);
  130. return React.createElement(ReactPopper, _extends({
  131. modifiers: extendedModifiers
  132. }, attrs, {
  133. component: tag,
  134. className: popperClassName,
  135. "x-placement": this.state.placement || attrs.placement
  136. }), children, !hideArrow && React.createElement(Arrow, {
  137. className: arrowClassName
  138. }));
  139. };
  140. _proto.render = function render() {
  141. this.setTargetNode(getTarget(this.props.target));
  142. if (this.props.isOpen) {
  143. return this.props.container === 'inline' ? this.renderChildren() : ReactDOM.createPortal(React.createElement("div", {
  144. ref: this.getRef
  145. }, this.renderChildren()), this.getContainerNode());
  146. }
  147. return null;
  148. };
  149. return PopperContent;
  150. }(React.Component);
  151. PopperContent.propTypes = propTypes;
  152. PopperContent.defaultProps = defaultProps;
  153. PopperContent.childContextTypes = childContextTypes;
  154. export default PopperContent;