Move plugins to "sonar/desktop/plugins"

Summary:
Plugins moved from "sonar/desktop/src/plugins" to "sonar/desktop/plugins".

Fixed all the paths after moving.

New "desktop" folder structure:
- `src` - Flipper desktop app JS code executing in Electron Renderer (Chrome) process.
- `static` - Flipper desktop app JS code executing in Electron Main (Node.js) process.
- `plugins` - Flipper desktop JS plugins.
- `pkg` - Flipper packaging lib and CLI tool.
- `doctor` - Flipper diagnostics lib and CLI tool.
- `scripts` - Build scripts for Flipper desktop app.
- `headless` - Headless version of Flipper desktop app.
- `headless-tests` - Integration tests running agains Flipper headless version.

Reviewed By: mweststrate

Differential Revision: D20344186

fbshipit-source-id: d020da970b2ea1e001f9061a8782bfeb54e31ba0

desktop/plugins/fresco/MultipleSelect.tsx

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Block, Button, colors, FlexColumn, styled, Glyph} from 'flipper';
+import React, {ChangeEvent, Component} from 'react';
+
+const Container = styled(Block)({
+  position: 'relative',
+  marginLeft: '10px',
+});
+
+const List = styled(FlexColumn)<{visibleList: boolean}>(props => ({
+  display: props.visibleList ? 'flex' : 'none',
+  position: 'absolute',
+  top: '32px',
+  left: 0,
+  zIndex: 4,
+  width: 'auto',
+  minWidth: '200px',
+  backgroundColor: colors.white,
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: colors.macOSTitleBarButtonBorderBottom,
+  borderRadius: 4,
+}));
+
+const ListItem = styled.label({
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  color: colors.light50,
+  fontSize: '11px',
+  padding: '0 5px',
+  '&:hover': {
+    backgroundColor: colors.macOSTitleBarButtonBackgroundActiveHighlight,
+  },
+});
+
+const Checkbox = styled.input({
+  display: 'inline-block',
+  marginRight: 5,
+  verticalAlign: 'middle',
+});
+
+const StyledGlyph = styled(Glyph)({
+  marginLeft: '4px',
+});
+
+type State = {
+  visibleList: boolean;
+};
+
+export default class MultipleSelect extends Component<
+  {
+    selected: Set<string>;
+
+    options: Set<string>;
+
+    onChange: (selectedItem: string, checked: boolean) => void;
+
+    label: string;
+  },
+  State
+> {
+  state = {
+    visibleList: false,
+  };
+
+  handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const {
+      target: {value, checked},
+    } = event;
+    this.props.onChange(value, checked);
+  };
+
+  toggleList = () => this.setState({visibleList: !this.state.visibleList});
+
+  render() {
+    const {selected, label, options} = this.props;
+    const {visibleList} = this.state;
+    const icon = visibleList ? 'chevron-up' : 'chevron-down';
+
+    return (
+      <Container>
+        <Button onClick={this.toggleList}>
+          {label} <StyledGlyph name={icon} />
+        </Button>
+        <List visibleList={visibleList}>
+          {Array.from(options).map((option, index) => (
+            <ListItem key={index}>
+              <Checkbox
+                onChange={this.handleOnChange}
+                checked={selected.has(option)}
+                value={option}
+                type="checkbox"
+              />
+              {option}
+            </ListItem>
+          ))}
+        </List>
+      </Container>
+    );
+  }
+}