@sb1/ffe-account-selector-react
Version:
Selector for bank accounts with autocomplete.
152 lines (151 loc) • 9.08 kB
JavaScript
;
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;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (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 () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccountSelector = void 0;
var react_1 = __importStar(require("react"));
var classnames_1 = __importDefault(require("classnames"));
var AccountDetails_1 = require("./AccountDetails");
var format_1 = require("../format");
var ffe_searchable_dropdown_react_1 = require("@sb1/ffe-searchable-dropdown-react");
var getAccountsWithCustomAccounts_1 = require("./getAccountsWithCustomAccounts");
var searchMatcherIgnoringAccountNumberFormatting_1 = require("../searchMatcherIgnoringAccountNumberFormatting");
var texts_1 = require("../texts");
var AccountOptionBody_1 = require("./AccountOptionBody");
var AccountSelector = function (_a) {
var _b;
var _c;
var id = _a.id, className = _a.className, _d = _a.locale, locale = _d === void 0 ? 'nb' : _d, selectedAccount = _a.selectedAccount, _e = _a.hideAccountDetails, hideAccountDetails = _e === void 0 ? false : _e, _f = _a.showBalance, showBalance = _f === void 0 ? false : _f, noMatches = _a.noMatches, accounts = _a.accounts, onAccountSelected = _a.onAccountSelected, _g = _a.allowCustomAccount, allowCustomAccount = _g === void 0 ? false : _g, labelledById = _a.labelledById, OptionBody = _a.optionBody, postListElement = _a.postListElement, onReset = _a.onReset, inputProps = _a.inputProps, _h = _a.formatAccountNumber, formatAccountNumber = _h === void 0 ? true : _h, ariaInvalid = _a.ariaInvalid, onOpen = _a.onOpen, onClose = _a.onClose, displayAttribute = _a.displayAttribute, rest = __rest(_a, ["id", "className", "locale", "selectedAccount", "hideAccountDetails", "showBalance", "noMatches", "accounts", "onAccountSelected", "allowCustomAccount", "labelledById", "optionBody", "postListElement", "onReset", "inputProps", "formatAccountNumber", "ariaInvalid", "onOpen", "onClose", "displayAttribute"]);
var _j = (0, react_1.useState)((selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.name) || ''), inputValue = _j[0], setInputValue = _j[1];
var formatter = formatAccountNumber
? format_1.formatIncompleteAccountNumber
: undefined;
var onInputChange = function (event) {
if (allowCustomAccount) {
setInputValue(event.target.value);
}
if (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) {
inputProps.onChange(event);
}
};
var handleAccountSelected = function (value) {
var _a;
var hasResetSelection = value === null;
var hasSelectedCustomAccount = !(value === null || value === void 0 ? void 0 : value.accountNumber);
if (hasResetSelection) {
setInputValue('');
onReset();
}
else if (hasSelectedCustomAccount) {
onAccountSelected(__assign({ name: value.name, accountNumber: value.name }, (displayAttribute ? (_a = {}, _a[displayAttribute] = value.name, _a) : {})));
setInputValue(value.name);
}
else {
onAccountSelected(value);
setInputValue(value.name);
}
};
var _ariaInvalid = (_c = rest['aria-invalid']) !== null && _c !== void 0 ? _c : ariaInvalid;
return (react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-account-selector-single', className), id: "".concat(id, "-account-selector-container") },
react_1.default.createElement(ffe_searchable_dropdown_react_1.SearchableDropdown, { id: id, labelledById: labelledById, displayAttribute: displayAttribute, inputProps: __assign(__assign({}, inputProps), { onChange: onInputChange }), dropdownAttributes: showBalance
? ['name', 'accountNumber', 'balance']
: ['name', 'accountNumber'], postListElement: postListElement, dropdownList: allowCustomAccount
? (0, getAccountsWithCustomAccounts_1.getAccountsWithCustomAccounts)({
selectedAccount: selectedAccount,
accounts: accounts,
inputValue: inputValue,
})
: accounts, noMatch: allowCustomAccount && inputValue.trim() !== ''
? {
dropdownList: [
__assign({ name: formatter
? formatter(inputValue)
: inputValue, accountNumber: '' }, (displayAttribute
? (_b = {},
_b[displayAttribute] = formatter
? formatter(inputValue)
: inputValue,
_b) : {})),
],
}
: (noMatches !== null && noMatches !== void 0 ? noMatches : { text: texts_1.texts[locale].noMatch }), formatter: formatter, onChange: handleAccountSelected, searchAttributes: __spreadArray([
'name',
'accountNumber'
], (displayAttribute ? [displayAttribute] : []), true), locale: locale, optionBody: function (_a) {
var item = _a.item, isHighlighted = _a.isHighlighted, restOptionBody = __rest(_a, ["item", "isHighlighted"]);
if (OptionBody) {
return (react_1.default.createElement(OptionBody, __assign({ item: item, isHighlighted: isHighlighted }, restOptionBody)));
}
return (react_1.default.createElement(AccountOptionBody_1.AccountActionBody, { item: item, isHighlighted: isHighlighted, locale: locale, showBalance: showBalance }));
}, ariaInvalid: _ariaInvalid, searchMatcher: searchMatcherIgnoringAccountNumberFormatting_1.searchMatcherIgnoringAccountNumberFormatting, selectedItem: selectedAccount, onOpen: onOpen, onClose: onClose, isEqual: function (accountA, accountB) {
return accountA.accountNumber === accountB.accountNumber;
} }),
!hideAccountDetails && (react_1.default.createElement(AccountDetails_1.AccountDetails, { ariaInvalid: _ariaInvalid, account: selectedAccount, showBalance: showBalance &&
['string', 'number'].includes(typeof (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.balance)), locale: locale }))));
};
exports.AccountSelector = AccountSelector;