mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Navigation: Fix broken layout at 544px (#63793)
* ensure media queries transition properly * fix unit tests
This commit is contained in:
parent
78b39bb282
commit
8e9ccfc66e
@ -16,8 +16,8 @@ export interface ThemeBreakpoints {
|
||||
values: ThemeBreakpointValues;
|
||||
keys: string[];
|
||||
unit: string;
|
||||
up: (key: ThemeBreakpointsKey) => string;
|
||||
down: (key: ThemeBreakpointsKey) => string;
|
||||
up: (key: ThemeBreakpointsKey | number) => string;
|
||||
down: (key: ThemeBreakpointsKey | number) => string;
|
||||
}
|
||||
|
||||
/** @internal */
|
||||
|
@ -29,6 +29,14 @@ const renderWithProvider = ({ initialState }: { initialState?: Partial<appTypes.
|
||||
};
|
||||
|
||||
describe('OrganisationSwitcher', () => {
|
||||
beforeEach(() => {
|
||||
(window.matchMedia as jest.Mock).mockImplementation(() => ({
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
matches: true,
|
||||
}));
|
||||
});
|
||||
|
||||
it('should only render if more than one organisations', () => {
|
||||
renderWithProvider({
|
||||
initialState: {
|
||||
@ -75,7 +83,7 @@ describe('OrganisationSwitcher', () => {
|
||||
(window.matchMedia as jest.Mock).mockImplementation(() => ({
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
matches: () => true,
|
||||
matches: false,
|
||||
}));
|
||||
renderWithProvider({
|
||||
initialState: {
|
||||
|
@ -31,12 +31,12 @@ export function OrganizationSwitcher() {
|
||||
|
||||
const breakpoint = theme.breakpoints.values.sm;
|
||||
|
||||
const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
|
||||
const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
|
||||
|
||||
useMediaQueryChange({
|
||||
breakpoint,
|
||||
onChange: (e) => {
|
||||
setIsSmallScreen(e.matches);
|
||||
setIsSmallScreen(!e.matches);
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -19,13 +19,13 @@ export const QuickAdd = ({}: Props) => {
|
||||
const navBarTree = useSelector((state) => state.navBarTree);
|
||||
const breakpoint = theme.breakpoints.values.sm;
|
||||
|
||||
const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
|
||||
const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
|
||||
const createActions = useMemo(() => findCreateActions(navBarTree), [navBarTree]);
|
||||
|
||||
useMediaQueryChange({
|
||||
breakpoint,
|
||||
onChange: (e) => {
|
||||
setIsSmallScreen(e.matches);
|
||||
setIsSmallScreen(!e.matches);
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -17,7 +17,7 @@ describe('TopSearchBarSection', () => {
|
||||
(window.matchMedia as jest.Mock).mockImplementation(() => ({
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
matches: () => false,
|
||||
matches: true,
|
||||
}));
|
||||
|
||||
const { container } = renderComponent();
|
||||
@ -30,7 +30,7 @@ describe('TopSearchBarSection', () => {
|
||||
(window.matchMedia as jest.Mock).mockImplementation(() => ({
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
matches: () => true,
|
||||
matches: false,
|
||||
}));
|
||||
|
||||
const { container } = renderComponent();
|
||||
|
@ -15,12 +15,12 @@ export function TopSearchBarSection({ children, align = 'left' }: TopSearchBarSe
|
||||
const theme = useTheme2();
|
||||
const breakpoint = theme.breakpoints.values.sm;
|
||||
|
||||
const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
|
||||
const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
|
||||
|
||||
useMediaQueryChange({
|
||||
breakpoint,
|
||||
onChange: (e: MediaQueryListEvent) => {
|
||||
setIsSmallScreen(e.matches);
|
||||
setIsSmallScreen(!e.matches);
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -18,12 +18,12 @@ export function TopSearchBarCommandPaletteTrigger() {
|
||||
|
||||
const breakpoint = theme.breakpoints.values.sm;
|
||||
|
||||
const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia(`(max-width: ${breakpoint}px)`).matches);
|
||||
const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
|
||||
|
||||
useMediaQueryChange({
|
||||
breakpoint,
|
||||
onChange: (e) => {
|
||||
setIsSmallScreen(e.matches);
|
||||
setIsSmallScreen(!e.matches);
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -8,7 +8,7 @@ export function useMediaQueryChange({
|
||||
onChange: (e: MediaQueryListEvent) => void;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
const mediaQuery = window.matchMedia(`(max-width: ${breakpoint}px)`);
|
||||
const mediaQuery = window.matchMedia(`(min-width: ${breakpoint}px)`);
|
||||
const onMediaQueryChange = (e: MediaQueryListEvent) => onChange(e);
|
||||
mediaQuery.addEventListener('change', onMediaQueryChange);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user