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

Unwrap device plugins in sidebar in certain scenarios

Browse Source 
Summary:
This diff removes the 'device plugins' section, and shows plugin at top level in certain scenarios:

- there are no other clients
- there is only one device plugin
- the device has been imported

This removes visual clutter

Reviewed By: nikoant

Differential Revision: D19789511

fbshipit-source-id: 6a5fce120ac811428662828ee43f7ab7f3331362
This commit is contained in:
Michel Weststrate
2020-02-11 07:27:00 -08:00
committed by Facebook Github Bot
parent 3dcfe9f3ae
commit 535ed88bc3
1 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/chrome/mainsidebar/MainSidebar2.tsx
View File

@@ -235,6 +235,27 @@ class MainSidebar2 extends PureComponent<Props, State> {
selectedDevice,
} = this.props;
const clients = getAvailableClients(device, this.props.clients);
const devicePluginsItems = device.devicePlugins.map(pluginName => {
const plugin = this.props.devicePlugins.get(pluginName)!;
return (
<PluginSidebarListItem
key={plugin.id}
isActive={plugin.id === selectedPlugin && selectedDevice === device}
onClick={() =>
selectPlugin({
selectedPlugin: plugin.id,
selectedApp: null,
deepLinkPayload: null,
selectedDevice: device,
})
}
plugin={plugin}
/>
);
});
const wrapDevicePlugins =
clients.length > 0 && device.devicePlugins.length > 1 && !device.source;
return (
<SidebarSection
title={device.displayTitle()}
@@ -242,50 +263,29 @@ class MainSidebar2 extends PureComponent<Props, State> {
level={1}
defaultCollapsed={!canBeDefaultDevice(device)}>
{this.showArchivedDeviceDetails(device)}
{device.devicePlugins.length > 0 ? (
{wrapDevicePlugins ? (
<SidebarSection
level={2}
title="Device Plugins"
defaultCollapsed={true}>
{device.devicePlugins.map(pluginName => {
const plugin = this.props.devicePlugins.get(pluginName)!;
return (
<PluginSidebarListItem
key={plugin.id}
isActive={
plugin.id === selectedPlugin && selectedDevice === device
}
onClick={() =>
selectPlugin({
selectedPlugin: plugin.id,
selectedApp: null,
deepLinkPayload: null,
selectedDevice: device,
})
}
plugin={plugin}
/>
);
})}
{devicePluginsItems}
</SidebarSection>
) : null}
{clients.length === 0 ? (
<NoClients />
) : (
clients.map(client => (
<PluginList
device={device}
key={client.id}
client={client}
clientPlugins={clientPlugins}
starPlugin={starPlugin}
userStarredPlugins={userStarredPlugins}
selectedPlugin={selectedPlugin}
selectedApp={selectedApp}
selectPlugin={selectPlugin}
/>
))
<div style={{marginTop: 6}}>{devicePluginsItems}</div>
)}
{clients.map(client => (
<PluginList
device={device}
key={client.id}
client={client}
clientPlugins={clientPlugins}
starPlugin={starPlugin}
userStarredPlugins={userStarredPlugins}
selectedPlugin={selectedPlugin}
selectedApp={selectedApp}
selectPlugin={selectPlugin}
/>
))}
</SidebarSection>
);
}