react-native-input-code-otp/lib/commonjs/components/text-input-otp-slot.js

react-native-input-code-otp is a high-performance and fully customizable OTP input component for React Native, inspired by @shadcn/ui.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TextInputOTPSlot = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _caret = require("./caret.js");
var _useTextInputOtp = require("../hooks/use-text-input-otp.js");
var _useSlotBorderStyles = require("../hooks/use-slot-border-styles.js");
var _constants = require("../constants.js");
var _jsxRuntime = require("react/jsx-runtime");
function TextInputOTPSlotComponent({
  index,
  isFirst,
  isLast,
  focusedSlotStyles,
  focusedSlotTextStyles,
  slotStyles,
  slotTextStyles,
  ...rest
}) {
  const {
    code,
    currentIndex,
    handlePress,
    caretHidden
  } = (0, _useTextInputOtp.useTextInputOTP)();
  const isFocused = currentIndex === index;
  const borderStyles = (0, _useSlotBorderStyles.useSlotBorderStyles)({
    isFocused,
    isFirst,
    isLast
  });
  const shouldRenderCaret = isFocused && !code[index] && !caretHidden;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
    testID: "text-input-otp-slot",
    onPress: handlePress,
    style: _reactNative.StyleSheet.flatten([styles.slot, borderStyles, isFocused ? focusedSlotStyles : slotStyles]),
    ...rest,
    children: [code[index] && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: _reactNative.StyleSheet.flatten([styles.slotText, isFocused ? focusedSlotTextStyles : slotTextStyles]),
      children: code[index]
    }), shouldRenderCaret && /*#__PURE__*/(0, _jsxRuntime.jsx)(_caret.Caret, {})]
  });
}
const TextInputOTPSlot = exports.TextInputOTPSlot = /*#__PURE__*/(0, _react.memo)(TextInputOTPSlotComponent);
const styles = _reactNative.StyleSheet.create({
  slot: {
    width: _constants.SLOT_WIDTH,
    height: _constants.SLOT_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center'
  },
  slotText: {
    color: _constants.DEFAULT_DARK_COLOR,
    fontSize: 14,
    fontWeight: 'bold'
  }
});
//# sourceMappingURL=text-input-otp-slot.js.map