add left bottom text to textfield

convert additional fields to StatusTextField
This commit is contained in:
Barry Gitarts 2019-07-17 15:48:21 -04:00 committed by Barry G
parent 07dfceb03f
commit 04289332cc
2 changed files with 34 additions and 56 deletions

View File

@ -41,7 +41,13 @@ const styles = theme => ({
bottomRight: {
fontSize: '15px',
gridRowStart: 4,
gridColumnStart: 12
gridColumnStart: 12,
whiteSpace: 'nowrap'
},
bottomLeft: {
fontSize: '15px',
gridRowStart: 4,
gridColumnStart: 1,
}
})
@ -63,14 +69,17 @@ function Input({
isRequired,
label,
bottomRightLabel,
bottomLeftLabel,
placeholder,
className,
name,
onChange,
onBlur,
value
value,
multiline
}) {
const labelForm = label ? renderLabel(classnames(classes.formLabel, classes.top), idFor, label, isRequired) : null
const bottomLeft = bottomLeftLabel ? renderLabel(classnames(classes.formLabel, classes.bottomLeft), idFor, bottomLeftLabel) : null
const bottomRight = bottomRightLabel ? renderLabel(classnames(classes.formLabel, classes.bottomRight), idFor, bottomRightLabel) : null
return (
<FormControl className={classnames(classes.margin, classes.container, className)}>
@ -86,7 +95,9 @@ function Input({
}}
onBlur={onBlur}
value={value}
multiline={multiline}
/>
{ bottomLeft }
{ bottomRight }
</FormControl>
)

View File

@ -209,60 +209,33 @@ const SubmissionSection = ({ classes, history }) => {
isRequired={true}
idFor="Project Name"
name="title"
label="Enter Project Name"
label="Project Name"
bottomRightLabel="Max 20"
placeholder="Enter Project Name"
placeholder="Project Name"
onChange={handleChange}
onBlur={handleBlur}
value={values.title || ''}
/>
<TextField
<StatusTextField
className={fullWidth}
InputProps={{
classes: {
input: classes.textInput
}
}}
id="title"
name="title"
label="Enter Project Name"
placeholder="Enter Project Name"
margin="normal"
variant="outlined"
onChange={handleChange}
onBlur={handleBlur}
value={values.title || ''}
/>
<TextField
className={fullWidth}
InputProps={{
classes: {
input: classes.textInput
}
}}
id="subtitle"
idFor="Short Description"
name="subtitle"
label="Short description"
placeholder="Enter a sub heading description for your project"
margin="normal"
variant="outlined"
label="Short Description"
bottomRightLabel="Max 120"
placeholder="Short Description"
onChange={handleChange}
onBlur={handleBlur}
value={values.subtitle || ''}
multiline={true}
/>
<TextField
<StatusTextField
className={fullWidth}
InputProps={{
classes: {
input: classes.textInput
}
}}
id="creator"
isRequired={true}
idFor="creator"
name="creator"
label="Enter the project creator"
placeholder="Enter the project creator"
margin="normal"
variant="outlined"
label="Contact Person"
bottomLeftLabel="Name of the primary contact"
placeholder="Short Description"
onChange={handleChange}
onBlur={handleBlur}
value={values.creator || ''}
@ -359,20 +332,14 @@ const SubmissionSection = ({ classes, history }) => {
<div className={classnames(secondHalf, classes.markdown)}>
<ReactMarkdown source={values.description} />
</div>
<TextField
id="commitTime"
name="commitTime"
<StatusTextField
className={fullWidth}
InputProps={{
classes: {
input: classes.textInput
}
}}
label="Commit time in hours"
placeholder="Commit time in hours"
margin="normal"
variant="outlined"
helperText={helperText}
isRequired={true}
idFor="commitTime"
name="commitTime"
label="Commit Time (Hours)"
bottomLeftLabel={helperText}
placeholder="Commit Time (hours)"
onChange={handleChange}
onBlur={handleBlur}
value={values.commitTime || ''}