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