in gui/frontend/src/components/ResultView/ResultView.tsx [1278:1471]
private renderCustomEditor(cell: CellComponent, host: HTMLDivElement, value: unknown,
success: ValueBooleanCallback, cancel: ValueVoidCallback, editorParams: unknown): void {
const params = (typeof editorParams === "function" ? editorParams(cell) : editorParams) as IDictionary;
const info: IColumnInfo = params.info as IColumnInfo;
let element;
switch (info.dataType.type) {
case DBDataType.TinyInt:
case DBDataType.SmallInt:
case DBDataType.MediumInt:
case DBDataType.Int:
case DBDataType.Bigint:
case DBDataType.Year: {
element = <UpDown
value={value as number}
nullable={true}
textAlignment={TextAlignment.Start}
onChange={(newValue): void => {
this.renderCustomEditor(cell, host, newValue, success, cancel, editorParams);
}}
onConfirm={(value: number): void => {
success(value);
this.handleConfirm(cell);
}}
onCancel={(): void => {
cancel(undefined);
}}
onBlur={this.handleBlurEvent.bind(this, cell, success, cancel)}
/>;
break;
}
case DBDataType.Binary:
case DBDataType.Varbinary:
case DBDataType.Enum:
case DBDataType.Set:
case DBDataType.Geometry:
case DBDataType.Point:
case DBDataType.LineString:
case DBDataType.Polygon:
case DBDataType.GeometryCollection:
case DBDataType.MultiPoint:
case DBDataType.MultiLineString:
case DBDataType.MultiPolygon:
case DBDataType.Json:
case DBDataType.Bit:
case DBDataType.String:
case DBDataType.Char:
case DBDataType.Nchar:
case DBDataType.Varchar:
case DBDataType.Nvarchar:
case DBDataType.TinyText:
case DBDataType.Text:
case DBDataType.MediumText:
case DBDataType.LongText:
case DBDataType.Float:
case DBDataType.Double:
case DBDataType.Decimal: {
// Until we have a dedicated binary editor, use normal editor and edit in HEX
if (info.dataType.type === DBDataType.Binary || info.dataType.type === DBDataType.Varbinary) {
// Convert back from HEX to Base64
if (value) {
value = formatBase64ToHex(value as string);
} else {
value = "";
}
}
element = <Input
value={value as string ?? ""}
multiLine={this.useMultiLineEditor(info.dataType.type)}
multiLineSwitchEnterKeyBehavior={true}
onChange={(e: InputEvent, props: IInputChangeProperties): void => {
// Auto grow the input field (limited by a max height CSS setting).
if (props.multiLine) {
const element = e.target as HTMLElement;
element.style.height = "0";
element.style.height = `${element.scrollHeight}px`;
cell.checkHeight();
this.renderCustomEditor(cell, host, props.value, success, cancel, editorParams);
}
}}
onConfirm={(e: KeyboardEvent, props: IInputChangeProperties): void => {
// Until we have a dedicated binary editor, use normal editor and edit in HEX
if (info.dataType.type === DBDataType.Binary || info.dataType.type === DBDataType.Varbinary) {
if (props.value) {
success(convertHexToBase64(props.value));
} else {
success(null);
}
} else {
success(props.value);
}
e.preventDefault();
this.handleConfirm(cell);
}}
onCancel={(): void => {
cancel(undefined);
cell.checkHeight();
}}
onBlur={this.handleBlurEvent.bind(this, cell, success, cancel)}
/>;
break;
}
case DBDataType.Date: {
element = <DateTime
type={IDateTimeValueType.Date}
value={value as string ?? ""}
onConfirm={(e: KeyboardEvent): void => {
success(value);
e.preventDefault();
this.handleConfirm(cell);
}}
onCancel={(): void => {
cancel(undefined);
}}
onBlur={this.handleBlurEvent.bind(this, cell, success, cancel)}
/>;
break;
}
case DBDataType.DateTime: {
element = <DateTime
type={IDateTimeValueType.DateTime}
value={value as string ?? ""}
onConfirm={(e: KeyboardEvent, props: IDateTimeChangeProperties): void => {
success(props.value);
this.handleConfirm(cell);
}}
onCancel={(): void => {
cancel(undefined);
}}
onBlur={this.handleBlurEvent.bind(this, cell, success, cancel)}
/>;
break;
}
case DBDataType.Time: {
element = <DateTime
type={IDateTimeValueType.Time}
value={value as string ?? ""}
onConfirm={(): void => {
success(value);
this.handleConfirm(cell);
}}
onCancel={(): void => {
cancel(undefined);
}}
onBlur={this.handleBlurEvent.bind(this, cell, success, cancel)}
/>;
break;
}
case DBDataType.Boolean: {
element = <Dropdown
autoFocus
selection={value === 0 ? "false" : "true"}
onSelect={(accept: boolean, selection: Set<string>): void => {
const newValue = selection.has("true") ? 1 : 0;
if (accept) {
if (value !== newValue) {
success(newValue);
this.handleConfirm(cell);
}
} else {
this.renderCustomEditor(cell, host, newValue, success, cancel, editorParams);
}
}}
onCancel={(): void => {
cancel(undefined);
}}
onBlur={this.handleBlurEvent.bind(this, cell, success, cancel)}
>
<DropdownItem id="true" caption="true" />
<DropdownItem id="false" caption="false" />
</Dropdown>;
break;
}
default:
}
if (element) {
render(element, host);
}
}