private renderCustomEditor()

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);
        }
    }