(core) Reference and ReferenceList formatters

Summary:
Previously, ref/reflist columns were formatted entirely based on their visible column, since they received values from the visible or display columns rather than the actual row IDs. This creates `ReferenceFormatter` and `ReferenceListFormatter` which still delegate most of the formatting work to a visible column formatter but fix a few issues:

- ReferenceList columns now actually use the options (e.g. date format) of the visible column to format their elements. Previously they were formatted generically because the visible column formatter wasn't expecting a list.
- Invalid references aren't formatted with an `#Invalid Ref` prefix.
- When the ref column displays the Row ID, it doesn't have a visible or display column. Previously this led to the references being formatted as just numbers in most cases, with special code in the widget to display them like `Table1[2]`. Now they are consistently formatted in that style throughout.

Test Plan: Updated existing tests.

Reviewers: jarek

Reviewed By: jarek

Subscribers: dsagal

Differential Revision: https://phab.getgrist.com/D3212

app/client/widgets/ChoiceTextBox.ts

@@ -49,7 +49,7 @@ export class ChoiceTextBox extends NTextBox {
         dom.domComputed((use) => {
           if (this.isDisposed() || use(row._isAddRow)) { return null; }
 
-          const formattedValue = use(this.valueFormatter).format(use(value));
+          const formattedValue = use(this.valueFormatter).formatAny(use(value));
           if (formattedValue === '') { return null; }
 
           const choiceOptions = use(this._choiceOptionsByName).get(formattedValue);

app/client/widgets/NTextBox.ts

@@ -45,7 +45,7 @@ export class NTextBox extends NewAbstractWidget {
     return dom('div.field_clip',
       dom.style('text-align', this.alignment),
       dom.cls('text_wrapping', this.wrapping),
-      dom.domComputed((use) => use(row._isAddRow) ? null : makeLinks(use(this.valueFormatter).format(use(value))))
+      dom.domComputed((use) => use(row._isAddRow) ? null : makeLinks(use(this.valueFormatter).formatAny(use(value))))
     );
   }
 

app/client/widgets/NewAbstractWidget.ts

@@ -43,7 +43,7 @@ export abstract class NewAbstractWidget extends Disposable {
     )).onWrite((val) => this.field.textColor(val === defaultTextColor ? undefined : val));
     this.fillColor = fromKo(this.field.fillColor);
 
-    this.valueFormatter = fromKo(field.visibleColFormatter);
+    this.valueFormatter = fromKo(field.formatter);
   }
 
   /**

app/client/widgets/Reference.ts

@@ -12,8 +12,6 @@ import {Computed, dom, styled} from 'grainjs';
  * Reference - The widget for displaying references to another table's records.
  */
 export class Reference extends NTextBox {
-  protected _formatValue: Computed<(val: any) => string>;
-
   private _visibleColRef: Computed<number>;
   private _validCols: Computed<Array<IOptionFull<number>>>;
 
@@ -37,19 +35,6 @@ export class Reference extends NTextBox {
         }))
         .concat([{label: 'Row ID', value: 0, icon: 'FieldColumn'}]);
     });
-
-    // Computed returns a function that formats cell values.
-    this._formatValue = Computed.create(this, (use) => {
-      // If the field is pulling values from a display column, use a general-purpose formatter.
-      if (use(this.field.displayColRef) !== use(this.field.colRef)) {
-        const fmt = use(this.field.visibleColFormatter);
-        return (val: any) => fmt.formatAny(val);
-      } else {
-        const refTable = use(use(this.field.column).refTable);
-        const refTableId = refTable ? use(refTable.tableId) : "";
-        return (val: any) => val > 0 ? `${refTableId}[${val}]` : "";
-      }
-    });
   }
 
   public buildConfigDom() {
@@ -100,8 +85,8 @@ export class Reference extends NTextBox {
         // but the content of its displayCol has changed.  Postponing doing anything about
         // this until we have three-way information for computed columns.  For now,
         // just showing one version of the cell.  TODO: elaborate.
-        use(this._formatValue)(displayValue[1].local || displayValue[1].parent) :
-        use(this._formatValue)(displayValue);
+        use(this.field.formatter).formatAny(displayValue[1].local || displayValue[1].parent) :
+        use(this.field.formatter).formatAny(displayValue);
 
       hasBlankReference = referenceId.get() !== 0 && value.trim() === '';
 

app/client/widgets/ReferenceList.ts

@@ -37,7 +37,10 @@ export class ReferenceList extends Reference {
         //   return use(this._formatValue)(content[1].local || content[1].parent);
         // }
         const items = isList(content) ? content.slice(1) : [content];
-        return items.map(use(this._formatValue));
+        // Use field.visibleColFormatter instead of field.formatter
+        // because we're formatting each list element to render tokens, not the whole list.
+        const formatter = use(this.field.visibleColFormatter);
+        return items.map(item => formatter.formatAny(item));
       },
       (input) => {
         if (!input) {