react-native-umpin/lib/module/index.js

pin input for react-native

"use strict";

import { TextInput, View } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function Bead(props) {
  return /*#__PURE__*/_jsx(View, {
    style: [{
      width: 19,
      height: 19,
      borderWidth: 1,
      borderColor: '#8080802e',
      borderRadius: 9,
      backgroundColor: props.lenght >= props.index ? props.beadBg : 'white'
    }, props.styleBadge]
  });
}
export default function UMPinInput({
  size,
  beadBg,
  styleContainer,
  ...props
}) {
  const lenght = (props.value || '').length;
  return /*#__PURE__*/_jsxs(View, {
    style: [{
      flex: 1,
      zIndex: 9,
      height: 45,
      minHeight: 45,
      maxHeight: 45,
      paddingHorizontal: 11,
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-around',
      alignItems: 'center',
      position: 'relative'
    }, styleContainer],
    children: [/*#__PURE__*/_jsx(TextInput, {
      ...props,
      style: {
        flex: 1,
        position: 'absolute',
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        color: 'transparent',
        textAlign: 'center',
        zIndex: 3
      },
      secureTextEntry: true,
      caretHidden: true,
      maxLength: 5,
      placeholder: ""
    }), Array(Math.abs(size)).fill(null).map((_, i) => /*#__PURE__*/_jsx(Bead, {
      index: i + 1,
      lenght: lenght,
      beadBg: beadBg
    }, i))]
  });
}
//# sourceMappingURL=index.js.map