From 453ff44955c565de6b52154ba8311ff2d0d9db97 Mon Sep 17 00:00:00 2001 From: Viktor_the_great Date: Tue, 10 Dec 2019 02:00:34 +0300 Subject: [PATCH 1/5] pass whole popperConfig to PopperJS (#748) --- src/DropdownMenu.js | 1 + src/usePopper.js | 11 ++++++++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js index fd8b1ac7..1cf42efb 100644 --- a/src/DropdownMenu.js +++ b/src/DropdownMenu.js @@ -40,6 +40,7 @@ export function useDropdownMenu(options = {}) { else if (drop === 'left') placement = alignEnd ? 'left-end' : 'left-start'; const popper = usePopper(toggleElement, menuElement, { + ...popperConfig, placement, enabled: !!(shouldUsePopper && show), eventsEnabled: !!show, diff --git a/src/usePopper.js b/src/usePopper.js index 9530cda9..c67fe2d7 100644 --- a/src/usePopper.js +++ b/src/usePopper.js @@ -22,18 +22,22 @@ const initialArrowStyles = {}; * @param {String} options.placement The popper element placement relative to the reference element * @param {Boolean} options.positionFixed use fixed positioning * @param {Boolean} options.eventsEnabled have Popper listen on window resize events to reposition the element + * @param {Function} options.onCreate called when the popper is created + * @param {Function} options.onUpdate called when the popper is updated */ export default function usePopper( referenceElement, popperElement, - { + options = {}, +) { + const { enabled = true, placement = 'bottom', positionFixed = false, eventsEnabled = true, modifiers = {}, - } = {}, -) { + } = options; + const popperInstanceRef = useRef(); const hasArrow = !!(modifiers.arrow && modifiers.arrow.element); @@ -81,6 +85,7 @@ export default function usePopper( }; popperInstanceRef.current = new PopperJS(referenceElement, popperElement, { + ...options, placement, positionFixed, modifiers: { From a0ecb67f68179996c5774bf3dfbd399c3cdea2b7 Mon Sep 17 00:00:00 2001 From: Viktor_the_great Date: Tue, 10 Dec 2019 17:44:49 +0300 Subject: [PATCH 2/5] pass whole popperConfig to PopperJS (#748) * use options.popperConfig to initiate PopperJS --- src/DropdownMenu.js | 2 +- src/usePopper.js | 14 ++++++-------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js index 1cf42efb..cc79f177 100644 --- a/src/DropdownMenu.js +++ b/src/DropdownMenu.js @@ -40,7 +40,7 @@ export function useDropdownMenu(options = {}) { else if (drop === 'left') placement = alignEnd ? 'left-end' : 'left-start'; const popper = usePopper(toggleElement, menuElement, { - ...popperConfig, + popperConfig, placement, enabled: !!(shouldUsePopper && show), eventsEnabled: !!show, diff --git a/src/usePopper.js b/src/usePopper.js index c67fe2d7..24bb8725 100644 --- a/src/usePopper.js +++ b/src/usePopper.js @@ -22,22 +22,20 @@ const initialArrowStyles = {}; * @param {String} options.placement The popper element placement relative to the reference element * @param {Boolean} options.positionFixed use fixed positioning * @param {Boolean} options.eventsEnabled have Popper listen on window resize events to reposition the element - * @param {Function} options.onCreate called when the popper is created - * @param {Function} options.onUpdate called when the popper is updated + * @param {Object} options.popperConfig Popper.js options (except modifiers, placement, positionFixed) */ export default function usePopper( referenceElement, popperElement, - options = {}, -) { - const { + { enabled = true, placement = 'bottom', positionFixed = false, eventsEnabled = true, modifiers = {}, - } = options; - + popperConfig = {}, + } = {}, +) { const popperInstanceRef = useRef(); const hasArrow = !!(modifiers.arrow && modifiers.arrow.element); @@ -85,7 +83,7 @@ export default function usePopper( }; popperInstanceRef.current = new PopperJS(referenceElement, popperElement, { - ...options, + ...popperConfig, placement, positionFixed, modifiers: { From 892401c5a833a0dd59091e49d2d212d67bd56f90 Mon Sep 17 00:00:00 2001 From: Viktor_the_great Date: Tue, 10 Dec 2019 18:32:20 +0300 Subject: [PATCH 3/5] pass whole popperConfig to PopperJS (#748) * fixed pass popperConfig option --- src/Overlay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Overlay.js b/src/Overlay.js index 9d531b5d..d96a0d1e 100644 --- a/src/Overlay.js +++ b/src/Overlay.js @@ -33,7 +33,7 @@ const Overlay = React.forwardRef((props, outerRef) => { const { modifiers = {} } = popperConfig; const { styles, arrowStyles, ...popper } = usePopper(target, rootElement, { - ...popperConfig, + popperConfig, placement: placement || 'bottom', enableEvents: props.show, modifiers: { From 4709d00e57ed775664c5aac419f8fb195e15c1e9 Mon Sep 17 00:00:00 2001 From: Viktor_the_great Date: Wed, 11 Dec 2019 18:43:57 +0300 Subject: [PATCH 4/5] Revert "pass whole popperConfig to PopperJS (#748)" This reverts commit 453ff449 --- src/DropdownMenu.js | 2 +- src/Overlay.js | 2 +- src/usePopper.js | 14 ++++++++------ 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js index cc79f177..1cf42efb 100644 --- a/src/DropdownMenu.js +++ b/src/DropdownMenu.js @@ -40,7 +40,7 @@ export function useDropdownMenu(options = {}) { else if (drop === 'left') placement = alignEnd ? 'left-end' : 'left-start'; const popper = usePopper(toggleElement, menuElement, { - popperConfig, + ...popperConfig, placement, enabled: !!(shouldUsePopper && show), eventsEnabled: !!show, diff --git a/src/Overlay.js b/src/Overlay.js index d96a0d1e..9d531b5d 100644 --- a/src/Overlay.js +++ b/src/Overlay.js @@ -33,7 +33,7 @@ const Overlay = React.forwardRef((props, outerRef) => { const { modifiers = {} } = popperConfig; const { styles, arrowStyles, ...popper } = usePopper(target, rootElement, { - popperConfig, + ...popperConfig, placement: placement || 'bottom', enableEvents: props.show, modifiers: { diff --git a/src/usePopper.js b/src/usePopper.js index 24bb8725..c67fe2d7 100644 --- a/src/usePopper.js +++ b/src/usePopper.js @@ -22,20 +22,22 @@ const initialArrowStyles = {}; * @param {String} options.placement The popper element placement relative to the reference element * @param {Boolean} options.positionFixed use fixed positioning * @param {Boolean} options.eventsEnabled have Popper listen on window resize events to reposition the element - * @param {Object} options.popperConfig Popper.js options (except modifiers, placement, positionFixed) + * @param {Function} options.onCreate called when the popper is created + * @param {Function} options.onUpdate called when the popper is updated */ export default function usePopper( referenceElement, popperElement, - { + options = {}, +) { + const { enabled = true, placement = 'bottom', positionFixed = false, eventsEnabled = true, modifiers = {}, - popperConfig = {}, - } = {}, -) { + } = options; + const popperInstanceRef = useRef(); const hasArrow = !!(modifiers.arrow && modifiers.arrow.element); @@ -83,7 +85,7 @@ export default function usePopper( }; popperInstanceRef.current = new PopperJS(referenceElement, popperElement, { - ...popperConfig, + ...options, placement, positionFixed, modifiers: { From c56c30c29b6d3edb3da44a614000aa99fd543c4f Mon Sep 17 00:00:00 2001 From: Viktor_the_great Date: Wed, 11 Dec 2019 18:52:00 +0300 Subject: [PATCH 5/5] use popperOptions in usePopper (#748) --- src/usePopper.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/usePopper.js b/src/usePopper.js index c67fe2d7..24c57d3b 100644 --- a/src/usePopper.js +++ b/src/usePopper.js @@ -28,16 +28,15 @@ const initialArrowStyles = {}; export default function usePopper( referenceElement, popperElement, - options = {}, -) { - const { + { enabled = true, placement = 'bottom', positionFixed = false, eventsEnabled = true, modifiers = {}, - } = options; - + ...popperOptions + } = {}, +) { const popperInstanceRef = useRef(); const hasArrow = !!(modifiers.arrow && modifiers.arrow.element); @@ -85,7 +84,7 @@ export default function usePopper( }; popperInstanceRef.current = new PopperJS(referenceElement, popperElement, { - ...options, + ...popperOptions, placement, positionFixed, modifiers: {