synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
67 lines • 4.79 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomObjectFieldTemplate = void 0;
var tslib_1 = require("tslib");
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 react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
var use_deep_compare_effect_1 = require("use-deep-compare-effect");
var AddToList_1 = (0, tslib_1.__importDefault)(require("../../../assets/icons/AddToList"));
var ToastMessage_1 = require("../../ToastMessage");
/**
* Basically identical to the default object field template, with a custom button.
*
* See {@link node_modules/@rjsf/core/src/components/fields/ObjectField.js#DefaultObjectFieldTemplate}
* @param props
* @returns
*/
function CustomObjectFieldTemplate(props) {
var TitleField = props.TitleField, DescriptionField = props.DescriptionField;
var CUSTOM_OBJECT_FIELD_TEMPLATE_TOOLTIP_ID = "CustomObjectFieldTooltip-" + props.idSchema.$id;
var _a = (0, react_1.useState)(new Set()), previousSchemaDefinedProperties = _a[0], setPreviousSchemaDefinedProperties = _a[1];
/**
* We track how the schema changes as the user enters data, causing conditional subschemas to be evaluated.
*
* If a property exists in the previous version of the schema and has user data, and then is dropped from the schema due to a data update, then
* we need to prompt the user whether they want to undo the change, or continue and keep/remove those fields
*
* In this component, we can identify when one or more fields with user data are dropped (the field gains the additional property flag in the schema prop).
* We then use a function provided by the context to report which fields were lost.
*/
(0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(function () {
if (props.schema.properties) {
var propertyKeys = Object.keys(props.schema.properties);
// Schema-defined properties are those properties in the schema without the additional property flag.
var schemaDefinedProperties_1 = new Set(propertyKeys.filter(function (key) {
var propertyObject = props.schema.properties[key];
return !propertyObject[rjsf_core_1.utils.ADDITIONAL_PROPERTY_FLAG];
}));
if (previousSchemaDefinedProperties != null) {
// Compare the schema defined properties with the previous version to see if any were lost.
var lostProperties = Array.from(previousSchemaDefinedProperties).filter(function (schemaDefinedProperty) {
return !schemaDefinedProperties_1.has(schemaDefinedProperty) &&
props.formData[schemaDefinedProperty] != null;
});
if (lostProperties.length > 0) {
// Report the converted fields in a toast message
(0, ToastMessage_1.displayToast)("The following annotations are no longer specified by the schema and have been converted to Custom Fields: " + lostProperties.join(', ') + ".", 'warning', {
title: 'Fields No Longer Specified By Schema',
});
}
}
setPreviousSchemaDefinedProperties(schemaDefinedProperties_1);
}
}, [props.schema.properties]);
return (react_1.default.createElement("fieldset", { id: props.idSchema.$id },
react_1.default.createElement(react_tooltip_1.default, { id: CUSTOM_OBJECT_FIELD_TEMPLATE_TOOLTIP_ID, place: "top", effect: "solid" }),
(props.uiSchema['ui:title'] || props.title) && (react_1.default.createElement(TitleField, { id: props.idSchema.$id + "__title", title: props.title || props.uiSchema['ui:title'], required: props.required })),
props.description && (react_1.default.createElement(DescriptionField, { id: props.idSchema.$id + "__description", description: props.description })),
props.properties.map(function (prop) {
return react_1.default.createElement("div", { key: prop.name }, prop.content);
}),
rjsf_core_1.utils.canExpand(props.schema, props.uiSchema, props.formData) && (react_1.default.createElement(react_bootstrap_1.Button, { variant: "gray", className: "object-property-expand", onClick: props.onAddClick(props.schema), disabled: props.disabled || props.readonly, "data-for": CUSTOM_OBJECT_FIELD_TEMPLATE_TOOLTIP_ID, "data-tip": "Add a new custom field", "aria-label": 'Add Custom Field' },
react_1.default.createElement(AddToList_1.default, null)))));
}
exports.CustomObjectFieldTemplate = CustomObjectFieldTemplate;
//# sourceMappingURL=CustomObjectFieldTemplate.js.map