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

pin input for react-native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = UMPinInput;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
function Bead(props) {
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [{
      width: 19,
      height: 19,
      borderWidth: 1,
      borderColor: '#8080802e',
      borderRadius: 9,
      backgroundColor: props.lenght >= props.index ? props.beadBg : 'white'
    }, props.styleBadge]
  });
}
function UMPinInput({
  size,
  beadBg,
  styleContainer,
  ...props
}) {
  const lenght = (props.value || '').length;
  return /*#__PURE__*/_react.default.createElement(_reactNative.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.default.createElement(_reactNative.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.default.createElement(Bead, {
    key: i,
    index: i + 1,
    lenght: lenght,
    beadBg: beadBg
  })));
}
//# sourceMappingURL=index.js.map