Skip to content

Commit d86a071

Browse files
eps1loneps1lon
committed
[docs] Add typescript demos for TextField
Takeaway: - inputProps, inputComponent is badly typed (needs generics though) - computed property keys support is bad in typescript
1 parent d76911c commit d86a071

20 files changed

+1925
-8
lines changed

‎.size-limit.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ module.exports = [
2828
name: 'The main docs bundle',
2929
webpack: false,
3030
path: main.path,
31-
limit: '183 KB',
31+
limit: '184.3 KB',
3232
},
3333
{
3434
name: 'The docs home page',

‎docs/src/pages/demos/app-bar/BottomAppBar.js

-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ const styles = theme => ({
4343
},
4444
fabButton: {
4545
position: 'absolute',
46-
zIndex: 1,
4746
top: -30,
4847
left: 0,
4948
right: 0,

‎docs/src/pages/demos/text-fields/ComposedTextField.js

+2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ const styles = theme => ({
2020
});
2121

2222
class ComposedTextField extends React.Component {
23+
labelRef = null;
24+
2325
state = {
2426
name: 'Composed TextField',
2527
};

‎docs/src/pages/demos/text-fields/ComposedTextField.tsx

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React, { ComponentClass } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import PropTypes from 'prop-types';
4+
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
5+
import FilledInput from '@material-ui/core/FilledInput';
6+
import FormControl from '@material-ui/core/FormControl';
7+
import FormHelperText from '@material-ui/core/FormHelperText';
8+
import Input from '@material-ui/core/Input';
9+
import InputLabel from '@material-ui/core/InputLabel';
10+
import OutlinedInput from '@material-ui/core/OutlinedInput';
11+
12+
const styles = (theme: Theme) =>
13+
createStyles({
14+
container: {
15+
display: 'flex',
16+
flexWrap: 'wrap',
17+
},
18+
formControl: {
19+
margin: theme.spacing.unit,
20+
},
21+
});
22+
23+
export interface Props extends WithStyles<typeof styles> {}
24+
25+
interface State {
26+
name: string;
27+
}
28+
29+
class ComposedTextField extends React.Component<Props, State> {
30+
labelRef: HTMLElement | null = null;
31+
32+
state = {
33+
name: 'Composed TextField',
34+
};
35+
36+
componentDidMount() {
37+
this.forceUpdate();
38+
}
39+
40+
handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
41+
this.setState({ name: event.target.value });
42+
};
43+
44+
render() {
45+
const { classes } = this.props;
46+
47+
return (
48+
<div className={classes.container}>
49+
<FormControl className={classes.formControl}>
50+
<InputLabel htmlFor="component-simple">Name</InputLabel>
51+
<Input id="component-simple" value={this.state.name} onChange={this.handleChange} />
52+
</FormControl>
53+
<FormControl className={classes.formControl} aria-describedby="component-helper-text">
54+
<InputLabel htmlFor="component-helper">Name</InputLabel>
55+
<Input id="component-helper" value={this.state.name} onChange={this.handleChange} />
56+
<FormHelperText id="component-helper-text">Some important helper text</FormHelperText>
57+
</FormControl>
58+
<FormControl className={classes.formControl} disabled>
59+
<InputLabel htmlFor="component-disabled">Name</InputLabel>
60+
<Input id="component-disabled" value={this.state.name} onChange={this.handleChange} />
61+
<FormHelperText>Disabled</FormHelperText>
62+
</FormControl>
63+
<FormControl className={classes.formControl} error aria-describedby="component-error-text">
64+
<InputLabel htmlFor="component-error">Name</InputLabel>
65+
<Input id="component-error" value={this.state.name} onChange={this.handleChange} />
66+
<FormHelperText id="component-error-text">Error</FormHelperText>
67+
</FormControl>
68+
<FormControl className={classes.formControl} variant="outlined">
69+
<InputLabel
70+
ref={ref => {
71+
this.labelRef = ReactDOM.findDOMNode(ref!) as HTMLLabelElement | null;
72+
}}
73+
htmlFor="component-outlined"
74+
>
75+
Name
76+
</InputLabel>
77+
<OutlinedInput
78+
id="component-outlined"
79+
value={this.state.name}
80+
onChange={this.handleChange}
81+
labelWidth={this.labelRef ? this.labelRef.offsetWidth : 0}
82+
/>
83+
</FormControl>
84+
<FormControl className={classes.formControl} variant="filled">
85+
<InputLabel htmlFor="component-filled">Name</InputLabel>
86+
<FilledInput id="component-filled" value={this.state.name} onChange={this.handleChange} />
87+
</FormControl>
88+
</div>
89+
);
90+
}
91+
}
92+
93+
(ComposedTextField as ComponentClass<Props>).propTypes = {
94+
classes: PropTypes.object.isRequired,
95+
} as any;
96+
97+
export default withStyles(styles)(ComposedTextField);

‎docs/src/pages/demos/text-fields/CustomizedInputs.tsx

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {
4+
createStyles,
5+
Theme,
6+
withStyles,
7+
WithStyles,
8+
MuiThemeProvider,
9+
createMuiTheme,
10+
} from '@material-ui/core/styles';
11+
import Input from '@material-ui/core/Input';
12+
import InputBase from '@material-ui/core/InputBase';
13+
import InputLabel from '@material-ui/core/InputLabel';
14+
import TextField from '@material-ui/core/TextField';
15+
import FormControl from '@material-ui/core/FormControl';
16+
import purple from '@material-ui/core/colors/purple';
17+
import green from '@material-ui/core/colors/green';
18+
19+
const styles = (theme: Theme) =>
20+
createStyles({
21+
container: {
22+
display: 'flex',
23+
flexWrap: 'wrap',
24+
},
25+
margin: {
26+
margin: theme.spacing.unit,
27+
},
28+
cssLabel: {
29+
'&$cssFocused': {
30+
color: purple[500],
31+
},
32+
},
33+
cssFocused: {},
34+
cssUnderline: {
35+
'&:after': {
36+
borderBottomColor: purple[500],
37+
},
38+
},
39+
bootstrapRoot: {
40+
'label + &': {
41+
marginTop: theme.spacing.unit * 3,
42+
},
43+
},
44+
bootstrapInput: {
45+
borderRadius: 4,
46+
backgroundColor: theme.palette.common.white,
47+
border: '1px solid #ced4da',
48+
fontSize: 16,
49+
padding: '10px 12px',
50+
transition: theme.transitions.create(['border-color', 'box-shadow']),
51+
// Use the system font instead of the default Roboto font.
52+
fontFamily: [
53+
'-apple-system',
54+
'BlinkMacSystemFont',
55+
'"Segoe UI"',
56+
'Roboto',
57+
'"Helvetica Neue"',
58+
'Arial',
59+
'sans-serif',
60+
'"Apple Color Emoji"',
61+
'"Segoe UI Emoji"',
62+
'"Segoe UI Symbol"',
63+
].join(','),
64+
'&:focus': {
65+
borderColor: '#80bdff',
66+
boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
67+
},
68+
},
69+
bootstrapFormLabel: {
70+
fontSize: 18,
71+
},
72+
});
73+
74+
const theme = createMuiTheme({
75+
palette: {
76+
primary: green,
77+
},
78+
typography: { useNextVariants: true },
79+
});
80+
81+
export interface Props extends WithStyles<typeof styles> {}
82+
83+
function CustomizedInputs(props: Props) {
84+
const { classes } = props;
85+
86+
return (
87+
<div className={classes.container}>
88+
<FormControl className={classes.margin}>
89+
<InputLabel
90+
htmlFor="custom-css-input"
91+
FormLabelClasses={{
92+
root: classes.cssLabel,
93+
focused: classes.cssFocused,
94+
}}
95+
>
96+
Custom CSS
97+
</InputLabel>
98+
<Input
99+
id="custom-css-input"
100+
classes={{
101+
underline: classes.cssUnderline,
102+
}}
103+
/>
104+
</FormControl>
105+
<MuiThemeProvider theme={theme}>
106+
<TextField
107+
className={classes.margin}
108+
label="MuiThemeProvider"
109+
id="mui-theme-provider-input"
110+
/>
111+
</MuiThemeProvider>
112+
<FormControl className={classes.margin}>
113+
<InputLabel shrink htmlFor="bootstrap-input" className={classes.bootstrapFormLabel}>
114+
Bootstrap
115+
</InputLabel>
116+
<InputBase
117+
id="bootstrap-input"
118+
defaultValue="react-bootstrap"
119+
classes={{
120+
root: classes.bootstrapRoot,
121+
input: classes.bootstrapInput,
122+
}}
123+
/>
124+
</FormControl>
125+
<InputBase className={classes.margin} defaultValue="Naked input" />
126+
</div>
127+
);
128+
}
129+
130+
CustomizedInputs.propTypes = {
131+
classes: PropTypes.object.isRequired,
132+
} as any;
133+
134+
export default withStyles(styles)(CustomizedInputs);

0 commit comments

Comments
 (0)