@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
98 lines • 5.26 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputDigitSequenceControlled = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useId_1 = require("../../hooks/useId/useId");
const useStyles_1 = require("../../hooks/useStyles/useStyles");
const errorBoundary_1 = require("../../provider/errorBoundary/errorBoundary");
const fallbackComponent_1 = require("../../provider/errorBoundary/fallbackComponent");
const inputDropdownStandAlone_1 = require("../inputDropdown/inputDropdownStandAlone");
const useAnimation_1 = require("./hooks/useAnimation");
const inputDigitSequenceStandAlone_1 = require("./inputDigitSequenceStandAlone");
const state_1 = require("./types/state");
//constants
const INPUT_DIGIT_SEQUENCE_STYLES = 'INPUT_DIGIT_SEQUENCE_STYLES';
const NUMBER_REGEX = /^[0-9]*$/;
const ON_CHANGE_VALUE_VISIBLE_TIMEOUT = 500;
const InputDigitSequenceControlledComponet = ({ variant, inputsArray, disabled = false, showDigitAfterWrite = true, showDigitTimeMiliseconds = ON_CHANGE_VALUE_VISIBLE_TIMEOUT, animated = false, ctv, ...props }) => {
const styles = (0, useStyles_1.useStyles)(INPUT_DIGIT_SEQUENCE_STYLES, variant, ctv);
const digitId = (0, useId_1.useId)('digit');
const [showPassword, setShowPassword] = react_1.default.useState(false);
const [inputDigits, setInputDigits] = react_1.default.useState(inputsArray.map((input, index) => {
return {
index: index,
value: input.value ?? '',
blockedBySystem: input.blockedBySystem,
['aria-label']: input['aria-label'],
};
}));
const { ref, boxesAnimationDone, labelAnimationDone } = (0, useAnimation_1.useAnimation)({
animated,
});
const getNextInput = (index) => {
//we need to find the next input not BloquedBySystem
//we get a new array from the actual index + 1
const slicedInputDigits = inputDigits.slice(index + 1);
//we get the first element with isBloquedBySystem=false
const nextInputNotDisabled = slicedInputDigits.find(input => !input.blockedBySystem);
if (nextInputNotDisabled) {
const inputElement = document.getElementById(`${digitId}-${nextInputNotDisabled.index}`);
inputElement?.focus();
}
};
const [passwordIndex, setPasswordIndex] = react_1.default.useState();
const displayDigitTimeOut = react_1.default.useRef(null);
// When unmount, delete displayDigitTimeOut
react_1.default.useEffect(() => {
return () => {
if (displayDigitTimeOut.current) {
clearTimeout(displayDigitTimeOut.current);
}
};
}, []);
const showDigit = (index) => {
if (!showDigitAfterWrite) {
return;
}
// Set visible the current index showDigitTimeMiliseconds (or change)
if (displayDigitTimeOut.current) {
clearTimeout(displayDigitTimeOut.current);
}
setPasswordIndex(index);
displayDigitTimeOut.current = setTimeout(() => {
setPasswordIndex(undefined);
}, showDigitTimeMiliseconds);
};
const handleInputChange = (index) => {
return event => {
const { value } = event.target;
//we only allow number values
if (NUMBER_REGEX.test(value)) {
showDigit(index);
const newDigits = [...inputDigits];
newDigits[index].value = value;
setInputDigits(newDigits);
//when the user writes a new digit, we send the new array in case they want to check something
props.onInputChange?.(newDigits, event);
if (value !== '') {
getNextInput(index);
}
}
};
};
const handleClickActionButton = event => {
setShowPassword(prevValue => !prevValue);
props.actionButton?.onClick?.(event);
};
const state = !disabled
? state_1.InputDigitSequenceStateType.DEFAULT
: state_1.InputDigitSequenceStateType.DISABLED;
return ((0, jsx_runtime_1.jsx)(inputDigitSequenceStandAlone_1.InputDigitSequenceStandAlone, { ...props, ref: ref, animated: animated, boxesAnimationDone: boxesAnimationDone, digitId: digitId, disabled: disabled, inputDigits: inputDigits, labelAnimationDone: labelAnimationDone, passwordIndex: passwordIndex, showPassword: showPassword, state: state, styles: styles, onActionButtonClick: handleClickActionButton, onInputChange: handleInputChange }));
};
const InputDigitSequenceBoundary = (props) => ((0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, { fallBackComponent: (0, jsx_runtime_1.jsx)(fallbackComponent_1.FallbackComponent, { children: (0, jsx_runtime_1.jsx)(inputDropdownStandAlone_1.InputDropdownStandAlone, { ...props }) }), children: (0, jsx_runtime_1.jsx)(InputDigitSequenceControlledComponet, { ...props }) }));
exports.InputDigitSequenceControlled = InputDigitSequenceBoundary;
//# sourceMappingURL=inputDigitSequenceControlled.js.map