react-card-number
Version:
A debit card input field for React
73 lines (72 loc) • 3.68 kB
JavaScript
;
/**
* @license
* Copyright Rismun. All Rights Reserved.
*
* Use of this source code is governed by a Rismun private license that can be
* found in the LICENSE file at http://www.rismun.com/licenses/flexaa-license
*/
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Card = void 0;
/**
* @todo
* [Properties]
*/
var react_1 = __importStar(require("react"));
var Card = function (_a) {
var maxLength = _a.maxLength, styleProps = _a.style, className = _a.className, splitter = _a.splitter, title = _a.title;
var _b = (0, react_1.useState)(""), value = _b[0], setValue = _b[1];
var changeFormat = function (e) {
var regexp = new RegExp("[0-9*/]");
var chars = e.target.value.split("");
var value = '';
for (var _i = 0, chars_1 = chars; _i < chars_1.length; _i++) {
var char = chars_1[_i];
if (regexp.test(char)) {
value += char;
}
}
console.log(value);
setValue(value ? value.match(new RegExp('.{1,4}', 'g')).join(splitter || "-") : "");
};
var rootStyles = styleProps && styleProps.rootStyles ? __assign({}, styleProps.rootStyles) : {};
var labelStyles = styleProps && styleProps.labelStyles ? __assign({}, styleProps.labelStyles) : {};
var inputStyles = styleProps && styleProps.inputStyles ? __assign({}, styleProps.inputStyles) : {};
var rootClassName = typeof className === "string" ? className : className ? className.rootClassName : "";
var labelClassName = typeof className === "string" ? "" : className ? className.labelClassName : "";
var inputClassName = typeof className === "string" ? "" : className ? className.inputClassName : "";
return (react_1.default.createElement("div", { className: "label-className" + " " + rootClassName, style: __assign({ width: "200px" }, rootStyles) },
title && react_1.default.createElement("label", { style: __assign({ display: "block", margin: "5px" }, labelStyles), className: "label-className" + " " + labelClassName }, title),
react_1.default.createElement("input", { className: "input-className" + " " + inputClassName, style: __assign({ width: "100%", padding: "5%", borderRadius: "5px" }, inputStyles), value: value || "", onChange: changeFormat, maxLength: maxLength || 19 })));
};
exports.Card = Card;