synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
46 lines • 3.59 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomArrayFieldTemplate = void 0;
var tslib_1 = require("tslib");
var icons_1 = require("@material-ui/icons");
var rjsf_core_1 = require("@sage-bionetworks/rjsf-core");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var FieldDescriptionTable_1 = (0, tslib_1.__importDefault)(require("./FieldDescriptionTable"));
/**
* Custom field template for array properties in a react-jsonschema-form component.
* Used just to apply custom styling.
*/
function CustomArrayFieldTemplate(props) {
var _a;
var DescriptionField = props.DescriptionField;
var isAdditionalProperty = props.schema[rjsf_core_1.utils.ADDITIONAL_PROPERTY_FLAG];
(0, react_1.useEffect)(function () {
if (props.items.length === 0) {
props.onAddClick();
}
}, [props]);
var _b = (0, react_1.useState)(false), showDetails = _b[0], setShowDetails = _b[1];
return (react_1.default.createElement(react_bootstrap_1.FormGroup, { className: props.className },
react_1.default.createElement("div", { className: "LabelContainer" },
react_1.default.createElement(react_bootstrap_1.FormLabel, null,
props.title,
props.required && react_1.default.createElement("span", { className: "required" }, "*")),
!isAdditionalProperty && (react_1.default.createElement("button", { "aria-label": "More Info", "aria-expanded": showDetails, onClick: function (e) {
e.preventDefault();
setShowDetails(!showDetails);
} },
react_1.default.createElement(icons_1.HelpOutline, { className: "HelpButton SRC-primary-text-color" })))),
props.items && (react_1.default.createElement(react_1.default.Fragment, null,
props.items.map(function (element, index) { return (react_1.default.createElement("div", { key: element.key, className: "array-item" },
element.children,
(isAdditionalProperty || props.items.length > 1) && (react_1.default.createElement(react_bootstrap_1.Button, { "aria-label": "Remove " + props.title + "[" + index + "]", variant: "transparent-primary-500", className: "RemoveButton", disabled: props.disabled, onClick: element.onDropIndexClick(element.index) },
react_1.default.createElement(icons_1.Close, null))),
props.canAdd && index === props.items.length - 1 && (react_1.default.createElement(react_bootstrap_1.Button, { "aria-label": "Add new " + props.title, variant: "primary-500", className: "AddButton", onClick: props.onAddClick, type: "button", disabled: props.disabled },
react_1.default.createElement(icons_1.Add, null))))); }),
props.items.length === 0 && (react_1.default.createElement("div", { style: { display: 'flex' } },
react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary-500", onClick: props.onAddClick, type: "button", disabled: props.disabled }, "Add Value"))))),
react_1.default.createElement(FieldDescriptionTable_1.default, { required: props.required, type: props.schema.type, description: react_1.default.createElement(DescriptionField, { id: props.idSchema.$id + "__description", description: (_a = props.schema.description) !== null && _a !== void 0 ? _a : '' }), show: showDetails })));
}
exports.CustomArrayFieldTemplate = CustomArrayFieldTemplate;
//# sourceMappingURL=CustomArrayFieldTemplate.js.map