synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
51 lines • 3.25 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EvaluationRoundLimitOptionsList = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var EvaluationRoundLimitOptions_1 = require("./EvaluationRoundLimitOptions");
var icon_plus_square_filled_svg_1 = require("../../../assets/icons/icon_plus_square_filled.svg");
var icon_times_svg_1 = require("../../../assets/icons/icon_times.svg");
var react_bootstrap_1 = require("react-bootstrap");
var AVAILABLE_LIMIT_TYPES = Object.keys(EvaluationRoundLimitOptions_1.LIMIT_TYPE_DISPLAY_NAME);
var selectUnusedType = function (selectedTypes) {
return AVAILABLE_LIMIT_TYPES.find(function (key) { return !selectedTypes.has(key); });
};
var EvaluationRoundLimitOptionsList = function (_a) {
var limitInputs = _a.limitInputs, handleChange = _a.handleChange, handleDeleteLimit = _a.handleDeleteLimit, onAddNewLimit = _a.onAddNewLimit;
// all types that are currently being used
var selectedTypes = new Set(limitInputs.map(function (limit) { return limit.type; }));
var addNewLimit = (0, react_1.useCallback)(function () {
onAddNewLimit({
type: selectUnusedType(selectedTypes),
maxSubmissionString: '',
});
}, [onAddNewLimit, selectedTypes]);
//display some input even if no limits currently exist
(0, react_1.useEffect)(function () {
if (limitInputs.length === 0) {
addNewLimit();
}
}, [limitInputs, addNewLimit]);
return (react_1.default.createElement("div", { className: "advanced-limits-grid" }, limitInputs.map(function (limit, index) {
return (react_1.default.createElement(react_1.default.Fragment, { key: limit.type },
react_1.default.createElement(EvaluationRoundLimitOptions_1.EvaluationRoundLimitOptions, { limitInput: limit, allSelectedTypes: selectedTypes, onChange: handleChange(index) }),
react_1.default.createElement(react_bootstrap_1.Button
// use an invalid variant, we just want the basic bootstrap 4 "btn" class behavior
, {
// use an invalid variant, we just want the basic bootstrap 4 "btn" class behavior
variant: "", className: "remove-button", onClick: handleDeleteLimit(index) },
react_1.default.createElement(icon_times_svg_1.ReactComponent, { className: "SRC-icon-fill" })),
// if last element
index === limitInputs.length - 1 &&
// if the are unused limit types
limitInputs.length < AVAILABLE_LIMIT_TYPES.length && (react_1.default.createElement(react_bootstrap_1.Button
// use an invalid variant, we just want the basic bootstrap 4 "btn" class behavior
, {
// use an invalid variant, we just want the basic bootstrap 4 "btn" class behavior
variant: "", onClick: addNewLimit, className: "add-button" },
react_1.default.createElement(icon_plus_square_filled_svg_1.ReactComponent, { className: "SRC-icon-fill" })))));
})));
};
exports.EvaluationRoundLimitOptionsList = EvaluationRoundLimitOptionsList;
//# sourceMappingURL=EvaluationRoundLimitOptionsList.js.map