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

pin input for react-native

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React from 'react';
import { TextInput, View } from 'react-native';
function Bead(props) {
  return /*#__PURE__*/React.createElement(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__*/React.createElement(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]
  }, /*#__PURE__*/React.createElement(TextInput, _extends({}, 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__*/React.createElement(Bead, {
    key: i,
    index: i + 1,
    lenght: lenght,
    beadBg: beadBg
  })));
}
//# sourceMappingURL=index.js.map