148 lines
10 KiB
JavaScript
148 lines
10 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.ReactComponentRenderer = void 0;
|
|
/*
|
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License").
|
|
You may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
const codegen_ui_1 = require("@aws-amplify/codegen-ui");
|
|
const typescript_1 = require("typescript");
|
|
const react_component_render_helper_1 = require("./react-component-render-helper");
|
|
const workflow_1 = require("./workflow");
|
|
const imports_1 = require("./imports");
|
|
const forms_1 = require("./forms");
|
|
const form_renderer_helper_1 = require("./forms/form-renderer-helper");
|
|
const label_decorator_1 = require("./forms/form-renderer-helper/label-decorator");
|
|
const storage_field_component_1 = require("./utils/forms/storage-field-component");
|
|
class ReactComponentRenderer extends codegen_ui_1.ComponentRendererBase {
|
|
constructor(component, componentMetadata, importCollection, parent) {
|
|
super(component, parent);
|
|
this.componentMetadata = componentMetadata;
|
|
this.importCollection = importCollection;
|
|
this.parent = parent;
|
|
(0, react_component_render_helper_1.addBindingPropertiesImports)(component, importCollection);
|
|
}
|
|
renderElement(renderChildren = undefined) {
|
|
var _a, _b, _c, _d;
|
|
const children = (_a = this.component.children) !== null && _a !== void 0 ? _a : [];
|
|
const { fieldConfigs, labelDecorator } = this.componentMetadata.formMetadata || {};
|
|
const element = typescript_1.factory.createJsxElement(this.renderOpeningElement(), renderChildren && !(0, react_component_render_helper_1.hasChildrenProp)(this.component.properties) ? renderChildren(children) : [], typescript_1.factory.createJsxClosingElement(typescript_1.factory.createIdentifier(this.component.componentType)));
|
|
if (this.component.componentType !== 'StorageField') {
|
|
this.importCollection.addImport(imports_1.ImportSource.UI_REACT, this.component.componentType);
|
|
}
|
|
if (fieldConfigs && fieldConfigs[this.component.name]) {
|
|
const isRequired = (0, label_decorator_1.getIsRequiredValue)(this.component.properties.isRequired);
|
|
let label = '';
|
|
if (typeof this.component.properties.label === 'object' && 'value' in this.component.properties.label) {
|
|
label = (_b = this.component.properties.label.value.toString()) !== null && _b !== void 0 ? _b : '';
|
|
}
|
|
if (this.component.componentType === 'StorageField') {
|
|
this.importCollection.addImport(imports_1.ImportSource.REACT_STORAGE, 'StorageManager');
|
|
this.importCollection.addImport(imports_1.ImportSource.UI_REACT_INTERNAL, 'Field');
|
|
this.importCollection.addMappedImport(imports_1.ImportValue.GET_OVERRIDE_PROPS);
|
|
this.importCollection.addImport(imports_1.ImportSource.UTILS, 'processFile');
|
|
return (0, storage_field_component_1.renderStorageFieldComponent)(this.component, this.componentMetadata, label, fieldConfigs, labelDecorator, isRequired);
|
|
}
|
|
if ((0, form_renderer_helper_1.shouldWrapInArrayField)(fieldConfigs[this.component.name])) {
|
|
// Add ArrayField wrapper to element if Array type
|
|
this.importCollection.addImport(imports_1.ImportSource.UI_REACT, 'Icon');
|
|
this.importCollection.addImport(imports_1.ImportSource.UI_REACT, 'Badge');
|
|
this.importCollection.addImport(imports_1.ImportSource.UI_REACT, 'ScrollView');
|
|
this.importCollection.addImport(imports_1.ImportSource.UI_REACT, 'Divider');
|
|
this.importCollection.addImport(imports_1.ImportSource.UI_REACT, 'Text');
|
|
this.importCollection.addImport(imports_1.ImportSource.UI_REACT, 'useTheme');
|
|
return (0, form_renderer_helper_1.renderArrayFieldComponent)(this.component.name, label, fieldConfigs, element, labelDecorator, isRequired, (_d = (_c = this.importCollection.rendererConfig) === null || _c === void 0 ? void 0 : _c.apiConfiguration) === null || _d === void 0 ? void 0 : _d.dataApi);
|
|
}
|
|
}
|
|
return element;
|
|
}
|
|
renderOpeningElement() {
|
|
var _a, _b;
|
|
const localStateReferences = (0, workflow_1.filterStateReferencesForComponent)(this.component, this.componentMetadata.stateReferences);
|
|
const propertyAttributes = Object.entries(this.component.properties).map(([key, value]) => {
|
|
if (key in localStateReferences) {
|
|
const stateName = (0, react_component_render_helper_1.getStateName)({ componentName: this.component.name, property: key });
|
|
return (0, react_component_render_helper_1.buildOpeningElementProperties)(this.componentMetadata, { bindingProperties: { property: stateName } }, key);
|
|
}
|
|
if (this.componentMetadata.formMetadata &&
|
|
this.componentMetadata.formMetadata.fieldConfigs[this.component.name]) {
|
|
const { labelDecorator, fieldConfigs: { [this.component.name]: { isArray }, }, } = this.componentMetadata.formMetadata;
|
|
const isRequired = (0, label_decorator_1.getIsRequiredValue)(this.component.properties.isRequired);
|
|
if (((key === 'children' && this.component.componentType === 'ToggleButton') || key === 'label') &&
|
|
((labelDecorator && labelDecorator === 'required' && isRequired) ||
|
|
(labelDecorator === 'optional' && !isRequired)) &&
|
|
'value' in value &&
|
|
!isArray) {
|
|
return (0, form_renderer_helper_1.getDecoratedLabel)(key, value.value.toString(), labelDecorator);
|
|
}
|
|
}
|
|
return (0, react_component_render_helper_1.buildOpeningElementProperties)(this.componentMetadata, value, key);
|
|
});
|
|
// Reverse, and create element properties for localStateReferences which are not yet defined props
|
|
const unmodeledPropertyAttributes = Object.entries(localStateReferences)
|
|
.filter(([referencedProperty]) => !(referencedProperty in this.component.properties))
|
|
.map(([referencedProperty]) => {
|
|
const stateName = (0, react_component_render_helper_1.getStateName)({ componentName: this.component.name, property: referencedProperty });
|
|
return (0, react_component_render_helper_1.buildOpeningElementProperties)(this.componentMetadata, { bindingProperties: { property: stateName } }, referencedProperty);
|
|
});
|
|
const eventAttributes = Object.entries(this.component.events || {}).map(([key, value]) => (0, workflow_1.buildOpeningElementEvents)(this.component.componentType, value, key, this.component.name));
|
|
const controlEventAttributes = Object.entries(localStateReferences)
|
|
.filter(([, references]) => references.some(({ addControlEvent }) => addControlEvent))
|
|
.map(([key]) => (0, workflow_1.buildOpeningElementControlEvents)(this.component.componentType, (0, react_component_render_helper_1.getSetStateName)({ componentName: this.component.name, property: key }), (0, react_component_render_helper_1.getStateName)({ componentName: this.component.name, property: key }), codegen_ui_1.StudioGenericEvent.onChange));
|
|
const attributes = [
|
|
...propertyAttributes,
|
|
...unmodeledPropertyAttributes,
|
|
...eventAttributes,
|
|
...controlEventAttributes,
|
|
];
|
|
if (this.componentMetadata.formMetadata) {
|
|
attributes.push(...(0, forms_1.addFormAttributes)(this.component, this.componentMetadata.formMetadata, this.componentMetadata.dataSchemaMetadata, (_b = (_a = this.importCollection.rendererConfig) === null || _a === void 0 ? void 0 : _a.apiConfiguration) === null || _b === void 0 ? void 0 : _b.dataApi));
|
|
}
|
|
this.addPropsSpreadAttributes(attributes);
|
|
return typescript_1.factory.createJsxOpeningElement(typescript_1.factory.createIdentifier(this.component.componentType), undefined, typescript_1.factory.createJsxAttributes(attributes));
|
|
}
|
|
addPropsSpreadAttributes(attributes) {
|
|
if (this.node.hasAncestorOfType('Collection')) {
|
|
this.addCollectionOverridePropsAttribute(attributes);
|
|
}
|
|
else {
|
|
this.addGetOverridePropsAttribute(attributes);
|
|
}
|
|
if (this.node.isRoot()) {
|
|
const propsAttr = typescript_1.factory.createJsxSpreadAttribute(typescript_1.factory.createIdentifier('rest'));
|
|
attributes.push(propsAttr);
|
|
}
|
|
}
|
|
addGetOverridePropsAttribute(attributes) {
|
|
if (this.node.component.name) {
|
|
const overrideAttr = typescript_1.factory.createJsxSpreadAttribute(typescript_1.factory.createCallExpression(typescript_1.factory.createIdentifier('getOverrideProps'), undefined, [
|
|
typescript_1.factory.createIdentifier('overrides'),
|
|
typescript_1.factory.createStringLiteral(this.node.component.name),
|
|
]));
|
|
this.importCollection.addMappedImport(imports_1.ImportValue.GET_OVERRIDE_PROPS);
|
|
attributes.push(overrideAttr);
|
|
}
|
|
}
|
|
addCollectionOverridePropsAttribute(attributes) {
|
|
const overrideAttr = typescript_1.factory.createJsxSpreadAttribute(typescript_1.factory.createParenthesizedExpression(typescript_1.factory.createBinaryExpression(typescript_1.factory.createIdentifier('overrideItems'), typescript_1.factory.createToken(typescript_1.SyntaxKind.AmpersandAmpersandToken), typescript_1.factory.createCallExpression(typescript_1.factory.createIdentifier('overrideItems'), undefined, [
|
|
typescript_1.factory.createObjectLiteralExpression([
|
|
typescript_1.factory.createShorthandPropertyAssignment(typescript_1.factory.createIdentifier('item'), undefined),
|
|
typescript_1.factory.createShorthandPropertyAssignment(typescript_1.factory.createIdentifier('index'), undefined),
|
|
], false),
|
|
]))));
|
|
attributes.push(overrideAttr);
|
|
}
|
|
}
|
|
exports.ReactComponentRenderer = ReactComponentRenderer;
|
|
//# sourceMappingURL=react-component-renderer.js.map
|