-
Notifications
You must be signed in to change notification settings - Fork 20
/
Bootstrap.tsx
128 lines (106 loc) · 3.78 KB
/
Bootstrap.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import React from 'react';
import PropTypes from 'prop-types';
import {
FormWithConstraints as _FormWithConstraints, FormWithConstraintsProps, FormWithConstraintsChildContext,
FieldFeedbacks, Async, FieldFeedback, Field
} from 'react-form-with-constraints';
export interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
innerRef?: React.Ref<HTMLInputElement>;
}
export interface FormInputState {
field: Field | undefined;
}
export type FormInputContext = FormWithConstraintsChildContext;
export class FormInput extends React.Component<FormInputProps, FormInputState> {
static contextTypes: React.ValidationMap<FormInputContext> = {
form: PropTypes.object.isRequired
};
context!: FormInputContext;
constructor(props: FormInputProps) {
super(props);
this.state = {
field: undefined
};
this.fieldWillValidate = this.fieldWillValidate.bind(this);
this.fieldDidValidate = this.fieldDidValidate.bind(this);
this.reset = this.reset.bind(this);
}
componentWillMount() {
this.context.form.addFieldWillValidateEventListener(this.fieldWillValidate);
this.context.form.addFieldDidValidateEventListener(this.fieldDidValidate);
this.context.form.addResetEventListener(this.reset);
}
componentWillUnmount() {
this.context.form.removeFieldWillValidateEventListener(this.fieldWillValidate);
this.context.form.removeFieldDidValidateEventListener(this.fieldDidValidate);
this.context.form.removeResetEventListener(this.reset);
}
fieldWillValidate(fieldName: string) {
if (fieldName === this.props.name) { // Ignore the event if it's not for us
this.setState({field: undefined});
}
}
fieldDidValidate(field: Field) {
if (field.name === this.props.name) { // Ignore the event if it's not for us
this.setState({field});
}
}
reset() {
this.setState({field: undefined});
}
validationStateClassName() {
const { field } = this.state;
let className;
if (field !== undefined) {
if (field.hasErrors()) {
className = 'is-invalid';
}
else if (field.hasWarnings()) {
// form-control-warning did exist in Bootstrap v4.0.0-alpha.6:
// see https://v4-alpha.getbootstrap.com/components/forms/#validation
// see https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.6/scss/_forms.scss#L255
// In Bootstrap 3 it was done on form-group not an the input directly:
// see https://getbootstrap.com/docs/3.3/css/#forms-control-validation
// see https://github.com/twbs/bootstrap/blob/v3.3.7/less/forms.less#L431
className = 'is-warning';
}
else if (field.isValid()) {
className = 'is-valid';
}
}
return className;
}
render() {
const { innerRef, className, children, ...inputProps } = this.props;
const validationStateClassName = this.validationStateClassName();
let classNames = className;
if (validationStateClassName !== undefined) {
if (className !== undefined) classNames += ` ${validationStateClassName}`;
else classNames = validationStateClassName;
}
return (
<input ref={innerRef} {...inputProps} className={classNames} />
);
}
}
export class FormWithConstraints extends _FormWithConstraints {
static defaultProps: FormWithConstraintsProps = {
fieldFeedbackClassNames: {
error: 'invalid-feedback',
warning: 'warning-feedback',
info: 'info-feedback',
valid: 'valid-feedback'
}
};
}
export class FormWithConstraintsTooltip extends _FormWithConstraints {
static defaultProps: FormWithConstraintsProps = {
fieldFeedbackClassNames: {
error: 'invalid-tooltip',
warning: 'warning-tooltip',
info: 'info-tooltip',
valid: 'valid-tooltip'
}
};
}
export { FieldFeedbacks, Async, FieldFeedback };