[Genetics] Begin TS Refactor of Autocomplete, fix Control/Input abstr…

…action (#354)

* rename: src/ot-ui-components/components/search/Autocomplete.jsx -> src/ot-ui-components/components/search/Autocomplete.tsx

* rename: src/ot-ui-components/components/search/NoOptionsMessage.jsx -> src/ot-ui-components/components/search/NoOptionsMessage.tsx

* refactor: convert NoOptionsMessage to ts

* rename: Control.jsx -> Control.tsx

* refactor: convert Control to ts

* refactor: for Autocomplete, change Control to handle container only, and add Input element to use Textfield

apps/genetics/src/ot-ui-components/components/search/Autocomplete.jsx

@@ -2,9 +2,10 @@ import React from 'react';
 import Select from 'react-select';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
 import MenuItem from '@material-ui/core/MenuItem';
 
+import Control from "./Control";
+import Input from "./Input";
 import Placeholder from './Placeholder';
 import NoOptionsMessage from './NoOptionsMessage';
 import SingleValue from './SingleValue';
@@ -47,28 +48,6 @@ const OptionContainer = props => {
   );
 };
 
-const InputComponent = ({ inputRef, ...rest }) => (
-  <div ref={inputRef} {...rest} />
-);
-
-function Control(props) {
-  return (
-    <TextField
-      fullWidth
-      InputProps={{
-        inputComponent: InputComponent,
-        inputProps: {
-          style: { display: 'flex', backgroundColor: '#eee' },
-          inputRef: props.innerRef,
-          children: props.children,
-          ...props.innerProps,
-        },
-      }}
-      {...props.selectProps.textFieldProps}
-    />
-  );
-}
-
 class Autocomplete extends React.Component {
   state = {
     value: null,
@@ -122,6 +101,7 @@ class Autocomplete extends React.Component {
       MultiValue,
       IndicatorSeparator,
       ClearIndicator,
+      Input,
     };
 
     return (
@@ -137,7 +117,6 @@ class Autocomplete extends React.Component {
           hideSelectedOptions={false}
           getOptionLabel={getOptionLabel}
           getOptionValue={getOptionValue}
-          menuPortalTarget={document.body}
           menuPlacement="auto"
           menuPosition="absolute"
         />

apps/genetics/src/ot-ui-components/components/search/Control.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { ControlProps } from "react-select";
+import { Box } from "@material-ui/core";
+
+const useStyles = makeStyles(_theme => ({
+  control: {
+    display: "flex",
+    backgroundColor: "#eee",
+    padding: "4px",
+  },
+}));
+
+const Control = ({ innerProps, children }: ControlProps) => {
+  const classes = useStyles();
+  return (
+    <Box id="control" className={classes.control} {...innerProps}>
+      {children}
+    </Box>
+  );
+};
+
+export default Control;

apps/genetics/src/ot-ui-components/components/search/Input.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { TextField } from "@material-ui/core";
+import { InputProps } from "react-select";
+
+const Input = ({ innerRef, ...innerProps }: InputProps) => {
+  return <TextField fullWidth inputProps={{ ref: innerRef, ...innerProps }} />;
+};
+
+export default Input;

apps/genetics/src/ot-ui-components/components/search/NoOptionsMessage.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/core/styles";
+import { GroupBase, NoticeProps } from "react-select";
+
+const useStyles = makeStyles(theme => {
+  return {
+    noOptionsMessage: {
+      padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    },
+  };
+});
+
+const NoOptionsMessage = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({
+  innerProps,
+  children,
+}: Partial<NoticeProps<Option, IsMulti, Group>>) => {
+  const classes = useStyles();
+  // Parse out innerProps properties that are incompatible with Typography
+  const { color, ref, ...restProps } = innerProps || {};
+  return (
+    <Typography
+      color="textSecondary"
+      className={classes.noOptionsMessage}
+      {...restProps}
+      // `react-select` NoticeProps innerProps is a `div` element, but `Typography` expects a `span` element
+      ref={ref as React.RefObject<HTMLSpanElement>}
+    >
+      {children}
+    </Typography>
+  );
+};
+
+export default NoOptionsMessage;