dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-18 09:05:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

cell data autodetect format, collapsed views in detail

Browse Source
This commit is contained in:
Jan Prochazka
2020-11-07 10:27:08 +01:00
parent c57ec68916
commit d234226750
5 changed files with 38 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/web/src/celldata/CellDataView.js
View File

@@ -1,4 +1,5 @@
import React from 'react';
import _ from 'lodash';
import { SelectField } from '../utility/inputs';
import ErrorInfo from '../widgets/ErrorInfo';
import styled from 'styled-components';
@@ -43,24 +44,36 @@ const formats = [
},
];
function autodetect(selection, grider, value) {
if (_.isString(value)) {
if (value.startsWith('[') || value.startsWith('{')) return 'json';
}
return 'textWrap';
}
export default function CellDataView({ selection, grider }) {
const [selectedFormat, setSelectedFormat] = React.useState(formats[0]);
const [selectedFormatType, setSelectedFormatType] = React.useState('autodetect');
let value = null;
if (grider && selection.length == 1) {
const rowData = grider.getRowData(selection[0].row);
const { column } = selection[0];
if (rowData) value = rowData[column];
}
const { Component } = selectedFormat || {};
const autodetectFormatType = React.useMemo(() => autodetect(selection, grider, value), [selection, grider, value]);
const autodetectFormat = formats.find((x) => x.type == autodetectFormatType);
const usedFormatType = selectedFormatType == 'autodetect' ? autodetectFormatType : selectedFormatType;
const usedFormat = formats.find((x) => x.type == usedFormatType);
const { Component } = usedFormat || {};
return (
<MainWrapper>
<Toolbar>
Format:
<SelectField
value={selectedFormat && selectedFormat.type}
onChange={(e) => setSelectedFormat(formats.find((x) => x.type == e.target.value))}
>
<SelectField value={selectedFormatType} onChange={(e) => setSelectedFormatType(e.target.value)}>
<option value="autodetect">Autodetect - {autodetectFormat.title}</option>
{formats.map((fmt) => (
<option value={fmt.type} key={fmt.type}>
{fmt.title}
@@ -70,7 +83,7 @@ export default function CellDataView({ selection, grider }) {
</Toolbar>
<DataWrapper>
{selectedFormat == null || (selectedFormat.single && value == null) ? (
{usedFormat == null || (usedFormat.single && value == null) ? (
<ErrorInfo message="Must be selected one cell" />
) : (
<Component value={value} grider={grider} selection={selection} />