synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
74 lines • 4.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var downshift_1 = (0, tslib_1.__importDefault)(require("downshift"));
var react_1 = require("react");
var SynapseClient_1 = require("../utils/SynapseClient");
var UserCardSmall_1 = require("./UserCardSmall");
var UserSearchBox = function (props) {
var id = props.id, onSelectCallback = props.onSelectCallback, filterUserIds = props.filterUserIds;
var _a = (0, react_1.useState)([]), users = _a[0], setUsers = _a[1];
var onInputValueChange = function (inputValue) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var headers, filtered, formattedList, e_1;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
return [4 /*yield*/, (0, SynapseClient_1.getUserGroupHeaders)(inputValue)];
case 1:
headers = _a.sent();
filtered = (filterUserIds === null || filterUserIds === void 0 ? void 0 : filterUserIds.length) ? headers.children
.filter(function (user) {
return !filterUserIds.includes(user.ownerId);
}) : headers.children;
formattedList = filtered
.map(function (user) {
return {
ownerId: user.ownerId,
firstName: user.firstName,
lastName: user.lastName,
userName: user.userName,
};
});
setUsers(formattedList);
return [3 /*break*/, 3];
case 2:
e_1 = _a.sent();
console.log("onInputValueChange", e_1);
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); };
var onSelectedItem = function (selected) {
if (onSelectCallback) {
onSelectCallback(selected);
}
};
return (React.createElement(React.Fragment, null,
React.createElement(downshift_1.default, { onInputValueChange: function (inputValue) { return onInputValueChange(inputValue); }, onChange: function (selectedItem) { return onSelectedItem(selectedItem); }, itemToString: function (item) { return (item === null || item === void 0 ? void 0 : item.name) ? item.name : ""; } }, function (_a) {
var getInputProps = _a.getInputProps, getMenuProps = _a.getMenuProps, getItemProps = _a.getItemProps, isOpen = _a.isOpen, inputValue = _a.inputValue;
return (React.createElement("div", { className: "user-search-box" },
React.createElement("input", (0, tslib_1.__assign)({}, getInputProps({
className: 'form-control',
id: id,
type: 'search',
role: 'searchbox',
placeholder: 'Enter the name of the Synapse user...'
}), { style: { marginBottom: '0' } })),
React.createElement("ul", (0, tslib_1.__assign)({}, getMenuProps(), { className: isOpen ? "users-visible" : "", role: 'list' }), isOpen ? users.filter(function (user) { return !inputValue
|| (user.firstName + " " + user.lastName).includes(inputValue)
|| user.userName.includes(inputValue); })
.map(function (item, index) { return (React.createElement("li", (0, tslib_1.__assign)({ key: "userSearchBox-" + index }, getItemProps({ key: item.ownerId, index: index, item: item })),
React.createElement(UserCardSmall_1.UserCardSmall, { userProfile: {
ownerId: item.ownerId,
firstName: item.firstName || '',
lastName: item.lastName || '',
userName: item.userName
}, disableLink: true, showFullName: true }))); })
: null)));
})));
};
exports.default = UserSearchBox;
//# sourceMappingURL=UserSearchBox.js.map