react-common-use-components
Version:
A React mobile commonly used component library
98 lines (97 loc) • 4.48 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const FlexBox_1 = __importDefault(require("../FlexBox/FlexBox"));
const utils_1 = require("../../utils");
const PasswordInput = ({ value, maxLength = 6, style, inputItemStyle, iconStyle, onChange, onSubmit, autoFocus = true }) => {
const [content, setContent] = (0, react_1.useState)(value ? value : '');
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
const inputElement = ref.current;
const handleFocus = () => setIsFocused(true);
const handleBlur = () => setIsFocused(false);
if (inputElement) {
inputElement.addEventListener('focus', handleFocus);
inputElement.addEventListener('blur', handleBlur);
}
return () => {
if (inputElement) {
inputElement.removeEventListener('focus', handleFocus);
inputElement.removeEventListener('blur', handleBlur);
}
};
}, []);
const ref = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
if (content.length > maxLength - 1 && onSubmit) {
onSubmit(content);
}
}, [content]);
const onPress = () => {
const inputElement = ref.current;
if (inputElement) {
inputElement.focus();
}
};
return (<FlexBox_1.default onClick={onPress} style={Object.assign({ background: "#FFFFFF", position: "relative", width: 44 * maxLength }, style)}>
<style>
{`
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
`}
</style>
{(0, utils_1.range)(maxLength).map((_, i) => {
return (<div key={i} style={Object.assign({ marginLeft: i === 0 ? 0 : 4, height: 44, width: 44, display: "flex", justifyContent: "center", alignItems: "center", backgroundColor: "#F3F3F3", borderRadius: 12, fontSize: 16 }, inputItemStyle)}>
{(i === content.length && isFocused) && <div style={{
display: "inline-block",
width: 1,
height: 16,
backgroundColor: "#000000",
animation: "blink 1s step-start infinite"
}}/>}
{i < content.length ? <div style={Object.assign({ width: 16, height: 16, backgroundColor: "#000000", borderRadius: 16 }, iconStyle)}/> : null}
</div>);
})}
<input value={content} style={{ opacity: 0, zIndex: -1, position: "absolute", top: 8, left: "50%", width: 1 }} ref={ref} maxLength={maxLength} autoFocus={autoFocus} type="text" onChange={(e) => {
if (e.target.value.length <= maxLength) {
setContent(e.target.value);
if (onChange) {
onChange(e.target.value);
}
}
}}/>
</FlexBox_1.default>);
};
exports.default = PasswordInput;