v1.16.0

Author: danieloprado

API.md

@@ -101,11 +101,14 @@ All [material-ui](https://material-ui.com/api/select/) props and:
 
 #### Autocomplete
 
-| Props    | Required | Type                                           | Description |
-|----------|----------|------------------------------------------------|-------------|
-| value    | true     | any                                            |             |
-| options  | true     | object { value: string/number, label: string } |             |
-| onChange | true     | Function(string/number)                        |             |
+All [react-select](https://github.com/JedWatson/react-select) props and:
+
+
+| Props    | Required | Type                                          | Description |
+|----------|----------|-----------------------------------------------|-------------|
+| value    | true     | any / any[]                                   |             |
+| options  | true     | array { value: string/number, label: string } |             |
+| onChange | true     | Function(value: any / any[])                  |             |
 
 #### HTML
 

components/Autocomplete/Input.tsx

@@ -0,0 +1,117 @@
+import Chip from '@material-ui/core/Chip';
+import MenuItem from '@material-ui/core/MenuItem';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import CancelIcon from '@material-ui/icons/Cancel';
+import classNames from 'classnames';
+import * as React from 'react';
+
+function NoOptionsMessage(props: any) {
+  return (
+    <Typography
+      color='textSecondary'
+      className={props.selectProps.classes.noOptionsMessage}
+      {...props.innerProps}
+    >
+      {props.children}
+    </Typography>
+  );
+}
+
+function inputComponent({ inputRef, ...props }: any) {
+  return <div ref={inputRef} {...props} />;
+}
+
+function Control(props: any) {
+  return (
+    <TextField
+      fullWidth
+      InputProps={{
+        inputComponent,
+        inputProps: {
+          className: props.selectProps.classes.input,
+          inputRef: props.innerRef,
+          children: props.children,
+          ...props.innerProps,
+        },
+      }}
+      {...props.selectProps.textFieldProps}
+    />
+  );
+}
+
+function Option(props: any) {
+  return (
+    <MenuItem
+      buttonRef={props.innerRef}
+      selected={props.isFocused}
+      component='div'
+      style={{
+        fontWeight: props.isSelected ? 500 : 400,
+      }}
+      {...props.innerProps}
+    >
+      {props.children}
+    </MenuItem>
+  );
+}
+
+function Placeholder(props: any) {
+  return (
+    <Typography
+      color='textSecondary'
+      className={props.selectProps.classes.placeholder}
+      {...props.innerProps}
+    >
+      {props.children}
+    </Typography>
+  );
+}
+
+function SingleValue(props: any) {
+  return (
+    <Typography className={props.selectProps.classes.singleValue} {...props.innerProps}>
+      {props.children}
+    </Typography>
+  );
+}
+
+function ValueContainer(props: any) {
+  return <div className={props.selectProps.classes.valueContainer}>{props.children}</div>;
+}
+
+function MultiValue(props: any) {
+  return (
+    <Chip
+      tabIndex={-1}
+      label={props.children}
+      className={classNames(props.selectProps.classes.chip, {
+        [props.selectProps.classes.chipFocused]: props.isFocused,
+      })}
+      onDelete={props.removeProps.onClick}
+      deleteIcon={<CancelIcon {...props.removeProps} />}
+    />
+  );
+}
+
+function Menu(props: any) {
+  return (
+    <Paper square className={props.selectProps.classes.paper} {...props.innerProps}>
+      {props.children}
+    </Paper>
+  );
+}
+
+const components = {
+  Control,
+  Menu,
+  MultiValue,
+  NoOptionsMessage,
+  Option,
+  Placeholder,
+  SingleValue,
+  ValueContainer,
+};
+
+export default components;