Migrate Images plugin to ant.design

Summary: {gif:xcsasxxe}

Reviewed By: mweststrate

Differential Revision: D28463799

fbshipit-source-id: 280eaaf0ad5858b3507055a278d1f98fd5668fd0

desktop/plugins/public/fresco/MultipleSelect.tsx

@@ -7,105 +7,47 @@
  * @format
  */
 
-import {Block, Button, colors, FlexColumn, styled, Glyph} from 'flipper';
-import React, {ChangeEvent, Component} from 'react';
+import React, {Component} from 'react';
+import {Layout} from 'flipper-plugin';
+import {Button, Menu, Checkbox, Dropdown} from 'antd';
+import {DownOutlined} from '@ant-design/icons';
+import type {CheckboxChangeEvent} from 'antd/lib/checkbox';
 
-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,
+export default class MultipleSelect extends Component<{
+  selected: Set<string>;
+  options: Set<string>;
+  label: string;
+  onChange: (selectedItem: string, checked: boolean) => void;
+}> {
+  handleOnChange = (option: string, event: CheckboxChangeEvent) => {
+    this.props.onChange(option, event.target.checked);
   };
 
-  handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const {
-      target: {value, checked},
-    } = event;
-    this.props.onChange(value, checked);
+  menu = () => {
+    return (
+      <Menu>
+        {Array.from(this.props.options).map((option, index) => (
+          <Menu.Item key={index} disabled>
+            <Checkbox
+              onChange={(e) => this.handleOnChange(option, e)}
+              checked={this.props.selected.has(option)}
+            />{' '}
+            {option}
+          </Menu.Item>
+        ))}
+      </Menu>
+    );
   };
 
-  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>
+      <Layout.Container>
+        <Dropdown overlay={this.menu}>
+          <Button>
+            Surfaces <DownOutlined />
+          </Button>
+        </Dropdown>
+      </Layout.Container>
     );
   }
 }