Skip to content

Commit 6793035

Browse files
bhchbhch
committed
Close #24: Add support for help text
1 parent ee49895 commit 6793035

File tree

2 files changed

+71
-52
lines changed

2 files changed

+71
-52
lines changed

‎src/components/form.js‎

Lines changed: 70 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ export function FormInput({label, help_text, error, inputRef, ...props}) {
1818
return (
1919
<div>
2020
{label && <label>{label}</label>}
21-
<input {...props} />
21+
<div className="rjf-input-group">
22+
<input {...props} />
23+
{help_text && <span class="rjf-help-text">{help_text}</span>}
24+
</div>
2225
</div>
2326
);
2427
}
@@ -42,8 +45,9 @@ export function FormCheckInput({label, help_text, error, value, ...props}) {
4245
props.disabled = true;
4346

4447
return (
45-
<div>
48+
<div className="rjf-check-input">
4649
<label><input {...props} /> {label}</label>
50+
{help_text && <span class="rjf-help-text">{help_text}</span>}
4751
</div>
4852
);
4953
}
@@ -54,7 +58,7 @@ export function FormRadioInput({label, help_text, error, value, options, ...prop
5458
props.disabled = true;
5559

5660
return (
57-
<div>
61+
<div className="rjf-check-input">
5862
<label>{label}</label>
5963
{options.map((option, i) => {
6064
let label, inputValue;
@@ -74,6 +78,7 @@ export function FormRadioInput({label, help_text, error, value, options, ...prop
7478
</label>
7579
);
7680
})}
81+
{help_text && <span class="rjf-help-text">{help_text}</span>}
7782
</div>
7883
);
7984
}
@@ -86,27 +91,30 @@ export function FormSelectInput({label, help_text, error, value, options, ...pro
8691
return (
8792
<div>
8893
{label && <label>{label}</label>}
89-
<select value={value || ''} {...props}>
90-
<option disabled value="" key={'__placehlder'}>Select...</option>
91-
{options.map((option, i) => {
92-
let label, inputValue;
93-
if (typeof option === 'object') {
94-
label = option.label;
95-
inputValue = option.value;
96-
} else {
97-
label = option;
98-
if (typeof label === 'boolean')
99-
label = capitalize(label.toString());
100-
inputValue = option;
101-
}
94+
<div class="rjf-input-group">
95+
<select value={value || ''} {...props}>
96+
<option disabled value="" key={'__placehlder'}>Select...</option>
97+
{options.map((option, i) => {
98+
let label, inputValue;
99+
if (typeof option === 'object') {
100+
label = option.label;
101+
inputValue = option.value;
102+
} else {
103+
label = option;
104+
if (typeof label === 'boolean')
105+
label = capitalize(label.toString());
106+
inputValue = option;
107+
}
102108

103-
return (
104-
<option value={inputValue} key={label + '_' + inputValue + '_' + i}>
105-
{label}
106-
</option>
107-
);
108-
})}
109-
</select>
109+
return (
110+
<option value={inputValue} key={label + '_' + inputValue + '_' + i}>
111+
{label}
112+
</option>
113+
);
114+
})}
115+
</select>
116+
{help_text && <span class="rjf-help-text">{help_text}</span>}
117+
</div>
110118
</div>
111119
);
112120
}
@@ -179,6 +187,7 @@ export class FormMultiSelectInput extends React.Component {
179187
containerRef={this.optionsContainer}
180188
inputRef={this.input}
181189
disabled={this.props.readOnly}
190+
hasHelpText={this.props.help_text && 1}
182191
/>
183192
}
184193
</div>
@@ -206,7 +215,10 @@ class FormMultiSelectInputOptions extends React.Component {
206215
render() {
207216
return (
208217
<div ref={this.props.containerRef}>
209-
<div className="rjf-multiselect-field-options-container">
218+
<div
219+
className="rjf-multiselect-field-options-container"
220+
style={this.props.hasHelpText ? {marginTop: '-15px'} : {}}
221+
>
210222
{this.props.options.map((option, i) => {
211223
let label, inputValue;
212224
if (typeof option === 'object') {
@@ -499,7 +511,10 @@ export class FormTextareaInput extends React.Component {
499511
return (
500512
<div>
501513
{label && <label>{label}</label>}
502-
<textarea {...props} />
514+
<div className="rjf-input-group">
515+
<textarea {...props} />
516+
{help_text && <span class="rjf-help-text">{help_text}</span>}
517+
</div>
503518
</div>
504519
);
505520
}
@@ -659,35 +674,38 @@ export class FormDateTimeInput extends React.Component {
659674
<div className="rjf-datetime-field">
660675
{this.props.label && <label>{this.props.label}</label>}
661676
<div className="rjf-datetime-field-inner">
662-
<div className="rjf-datetime-field-date">
663-
<FormInput
664-
label='Date'
665-
type='date'
666-
value={this.state.date}
667-
onChange={this.handleDateChange}
668-
/>
669-
</div>
670-
<div className="rjf-datetime-field-time">
671-
<FormInput
672-
label='Time'
673-
type='text'
674-
value={this.state.hh + ':' + this.state.mm + ':' + this.state.ss + ' ' + this.state.ampm}
675-
onFocus={this.showTimePicker}
676-
readOnly={true}
677-
inputRef={this.timeInput}
678-
/>
679-
<div ref={this.timePickerContainer}>
680-
{this.state.showTimePicker &&
681-
<TimePicker
682-
onChange={this.handleTimeChange}
683-
hh={this.state.hh}
684-
mm={this.state.mm}
685-
ss={this.state.ss}
686-
ampm={this.state.ampm}
687-
/>
688-
}
677+
<div className="rjf-datetime-field-inputs">
678+
<div className="rjf-datetime-field-date">
679+
<FormInput
680+
label='Date'
681+
type='date'
682+
value={this.state.date}
683+
onChange={this.handleDateChange}
684+
/>
685+
</div>
686+
<div className="rjf-datetime-field-time">
687+
<FormInput
688+
label='Time'
689+
type='text'
690+
value={this.state.hh + ':' + this.state.mm + ':' + this.state.ss + ' ' + this.state.ampm}
691+
onFocus={this.showTimePicker}
692+
readOnly={true}
693+
inputRef={this.timeInput}
694+
/>
695+
<div ref={this.timePickerContainer}>
696+
{this.state.showTimePicker &&
697+
<TimePicker
698+
onChange={this.handleTimeChange}
699+
hh={this.state.hh}
700+
mm={this.state.mm}
701+
ss={this.state.ss}
702+
ampm={this.state.ampm}
703+
/>
704+
}
705+
</div>
689706
</div>
690707
</div>
708+
{this.props.help_text && <span class="rjf-help-text">{this.props.help_text}</span>}
691709
</div>
692710
</div>
693711
);

‎src/ui.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ function FormField(props) {
3737
name: props.name,
3838
value: props.data,
3939
readOnly: props.schema.readOnly || props.schema.readonly,
40+
help_text: props.schema.help_text || props.schema.helpText,
4041
};
4142

4243
let type = props.schema.type;

0 commit comments

Comments
 (0)