You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2022/03/29 18:32:44 UTC
[camel-karavan] branch main updated: Fix #249 (#256)
This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
The following commit(s) were added to refs/heads/main by this push:
new 77da629 Fix #249 (#256)
77da629 is described below
commit 77da6296f518e8819859055bba96254cf168cc4a
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Tue Mar 29 14:32:39 2022 -0400
Fix #249 (#256)
---
.../designer/route/property/DataFormatField.tsx | 63 +++++++++++++++-------
1 file changed, 43 insertions(+), 20 deletions(-)
diff --git a/karavan-designer/src/designer/route/property/DataFormatField.tsx b/karavan-designer/src/designer/route/property/DataFormatField.tsx
index 189c05a..ba27c3f 100644
--- a/karavan-designer/src/designer/route/property/DataFormatField.tsx
+++ b/karavan-designer/src/designer/route/property/DataFormatField.tsx
@@ -20,13 +20,13 @@ import {
Select,
SelectVariant,
SelectDirection,
- SelectOption,
+ SelectOption, ExpandableSection,
} from '@patternfly/react-core';
import '../../karavan.css';
import "@patternfly/patternfly/patternfly.css";
import {CamelMetadataApi, PropertyMeta} from "karavan-core/lib/model/CamelMetadata";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
-import { DataFormatDefinition} from "karavan-core/lib/model/CamelDefinition";
+import {DataFormatDefinition} from "karavan-core/lib/model/CamelDefinition";
import {Integration, CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {DslPropertyField} from "./DslPropertyField";
@@ -35,27 +35,29 @@ import {DataFormats} from "karavan-core/lib/model/CamelMetadata";
interface Props {
dslName: string,
value: CamelElement,
- onDataFormatChange?: ( value:DataFormatDefinition) => void
+ onDataFormatChange?: (value: DataFormatDefinition) => void
integration: Integration,
}
interface State {
- selectIsOpen: boolean;
- dataFormat: string;
+ selectIsOpen: boolean
+ dataFormat: string
+ isShowAdvanced: boolean
}
export class DataFormatField extends React.Component<Props, State> {
public state: State = {
selectIsOpen: false,
- dataFormat: CamelDefinitionApiExt.getDataFormat(this.props.value)?.name || "json"
+ dataFormat: CamelDefinitionApiExt.getDataFormat(this.props.value)?.name || "json",
+ isShowAdvanced: false
}
componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
const newDataFormat = CamelDefinitionApiExt.getDataFormat(this.props.value)?.name || "json"
if (prevProps.value
&& (prevProps.value.uuid !== this.props.value.uuid
- || prevState.dataFormat !== newDataFormat)
+ || prevState.dataFormat !== newDataFormat)
) {
this.setState({
dataFormat: newDataFormat
@@ -67,8 +69,8 @@ export class DataFormatField extends React.Component<Props, State> {
this.setState({selectIsOpen: true});
}
- dataFormatChanged = (dataFormat: string, value?:CamelElement) => {
- if (dataFormat !== (value as any).dataFormatName){
+ dataFormatChanged = (dataFormat: string, value?: CamelElement) => {
+ if (dataFormat !== (value as any).dataFormatName) {
const className = CamelMetadataApi.getCamelDataFormatMetadataByName(dataFormat)?.className;
value = CamelDefinitionApi.createDataFormat(className || '', {}); // perhaps copy other similar fields later
}
@@ -92,10 +94,32 @@ export class DataFormatField extends React.Component<Props, State> {
: CamelDefinitionApi.createDataFormat(this.state.dataFormat, (this.props.value as any)[this.state.dataFormat]);
}
+ getPropertyFields = (value: any, properties: PropertyMeta[]) => {
+ return (<>
+ {value && properties?.map((property: PropertyMeta) =>
+ <DslPropertyField property={property}
+ integration={this.props.integration}
+ element={value}
+ value={value ? (value as any)[property.name] : undefined}
+ onExpressionChange={exp => {
+ }}
+ onParameterChange={parameter => {
+ console.log(parameter)
+ }}
+ onDataFormatChange={dataFormat => {
+ console.log(dataFormat)
+ }}
+ onChange={this.propertyChanged}/>
+ )}
+ </>)
+ }
+
render() {
const value = this.getDataFormatValue();
const dataFormat = DataFormats.find((l: [string, string, string]) => l[0] === this.state.dataFormat);
- const properties = CamelDefinitionApiExt.getElementPropertiesByName(this.state.dataFormat).sort((a, b) => a.name === 'library' ? -1: 1);
+ const properties = CamelDefinitionApiExt.getElementPropertiesByName(this.state.dataFormat).sort((a, b) => a.name === 'library' ? -1 : 1);
+ const propertiesMain = properties.filter(p => !p.label.includes("advanced"));
+ const propertiesAdvanced = properties.filter(p => p.label.includes("advanced"));
const selectOptions: JSX.Element[] = []
DataFormats.forEach((lang: [string, string, string]) => {
const s = <SelectOption key={lang[0]} value={lang[0]} description={lang[2]}/>;
@@ -123,17 +147,16 @@ export class DataFormatField extends React.Component<Props, State> {
<FormGroup
key={"properties"}
fieldId={"properties"}>
- {value && properties?.map((property: PropertyMeta) =>
- <DslPropertyField property={property}
- integration={this.props.integration}
- element={value}
- value={value ? (value as any)[property.name] : undefined}
- onExpressionChange={exp => {}}
- onParameterChange={parameter => {console.log(parameter)}}
- onDataFormatChange={dataFormat => {console.log(dataFormat)}}
- onChange={this.propertyChanged} />
- )}
+ {this.getPropertyFields(value, propertiesMain)}
+ {propertiesAdvanced.length > 0 &&
+ <ExpandableSection
+ toggleText={'Advanced properties'}
+ onToggle={isExpanded => this.setState({isShowAdvanced: !this.state.isShowAdvanced})}
+ isExpanded={this.state.isShowAdvanced}>
+ {this.getPropertyFields(value, propertiesAdvanced)}
+ </ExpandableSection>}
</FormGroup>
+
</div>
</div>
)