jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dont show filter if nothing to filter

Browse Source 
Reviewed By: lblasa

Differential Revision: D48471138

fbshipit-source-id: c86d2542b7dc98e323fdde9ae8cc687bd10dfb3a
This commit is contained in:
Luke De Feo
2023-08-21 04:24:16 -07:00
committed by Facebook GitHub Bot
parent 22d1bc2552
commit 03ba22451d
1 changed files with 77 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx
View File

@@ -72,6 +72,8 @@ export const FrameworkEventsInspector: React.FC<Props> = ({
filteredThreads.size === 0 || filteredThreads.has(event.thread!), filteredThreads.size === 0 || filteredThreads.has(event.thread!),
); );
const showThreadsSection = allThreads.length > 1;
const showEventTypesSection = allEventTypes.length > 1;
return ( return (
<Layout.Container gap="small" padv="small"> <Layout.Container gap="small" padv="small">
<Layout.Right center gap> <Layout.Right center gap>
@@ -90,80 +92,82 @@ export const FrameworkEventsInspector: React.FC<Props> = ({
} }
/> />
</Tooltip> </Tooltip>
<Dropdown {(showEventTypesSection || showThreadsSection) && (
overlayStyle={{minWidth: 200}} <Dropdown
overlay={ overlayStyle={{minWidth: 200}}
<Layout.Container overlay={
gap="small" <Layout.Container
pad="small" gap="small"
style={{ pad="small"
backgroundColor: theme.white, style={{
borderRadius: theme.borderRadius, backgroundColor: theme.white,
boxShadow: `0 0 4px 1px rgba(0,0,0,0.10)`, borderRadius: theme.borderRadius,
}}> boxShadow: `0 0 4px 1px rgba(0,0,0,0.10)`,
{allThreads.length > 1 && ( }}>
<> {showThreadsSection && (
<Typography.Text strong>By thread</Typography.Text> <>
{allThreads.map((thread) => ( <Typography.Text strong>By thread</Typography.Text>
<MultiSelectableDropDownItem {allThreads.map((thread) => (
onSelect={(thread, selected) => { <MultiSelectableDropDownItem
setFilteredThreads((cur) => onSelect={(thread, selected) => {
produce(cur, (draft) => { setFilteredThreads((cur) =>
if (selected) { produce(cur, (draft) => {
draft.add(thread); if (selected) {
} else { draft.add(thread);
draft.delete(thread); } else {
} draft.delete(thread);
}), }
); }),
}} );
selectedValues={filteredThreads} }}
key={thread} selectedValues={filteredThreads}
value={thread as string} key={thread}
text={startCase(thread) as string} value={thread as string}
/> text={startCase(thread) as string}
))} />
</> ))}
)} </>
)}
{allEventTypes.length > 1 && ( {showEventTypesSection && (
<> <>
<Typography.Text strong>By event type</Typography.Text> <Typography.Text strong>By event type</Typography.Text>
{allEventTypes.map((eventType) => ( {allEventTypes.map((eventType) => (
<MultiSelectableDropDownItem <MultiSelectableDropDownItem
onSelect={(eventType, selected) => { onSelect={(eventType, selected) => {
setFilteredEventTypes((cur) => setFilteredEventTypes((cur) =>
produce(cur, (draft) => { produce(cur, (draft) => {
if (selected) { if (selected) {
draft.add(eventType); draft.add(eventType);
} else { } else {
draft.delete(eventType); draft.delete(eventType);
} }
}), }),
); );
}} }}
selectedValues={filteredEventTypes} selectedValues={filteredEventTypes}
key={eventType} key={eventType}
value={eventType as string} value={eventType as string}
text={last(eventType.split('.')) as string} text={last(eventType.split('.')) as string}
/> />
))} ))}
</> </>
)} )}
</Layout.Container> </Layout.Container>
}> }>
<Button <Button
shape="circle" shape="circle"
icon={ icon={
<Badge <Badge
offset={[8, -8]} offset={[8, -8]}
size="small" size="small"
count={filteredEventTypes.size + filteredThreads.size}> count={filteredEventTypes.size + filteredThreads.size}>
<FilterOutlined style={{}} /> <FilterOutlined style={{}} />
</Badge> </Badge>
} }
/> />
</Dropdown> </Dropdown>
)}
</Layout.Horizontal> </Layout.Horizontal>
</Layout.Right> </Layout.Right>