(core) Adding conditional styles to old style widgets

Summary:
Widgets that were using old base Widget class didn't not
create conditional style rules ui.

Additional fixed a little bug - when adding conditional rule
the formula field was marked as having error for a split second.

Test Plan: new test

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/client/widgets/AbstractWidget.js

@@ -1,8 +1,6 @@
 var dispose = require('../lib/dispose');
-const {Computed, fromKo} = require('grainjs');
-
-const {cssLabel, cssRow} = require('app/client/ui/RightPanel');
-const {colorSelect} = require('app/client/ui2018/ColorSelect');
+const {CellStyle} = require('app/client/widgets/CellStyle');
+const {dom} = require('grainjs');
 
 /**
  * AbstractWidget - The base of the inheritance tree for widgets.
@@ -14,11 +12,8 @@ function AbstractWidget(field, opts = {}) {
   this.field = field;
   this.options = field.widgetOptionsJson;
   const {defaultTextColor = '#000000'} = opts;
-
+  this.defaultTextColor = defaultTextColor;
   this.valueFormatter = this.field.visibleColFormatter;
-
-  this.textColor = Computed.create(this, (use) => use(this.field.textColor) || defaultTextColor)
-    .onWrite((val) => this.field.textColor(val === defaultTextColor ? undefined : val));
 }
 dispose.makeDisposable(AbstractWidget);
 
@@ -45,18 +40,8 @@ AbstractWidget.prototype.buildDom = function(row) {
   throw new Error("Not Implemented");
 };
 
-AbstractWidget.prototype.buildColorConfigDom = function() {
-  return [
-    cssLabel('CELL COLOR'),
-    cssRow(
-      colorSelect(
-        this.textColor,
-        fromKo(this.field.fillColor),
-        // Calling `field.widgetOptionsJson.save()` saves both fill and text color settings.
-        () => this.field.widgetOptionsJson.save()
-      )
-    )
-  ];
+AbstractWidget.prototype.buildColorConfigDom = function(gristDoc) {
+  return dom.create(CellStyle, this.field, gristDoc, this.defaultTextColor);
 };
 
 module.exports = AbstractWidget;

app/client/widgets/CellStyle.ts

@@ -105,10 +105,10 @@ export class CellStyle extends Disposable {
               const currentValue = Computed.create(owner, use => {
                 const record = use(this.currentRecord);
                 if (!record) {
-                  return false;
+                  return null;
                 }
                 const value = record[use(column.colId)];
-                return value;
+                return value ?? null;
               });
               const hasError = Computed.create(owner, use => {
                 return !isValidRuleValue(use(currentValue));