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

View File

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