reactjs-credit-card/form/cardNumber.js

This Package has react credit card form components and form validation system

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useContext, useState } from 'react';
import hunelContext from '../utils/HunelContext';
import { parseProps } from '../utils/general';
import validation from '../utils/HunelValidation';
export default function CardNumber(props) {
  const [cardNumber, setCardNumber] = useState('');
  const {
    pokeVirtualCardStates
  } = useContext(hunelContext);
  const newProps = parseProps(props, 'value', 'type');

  function handleChange(e) {
    const {
      value
    } = e.target;

    if (validation.ValidateCardNumberChange(value) && validation.ValidateCardNumberLength(value)) {
      pokeVirtualCardStates(1, value);
      setCardNumber(value);
    }
  }

  return /*#__PURE__*/React.createElement("input", _extends({
    type: "text",
    onChange: e => {
      handleChange(e);
      if ('onChange' in newProps) newProps['onChange'](e);
    },
    value: cardNumber
  }, parseProps(newProps, 'onChange')));
}