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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useInput = useInput;
var React = _interopRequireWildcard(require("react"));
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; }
function useInput({
  onChange: _onChange,
  maxLength,
  pattern,
  placeholder,
  defaultValue,
  onComplete,
  pasteTransformer
}) {
  const [value, setValue] = React.useState(typeof defaultValue === 'string' ? defaultValue : '');
  const regexp = React.useMemo(() => pattern ? typeof pattern === 'string' ? new RegExp(pattern) : pattern : null, [pattern]);
  const inputRef = React.useRef(null);
  const [isFocused, setIsFocused] = React.useState(false);
  const onChangeText = React.useCallback(text => {
    // Detect paste operation: if text length increases by more than 1 character
    // it's likely a paste operation rather than normal typing
    const isPaste = text.length > value.length + 1;
    const transformedText = isPaste && pasteTransformer ? pasteTransformer(text) : text;
    const newValue = transformedText.slice(0, maxLength);
    if (newValue.length > 0 && regexp && !regexp.test(newValue)) {
      return;
    }
    setValue(newValue);
    _onChange?.(newValue);
    if (newValue.length === maxLength) {
      onComplete?.(newValue);
    }
  }, [maxLength, regexp, _onChange, onComplete, pasteTransformer, value.length]);
  const onFocus = React.useCallback(() => {
    setIsFocused(true);
  }, []);
  const onBlur = React.useCallback(() => {
    setIsFocused(false);
  }, []);
  const clear = React.useCallback(() => {
    inputRef.current?.clear();
    setValue('');
  }, []);
  const focus = React.useCallback(() => {
    inputRef.current?.focus();
  }, []);
  const contextValue = React.useMemo(() => {
    return {
      slots: Array.from({
        length: maxLength
      }).map((_, slotIdx) => {
        const isActive = isFocused && slotIdx === value.length;
        const char = value[slotIdx] !== undefined ? value[slotIdx] : null;
        const placeholderChar = value[0] !== undefined ? null : placeholder?.[slotIdx] ?? null;
        return {
          char,
          placeholderChar,
          isActive,
          hasFakeCaret: isActive && char === null
        };
      }),
      isFocused
    };
  }, [isFocused, maxLength, value, placeholder]);
  return {
    inputRef,
    contextValue,
    value,
    isFocused,
    handlers: {
      onChangeText,
      onFocus,
      onBlur
    },
    actions: {
      clear,
      focus
    }
  };
}
//# sourceMappingURL=use-input.js.map