Skip to content

Commit 86e8413

Browse files
emzoumpoemzoumpo
authored
fix(react-query-devtools): do not hide sort options when filter is used (#5038)
Sort options (asc / desc, and sort function) were hidden when filter was set. Sort options are now shown along with the filter, even when a filter is set. Closes #4989
1 parent 9434a16 commit 86e8413

File tree

1 file changed

+88
-100
lines changed

1 file changed

+88
-100
lines changed

‎packages/react-query-devtools/src/devtools.tsx‎

Lines changed: 88 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -621,106 +621,94 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
621621
width: '100%',
622622
}}
623623
/>
624-
{!filter ? (
625-
<>
626-
<Select
627-
aria-label="Sort queries"
628-
value={sort}
629-
onChange={(e) => setSort(e.target.value)}
630-
style={{
631-
flex: '1',
632-
minWidth: 75,
633-
marginRight: '.5em',
634-
}}
635-
>
636-
{Object.keys(sortFns).map((key) => (
637-
<option key={key} value={key}>
638-
Sort by {key}
639-
</option>
640-
))}
641-
</Select>
642-
<Button
643-
type="button"
644-
onClick={() => setBaseSort((old) => old * -1)}
645-
style={{
646-
padding: '.3em .4em',
647-
marginRight: '.5em',
648-
}}
649-
>
650-
{baseSort === 1 ? '⬆ Asc' : '⬇ Desc'}
651-
</Button>
652-
<Button
653-
type="button"
654-
onClick={() => {
655-
if (isMockOffline) {
656-
onlineManager.setOnline(undefined)
657-
setMockOffline(false)
658-
window.dispatchEvent(new Event('online'))
659-
} else {
660-
onlineManager.setOnline(false)
661-
setMockOffline(true)
662-
}
663-
}}
664-
aria-label={
665-
isMockOffline
666-
? 'Restore offline mock'
667-
: 'Mock offline behavior'
668-
}
669-
title={
670-
isMockOffline
671-
? 'Restore offline mock'
672-
: 'Mock offline behavior'
673-
}
674-
style={{
675-
padding: '0',
676-
height: '2em',
677-
}}
678-
>
679-
<svg
680-
xmlns="http://www.w3.org/2000/svg"
681-
width="2em"
682-
height="2em"
683-
viewBox="0 0 24 24"
684-
stroke={isMockOffline ? theme.danger : 'currentColor'}
685-
fill="none"
686-
>
687-
{isMockOffline ? (
688-
<>
689-
<path
690-
stroke="none"
691-
d="M0 0h24v24H0z"
692-
fill="none"
693-
/>
694-
<line x1="12" y1="18" x2="12.01" y2="18" />
695-
<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
696-
<path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" />
697-
<path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374" />
698-
<line x1="3" y1="3" x2="21" y2="21" />
699-
</>
700-
) : (
701-
<>
702-
<path
703-
stroke="none"
704-
d="M0 0h24v24H0z"
705-
fill="none"
706-
/>
707-
<line x1="12" y1="18" x2="12.01" y2="18" />
708-
<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
709-
<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
710-
<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
711-
</>
712-
)}
713-
</svg>
714-
<ScreenReader
715-
text={
716-
isMockOffline
717-
? 'Restore offline mock'
718-
: 'Mock offline behavior'
719-
}
720-
/>
721-
</Button>
722-
</>
723-
) : null}
624+
<Select
625+
aria-label="Sort queries"
626+
value={sort}
627+
onChange={(e) => setSort(e.target.value)}
628+
style={{
629+
flex: '1',
630+
minWidth: 75,
631+
marginRight: '.5em',
632+
}}
633+
>
634+
{Object.keys(sortFns).map((key) => (
635+
<option key={key} value={key}>
636+
Sort by {key}
637+
</option>
638+
))}
639+
</Select>
640+
<Button
641+
type="button"
642+
onClick={() => setBaseSort((old) => old * -1)}
643+
style={{
644+
padding: '.3em .4em',
645+
marginRight: '.5em',
646+
}}
647+
>
648+
{baseSort === 1 ? '⬆ Asc' : '⬇ Desc'}
649+
</Button>
650+
<Button
651+
type="button"
652+
onClick={() => {
653+
if (isMockOffline) {
654+
onlineManager.setOnline(undefined)
655+
setMockOffline(false)
656+
window.dispatchEvent(new Event('online'))
657+
} else {
658+
onlineManager.setOnline(false)
659+
setMockOffline(true)
660+
}
661+
}}
662+
aria-label={
663+
isMockOffline
664+
? 'Restore offline mock'
665+
: 'Mock offline behavior'
666+
}
667+
title={
668+
isMockOffline
669+
? 'Restore offline mock'
670+
: 'Mock offline behavior'
671+
}
672+
style={{
673+
padding: '0',
674+
height: '2em',
675+
}}
676+
>
677+
<svg
678+
xmlns="http://www.w3.org/2000/svg"
679+
width="2em"
680+
height="2em"
681+
viewBox="0 0 24 24"
682+
stroke={isMockOffline ? theme.danger : 'currentColor'}
683+
fill="none"
684+
>
685+
{isMockOffline ? (
686+
<>
687+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
688+
<line x1="12" y1="18" x2="12.01" y2="18" />
689+
<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
690+
<path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" />
691+
<path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374" />
692+
<line x1="3" y1="3" x2="21" y2="21" />
693+
</>
694+
) : (
695+
<>
696+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
697+
<line x1="12" y1="18" x2="12.01" y2="18" />
698+
<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
699+
<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
700+
<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
701+
</>
702+
)}
703+
</svg>
704+
<ScreenReader
705+
text={
706+
isMockOffline
707+
? 'Restore offline mock'
708+
: 'Mock offline behavior'
709+
}
710+
/>
711+
</Button>
724712
</div>
725713
</div>
726714
</div>

0 commit comments

Comments
 (0)