[docs] CustomInputBase TS Demo (#15209)

[docs] Add CustomInputBase TypeScript demo

Author: jasondashwang

docs/src/pages/demos/text-fields/CustomizedInputBase.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, WithStyles, withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import InputBase from '@material-ui/core/InputBase';
+import Divider from '@material-ui/core/Divider';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import SearchIcon from '@material-ui/icons/Search';
+import DirectionsIcon from '@material-ui/icons/Directions';
+
+const styles = createStyles({
+  root: {
+    padding: '2px 4px',
+    display: 'flex',
+    alignItems: 'center',
+    width: 400,
+  },
+  input: {
+    marginLeft: 8,
+    flex: 1,
+  },
+  iconButton: {
+    padding: 10,
+  },
+  divider: {
+    width: 1,
+    height: 28,
+    margin: 4,
+  },
+});
+
+export interface Props extends WithStyles<typeof styles> {}
+
+function CustomizedInputBase(props: Props) {
+  const { classes } = props;
+
+  return (
+    <Paper className={classes.root} elevation={1}>
+      <IconButton className={classes.iconButton} aria-label="Menu">
+        <MenuIcon />
+      </IconButton>
+      <InputBase className={classes.input} placeholder="Search Google Maps" />
+      <IconButton className={classes.iconButton} aria-label="Search">
+        <SearchIcon />
+      </IconButton>
+      <Divider className={classes.divider} />
+      <IconButton color="primary" className={classes.iconButton} aria-label="Directions">
+        <DirectionsIcon />
+      </IconButton>
+    </Paper>
+  );
+}
+
+CustomizedInputBase.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(CustomizedInputBase);