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
commit 7fc5e4f0d8ab3120a522608d558af03c7cff9187
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Wed Sep 21 20:00:20 2022 -0400
Set theme for Expression editor
---
.../src/designer/rest/RestDesigner.tsx | 2 +-
.../src/designer/route/DslProperties.tsx | 7 +++++--
.../src/designer/route/RouteDesigner.tsx | 2 +-
.../designer/route/property/DataFormatField.tsx | 2 ++
.../designer/route/property/DslPropertyField.tsx | 22 ++++++++++++++++------
.../designer/route/property/ExpressionField.tsx | 2 ++
.../src/designer/route/property/ObjectField.tsx | 4 +++-
7 files changed, 30 insertions(+), 11 deletions(-)
diff --git a/karavan-designer/src/designer/rest/RestDesigner.tsx
b/karavan-designer/src/designer/rest/RestDesigner.tsx
index 5f733a8..bc32cc9 100644
--- a/karavan-designer/src/designer/rest/RestDesigner.tsx
+++ b/karavan-designer/src/designer/rest/RestDesigner.tsx
@@ -243,7 +243,7 @@ export class RestDesigner extends React.Component<Props,
State> {
clipboardStep={undefined}
isRouteDesigner={false}
onClone={this.cloneRest}
- />
+ dark={this.props.dark}/>
</DrawerPanelContent>
)
}
diff --git a/karavan-designer/src/designer/route/DslProperties.tsx
b/karavan-designer/src/designer/route/DslProperties.tsx
index 38b7db8..71e15f1 100644
--- a/karavan-designer/src/designer/route/DslProperties.tsx
+++ b/karavan-designer/src/designer/route/DslProperties.tsx
@@ -49,6 +49,7 @@ interface Props {
onSaveClipboardStep?: (element?: CamelElement) => void
onClone?: (element: CamelElement) => void
isRouteDesigner: boolean
+ dark: boolean
}
interface State {
@@ -193,7 +194,8 @@ export class DslProperties extends React.Component<Props,
State> {
onExpressionChange={this.expressionChanged}
onParameterChange={this.parametersChanged}
onDataFormatChange={this.dataFormatChanged}
- onChange={this.propertyChanged}/>
+ onChange={this.propertyChanged}
+ dark={this.props.dark}/>
)}
</>)
}
@@ -224,7 +226,8 @@ export class DslProperties extends React.Component<Props,
State> {
integration={this.props.integration}
dslName={this.state.step.dslName}
value={this.state.step}
- onDataFormatChange={this.dataFormatChanged}/>
+ onDataFormatChange={this.dataFormatChanged}
+ dark={this.props.dark}/>
}
</Form>
</div>
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx
b/karavan-designer/src/designer/route/RouteDesigner.tsx
index 77bed14..80a03e4 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -356,7 +356,7 @@ export class RouteDesigner extends React.Component<Props,
State> {
clipboardStep={this.state.clipboardStep}
isRouteDesigner={true}
onSaveClipboardStep={this.saveToClipboard}
- />
+ dark={this.props.dark}/>
</DrawerPanelContent>
)
}
diff --git a/karavan-designer/src/designer/route/property/DataFormatField.tsx
b/karavan-designer/src/designer/route/property/DataFormatField.tsx
index ba27c3f..8eac5c0 100644
--- a/karavan-designer/src/designer/route/property/DataFormatField.tsx
+++ b/karavan-designer/src/designer/route/property/DataFormatField.tsx
@@ -37,6 +37,7 @@ interface Props {
value: CamelElement,
onDataFormatChange?: (value: DataFormatDefinition) => void
integration: Integration,
+ dark: boolean,
}
interface State {
@@ -109,6 +110,7 @@ export class DataFormatField extends React.Component<Props,
State> {
onDataFormatChange={dataFormat => {
console.log(dataFormat)
}}
+ dark={this.props.dark}
onChange={this.propertyChanged}/>
)}
</>)
diff --git a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
index a47d824..37cadab 100644
--- a/karavan-designer/src/designer/route/property/DslPropertyField.tsx
+++ b/karavan-designer/src/designer/route/property/DslPropertyField.tsx
@@ -77,7 +77,8 @@ interface Props {
element?: CamelElement
integration: Integration,
hideLabel?: boolean,
- dslLanguage?: string
+ dslLanguage?: string,
+ dark: boolean
}
interface State {
@@ -243,7 +244,7 @@ export class DslPropertyField extends
React.Component<Props, State> {
}
getTextArea = (property: PropertyMeta, value: any) => {
- const lang = this.props.dslLanguage;
+ const {dslLanguage, dark} = this.props;
const showEditor = this.state.showEditor;
return (
<InputGroup>
@@ -275,7 +276,7 @@ export class DslPropertyField extends
React.Component<Props, State> {
width="100%"
defaultLanguage={'java'}
language={'java'}
- theme={'light'}
+ theme={dark ? 'vs-dark' : 'light'}
options={{lineNumbers:"off", folding:false,
lineNumbersMinChars:10, showUnused:false, fontSize:12, minimap:{enabled:false}}}
value={value?.toString()}
className={'code-editor'}
@@ -293,7 +294,11 @@ export class DslPropertyField extends
React.Component<Props, State> {
getExpressionField = (property: PropertyMeta, value: any) => {
return (
<div className="expression">
- <ExpressionField property={property} value={value}
onExpressionChange={this.props.onExpressionChange}
integration={this.props.integration}/>
+ <ExpressionField property={property}
+ value={value}
+
onExpressionChange={this.props.onExpressionChange}
+ integration={this.props.integration}
+ dark={this.props.dark}/>
</div>
)
}
@@ -301,7 +306,11 @@ export class DslPropertyField extends
React.Component<Props, State> {
getObjectField = (property: PropertyMeta, value: any) => {
return (
<div className="object">
- {value && <ObjectField property={property} value={value}
onPropertyUpdate={this.props.onChange} integration={this.props.integration}/>}
+ {value && <ObjectField property={property}
+ value={value}
+ onPropertyUpdate={this.props.onChange}
+ integration={this.props.integration}
+ dark={this.props.dark}/>}
</div>
)
}
@@ -471,7 +480,8 @@ export class DslPropertyField extends
React.Component<Props, State> {
hideLabel={hideLabel}
value={v}
onPropertyUpdate={(f, v) =>
this.onMultiValueObjectUpdate(index, f, v)}
- integration={this.props.integration}/>}
+ integration={this.props.integration}
+ dark={this.props.dark}/>}
</div>
<Button variant="link" className="delete-button" onClick={e => {
const v = Array.from(value);
diff --git a/karavan-designer/src/designer/route/property/ExpressionField.tsx
b/karavan-designer/src/designer/route/property/ExpressionField.tsx
index 5f6d0dc..79e0177 100644
--- a/karavan-designer/src/designer/route/property/ExpressionField.tsx
+++ b/karavan-designer/src/designer/route/property/ExpressionField.tsx
@@ -39,6 +39,7 @@ interface Props {
value: CamelElement,
onExpressionChange?: (propertyName: string, exp: ExpressionDefinition) =>
void
integration: Integration,
+ dark: boolean,
}
interface State {
@@ -154,6 +155,7 @@ export class ExpressionField extends React.Component<Props,
State> {
onParameterChange={parameter =>
{console.log(parameter)}}
onDataFormatChange={dataFormat =>
{console.log(dataFormat)}}
onChange={this.propertyChanged}
+ dark={this.props.dark}
dslLanguage={dslLanguage?.[0]}/>
)}
</FormGroup>
diff --git a/karavan-designer/src/designer/route/property/ObjectField.tsx
b/karavan-designer/src/designer/route/property/ObjectField.tsx
index 28918b2..a72019b 100644
--- a/karavan-designer/src/designer/route/property/ObjectField.tsx
+++ b/karavan-designer/src/designer/route/property/ObjectField.tsx
@@ -32,6 +32,7 @@ interface Props {
onPropertyUpdate?: (fieldId: string, value: CamelElement) => void
integration: Integration,
hideLabel?: boolean
+ dark: boolean
}
interface State {
@@ -84,7 +85,8 @@ export class ObjectField extends React.Component<Props,
State> {
onExpressionChange={this.expressionChanged}
onParameterChange={(parameter,
value) => this.propertyChanged(property.name, value)}
onDataFormatChange={value1 => {}}
- onChange={(fieldId, value) =>
this.propertyChanged(property.name, value)} />
+ onChange={(fieldId, value) =>
this.propertyChanged(property.name, value)}
+ dark={this.props.dark}/>
)}
</div>
)
