[docs] Add typescript demos for TextField

Takeaway: - inputProps, inputComponent is badly typed (needs generics though) - computed property keys support is bad in typescript
mui · Oct 30, 2018 · d86a071 · d86a071
1 parent d76911c
commit d86a071
Show file tree

Hide file tree

Showing 20 changed files with 1,925 additions and 8 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -28,7 +28,7 @@ module.exports = [
     name: 'The main docs bundle',
     webpack: false,
     path: main.path,
-    limit: '183 KB',
+    limit: '184.3 KB',
   },
   {
     name: 'The docs home page',

diff --git a/docs/src/pages/demos/app-bar/BottomAppBar.js b/docs/src/pages/demos/app-bar/BottomAppBar.js
@@ -43,7 +43,6 @@ const styles = theme => ({
   },
   fabButton: {
     position: 'absolute',
-    zIndex: 1,
     top: -30,
     left: 0,
     right: 0,

diff --git a/docs/src/pages/demos/text-fields/ComposedTextField.js b/docs/src/pages/demos/text-fields/ComposedTextField.js
@@ -20,6 +20,8 @@ const styles = theme => ({
 });
 
 class ComposedTextField extends React.Component {
+  labelRef = null;
+
   state = {
     name: 'Composed TextField',
   };

diff --git a/docs/src/pages/demos/text-fields/ComposedTextField.tsx b/docs/src/pages/demos/text-fields/ComposedTextField.tsx
@@ -0,0 +1,97 @@
+import React, { ComponentClass } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import FilledInput from '@material-ui/core/FilledInput';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    container: {
+      display: 'flex',
+      flexWrap: 'wrap',
+    },
+    formControl: {
+      margin: theme.spacing.unit,
+    },
+  });
+
+export interface Props extends WithStyles<typeof styles> {}
+
+interface State {
+  name: string;
+}
+
+class ComposedTextField extends React.Component<Props, State> {
+  labelRef: HTMLElement | null = null;
+
+  state = {
+    name: 'Composed TextField',
+  };
+
+  componentDidMount() {
+    this.forceUpdate();
+  }
+
+  handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ name: event.target.value });
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <div className={classes.container}>
+        <FormControl className={classes.formControl}>
+          <InputLabel htmlFor="component-simple">Name</InputLabel>
+          <Input id="component-simple" value={this.state.name} onChange={this.handleChange} />
+        </FormControl>
+        <FormControl className={classes.formControl} aria-describedby="component-helper-text">
+          <InputLabel htmlFor="component-helper">Name</InputLabel>
+          <Input id="component-helper" value={this.state.name} onChange={this.handleChange} />
+          <FormHelperText id="component-helper-text">Some important helper text</FormHelperText>
+        </FormControl>
+        <FormControl className={classes.formControl} disabled>
+          <InputLabel htmlFor="component-disabled">Name</InputLabel>
+          <Input id="component-disabled" value={this.state.name} onChange={this.handleChange} />
+          <FormHelperText>Disabled</FormHelperText>
+        </FormControl>
+        <FormControl className={classes.formControl} error aria-describedby="component-error-text">
+          <InputLabel htmlFor="component-error">Name</InputLabel>
+          <Input id="component-error" value={this.state.name} onChange={this.handleChange} />
+          <FormHelperText id="component-error-text">Error</FormHelperText>
+        </FormControl>
+        <FormControl className={classes.formControl} variant="outlined">
+          <InputLabel
+            ref={ref => {
+              this.labelRef = ReactDOM.findDOMNode(ref!) as HTMLLabelElement | null;
+            }}
+            htmlFor="component-outlined"
+          >
+            Name
+          </InputLabel>
+          <OutlinedInput
+            id="component-outlined"
+            value={this.state.name}
+            onChange={this.handleChange}
+            labelWidth={this.labelRef ? this.labelRef.offsetWidth : 0}
+          />
+        </FormControl>
+        <FormControl className={classes.formControl} variant="filled">
+          <InputLabel htmlFor="component-filled">Name</InputLabel>
+          <FilledInput id="component-filled" value={this.state.name} onChange={this.handleChange} />
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+(ComposedTextField as ComponentClass<Props>).propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(ComposedTextField);
diff --git a/docs/src/pages/demos/text-fields/CustomizedInputs.tsx b/docs/src/pages/demos/text-fields/CustomizedInputs.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  createStyles,
+  Theme,
+  withStyles,
+  WithStyles,
+  MuiThemeProvider,
+  createMuiTheme,
+} from '@material-ui/core/styles';
+import Input from '@material-ui/core/Input';
+import InputBase from '@material-ui/core/InputBase';
+import InputLabel from '@material-ui/core/InputLabel';
+import TextField from '@material-ui/core/TextField';
+import FormControl from '@material-ui/core/FormControl';
+import purple from '@material-ui/core/colors/purple';
+import green from '@material-ui/core/colors/green';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    container: {
+      display: 'flex',
+      flexWrap: 'wrap',
+    },
+    margin: {
+      margin: theme.spacing.unit,
+    },
+    cssLabel: {
+      '&$cssFocused': {
+        color: purple[500],
+      },
+    },
+    cssFocused: {},
+    cssUnderline: {
+      '&:after': {
+        borderBottomColor: purple[500],
+      },
+    },
+    bootstrapRoot: {
+      'label + &': {
+        marginTop: theme.spacing.unit * 3,
+      },
+    },
+    bootstrapInput: {
+      borderRadius: 4,
+      backgroundColor: theme.palette.common.white,
+      border: '1px solid #ced4da',
+      fontSize: 16,
+      padding: '10px 12px',
+      transition: theme.transitions.create(['border-color', 'box-shadow']),
+      // Use the system font instead of the default Roboto font.
+      fontFamily: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+      ].join(','),
+      '&:focus': {
+        borderColor: '#80bdff',
+        boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+      },
+    },
+    bootstrapFormLabel: {
+      fontSize: 18,
+    },
+  });
+
+const theme = createMuiTheme({
+  palette: {
+    primary: green,
+  },
+  typography: { useNextVariants: true },
+});
+
+export interface Props extends WithStyles<typeof styles> {}
+
+function CustomizedInputs(props: Props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.container}>
+      <FormControl className={classes.margin}>
+        <InputLabel
+          htmlFor="custom-css-input"
+          FormLabelClasses={{
+            root: classes.cssLabel,
+            focused: classes.cssFocused,
+          }}
+        >
+          Custom CSS
+        </InputLabel>
+        <Input
+          id="custom-css-input"
+          classes={{
+            underline: classes.cssUnderline,
+          }}
+        />
+      </FormControl>
+      <MuiThemeProvider theme={theme}>
+        <TextField
+          className={classes.margin}
+          label="MuiThemeProvider"
+          id="mui-theme-provider-input"
+        />
+      </MuiThemeProvider>
+      <FormControl className={classes.margin}>
+        <InputLabel shrink htmlFor="bootstrap-input" className={classes.bootstrapFormLabel}>
+          Bootstrap
+        </InputLabel>
+        <InputBase
+          id="bootstrap-input"
+          defaultValue="react-bootstrap"
+          classes={{
+            root: classes.bootstrapRoot,
+            input: classes.bootstrapInput,
+          }}
+        />
+      </FormControl>
+      <InputBase className={classes.margin} defaultValue="Naked input" />
+    </div>
+  );
+}
+
+CustomizedInputs.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(CustomizedInputs);