in src/app/views/panels/widgets/fluent_mapping_editor.tsx [292:596]
private renderCurrentAttributeMapping() {
const parent = this.props.parent;
const attribute = this.props.attribute;
const options = this.props.options;
const mapping = parent.getAttributeMapping(attribute);
if (!mapping) {
if (options.defaultValue != undefined) {
return this.renderValueEditor(options.defaultValue);
} else {
let alwaysShowNoneAsValue = false;
if (
this.props.type == Specification.AttributeType.Number ||
this.props.type == Specification.AttributeType.Enum ||
this.props.type == Specification.AttributeType.Image
) {
alwaysShowNoneAsValue = true;
}
if (this.state.showNoneAsValue || alwaysShowNoneAsValue) {
return this.renderValueEditor(null);
} else {
const onClick = () => {
if (!mapping || (mapping as any).valueIndex == undefined) {
this.initiateValueEditor();
}
};
return (
<EmptyMapping
options={options}
onClick={onClick.bind(this)}
renderColorPicker={this.renderColorPicker.bind(this)}
type={this.props.type}
/>
);
}
}
} else {
switch (mapping.type) {
case Specification.MappingType.value: {
const valueMapping = mapping as Specification.ValueMapping;
return this.renderValueEditor(valueMapping.value);
}
case Specification.MappingType.text: {
const textMapping = mapping as Specification.TextMapping;
return (
<FluentInputExpression
label={this.props.options.label}
defaultValue={textMapping.textExpression}
textExpression={true}
value={textMapping.textExpression}
validate={(value) =>
parent.store.verifyUserExpressionWithTable(
value,
textMapping.table,
{ textExpression: true, expectedTypes: ["string"] }
)
}
allowNull={true}
onEnter={(newValue) => {
if (newValue == null || newValue.trim() == "") {
this.clearMapping();
} else {
if (
Expression.parseTextExpression(newValue).isTrivialString()
) {
this.props.parent.onEditMappingHandler(
this.props.attribute,
{
type: Specification.MappingType.value,
value: newValue,
} as Specification.ValueMapping
);
} else {
this.props.parent.onEditMappingHandler(
this.props.attribute,
{
type: Specification.MappingType.text,
table: textMapping.table,
textExpression: newValue,
} as Specification.TextMapping
);
}
}
return true;
}}
/>
);
}
case Specification.MappingType.scale: {
const scaleMapping = mapping as Specification.ScaleMapping;
const table = mapping ? (mapping as any).table : options.table;
const builderProps = getMenuProps.bind(this)(
parent,
attribute,
options
);
const mainMenuItems: IContextualMenuItem[] = this.director.buildFieldsMenu(
builderProps.onClick,
builderProps.defaultValue,
parent.store,
this,
attribute,
table,
options.acceptKinds
);
const menuRender = this.director.getMenuRender();
if (scaleMapping.scale) {
return (
<>
{this.props.options.label ? (
<Label styles={defaultLabelStyle}>
{this.props.options.label}
</Label>
) : null}
<FluentActionButton>
<ActionButton
elementRef={(e) => (this.mappingButton = e)}
styles={{
menuIcon: {
display: "none !important",
...defultComponentsHeight,
},
root: {
...defultComponentsHeight,
},
}}
title={strings.mappingEditor.bindData}
menuProps={{
items: mainMenuItems,
onRenderMenuList: menuRender,
onMenuOpened: () => {
const currentMapping = parent.getAttributeMapping(
attribute
);
FluentMappingEditor.openEditor(
(currentMapping as Specification.ScaleMapping)
?.expression,
false,
this.mappingButton
);
},
}}
text={scaleMapping.expression}
iconProps={{
iconName: "ColumnFunction",
}}
onMenuClick={(event) => {
if (scaleMapping.expression.startsWith("get")) {
event.preventDefault();
this.changeDataFieldValueSelectionState();
}
}}
/>
</FluentActionButton>
</>
);
} else {
return (
<>
{this.props.options.label ? (
<Label styles={defaultLabelStyle}>
{this.props.options.label}
</Label>
) : null}
<FluentActionButton>
<ActionButton
text={scaleMapping.expression}
elementRef={(e) => (this.mappingButton = e)}
iconProps={{
iconName: "ColumnFunction",
}}
/>
</FluentActionButton>
</>
);
}
}
case Specification.MappingType.expressionScale:
{
const scaleMapping = mapping as Specification.ScaleValueExpressionMapping;
const table = mapping ? scaleMapping.table : options.table;
const builderProps = getMenuProps.bind(this)(
parent,
attribute,
options
);
const mainMenuItems: IContextualMenuItem[] = this.director.buildFieldsMenu(
builderProps.onClick,
builderProps.defaultValue,
parent.store,
this,
attribute,
table,
options.acceptKinds
);
const menuRender = this.director.getMenuRender();
return (
<>
{this.props.options.label ? (
<Label styles={defaultLabelStyle}>
{this.props.options.label}
</Label>
) : null}
<FluentRowLayout>
<FluentActionButton
style={{
flex: 1,
marginRight: "2px",
}}
>
<ActionButton
elementRef={(e) => (this.mappingButton = e)}
styles={{
menuIcon: {
display: "none !important",
...defultComponentsHeight,
},
root: {
...defultComponentsHeight,
},
}}
title={strings.mappingEditor.keyColumnExpression}
// menuProps={{
// items: mainMenuItems,
// onRenderMenuList: menuRender,
// onMenuOpened: () => {
// const currentMapping = parent.getAttributeMapping(
// attribute
// );
// FluentMappingEditor.openEditor(
// (currentMapping as Specification.ScaleValueExpressionMapping)
// ?.expression,
// false,
// this.mappingButton
// );
// },
// }}
text={scaleMapping.expression}
iconProps={{
iconName: "ColumnFunction",
}}
onMenuClick={(event) => {
if (scaleMapping.expression.startsWith("get")) {
event.preventDefault();
this.changeDataFieldValueSelectionState();
}
}}
/>
</FluentActionButton>
<FluentActionButton
style={{
flex: 1,
}}
>
<ActionButton
elementRef={(e) => (this.mappingButton = e)}
styles={{
menuIcon: {
display: "none !important",
...defultComponentsHeight,
},
root: {
...defultComponentsHeight,
},
}}
title={strings.mappingEditor.bindData}
menuProps={{
items: mainMenuItems,
onRenderMenuList: menuRender,
onMenuOpened: () => {
const currentMapping = parent.getAttributeMapping(
attribute
);
FluentMappingEditor.openEditor(
(currentMapping as Specification.ScaleValueExpressionMapping)
?.valueExpression,
false,
this.mappingButton
);
},
}}
text={scaleMapping.valueExpression}
iconProps={{
iconName: "ColumnFunction",
}}
onMenuClick={(event) => {
if (scaleMapping.expression.startsWith("get")) {
event.preventDefault();
this.changeDataFieldValueSelectionState();
}
}}
/>
</FluentActionButton>
</FluentRowLayout>
</>
);
}
break;
default: {
return <span>(...)</span>;
}
}
}
}