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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const PinInput = /*#__PURE__*/(0, _react.forwardRef)(({
  value,
  onChange,
  length = 6,
  disabled,
  autoFocus,
  colors
}, ref) => {
  const inputs = (0, _react.useRef)([]);
  (0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: styles.pinContainer,
    children: Array.from({
      length
    }).map((_, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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: _reactNative.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 = _reactNative.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,
    ..._reactNative.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
      }
    })
  }
});
var _default = exports.default = PinInput;
//# sourceMappingURL=PinInput.js.map