input-otp-native/lib/commonjs/input.js

One time passcode Input For React Native/Expo. Unstyled and fully customizable.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.OTPInput = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _useInput = require("./use-input.js");
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; }
/**
 * Default paste transformer that removes all non-numeric characters.
 */const defaultPasteTransformer = maxLength => pasted => {
  // match exactly maxLength digits, not preceded or followed by another digit
  const otpRegex = new RegExp(`(?<!\\d)(\\d{${maxLength}})(?!\\d)`);
  const match = pasted.match(otpRegex);
  return match?.[1] ?? '';
};
const OTPInput = exports.OTPInput = /*#__PURE__*/React.forwardRef(({
  style,
  onChange,
  maxLength,
  pattern,
  placeholder,
  inputMode = 'numeric',
  containerStyle,
  onComplete,
  render,
  ...props
}, ref) => {
  const {
    inputRef,
    contextValue,
    value,
    handlers,
    actions
  } = (0, _useInput.useInput)({
    onChange,
    maxLength,
    pattern,
    placeholder,
    defaultValue: props.defaultValue,
    pasteTransformer: props.pasteTransformer ?? defaultPasteTransformer(maxLength),
    onComplete
  });
  React.useImperativeHandle(ref, () => ({
    setValue: newValue => {
      handlers.onChangeText(newValue);
    },
    focus: () => {
      actions.focus();
      // for test only we need to call onFocus
      handlers.onFocus();
    },
    blur: () => inputRef.current?.blur(),
    clear: actions.clear
  }));
  const renderedChildren = React.useMemo(() => {
    if (render) {
      return render(contextValue);
    }
    return null;
  }, [contextValue, render]);
  const onPress = React.useCallback(() => {
    actions.focus();
    actions.clear();
  }, [actions]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
    testID: "otp-input-container",
    style: [styles.container, containerStyle],
    onPress: onPress,
    children: [renderedChildren, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
      ref: inputRef,
      style: [styles.input, style],
      value: value,
      onChangeText: handlers.onChangeText,
      onFocus: handlers.onFocus,
      onBlur: handlers.onBlur,
      placeholder: placeholder,
      inputMode: inputMode
      /**
       * On iOS if the input has an opacity of 0, we can't paste text into it.
       * As we're setting the opacity to 0.02, we need to hide the caret.
       */,
      caretHidden: _reactNative.Platform.OS === 'ios',
      textContentType: "oneTimeCode",
      autoComplete: _reactNative.Platform.OS === 'android' ? 'sms-otp' : 'one-time-code',
      clearTextOnFocus: true,
      accessible: true,
      accessibilityRole: "text",
      testID: "otp-input",
      ...props
    })]
  });
});
OTPInput.displayName = 'OTPInput';
const styles = _reactNative.StyleSheet.create({
  container: {
    position: 'relative'
  },
  input: {
    ..._reactNative.StyleSheet.absoluteFillObject,
    /**
     * On iOS if the input has an opacity of 0, we can't paste text into it.
     * This is a workaround to allow pasting text into the input.
     */
    ..._reactNative.Platform.select({
      ios: {
        opacity: 0.02,
        color: 'transparent'
      },
      android: {
        opacity: 0
      }
    })
  }
});
//# sourceMappingURL=input.js.map