choices text box refactoring: try to reuse choiceToken code a bit more

Author: manuhabitela

app/client/widgets/ChoiceListEditor.ts

@@ -15,8 +15,8 @@ import {CellValue} from "app/common/DocActions";
 import {CompiledPredicateFormula} from 'app/common/PredicateFormula';
 import {EmptyRecordView} from 'app/common/RecordView';
 import {decodeObject, encodeObject} from 'app/plugin/objtypes';
-import {ChoiceOptions, getRenderFillColor, getRenderTextColor} from 'app/client/widgets/ChoiceTextBox';
-import {choiceToken, cssChoiceACItem, cssChoiceToken} from 'app/client/widgets/ChoiceToken';
+import {ChoiceOptions} from 'app/client/widgets/ChoiceTextBox';
+import {choiceToken, choiceTokenDomArgs, cssChoiceACItem} from 'app/client/widgets/ChoiceToken';
 import {icon} from 'app/client/ui2018/icons';
 import {dom, styled} from 'grainjs';
 
@@ -95,17 +95,14 @@ export class ChoiceListEditor extends NewBaseEditor {
 
     this._tokenField = TokenField.ctor<ChoiceItem>().create(this, {
       initialValue: startTokens,
-      renderToken: item => [
+      renderToken: item => choiceTokenDomArgs(
         item.isBlank ? '[Blank]' : item.label,
-        dom.style('background-color', getRenderFillColor(this._choiceOptionsByName[item.label])),
-        dom.style('color', getRenderTextColor(this._choiceOptionsByName[item.label])),
-        dom.cls('font-bold', this._choiceOptionsByName[item.label]?.fontBold ?? false),
-        dom.cls('font-underline', this._choiceOptionsByName[item.label]?.fontUnderline ?? false),
-        dom.cls('font-italic', this._choiceOptionsByName[item.label]?.fontItalic ?? false),
-        dom.cls('font-strikethrough', this._choiceOptionsByName[item.label]?.fontStrikethrough ?? false),
-        cssChoiceToken.cls('-invalid', item.isInvalid),
-        cssChoiceToken.cls('-blank', item.isBlank),
-      ],
+        {
+          ...(this._choiceOptionsByName[item.label] || {}),
+          invalid: item.isInvalid,
+          blank: item.isBlank,
+        },
+      ),
       createToken: label => new ChoiceItem(label, !this._choicesSet.has(label), label.trim() === ''),
       acOptions,
       openAutocompleteOnFocus: true,

app/client/widgets/ChoiceTextBox.ts

@@ -14,12 +14,7 @@ import {cssLabel, cssRow} from 'app/client/ui/RightPanelStyles';
 import {testId, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {ChoiceListEntry} from 'app/client/widgets/ChoiceListEntry';
-import {
-  choiceToken,
-  DEFAULT_BACKGROUND_COLOR,
-  DEFAULT_COLOR,
-  getReadableColorsCombo,
-} from 'app/client/widgets/ChoiceToken';
+import {choiceToken} from 'app/client/widgets/ChoiceToken';
 import {NTextBox} from 'app/client/widgets/NTextBox';
 import {Computed, dom, styled} from 'grainjs';
 
@@ -29,20 +24,6 @@ export type ChoiceOptionsByName = Map<string, IChoiceOptions | undefined>;
 
 const t = makeT('ChoiceTextBox');
 
-export function getRenderFillColor(choiceOptions?: IChoiceOptions) {
-  if (!choiceOptions) {
-    return DEFAULT_BACKGROUND_COLOR;
-  }
-  return getReadableColorsCombo(choiceOptions).bg;
-}
-
-export function getRenderTextColor(choiceOptions?: IChoiceOptions) {
-  if (!choiceOptions) {
-    return DEFAULT_COLOR;
-  }
-  return getReadableColorsCombo(choiceOptions).fg;
-}
-
 /**
  * ChoiceTextBox - A textbox for choice values.
  */

app/client/widgets/ChoiceToken.ts

@@ -34,10 +34,22 @@ export function choiceToken(
   options: IChoiceTokenOptions,
   ...args: DomElementArg[]
 ): DomContents {
+  return cssChoiceToken(choiceTokenDomArgs(label, options, ...args));
+}
+
+/**
+ * Exposes the choiceToken dom args outside of cssChoiceToken to allow
+ * easy usage of them with TokenField#renderToken, that has its own wrapper dom el.
+ */
+export function choiceTokenDomArgs(
+  label: DomElementArg,
+  options: IChoiceTokenOptions,
+  ...args: DomElementArg[]
+): DomElementArg {
   const {fillColor, textColor, fontBold, fontItalic, fontUnderline,
-         fontStrikethrough, invalid, blank} = options;
+    fontStrikethrough, invalid, blank} = options;
   const {bg, fg} = getReadableColorsCombo({fillColor, textColor});
-  return cssChoiceToken(
+  return [
     label,
     dom.style('background-color', bg),
     dom.style('color', fg),
@@ -48,7 +60,7 @@ export function choiceToken(
     invalid ? cssChoiceToken.cls('-invalid') : null,
     blank ? cssChoiceToken.cls('-blank') : null,
     ...args
-  );
+  ];
 }
 
 export const cssChoiceToken = styled('div', `