1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.FieldFeedback = void 0;
|
4 | const React = require("react");
|
5 | const prop_types_1 = require("prop-types");
|
6 | const Async_1 = require("./Async");
|
7 | const FieldFeedbacks_1 = require("./FieldFeedbacks");
|
8 | const FieldFeedbackType_1 = require("./FieldFeedbackType");
|
9 | const FieldFeedbackWhenValid_1 = require("./FieldFeedbackWhenValid");
|
10 | const FormWithConstraints_1 = require("./FormWithConstraints");
|
11 | class FieldFeedback extends React.Component {
|
12 | constructor(props, context) {
|
13 | var _a;
|
14 | super(props, context);
|
15 | this.validate = (input) => {
|
16 | const { when } = this.props;
|
17 | const { form, fieldFeedbacks } = this.context;
|
18 | const field = form.fieldsStore.getField(input.name);
|
19 | const validation = { ...this.state.validation };
|
20 | if ((fieldFeedbacks.props.stop === 'first' && field.hasFeedbacks(fieldFeedbacks.key)) ||
|
21 | (fieldFeedbacks.props.stop === 'first-error' && field.hasErrors(fieldFeedbacks.key)) ||
|
22 | (fieldFeedbacks.props.stop === 'first-warning' && field.hasWarnings(fieldFeedbacks.key)) ||
|
23 | (fieldFeedbacks.props.stop === 'first-info' && field.hasInfos(fieldFeedbacks.key))) {
|
24 | validation.show = undefined;
|
25 | }
|
26 | else {
|
27 | validation.show = false;
|
28 | if (typeof when === 'function') {
|
29 | validation.show = when(input.value);
|
30 | }
|
31 | else if (typeof when === 'string') {
|
32 | if (when === 'valid') {
|
33 | validation.show = undefined;
|
34 | }
|
35 | else {
|
36 | const { validity } = input;
|
37 | if (!validity.valid) {
|
38 | if (when === '*') {
|
39 | validation.show = true;
|
40 | }
|
41 | else if ((validity.badInput && when === 'badInput') ||
|
42 | (validity.patternMismatch && when === 'patternMismatch') ||
|
43 | (validity.rangeOverflow && when === 'rangeOverflow') ||
|
44 | (validity.rangeUnderflow && when === 'rangeUnderflow') ||
|
45 | (validity.stepMismatch && when === 'stepMismatch') ||
|
46 | (validity.tooLong && when === 'tooLong') ||
|
47 | (validity.tooShort && when === 'tooShort') ||
|
48 | (validity.typeMismatch && when === 'typeMismatch') ||
|
49 | (validity.valueMissing && when === 'valueMissing')) {
|
50 | validation.show = true;
|
51 | }
|
52 | }
|
53 | }
|
54 | }
|
55 | else {
|
56 | throw new TypeError(`Invalid FieldFeedback 'when' type: ${typeof when}`);
|
57 | }
|
58 | }
|
59 | field.addOrReplaceValidation(validation);
|
60 | this.setState({
|
61 | validation,
|
62 | validationMessage: input.validationMessage
|
63 | });
|
64 | return validation;
|
65 | };
|
66 | this.fieldDidReset = (field) => {
|
67 | if (field.name === this.context.fieldFeedbacks.fieldName) {
|
68 | this.setState(prevState => ({
|
69 | validation: { ...prevState.validation, show: undefined },
|
70 | validationMessage: ''
|
71 | }));
|
72 | }
|
73 | };
|
74 | this.key = context.fieldFeedbacks.addFieldFeedback();
|
75 | const { error, warning, info, when } = props;
|
76 | let type = FieldFeedbackType_1.FieldFeedbackType.Error;
|
77 | if (when === 'valid')
|
78 | type = FieldFeedbackType_1.FieldFeedbackType.WhenValid;
|
79 | else if (warning)
|
80 | type = FieldFeedbackType_1.FieldFeedbackType.Warning;
|
81 | else if (info)
|
82 | type = FieldFeedbackType_1.FieldFeedbackType.Info;
|
83 | if (type === FieldFeedbackType_1.FieldFeedbackType.WhenValid && ((_a = error !== null && error !== void 0 ? error : warning) !== null && _a !== void 0 ? _a : info)) {
|
84 | throw new Error('Cannot have an attribute (error, warning...) with FieldFeedback when="valid"');
|
85 | }
|
86 | this.state = {
|
87 | validation: {
|
88 | key: this.key,
|
89 | type,
|
90 | show: undefined
|
91 | },
|
92 | validationMessage: ''
|
93 | };
|
94 | }
|
95 | componentDidMount() {
|
96 | const { form, fieldFeedbacks, async } = this.context;
|
97 | if (async)
|
98 | async.addValidateFieldEventListener(this.validate);
|
99 | else
|
100 | fieldFeedbacks.addValidateFieldEventListener(this.validate);
|
101 | form.addFieldDidResetEventListener(this.fieldDidReset);
|
102 | }
|
103 | componentWillUnmount() {
|
104 | const { form, fieldFeedbacks, async } = this.context;
|
105 | if (async)
|
106 | async.removeValidateFieldEventListener(this.validate);
|
107 | else
|
108 | fieldFeedbacks.removeValidateFieldEventListener(this.validate);
|
109 | form.removeFieldDidResetEventListener(this.fieldDidReset);
|
110 | }
|
111 | render() {
|
112 | const { when, error, warning, info, className, classes, style, children, ...otherProps } = this
|
113 | .props;
|
114 | const { validation, validationMessage } = this.state;
|
115 | const fieldFeedbackClassName = classes[validation.type];
|
116 | const classNames = className !== undefined ? `${className} ${fieldFeedbackClassName}` : fieldFeedbackClassName;
|
117 | if (validation.type === FieldFeedbackType_1.FieldFeedbackType.WhenValid) {
|
118 | return (React.createElement(FieldFeedbackWhenValid_1.FieldFeedbackWhenValid, { "data-feedback": this.key, style: style, className: classNames, ...otherProps }, children));
|
119 | }
|
120 | if (validation.show) {
|
121 | const feedback = children !== undefined ? children : validationMessage;
|
122 | return (React.createElement("span", { "data-feedback": this.key, className: classNames, style: { display: 'block', ...style }, ...otherProps }, feedback));
|
123 | }
|
124 | return null;
|
125 | }
|
126 | }
|
127 | exports.FieldFeedback = FieldFeedback;
|
128 | FieldFeedback.defaultProps = {
|
129 | when: () => true,
|
130 | classes: {
|
131 | error: 'error',
|
132 | warning: 'warning',
|
133 | info: 'info',
|
134 | whenValid: 'when-valid'
|
135 | }
|
136 | };
|
137 | FieldFeedback.contextTypes = {
|
138 | form: (0, prop_types_1.instanceOf)(FormWithConstraints_1.FormWithConstraints).isRequired,
|
139 | fieldFeedbacks: (0, prop_types_1.instanceOf)(FieldFeedbacks_1.FieldFeedbacks).isRequired,
|
140 | async: (0, prop_types_1.instanceOf)(Async_1.Async)
|
141 | };
|