cell display refactor

packages/tools/src/stringTools.ts

@@ -2,8 +2,12 @@ import _isString from 'lodash/isString';
 import _isArray from 'lodash/isArray';
 import _isNumber from 'lodash/isNumber';
 import _isPlainObject from 'lodash/isPlainObject';
+import _pad from 'lodash/pad';
 import { DataEditorTypesBehaviour } from 'dbgate-types';
 
+const dateTimeRegex =
+  /^([0-9]+)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])[Tt]([01][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]|60)(\.[0-9]+)?(([Zz])|()|([\+|\-]([01][0-9]|2[0-3]):[0-5][0-9]))$/;
+
 export function arrayToHexString(byteArray) {
   return byteArray.reduce((output, elem) => output + ('0' + elem.toString(16)).slice(-2), '').toUpperCase();
 }
@@ -77,41 +81,170 @@ function parseObjectIdAsDollar(value) {
   return value;
 }
 
-export function stringifyCellValue(value, editorTypes?: DataEditorTypesBehaviour) {
+function makeBulletString(value) {
+  return _pad('', value.length, '•');
+}
+
+function highlightSpecialCharacters(value) {
+  value = value.replace(/\n/g, '↲');
+  value = value.replace(/\r/g, '');
+  value = value.replace(/^(\s+)/, makeBulletString);
+  value = value.replace(/(\s+)$/, makeBulletString);
+  value = value.replace(/(\s\s+)/g, makeBulletString);
+  return value;
+}
+
+function stringifyJsonToGrid(value): ReturnType<typeof stringifyCellValue> {
+  if (_isPlainObject(value)) {
+    const svalue = JSON.stringify(value, undefined, 2);
+    if (svalue.length < 100) {
+      return { value: svalue, gridStyle: 'nullCellStyle' };
+    } else {
+      return { value: '(JSON)', gridStyle: 'nullCellStyle', gridTitle: svalue };
+    }
+  }
+  if (_isArray(value)) {
+    return {
+      value: `[${value.length} items]`,
+      gridStyle: 'nullCellStyle',
+      gridTitle: value.map(x => JSON.stringify(x)).join('\n'),
+    };
+  }
+  return { value: '(JSON)', gridStyle: 'nullCellStyle' };
+}
+
+export function stringifyCellValue(
+  value,
+  intent: 'gridCellIntent' | 'inlineEditorIntent' | 'multilineEditorIntent' | 'stringConversionIntent' | 'exportIntent',
+  editorTypes?: DataEditorTypesBehaviour,
+  gridFormattingOptions?: { useThousandsSeparator?: boolean },
+  jsonParsedValue?: any
+): {
+  value: string;
+  gridStyle?: 'textCellStyle' | 'valueCellStyle' | 'nullCellStyle'; // only for gridCellIntent
+  gridTitle?: string; // only for gridCellIntent
+} {
   if (editorTypes?.parseSqlNull) {
-    if (value === null) return '(NULL)';
+    if (value === null) {
+      switch (intent) {
+        case 'exportIntent':
+          return { value: '' };
+        default:
+          return { value: '(NULL)', gridStyle: 'nullCellStyle' };
+      }
+    }
+  }
+  if (value === undefined) {
+    switch (intent) {
+      case 'gridCellIntent':
+        return { value: '(No Field)', gridStyle: 'nullCellStyle' };
+      default:
+        return { value: '' };
+    }
   }
-  if (value === undefined) return '(NoField)';
   if (editorTypes?.parseJsonNull) {
-    if (value === null) return 'null';
-  }
-  if (editorTypes?.parseJsonBoolean) {
-    if (value === true) return 'true';
-    if (value === false) return 'false';
+    if (value === null) {
+      return { value: 'null', gridStyle: 'valueCellStyle' };
+    }
   }
+
+  if (value === true) return { value: 'true', gridStyle: 'valueCellStyle' };
+  if (value === false) return { value: 'false', gridStyle: 'valueCellStyle' };
+  
   if (editorTypes?.parseHexAsBuffer) {
-    if (value?.type == 'Buffer' && _isArray(value.data)) return '0x' + arrayToHexString(value.data);
+    if (value?.type == 'Buffer' && _isArray(value.data)) {
+      return { value: '0x' + arrayToHexString(value.data), gridStyle: 'valueCellStyle' };
+    }
   }
   if (editorTypes?.parseObjectIdAsDollar) {
-    if (value?.$oid) return `ObjectId("${value?.$oid}")`;
+    if (value?.$oid) {
+      switch (intent) {
+        case 'exportIntent':
+        case 'stringConversionIntent':
+          return { value: value.$oid };
+        default:
+          return { value: `ObjectId("${value.$oid}")`, gridStyle: 'valueCellStyle' };
+      }
+    }
   }
   if (editorTypes?.parseJsonArray) {
-    if (_isArray(value)) return JSON.stringify(value);
+    if (_isArray(value)) {
+      switch (intent) {
+        case 'gridCellIntent':
+          return stringifyJsonToGrid(value);
+        case 'multilineEditorIntent':
+          return { value: JSON.stringify(value) };
+        default:
+          return { value: JSON.stringify(value, null, 2), gridStyle: 'valueCellStyle' };
+      }
+    }
   }
   if (editorTypes?.parseJsonObject) {
-    if (_isPlainObject(value)) return JSON.stringify(value);
-  }
-  if (editorTypes?.parseNumber) {
-    if (_isNumber(value)) return value.toString();
+    if (_isPlainObject(value)) {
+      switch (intent) {
+        case 'gridCellIntent':
+          return stringifyJsonToGrid(value);
+        case 'multilineEditorIntent':
+          return { value: JSON.stringify(value) };
+        default:
+          return { value: JSON.stringify(value, null, 2), gridStyle: 'valueCellStyle' };
+      }
+    }
   }
 
-  if (_isString(value)) return value;
+  if (_isNumber(value)) {
+    switch (intent) {
+      case 'gridCellIntent':
+        return {
+          value:
+            gridFormattingOptions?.useThousandsSeparator && (value >= 10000 || value <= -10000)
+              ? value.toLocaleString()
+              : value.toString(),
+          gridStyle: 'valueCellStyle',
+        };
+      default:
+        return { value: value.toString() };
+    }
+  }
 
-  // fallback
-  if (_isNumber(value)) return value.toString();
-  if (value === null || value === undefined) return '';
+  if (_isString(value)) {
+    switch (intent) {
+      case 'gridCellIntent':
+        if (jsonParsedValue && !editorTypes?.explicitDataType) {
+          return stringifyJsonToGrid(jsonParsedValue);
+        } else {
+          if (!editorTypes?.explicitDataType) {
+            // reformat datetime for implicit date types
+            const m = value.match(dateTimeRegex);
+            if (m) {
+              return {
+                value: `${m[1]}-${m[2]}-${m[3]} ${m[4]}:${m[5]}:${m[6]}`,
+                gridStyle: 'valueCellStyle',
+              };
+            }
+          }
+          return { value: highlightSpecialCharacters(value), gridStyle: 'textCellStyle' };
+        }
+      default:
+        return { value: value };
+    }
+  }
 
-  return '';
+  if (value === null || value === undefined) {
+    switch (intent) {
+      case 'gridCellIntent':
+        return { value: '(n/a)', gridStyle: 'nullCellStyle' };
+      default:
+        return { value: '' };
+    }
+  }
+
+  switch (intent) {
+    case 'gridCellIntent':
+      return { value: '(Unknown)', gridStyle: 'nullCellStyle' };
+    default:
+      return { value: '' };
+  }
 }
 
 export function safeJsonParse(json, defaultValue?, logError = false) {
@@ -212,7 +345,7 @@ export function getConvertValueMenu(value, onSetValue, editorTypes?: DataEditorT
   return [
     editorTypes?.supportStringType && {
       text: 'String',
-      onClick: () => onSetValue(stringifyCellValue(value, editorTypes)),
+      onClick: () => onSetValue(stringifyCellValue(value, 'stringConversionIntent', editorTypes).value),
     },
     editorTypes?.supportNumberType && { text: 'Number', onClick: () => onSetValue(parseFloat(value)) },
     editorTypes?.supportNullType && { text: 'Null', onClick: () => onSetValue(null) },