reactjs-credit-card/form/cardHolder.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 CardHolder(props) {
  const [cardOwner, setCardOwner] = useState('');
  const {
    pokeVirtualCardStates
  } = useContext(hunelContext);
  const newProps = parseProps(props, 'type', 'value');

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

    if (validation.ValidateCardOwner(value)) {
      value = value.toUpperCase();
      pokeVirtualCardStates(2, value);
      setCardOwner(value);
    }
  }

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