react-input-pin-code
Version:
Pin input built with React component and styled-components
86 lines (81 loc) • 6.99 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import cx from 'clsx';
import { useRef, useMemo, useEffect } from 'react';
import { s as styleInject, P as PinInputField } from './component-B3MV4PJV.js';
import { validateToPattern } from '../utils/string/index.js';
import { u as useCssVariable } from './hook-C_LtjIcQ.js';
import { DEFAULT_FOCUS_BORDER_COLOR, DEFAULT_ERROR_BORDER_COLOR, DEFAULT_VALID_BORDER_COLOR, DEFAULT_BORDER_COLOR, DEFAULT_FOCUS_BACKGROUND_COLOR, DEFAULT_ERROR_BACKGROUND_COLOR, DEFAULT_VALID_BACKGROUND_COLOR, SIZE_MEDIUM } from '../constants/index.js';
var css_248z = "div.styles-module_pinCodeContainer__Tr7tY {\n display: flex;\n align-items: center;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGFBQWE7RUFDYixtQkFBbUI7QUFDckIiLCJmaWxlIjoic3R5bGVzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiZGl2LnBpbkNvZGVDb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuXG46ZXhwb3J0IHtcbiAgaW5wdXRCb3JkZXJDb2xvckNzc1ZhcjogLS1yaXBjLWlucHV0LWJvcmRlci1jb2xvcjtcbiAgaW5wdXRGb2N1c0JvcmRlckNvbG9yQ3NzVmFyOiAtLXJpcGMtZm9jdXMtaW5wdXQtYm9yZGVyLWNvbG9yO1xuICBpbnB1dEZvY3VzQmFja2dyb3VuZENvbG9yQ3NzVmFyOiAtLXJpcGMtZm9jdXMtaW5wdXQtYmFja2dyb3VuZC1jb2xvcjtcbiAgaW5wdXRFcnJvckJvcmRlckNvbG9yQ3NzVmFyOiAtLXJpcGMtZXJyb3ItaW5wdXQtYm9yZGVyLWNvbG9yO1xuICBpbnB1dEVycm9yQmFja2dyb3VuZENvbG9yQ3NzVmFyOiAtLXJpcGMtZXJyb3ItaW5wdXQtYmFja2dyb3VuZC1jb2xvcjtcbiAgaW5wdXRWYWxpZEJvcmRlckNvbG9yQ3NzVmFyOiAtLXJpcGMtdmFsaWQtaW5wdXQtYm9yZGVyLWNvbG9yO1xuICBpbnB1dFZhbGlkQmFja2dyb3VuZENvbG9yQ3NzVmFyOiAtLXJpcGMtdmFsaWQtaW5wdXQtYmFja2dyb3VuZC1jb2xvcjtcbn0iXX0= */";
var styles = {"inputBorderColorCssVar":"--ripc-input-border-color","inputFocusBorderColorCssVar":"--ripc-focus-input-border-color","inputFocusBackgroundColorCssVar":"--ripc-focus-input-background-color","inputErrorBorderColorCssVar":"--ripc-error-input-border-color","inputErrorBackgroundColorCssVar":"--ripc-error-input-background-color","inputValidBorderColorCssVar":"--ripc-valid-input-border-color","inputValidBackgroundColorCssVar":"--ripc-valid-input-background-color","pinCodeContainer":"styles-module_pinCodeContainer__Tr7tY"};
styleInject(css_248z);
const colorParser = (color) => {
if (color === undefined)
return null;
const match = color.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);
if (match) {
return {
r: Number(match[1]),
g: Number(match[2]),
b: Number(match[3]),
};
}
else {
const shorthand = /^#?[a-fA-Z\d]{3}$/i.test(color);
const result = shorthand
? /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(color)
: /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
return result
? {
r: parseInt(shorthand ? result[1] + result[1] : result[1], 16),
g: parseInt(shorthand ? result[2] + result[2] : result[2], 16),
b: parseInt(shorthand ? result[3] + result[3] : result[3], 16),
}
: null;
}
};
const PinInput = ({ values, type = 'number', mask = false, size = SIZE_MEDIUM, validate, format, showState = true, autoFocus = false, autoTab = true, containerClassName, containerStyle = {}, inputClassName, inputStyle = {}, borderColor = DEFAULT_BORDER_COLOR, errorBorderColor = DEFAULT_ERROR_BORDER_COLOR, focusBorderColor = DEFAULT_FOCUS_BORDER_COLOR, validBorderColor = DEFAULT_VALID_BORDER_COLOR, onChange, onComplete, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, autoComplete, disabled, id, inputMode, name, onBlur, onFocus, onKeyDown, placeholder, required, }) => {
const containerRef = useRef(null);
const completed = useMemo(() => values.every((val) => val), [values]);
if (completed && onComplete) {
if (validate) {
if (values.every((val) => {
const pattern = validateToPattern(validate);
if (pattern) {
return new RegExp(pattern).test(val);
}
return false;
})) {
onComplete(values);
}
}
else {
onComplete(values);
}
}
const { setCssVariable: setInputCssVariable, } = useCssVariable({
targetElRef: containerRef,
});
const parsedFocusBorderColor = useMemo(() => colorParser(focusBorderColor), [focusBorderColor]);
const parsedErrorBorderColor = useMemo(() => colorParser(errorBorderColor), [errorBorderColor]);
const parsedValidBorderColor = useMemo(() => colorParser(focusBorderColor), [validBorderColor]);
useEffect(() => {
if (containerRef.current) {
setInputCssVariable(styles.inputBorderColorCssVar, colorParser(borderColor) ? borderColor : DEFAULT_BORDER_COLOR);
setInputCssVariable(styles.inputFocusBorderColorCssVar, parsedFocusBorderColor ? focusBorderColor : DEFAULT_FOCUS_BORDER_COLOR);
setInputCssVariable(styles.inputFocusBackgroundColorCssVar, parsedFocusBorderColor
? `rgba(${parsedFocusBorderColor.r},${parsedFocusBorderColor.g},${parsedFocusBorderColor.b},0.1)`
: DEFAULT_FOCUS_BACKGROUND_COLOR);
setInputCssVariable(styles.inputErrorBorderColorCssVar, colorParser(errorBorderColor) ? errorBorderColor : DEFAULT_ERROR_BORDER_COLOR);
setInputCssVariable(styles.inputErrorBackgroundColorCssVar, parsedErrorBorderColor
? `rgba(${parsedErrorBorderColor.r},${parsedErrorBorderColor.g},${parsedErrorBorderColor.b},0.1)`
: DEFAULT_ERROR_BACKGROUND_COLOR);
setInputCssVariable(styles.inputValidBorderColorCssVar, colorParser(validBorderColor) ? validBorderColor : DEFAULT_VALID_BORDER_COLOR);
setInputCssVariable(styles.inputValidBackgroundColorCssVar, parsedValidBorderColor
? `rgba(${parsedValidBorderColor.r},${parsedValidBorderColor.g},${parsedValidBorderColor.b},0.1)`
: DEFAULT_VALID_BACKGROUND_COLOR);
}
}, [containerRef.current]);
return (jsx("div", { ref: containerRef, className: cx(styles.pinCodeContainer, containerClassName), style: containerStyle, children: values.map((value, i) => (jsx(PinInputField, { index: i, value: value, values: values, completed: completed, type: type, mask: mask, size: size, validate: validate, showState: showState, autoFocus: autoFocus, autoTab: autoTab, inputClassName: inputClassName, inputStyle: inputStyle, "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, autoComplete: autoComplete, disabled: disabled, inputMode: inputMode, id: id, name: name, placeholder: placeholder, required: required, format: format, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown }, id ? `${id}-${i}` : i))) }));
};
export { PinInput as P };
//# sourceMappingURL=component-CM-GrdhF.js.map