UNPKG

react-native-onetapinput

Version:

React Native OneTapInput is a customizable, easy-to-use, and highly customizable OTP input component for React Native.

87 lines (86 loc) 3.69 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _reactNative = require("react-native"); var _react = _interopRequireWildcard(require("react")); var _utils = require("./utils"); var _jsxRuntime = require("react/jsx-runtime"); function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } const ResendOTPButton = ({ intervalTime = 30, onResendOtp, resendOtpText = 'Resend OTP', resendButtonStyle, resendButtonColor, resendButtonTextColor, resendButtonTextStyle, resendText, resendTextStyle, hideResendText = false, mainContainerStyle, disabledButtonStyle, timerUnit = 'seconds' }) => { const [timer, setTimer] = (0, _react.useState)(timerUnit === 'minutes' ? intervalTime * 60 : intervalTime); (0, _react.useEffect)(() => { let interval; if (timer > 0) { interval = setInterval(() => { setTimer(timer - 1); }, 1000); } return () => { if (interval) { clearInterval(interval); } }; }, [timer]); const getTimeInMinutesOrSeconds = time => { if (timerUnit === 'minutes') { const minutes = Math.floor(time / 60); const seconds = time % 60; return `${minutes > 0 ? minutes + ':' : ''}${seconds < 10 ? `0${seconds}` : seconds} ${minutes >= 1 ? 'minutes' : seconds > 1 ? 'seconds' : 'second'}`; } return `${time} ${time > 1 ? 'seconds' : 'second'}`; }; return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, { style: mainContainerStyle, children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, { style: { alignItems: 'center' }, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, { onPress: () => { if (timer === 0) { setTimer(timerUnit === 'minutes' ? intervalTime * 60 : intervalTime); onResendOtp && onResendOtp(); } }, style: [resendButtonStyle ?? _utils.styles.defaultResendButtonStyle, timer === 0 ? { opacity: 1, pointerEvents: 'auto' } : disabledButtonStyle ?? { opacity: 0.5, pointerEvents: 'none' }, resendButtonColor ? { backgroundColor: resendButtonColor, borderColor: resendButtonColor } : {}], children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, { style: [resendButtonTextStyle ?? _utils.styles.defaultResendButtonTextStyle, resendButtonTextColor ? { color: resendButtonTextColor } : {}], children: resendOtpText }) }) }), !hideResendText && timer > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, { style: resendTextStyle, children: resendText ? resendText(timer, timerUnit) : `You can resend OTP in ${getTimeInMinutesOrSeconds(timer)}` })] }); }; var _default = exports.default = ResendOTPButton; //# sourceMappingURL=resendOtpButton.js.map