@oxyhq/services/lib/module/ui/components/internal/PinInput.js

Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀

"use strict";

import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { View, TextInput, StyleSheet, Platform } from 'react-native';
import { jsx as _jsx } from "react/jsx-runtime";
const PinInput = /*#__PURE__*/forwardRef(({
  value,
  onChange,
  length = 6,
  disabled,
  autoFocus,
  colors
}, ref) => {
  const inputs = useRef([]);
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputs.current[0]?.focus();
    }
  }), []);
  const handleChange = (text, idx) => {
    if (!/^[0-9]*$/.test(text)) return;
    let newValue = value.split('');
    if (text.length > 1) {
      // Paste or autofill
      newValue = text.split('').slice(0, length);
      onChange(newValue.join(''));
      if (newValue.length < length) {
        inputs.current[newValue.length]?.focus();
      }
      return;
    }
    newValue[idx] = text;
    const joined = newValue.join('').slice(0, length);
    onChange(joined);
    if (text && idx < length - 1) {
      inputs.current[idx + 1]?.focus();
    }
  };
  const handleKeyPress = (e, idx) => {
    if (e.nativeEvent.key === 'Backspace' && !value[idx] && idx > 0) {
      inputs.current[idx - 1]?.focus();
    }
  };
  return /*#__PURE__*/_jsx(View, {
    style: styles.pinContainer,
    children: Array.from({
      length
    }).map((_, idx) => /*#__PURE__*/_jsx(TextInput, {
      ref: ref => {
        inputs.current[idx] = ref;
      },
      style: [styles.pinInput, {
        borderColor: colors.primary,
        color: colors.text,
        backgroundColor: colors.inputBackground
      }, value[idx] ? {
        borderWidth: 2
      } : {
        borderWidth: 1
      }],
      value: value[idx] || '',
      onChangeText: text => handleChange(text, idx),
      onKeyPress: e => handleKeyPress(e, idx),
      keyboardType: Platform.OS === 'ios' ? 'number-pad' : 'numeric',
      maxLength: 1,
      editable: !disabled,
      autoFocus: autoFocus && idx === 0,
      textAlign: "center",
      selectionColor: colors.primary,
      returnKeyType: "done"
    }, `pin-input-${idx}`))
  });
});
const styles = StyleSheet.create({
  pinContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    gap: 12,
    marginBottom: 0,
    marginTop: 0
  },
  pinInput: {
    width: 44,
    height: 54,
    borderRadius: 12,
    borderWidth: 1,
    fontSize: 28,
    fontWeight: '600',
    backgroundColor: '#F5F5F5',
    textAlign: 'center',
    marginHorizontal: 2,
    ...Platform.select({
      web: {
        boxShadow: '0 1px 4px rgba(0,0,0,0.04)'
      },
      default: {
        shadowColor: '#000',
        shadowOpacity: 0.04,
        shadowOffset: {
          width: 0,
          height: 1
        },
        shadowRadius: 4,
        elevation: 1
      }
    })
  }
});
export default PinInput;
//# sourceMappingURL=PinInput.js.map