@sb1/ffe-account-selector-react
Version:
Selector for bank accounts with autocomplete.
112 lines (111 loc) • 7.16 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 __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));
};
import React, { useState } from 'react';
import classNames from 'classnames';
import { AccountDetails } from './AccountDetails';
import { formatIncompleteAccountNumber } from '../format';
import { SearchableDropdown } from '@sb1/ffe-searchable-dropdown-react';
import { getAccountsWithCustomAccounts } from './getAccountsWithCustomAccounts';
import { searchMatcherIgnoringAccountNumberFormatting } from '../searchMatcherIgnoringAccountNumberFormatting';
import { texts } from '../texts';
import { AccountActionBody } from './AccountOptionBody';
export 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 = useState((selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.name) || ''), inputValue = _j[0], setInputValue = _j[1];
var formatter = formatAccountNumber
? 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.createElement("div", { className: classNames('ffe-account-selector-single', className), id: "".concat(id, "-account-selector-container") },
React.createElement(SearchableDropdown, { id: id, labelledById: labelledById, displayAttribute: displayAttribute, inputProps: __assign(__assign({}, inputProps), { onChange: onInputChange }), dropdownAttributes: showBalance
? ['name', 'accountNumber', 'balance']
: ['name', 'accountNumber'], postListElement: postListElement, dropdownList: allowCustomAccount
? 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[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.createElement(OptionBody, __assign({ item: item, isHighlighted: isHighlighted }, restOptionBody)));
}
return (React.createElement(AccountActionBody, { item: item, isHighlighted: isHighlighted, locale: locale, showBalance: showBalance }));
}, ariaInvalid: _ariaInvalid, searchMatcher: searchMatcherIgnoringAccountNumberFormatting, selectedItem: selectedAccount, onOpen: onOpen, onClose: onClose, isEqual: function (accountA, accountB) {
return accountA.accountNumber === accountB.accountNumber;
} }),
!hideAccountDetails && (React.createElement(AccountDetails, { ariaInvalid: _ariaInvalid, account: selectedAccount, showBalance: showBalance &&
['string', 'number'].includes(typeof (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.balance)), locale: locale }))));
};