mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
fix(dashboard): Close FiltersBadge popover on window resize (#15305)
This commit is contained in:
parent
f31d573561
commit
6324490dd3
@ -16,7 +16,7 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React, { useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Global, css } from '@emotion/react';
|
import { Global, css } from '@emotion/react';
|
||||||
import { t, useTheme } from '@superset-ui/core';
|
import { t, useTheme } from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
@ -53,8 +53,18 @@ const DetailsPanelPopover = ({
|
|||||||
onHighlightFilterSource,
|
onHighlightFilterSource,
|
||||||
children,
|
children,
|
||||||
}: DetailsPanelProps) => {
|
}: DetailsPanelProps) => {
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
|
||||||
|
// we don't need to clean up useEffect, setting { once: true } removes the event listener after handle function is called
|
||||||
|
useEffect(() => {
|
||||||
|
if (visible) {
|
||||||
|
window.addEventListener('resize', () => setVisible(false), {
|
||||||
|
once: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [visible]);
|
||||||
|
|
||||||
const getDefaultActivePanel = () => {
|
const getDefaultActivePanel = () => {
|
||||||
const result = [];
|
const result = [];
|
||||||
if (appliedCrossFilterIndicators.length) {
|
if (appliedCrossFilterIndicators.length) {
|
||||||
@ -77,6 +87,7 @@ const DetailsPanelPopover = ({
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
function handlePopoverStatus(isOpen: boolean) {
|
function handlePopoverStatus(isOpen: boolean) {
|
||||||
|
setVisible(isOpen);
|
||||||
// every time the popover opens, make sure the most relevant panel is active
|
// every time the popover opens, make sure the most relevant panel is active
|
||||||
if (isOpen) {
|
if (isOpen) {
|
||||||
setActivePanels(getDefaultActivePanel());
|
setActivePanels(getDefaultActivePanel());
|
||||||
@ -256,6 +267,7 @@ const DetailsPanelPopover = ({
|
|||||||
<Popover
|
<Popover
|
||||||
overlayClassName="filterStatusPopover"
|
overlayClassName="filterStatusPopover"
|
||||||
content={content}
|
content={content}
|
||||||
|
visible={visible}
|
||||||
onVisibleChange={handlePopoverStatus}
|
onVisibleChange={handlePopoverStatus}
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
|
Loading…
Reference in New Issue
Block a user