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

DropdownMenu.js 7.8KB

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