@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
60 lines • 3.18 kB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
import VerificationInput from 'react-verification-input';
import './CodeInput.style.scss';
import InputMessage, { getFilteredMessages } from '../InputMessage';
import classnames from 'classnames';
import { STYLE } from './CodeInput.constants';
var CodeInput = function (props) {
var numDigits = props.numDigits, _a = props.clearComplete, clearComplete = _a === void 0 ? true : _a, _b = props.onChange, onChange = _b === void 0 ? function () {
/* Optional */
} : _b, _c = props.onComplete, onComplete = _c === void 0 ? function () {
/* Optional */
} : _c, ariaLabel = props.ariaLabel, ariaDescribedby = props.ariaDescribedby, _d = props.messageArr, messageArr = _d === void 0 ? [] : _d, _e = props.disabled, disabled = _e === void 0 ? false : _e, className = props.className, inputId = props.inputId;
var _f = useState(messageArr), internalMessageArray = _f[0], setInternalMessageArray = _f[1];
var _g = useState(false), isComplete = _g[0], setComplete = _g[1];
var _h = useState(''), value = _h[0], setValue = _h[1];
var _j = getFilteredMessages(internalMessageArray), messageType = _j[0], messages = _j[1];
var firstUpdate = useRef(true);
useEffect(function () {
if (firstUpdate.current) {
firstUpdate.current = false;
return;
}
onChange(value);
if (value.length === numDigits) {
onComplete(value);
setComplete(true);
}
}, [value]);
useEffect(function () {
setInternalMessageArray(messageArr);
}, [JSON.stringify(messageArr)]);
return (React.createElement("div", { className: classnames(STYLE.wrapper, className), "data-level": messageType },
React.createElement(VerificationInput, { inputProps: {
'aria-label': ariaLabel,
'aria-describedby': ariaDescribedby,
id: inputId,
name: inputId,
disabled: disabled,
className: classnames(STYLE.input),
}, containerProps: {
className: classnames(STYLE.container),
}, length: numDigits, onChange: setValue, onFocus: function () {
if (isComplete && !!clearComplete) {
// When completed, refocusing the input will clear the code and any messages
setComplete(false);
setValue('');
setInternalMessageArray([]);
}
}, value: value, validChars: "0-9", placeholder: "", classNames: {
character: STYLE.character,
characterInactive: STYLE.characterInactive,
characterSelected: STYLE.characterSelected,
} }),
messages && (React.createElement("div", { className: STYLE.messages }, messages.map(function (m, i) { return (React.createElement(InputMessage, { className: STYLE.message, message: m, key: "input-message-".concat(i), level: messageType })); })))));
};
/**
* Numeric code input for use with confirmation codes
*/
export default CodeInput;
//# sourceMappingURL=CodeInput.js.map