Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

DropdownMenu.js 7.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
  2. function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  3. function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
  4. import PropTypes from 'prop-types';
  5. import React from 'react';
  6. import { Popper } from 'react-popper';
  7. import DropdownContext from './DropdownContext';
  8. import RootCloseWrapper from './RootCloseWrapper';
  9. import mapContextToProps from 'react-context-toolbox/mapContextToProps';
  10. var DropdownMenu =
  11. /*#__PURE__*/
  12. function (_React$Component) {
  13. _inheritsLoose(DropdownMenu, _React$Component);
  14. function DropdownMenu() {
  15. var _this;
  16. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  17. args[_key] = arguments[_key];
  18. }
  19. _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
  20. _this.state = {
  21. toggleId: null
  22. };
  23. _this.popperIsInitialized = false;
  24. _this.handleClose = function (e) {
  25. if (!_this.props.onToggle) return;
  26. _this.props.onToggle(false, e);
  27. };
  28. return _this;
  29. }
  30. var _proto = DropdownMenu.prototype;
  31. _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps) {
  32. // If, to the best we can tell, this update won't reinitialize popper,
  33. // manually schedule an update
  34. var shouldUpdatePopper = !prevProps.show && this.props.show && this.popperIsInitialized && // a new reference node will already trigger this internally
  35. prevProps.toggleNode === this.props.toggleNode;
  36. if (this.props.show && this.props.usePopper && !this.popperIsInitialized) {
  37. this.popperIsInitialized = true;
  38. }
  39. return !!shouldUpdatePopper;
  40. };
  41. _proto.componentDidUpdate = function componentDidUpdate(_, __, shouldUpdatePopper) {
  42. if (shouldUpdatePopper && this.scheduleUpdate) {
  43. this.scheduleUpdate();
  44. }
  45. };
  46. _proto.render = function render() {
  47. var _this2 = this;
  48. var _this$props = this.props,
  49. show = _this$props.show,
  50. flip = _this$props.flip,
  51. menuRef = _this$props.menuRef,
  52. alignEnd = _this$props.alignEnd,
  53. drop = _this$props.drop,
  54. usePopper = _this$props.usePopper,
  55. toggleNode = _this$props.toggleNode,
  56. rootCloseEvent = _this$props.rootCloseEvent,
  57. _this$props$popperCon = _this$props.popperConfig,
  58. popperConfig = _this$props$popperCon === void 0 ? {} : _this$props$popperCon;
  59. var placement = alignEnd ? 'bottom-end' : 'bottom-start';
  60. if (drop === 'up') placement = alignEnd ? 'top-end' : 'top-start';
  61. if (drop === 'right') placement = alignEnd ? 'right-end' : 'right-start';
  62. if (drop === 'left') placement = alignEnd ? 'left-end' : 'left-start';
  63. var menu = null;
  64. var menuProps = {
  65. ref: menuRef,
  66. 'aria-labelledby': toggleNode && toggleNode.id
  67. };
  68. var childArgs = {
  69. show: show,
  70. alignEnd: alignEnd,
  71. close: this.handleClose
  72. };
  73. if (!usePopper) {
  74. menu = this.props.children(_extends({}, childArgs, {
  75. props: menuProps
  76. }));
  77. } else if (this.popperIsInitialized || show) {
  78. // Add it this way, so it doesn't override someones usage
  79. // with react-poppers <Reference>
  80. if (toggleNode) popperConfig.referenceElement = toggleNode;
  81. menu = React.createElement(Popper, _extends({}, popperConfig, {
  82. innerRef: menuRef,
  83. placement: placement,
  84. eventsEnabled: !!show,
  85. modifiers: _extends({
  86. flip: {
  87. enabled: !!flip
  88. }
  89. }, popperConfig.modifiers)
  90. }), function (_ref) {
  91. var ref = _ref.ref,
  92. style = _ref.style,
  93. popper = _objectWithoutPropertiesLoose(_ref, ["ref", "style"]);
  94. _this2.scheduleUpdate = popper.scheduleUpdate;
  95. return _this2.props.children(_extends({}, popper, childArgs, {
  96. props: _extends({}, menuProps, {
  97. ref: ref,
  98. style: style
  99. })
  100. }));
  101. });
  102. }
  103. return menu && React.createElement(RootCloseWrapper, {
  104. disabled: !show,
  105. event: rootCloseEvent,
  106. onRootClose: this.handleClose
  107. }, menu);
  108. };
  109. return DropdownMenu;
  110. }(React.Component);
  111. DropdownMenu.displayName = 'ReactOverlaysDropdownMenu';
  112. DropdownMenu.propTypes = {
  113. /**
  114. * A render prop that returns a Menu element. The `props`
  115. * argument should spread through to **a component that can accept a ref**.
  116. *
  117. * @type {Function ({
  118. * show: boolean,
  119. * alignEnd: boolean,
  120. * close: (?SyntheticEvent) => void,
  121. * placement: Placement,
  122. * outOfBoundaries: ?boolean,
  123. * scheduleUpdate: () => void,
  124. * props: {
  125. * ref: (?HTMLElement) => void,
  126. * style: { [string]: string | number },
  127. * aria-labelledby: ?string
  128. * },
  129. * arrowProps: {
  130. * ref: (?HTMLElement) => void,
  131. * style: { [string]: string | number },
  132. * },
  133. * }) => React.Element}
  134. */
  135. children: PropTypes.func.isRequired,
  136. /**
  137. * Controls the visible state of the menu, generally this is
  138. * provided by the parent `Dropdown` component,
  139. * but may also be specified as a prop directly.
  140. */
  141. show: PropTypes.bool,
  142. /**
  143. * Aligns the dropdown menu to the 'end' of it's placement position.
  144. * Generally this is provided by the parent `Dropdown` component,
  145. * but may also be specified as a prop directly.
  146. */
  147. alignEnd: PropTypes.bool,
  148. /**
  149. * Enables the Popper.js `flip` modifier, allowing the Dropdown to
  150. * automatically adjust it's placement in case of overlap with the viewport or toggle.
  151. * Refer to the [flip docs](https://popper.js.org/popper-documentation.html#modifiers..flip.enabled) for more info
  152. */
  153. flip: PropTypes.bool,
  154. usePopper: PropTypes.oneOf([true, false]),
  155. /**
  156. * A set of popper options and props passed directly to react-popper's Popper component.
  157. */
  158. popperConfig: PropTypes.object,
  159. /**
  160. * Override the default event used by RootCloseWrapper.
  161. */
  162. rootCloseEvent: PropTypes.string,
  163. /** @private */
  164. onToggle: PropTypes.func,
  165. /** @private */
  166. menuRef: PropTypes.func,
  167. /** @private */
  168. drop: PropTypes.string,
  169. /** @private */
  170. toggleNode: PropTypes.any
  171. };
  172. DropdownMenu.defaultProps = {
  173. usePopper: true
  174. };
  175. var DecoratedDropdownMenu = mapContextToProps(DropdownContext, function (_ref2, props) {
  176. var show = _ref2.show,
  177. alignEnd = _ref2.alignEnd,
  178. toggle = _ref2.toggle,
  179. drop = _ref2.drop,
  180. menuRef = _ref2.menuRef,
  181. toggleNode = _ref2.toggleNode;
  182. return {
  183. drop: drop,
  184. menuRef: menuRef,
  185. toggleNode: toggleNode,
  186. onToggle: toggle,
  187. show: show == null ? props.show : show,
  188. alignEnd: alignEnd == null ? props.alignEnd : alignEnd
  189. };
  190. }, DropdownMenu);
  191. export default DecoratedDropdownMenu;