Skip to content

Commit a593e5f

Browse files
karinasigartau0798karinasigartau0798
committed
feat(adaptive-cards): enable default browser validation of input fields
1 parent 0c88533 commit a593e5f

11 files changed

Lines changed: 86 additions & 7 deletions

File tree

‎src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.jsx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,25 @@ export default function AdaptiveCard({
167167
};
168168

169169
const setInput = useCallback((input) => {
170-
setInputs((prevInputs) => ({...prevInputs, [input.id]: input}));
170+
setInputs((prevInputs) => {
171+
const prevInput = prevInputs[input.id];
172+
173+
return {
174+
...prevInputs,
175+
[input.id]: {...prevInput, ...input},
176+
};
177+
});
178+
}, [setInputs]);
179+
180+
const setNativeInputRef = useCallback((id, nativeRef) => {
181+
setInputs((prevInputs) => {
182+
const input = prevInputs[id];
183+
184+
return {
185+
...prevInputs,
186+
[id]: {...input, nativeRef},
187+
};
188+
});
171189
}, [setInputs]);
172190

173191
const getValue = (id, defval = '') => ((id in inputs && inputs[id].value !== undefined) ? inputs[id].value : defval);
@@ -197,6 +215,8 @@ export default function AdaptiveCard({
197215
error = input.errorMessage || `The value you entered must match the pattern ${input.regex}`;
198216
} else if (String(input.value).length > input.maxLength) {
199217
error = `Maximum length is ${input.maxLength}`;
218+
} else if (input.nativeRef && !input.nativeRef.checkValidity()) {
219+
error = 'The value you entered is invalid.';
200220
}
201221

202222
return {...input, error};
@@ -220,6 +240,7 @@ export default function AdaptiveCard({
220240
getError,
221241
validate,
222242
submit,
243+
setNativeInputRef,
223244
invalidSubmit,
224245
setElement,
225246
setIsVisible,

‎src/components/adaptive-cards/InputDate/InputDate.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useContext, useEffect} from 'react';
1+
import React, {useCallback, useContext, useEffect} from 'react';
22
import PropTypes from 'prop-types';
33
import webexComponentClasses from '../../helpers';
44
import {formatDateTime} from '../util';
@@ -22,6 +22,7 @@ export default function InputDate({data, className, style}) {
2222
setValue,
2323
getValue,
2424
setInput,
25+
setNativeInputRef,
2526
getError,
2627
} = useContext(AdaptiveCardContext);
2728

@@ -44,6 +45,10 @@ export default function InputDate({data, className, style}) {
4445
setInput,
4546
]);
4647

48+
const nativeRefCallback = useCallback((nativeRef) => {
49+
setNativeInputRef(data.id, nativeRef);
50+
}, [data.id, setNativeInputRef]);
51+
4752
return (
4853
<DateInput
4954
className={cssClasses}
@@ -54,6 +59,7 @@ export default function InputDate({data, className, style}) {
5459
error={getError(data.id)}
5560
required={data.isRequired}
5661
label={formatDateTime(data.label)}
62+
nativeRef={nativeRefCallback}
5763
onChange={(value) => setValue(data.id, value)}
5864
/>
5965
);

‎src/components/adaptive-cards/InputNumber/InputNumber.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useContext, useEffect} from 'react';
1+
import React, {useCallback, useContext, useEffect} from 'react';
22
import PropTypes from 'prop-types';
33
import webexComponentClasses from '../../helpers';
44
import AdaptiveCardContext from '../context/adaptive-card-context';
@@ -22,6 +22,7 @@ export default function InputNumber({data, className, style}) {
2222
setValue,
2323
getValue,
2424
setInput,
25+
setNativeInputRef,
2526
getError,
2627
} = useContext(AdaptiveCardContext);
2728

@@ -44,13 +45,18 @@ export default function InputNumber({data, className, style}) {
4445
setInput,
4546
]);
4647

48+
const nativeRefCallback = useCallback((nativeRef) => {
49+
setNativeInputRef(data.id, nativeRef);
50+
}, [data.id, setNativeInputRef]);
51+
4752
return (
4853
<NumberInput
4954
className={cssClasses}
5055
error={getError(data.id)}
5156
label={formatDateTime(data.label)}
5257
max={data.max}
5358
min={data.min}
59+
nativeRef={nativeRefCallback}
5460
onChange={(value) => setValue(data.id, value)}
5561
placeholder={data.placeholder}
5662
required={data.isRequired}

‎src/components/adaptive-cards/InputText/InputText.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useContext, useEffect} from 'react';
1+
import React, {useCallback, useContext, useEffect} from 'react';
22
import PropTypes from 'prop-types';
33
import webexComponentClasses from '../../helpers';
44
import AdaptiveCardContext from '../context/adaptive-card-context';
@@ -24,6 +24,7 @@ export default function InputText({data, className, style}) {
2424
setValue,
2525
getValue,
2626
setInput,
27+
setNativeInputRef,
2728
getError,
2829
} = useContext(AdaptiveCardContext);
2930
const [cssClasses, sc] = webexComponentClasses('adaptive-cards-input-text', className);
@@ -49,6 +50,10 @@ export default function InputText({data, className, style}) {
4950
setInput,
5051
]);
5152

