baseui
Version:
A React Component library implementing the Base design language
145 lines (141 loc) • 6.87 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var valid = _interopRequireWildcard(require("card-validator"));
var _utils = require("./utils");
var _overrides = require("../helpers/overrides");
var _input = require("../input");
var _themeProvider = require("../styles/theme-provider");
var _amex = _interopRequireDefault(require("./icons/amex"));
var _dinersclub = _interopRequireDefault(require("./icons/dinersclub"));
var _discover = _interopRequireDefault(require("./icons/discover"));
var _elo = _interopRequireDefault(require("./icons/elo"));
var _generic = _interopRequireDefault(require("./icons/generic"));
var _jcb = _interopRequireDefault(require("./icons/jcb"));
var _maestro = _interopRequireDefault(require("./icons/maestro"));
var _mastercard = _interopRequireDefault(require("./icons/mastercard"));
var _unionpay = _interopRequireDefault(require("./icons/unionpay"));
var _visa = _interopRequireDefault(require("./icons/visa"));
var _uatp = _interopRequireDefault(require("./icons/uatp"));
var _styledComponents = require("./styled-components");
var _customCards = require("./custom-cards.config");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
const CardTypeToComponent = {
visa: _visa.default,
mastercard: _mastercard.default,
'american-express': _amex.default,
'diners-club': _dinersclub.default,
discover: _discover.default,
jcb: _jcb.default,
unionpay: _unionpay.default,
maestro: _maestro.default,
elo: _elo.default,
generic: _generic.default,
uatp: _uatp.default
};
class PaymentCard extends React.Component {
constructor(props) {
super(props);
// For adding new custom card type, add card config to custom-cards.config.js
_defineProperty(this, "caretPosition", 0);
_defineProperty(this, "inRef", null);
_customCards.CUSTOM_CARDS_CONFIGURATION.forEach(cardTypeConfig => valid.creditCardType.addCard(cardTypeConfig));
}
componentDidUpdate(prevProps) {
if (this.inRef && prevProps.value !== this.props.value) {
this.inRef.setSelectionRange(this.caretPosition, this.caretPosition);
}
}
render() {
const {
overrides = {},
size = _input.SIZE.default,
onChange,
value,
'aria-label': ariaLabel = 'Please enter a debit or credit card number.',
...restProps
} = this.props;
const {
IconWrapper: IconWrapperOverride,
...restOverrides
} = overrides;
const [IconWrapper, iconWrapperProps] = (0, _overrides.getOverrides)(IconWrapperOverride, _styledComponents.IconWrapper);
// todo(flow->ts): maybe incorrect typecast, should it be `${value}`?
const validatedValue = valid.number(value);
let gaps = [];
let type = undefined;
if (validatedValue.card) {
gaps = validatedValue.card.gaps || [];
type = validatedValue.card.type;
}
// @ts-ignore
const getBeforeComponent = theme => {
const iconSize = {
[_input.SIZE.mini]: theme.sizing.scale600,
[_input.SIZE.compact]: theme.sizing.scale800,
[_input.SIZE.default]: theme.sizing.scale900,
[_input.SIZE.large]: theme.sizing.scale1000
};
return () => /*#__PURE__*/React.createElement(IconWrapper, _extends({
$size: size
}, iconWrapperProps), /*#__PURE__*/React.createElement(CardTypeToComponent[type || 'generic'] || _generic.default, {
size: iconSize[size]
}));
};
return /*#__PURE__*/React.createElement(_themeProvider.ThemeContext.Consumer, null, theme =>
/*#__PURE__*/
//$FlowExpectedError[cannot-spread-inexact]
React.createElement(_input.Input, _extends({
size: size,
"aria-label": ariaLabel,
"data-baseweb": "payment-card-input",
inputMode: "numeric",
overrides: Object.freeze({
...restOverrides,
Before: getBeforeComponent(theme)
}),
onChange: e => {
const [position, value] = (0, _utils.getCaretPosition)(e.target.value, this.props.value ? String(this.props.value) : '',
// @ts-ignore
e.target.selectionStart);
// @ts-expect-error todo(flow->ts): looks dangerous
this.caretPosition = position;
this.inRef = e.target;
// @ts-expect-error todo(flow->ts): looks dangerous
e.target.value = value;
onChange && onChange(e);
},
value: (0, _utils.addGaps)(gaps, String(value) || '')
}, restProps)));
}
}
_defineProperty(PaymentCard, "defaultProps", {
autoComplete: 'cc-number',
autoFocus: false,
disabled: false,
name: '',
error: false,
onBlur: () => {},
onFocus: () => {},
overrides: {},
required: false,
size: 'default',
// @ts-ignore
startEnhancer: null,
// @ts-ignore
endEnhancer: null
});
var _default = exports.default = PaymentCard;