53+
const nativeRefCallback = useCallback((nativeRef) => {
54+
setNativeInputRef(data.id, nativeRef);
55+
}, [data.id, setNativeInputRef]);
56+
5257
return (
5358
<div className={cssClasses} style={style}>
5459
{!data.isMultiline ? (
@@ -57,6 +62,7 @@ export default function InputText({data, className, style}) {
5762
error={getError(data.id)}
5863
label={formatDateTime(data.label)}
5964
maxLength={data.maxLength}
65+
nativeRef={nativeRefCallback}
6066
onChange={(value) => setValue(data.id, value)}
6167
pattern={data.regex}
6268
placeholder={data.placeholder}

‎src/components/adaptive-cards/InputTime/InputTime.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useContext, useEffect} from 'react';
1+
import React, {useCallback, useContext, useEffect} from 'react';
22
import PropTypes from 'prop-types';
33
import webexComponentClasses from '../../helpers';
44
import {acPropTypes, registerComponent} from '../Component/Component';
@@ -22,6 +22,7 @@ export default function InputTime({data, className, style}) {
2222
setValue,
2323
getValue,
2424
setInput,
25+
setNativeInputRef,
2526
getError,
2627
} = useContext(AdaptiveCardContext);
2728

@@ -44,6 +45,10 @@ export default function InputTime({data, className, style}) {
4445
setInput,
4546
]);
4647

48+
const nativeRefCallback = useCallback((nativeRef) => {
49+
setNativeInputRef(data.id, nativeRef);
50+
}, [data.id, setNativeInputRef]);
51+
4752
return (
4853
<TimeInput
4954
className={cssClasses}
@@ -54,6 +59,7 @@ export default function InputTime({data, className, style}) {
5459
error={getError(data.id)}
5560
required={data.isRequired}
5661
label={formatDateTime(data.label)}
62+
nativeRef={nativeRefCallback}
5763
onChange={(value) => setValue(data.id, value)}
5864
/>
5965
);

‎src/components/generic/InputField/InputField.jsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, {useCallback} from 'react';
22
import PropTypes from 'prop-types';
33
import classNames from 'classnames';
44
import webexComponentClasses from '../../helpers';
@@ -22,6 +22,7 @@ import Label from '../../inputs/Label/Label';
2222
* @param {number} [props.maxLength] Maximum number of characters allowed
2323
* @param {number} [props.min] Minimum value for the input element
2424
* @param {string} [props.name] Input name
25+
* @param {Function} [props.nativeRef] Action to perform to obtain the native input ref
2526
* @param {Function} [props.onChange] Action to perform on input change
2627
* @param {string} [props.pattern] Specifies a regular expression that the element's value is checked against
2728
* @param {string} [props.placeholder] Input placeholder
@@ -46,6 +47,7 @@ export default function InputField({
4647
maxLength,
4748
min,
4849
name,
50+
nativeRef,
4951
onChange,
5052
pattern,
5153
placeholder,
@@ -74,6 +76,11 @@ export default function InputField({
7476
}
7577
};
7678

79+
const ref2 = useCallback((node) => {
80+
inputRef(node);
81+
nativeRef(node);
82+
}, [nativeRef]);
83+
7784
useAutoFocus(inputRef, autoFocus);
7885

7986
return (
@@ -105,7 +112,7 @@ export default function InputField({
105112
onKeyDown={onKeyDown}
106113
pattern={pattern}
107114
placeholder={placeholder}
108-
ref={inputRef}
115+
ref={ref2}
109116
required={required}
110117
tabIndex={tabIndex}
111118
type={type}
@@ -138,6 +145,7 @@ InputField.propTypes = {
138145
maxLength: PropTypes.number,
139146
min: PropTypes.number,
140147
name: PropTypes.string,
148+
nativeRef: PropTypes.func,
141149
onChange: PropTypes.func,
142150
pattern: PropTypes.string,
143151
placeholder: PropTypes.string,
@@ -168,6 +176,7 @@ InputField.defaultProps = {
168176
maxLength: undefined,
169177
min: undefined,
170178
name: undefined,
179+
nativeRef: () => {},
171180
onChange: undefined,
172181
pattern: undefined,
173182
placeholder: undefined,

‎src/components/inputs/DateInput/DateInput.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {InputField} from '../../generic';
1515
* @param {boolean} [props.required=false] Flag indicating input required
1616
* @param {string} [props.error] Error text
1717
* @param {string} [props.label] Label text
18+
* @param {Function} [props.nativeRef] Action to perform to obtain the native input ref
1819
* @param {Function} props.onChange Action to perform on input change
1920
* @returns {object} JSX of the component
2021
*/
@@ -27,6 +28,7 @@ export default function DateInput({
2728
required,
2829
error,
2930
label,
31+
nativeRef,
3032
onChange,
3133
}) {
3234
const [cssClasses] = webexComponentClasses('date-input', className);
@@ -41,6 +43,7 @@ export default function DateInput({
4143
required={required}
4244
error={error}
4345
onChange={onChange}
46+
nativeRef={nativeRef}
4447
value={value}
4548
label={label}
4649
/>
@@ -56,6 +59,7 @@ DateInput.propTypes = {
5659
required: PropTypes.bool,
5760
error: PropTypes.string,
5861
label: PropTypes.string,
62+
nativeRef: PropTypes.func,
5963
onChange: PropTypes.func.isRequired,
6064
};
6165

@@ -68,4 +72,5 @@ DateInput.defaultProps = {
6872
required: false,
6973
error: undefined,
7074
label: undefined,
75+
nativeRef: undefined,
7176
};

‎src/components/inputs/NumberInput/NumberInput.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const HINTS = {
2424
* @param {number} [props.max] Maximum value for the input element
2525
* @param {number} [props.min] Minimum value for the input element
2626
* @param {string} [props.name] Input name
27+
* @param {Function} [props.nativeRef] Action to perform to obtain the native input ref
2728
* @param {Function} props.onChange Action to perform on input change
2829
* @param {string} [props.placeholder] Input placeholder
2930
* @param {boolean} [props.required=false] Flag indicating input required
@@ -41,6 +42,7 @@ export default function NumberInput({
4142
max,
4243
min,
4344
name,
45+
nativeRef,
4446
onChange,
4547
placeholder,
4648
required,
@@ -92,6 +94,7 @@ export default function NumberInput({
9294
min={min}
9395
max={max}
9496
name={name}
97+
nativeRef={nativeRef}
9598
onChange={onChange}
9699
placeholder={placeholder}
97100
required={required}
@@ -114,6 +117,7 @@ NumberInput.propTypes = {
114117
max: PropTypes.number,
115118
min: PropTypes.number,
116119
name: PropTypes.string,
120+
nativeRef: PropTypes.func,
117121
onChange: PropTypes.func.isRequired,
118122
placeholder: PropTypes.string,
119123
required: PropTypes.bool,
@@ -134,6 +138,7 @@ NumberInput.defaultProps = {
134138
max: undefined,
135139
min: undefined,
136140
name: undefined,
141+
nativeRef: undefined,
137142
placeholder: undefined,
138143
required: false,
139144
style: undefined,

‎src/components/inputs/PasswordInput/PasswordInput.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const HINTS = {
1919
* @param {string} [props.label] Label text
2020
* @param {number} [props.maxLength] Maximum number of characters allowed
2121
* @param {string} [props.name] Input name
22+
* @param {Function} [props.nativeRef] Action to perform to obtain the native input ref
2223
* @param {Function} props.onChange Action to perform on input change
2324
* @param {string} [props.pattern] Specifies a regular expression that the element's value is checked against
2425
* @param {string} [props.placeholder] Input placeholder
@@ -36,6 +37,7 @@ export default function PasswordInput({
3637
label,
3738
maxLength,
3839
name,
40+
nativeRef,
3941
onChange,
4042
pattern,
4143
placeholder,
@@ -71,6 +73,7 @@ export default function PasswordInput({
7173
label={label}
7274
maxLength={maxLength}
7375
name={name}
76+
nativeRef={nativeRef}
7477
onChange={onChange}
7578
pattern={pattern}
7679
placeholder={placeholder}
@@ -92,6 +95,7 @@ PasswordInput.propTypes = {
9295
label: PropTypes.string,
9396
maxLength: PropTypes.number,
9497
name: PropTypes.string,
98+
nativeRef: PropTypes.func,
9599
onChange: PropTypes.func.isRequired,
96100
pattern: PropTypes.string,
97101
placeholder: PropTypes.string,
@@ -109,6 +113,7 @@ PasswordInput.defaultProps = {
109113
label: undefined,
110114
maxLength: undefined,
111115
name: undefined,
116+
nativeRef: undefined,
112117
pattern: undefined,
113118
placeholder: undefined,
114119
required: false,

‎src/components/inputs/TextInput/TextInput.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const HINTS = {
1818
* @param {string} [props.label] Label text
1919
* @param {number} [props.maxLength] Maximum number of characters allowed
2020
* @param {string} [props.name] Input name
21+
* @param {Function} [props.nativeRef] Action to perform to obtain the native input ref
2122
* @param {Function} props.onChange Action to perform on input change
2223
* @param {string} [props.pattern] Specifies a regular expression that the element's value is checked against
2324
* @param {string} [props.placeholder] Input placeholder
@@ -37,6 +38,7 @@ export default function TextInput({
3738
maxLength,
3839
name,
3940
onChange,
41+
nativeRef,
4042
pattern,
4143
placeholder,
4244
required,
@@ -63,6 +65,7 @@ export default function TextInput({
6365
label={label}
6466
maxLength={maxLength}
6567
name={name}
68+
nativeRef={nativeRef}
6669
onChange={onChange}
6770
pattern={pattern}
6871
placeholder={placeholder}
@@ -84,6 +87,7 @@ TextInput.propTypes = {
8487
label: PropTypes.string,
8588
maxLength: PropTypes.number,
8689
name: PropTypes.string,
90+
nativeRef: PropTypes.func,
8791
onChange: PropTypes.func.isRequired,
8892
pattern: PropTypes.string,
8993
placeholder: PropTypes.string,
@@ -102,6 +106,7 @@ TextInput.defaultProps = {
102106
label: undefined,
103107
maxLength: undefined,
104108
name: undefined,
109+
nativeRef: undefined,
105110
pattern: undefined,
106111
placeholder: undefined,
107112
required: false,

0 commit comments

Comments
 (0)