#483 add CheckboxCell renderer for boolean columns

vuu-ui/packages/vuu-data-test/src/simul/reference-data/instrument-prices.ts

@@ -1,5 +1,5 @@
-import InstrumentReferenceData from "./instruments";
-import PriceReferenceData from "./prices";
+import { instrumentsData } from "./instruments";
+import { pricesData } from "./prices";
 
 export type ask = number;
 export type askSize = number;
@@ -61,11 +61,11 @@ const instrumentPrices: InstrumentPricesDataRow[] = [];
 // const start = performance.now();
 // Create 100_000 Instruments
 
-for (let i = 0; i < InstrumentReferenceData.length; i++) {
+for (let i = 0; i < instrumentsData.length; i++) {
   // prettier-ignore
-  const [bbg,currency,description,exchange,isin,lotSize,ric] = InstrumentReferenceData[i];
+  const [bbg,currency,description,exchange,isin,lotSize,ric] = instrumentsData[i];
   const [ask, askSize, bid, bidSize, close, last, open, phase, , scenario] =
-    PriceReferenceData[i];
+    pricesData[i];
 
   instrumentPrices.push([
     ask,

vuu-ui/packages/vuu-data-test/src/simul/reference-data/instruments.ts

@@ -13,6 +13,8 @@ export type description = string;
 export type exchange = string;
 // seed for price generation
 export type price = number;
+type supported = boolean;
+type wishlist = boolean;
 
 export type InstrumentsDataRow = [
   bbg,
@@ -22,6 +24,8 @@ export type InstrumentsDataRow = [
   string,
   number,
   ric,
+  supported,
+  wishlist,
   price
 ];
 
@@ -33,10 +37,12 @@ export const InstrumentColumnMap = {
   string: 4,
   number: 5,
   ric: 6,
-  price: 7,
-};
+  supported: 7,
+  wishlist: 8,
+  price: 9,
+} as const;
 
-const instruments: InstrumentsDataRow[] = [];
+const instrumentsData: InstrumentsDataRow[] = [];
 
 const chars = Array.from("ABCEFGHKMNOPQRTUVWYZ");
 
@@ -63,17 +69,20 @@ for (const char of chars) {
     const lotSize = lotsizes[random(0, lotsizes.length - 1)];
 
     const exchange = locations[suffix][1];
-
     const price = randomPrice();
+    const supported = random(0, 1) === 1;
+    const wishlist = random(0, 1) === 1;
 
-    instruments.push([
+    instrumentsData.push([
       bbg,
       currency,
       description,
       exchange,
       String(isin),
       lotSize,
       ric,
+      supported,
+      wishlist,
       price,
     ]);
   }
@@ -83,8 +92,9 @@ for (const char of chars) {
 
 const instrumentsTable = new Table(
   schemas.instruments,
-  instruments,
+  instrumentsData,
   buildDataColumnMap(schemas.instruments)
 );
 
+export { instrumentsData };
 export default instrumentsTable;

vuu-ui/packages/vuu-data-test/src/simul/reference-data/prices.ts

@@ -1,7 +1,7 @@
 import { buildDataColumnMap, Table } from "../../Table";
 import { BaseUpdateGenerator } from "../../UpdateGenerator";
 import { schemas } from "../simul-schemas";
-import instrumentTable, { InstrumentsDataRow } from "./instruments";
+import { instrumentsData, InstrumentColumnMap } from "./instruments";
 import { random } from "../../data-utils";
 import basketConstituentData from "../../basket/reference-data/constituents";
 
@@ -37,15 +37,14 @@ const pricesUpdateGenerator = new BaseUpdateGenerator({
   askSize,
 });
 
-const prices: PricesDataRow[] = [];
-
 // const start = performance.now();
 // Create 100_000 Instruments
-
-// prettier-ignore
-for (const [,,,,,,ric,
-  priceSeed,
-] of instrumentTable.data as InstrumentsDataRow[]) {
+const requiredInstrumentFields = ["ric", "price"] as const;
+const pricesData: Array<PricesDataRow> = instrumentsData.map((instrument) => {
+  const { ric, price: priceSeed } = requiredInstrumentFields.reduce(
+    (obj, f) => ({ ...obj, [f]: instrument[InstrumentColumnMap[f]] }),
+    {} as { ric: string; price: number }
+  );
   const spread = random(0, 10);
 
   const ask = priceSeed + spread / 2;
@@ -57,47 +56,35 @@ for (const [,,,,,,ric,
   const open = priceSeed + random(0, 1) / 10;
   const phase = "C";
   const scenario = "close";
-  prices.push([
-    ask,
-    askSize,
-    bid,
-    bidSize,
-    close,
-    last,
-    open,
-    phase,
-    ric,
-    scenario,
-  ]);
-}
+  return [ask, askSize, bid, bidSize, close, last, open, phase, ric, scenario];
+});
 
 // prettier-ignore
 for (const [,,,lastTrade,ric] of basketConstituentData) {
   const priceSeed = parseFloat(String(lastTrade));
-  if (!isNaN(priceSeed)){
-  const spread = random(0, 10);
-  const ask = priceSeed + spread / 2;
-  const askSize = random(1000, 3000);
-  const bid = priceSeed - spread / 2;
-  const bidSize = random(1000, 3000);
-  const close = priceSeed + random(0, 1) / 10;
-  const last = priceSeed + random(0, 1) / 10;
-  const open = priceSeed + random(0, 1) / 10;
-  const phase = "C";
-  const scenario = "close";
-  prices.push([
-    ask,
-    askSize,
-    bid,
-    bidSize,
-    close,
-    last,
-    open,
-    phase,
-    ric,
-    scenario,
-  ]);
-
+  if (!isNaN(priceSeed)) {
+    const spread = random(0, 10);
+    const ask = priceSeed + spread / 2;
+    const askSize = random(1000, 3000);
+    const bid = priceSeed - spread / 2;
+    const bidSize = random(1000, 3000);
+    const close = priceSeed + random(0, 1) / 10;
+    const last = priceSeed + random(0, 1) / 10;
+    const open = priceSeed + random(0, 1) / 10;
+    const phase = "C";
+    const scenario = "close";
+    pricesData.push([
+      ask,
+      askSize,
+      bid,
+      bidSize,
+      close,
+      last,
+      open,
+      phase,
+      ric as string,
+      scenario,
+    ]);
   }
 }
 
@@ -106,9 +93,10 @@ for (const [,,,lastTrade,ric] of basketConstituentData) {
 
 const pricesTable = new Table(
   schemas.prices,
-  prices,
+  pricesData,
   buildDataColumnMap(schemas.prices),
   pricesUpdateGenerator
 );
 
+export { pricesData };
 export default pricesTable;

vuu-ui/packages/vuu-data-test/src/simul/simul-schemas.ts

@@ -22,6 +22,8 @@ export const schemas: Readonly<Record<SimulTableName, Readonly<TableSchema>>> =
         { name: "isin", serverDataType: "string" },
         { name: "lotSize", serverDataType: "int" },
         { name: "ric", serverDataType: "string" },
+        { name: "supported", serverDataType: "boolean" },
+        { name: "wishlist", serverDataType: "boolean" },
       ],
       key: "ric",
       table: { module: "SIMUL", table: "instruments" },

vuu-ui/packages/vuu-table/src/table-next/cell-renderers/checkbox-cell/CheckboxCell.tsx

@@ -0,0 +1,36 @@
+import React, { memo, useCallback } from "react";
+import { TableCellRendererProps } from "@finos/vuu-datagrid-types";
+import { CheckboxIcon, WarnCommit } from "@finos/vuu-ui-controls";
+import { Checkbox } from "@salt-ds/core";
+import { dataAndColumnUnchanged } from "../cell-utils";
+import { dispatchCustomEvent, registerComponent } from "@finos/vuu-utils";
+
+export const CheckboxCell: React.FC<TableCellRendererProps> = memo(
+  ({ column, columnMap, onCommit = WarnCommit, row }) => {
+    const dataIdx = columnMap[column.name];
+    const isChecked = row[dataIdx];
+
+    const handleCommit = useCallback(
+      (value) => async (evt: React.MouseEvent) => {
+        const res = await onCommit(value);
+        if (res === true) {
+          dispatchCustomEvent(evt.target as HTMLElement, "vuu-commit");
+        }
+        return res;
+      },
+      [onCommit]
+    );
+
+    return !!column.editable ? (
+      <Checkbox checked={isChecked} onClick={handleCommit(!isChecked)} />
+    ) : (
+      <CheckboxIcon checked={isChecked} disabled={true} />
+    );
+  },
+  dataAndColumnUnchanged
+);
+CheckboxCell.displayName = "CheckboxCell";
+
+registerComponent("checkbox-cell", CheckboxCell, "cell-renderer", {
+  serverDataType: "boolean",
+});

vuu-ui/packages/vuu-table/src/table-next/cell-renderers/checkbox-cell/index.ts

@@ -0,0 +1 @@
+export * from "./CheckboxCell";

vuu-ui/packages/vuu-table/src/table-next/cell-renderers/index.ts

@@ -1,3 +1,4 @@
+export * from "./checkbox-cell";
 export * from "./dropdown-cell";
 export * from "./input-cell";
 export * from "./lookup-cell";

vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css

@@ -1,5 +1,5 @@
 .vuuCheckbox {
-  --vuuCheckboxIcon-background-checked: var(--vuu-color-purple-10);
+  --vuuCheckboxIcon-background-checked-enabled: var(--vuu-color-purple-10);
   display: flex;
   height: 24px;
   align-items: center;

vuu-ui/packages/vuu-ui-controls/src/list/CheckboxIcon.css

@@ -1,33 +1,63 @@
 .vuuCheckboxIcon {
-    --vuu-icon-size: 12px;
-    --vuu-icon-left: -1px;
-    --vuu-icon-top: -1px;
-    --vuu-icon-svg: var(--vuu-svg-tick);
-    border-style: solid;
-    border-color: var(--vuuCheckboxIcon-borderColor, var(--salt-selectable-borderColor));
-    border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);
-    border-width: 1px;
-    display: inline-block;
-    height: var(--vuuCheckboxIcon-size, 12px);
-    position: relative;
-    width: var(--vuuCheckboxIcon-size, 12px);
+  --vuu-icon-size: 12px;
+  --vuu-icon-left: -1px;
+  --vuu-icon-top: -1px;
+  --vuu-icon-svg: var(--vuu-svg-tick);
+  border-style: solid;
+  border-color: var(
+    --vuuCheckboxIcon-borderColor,
+    var(--salt-selectable-borderColor)
+  );
+  border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);
+  border-width: 1px;
+  display: inline-block;
+  height: var(--vuuCheckboxIcon-size, 12px);
+  position: relative;
+  width: var(--vuuCheckboxIcon-size, 12px);
 }
 
-.vuuCheckboxIcon-checked {
-    background-color: var(--vuuCheckboxIcon-background-checked, var(--salt-selectable-background-selected));
-    border-color: var(--vuuCheckboxIcon-borderColor-checked, var(--salt-selectable-borderColor-selected));
+.vuuCheckboxIcon-checked-enabled {
+  background-color: var(
+    --vuuCheckboxIcon-background-checked-enabled,
+    var(--vuu-color-purple-10)
+  );
+  border-color: var(
+    --vuuCheckboxIcon-borderColor-checked-enabled,
+    var(--vuu-color-purple-10)
+  );
 }
 
-.vuuCheckboxIcon-checked:after {
-    content: "";
-    background-color: white;
-    left: var(--vuu-icon-left, auto);
-    height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
-    -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
-    mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
-    mask-repeat: no-repeat;
-    -webkit-mask-repeat: no-repeat;
-    position: absolute;
-    top: var(--vuu-icon-top, auto);
-    width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
-}
+.vuuCheckboxIcon-checked-disabled {
+  background-color: var(
+    --vuuCheckboxIcon-background-checked-disabled,
+    var(--vuu-color-gray-35)
+  );
+  border-color: var(
+    --vuuCheckboxIcon-borderColor-checked-disabled,
+    var(--vuu-color-gray-35)
+  );
+}
+
+.vuuCheckboxIcon-checked-enabled::after,
+.vuuCheckboxIcon-checked-disabled::after {
+  content: "";
+  background-color: white;
+  left: var(--vuu-icon-left, auto);
+  height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
+  -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size)
+    var(--vuu-icon-size);
+  mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size)
+    var(--vuu-icon-size);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  position: absolute;
+  top: var(--vuu-icon-top, auto);
+  width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
+}
+
+.vuuCheckboxIcon-checked-disabled::after {
+  background-color: var(
+    --vuuCheckboxIcon-tick-checked-disabled,
+    var(--vuu-color-gray-30)
+  );
+}

vuu-ui/packages/vuu-ui-controls/src/list/CheckboxIcon.tsx

@@ -9,13 +9,17 @@ const classBase = "vuuCheckboxIcon";
 
 export interface CheckboxIconProps extends HTMLAttributes<HTMLSpanElement> {
   checked?: boolean;
+  disabled?: boolean;
 }
 export const CheckboxIcon = ({
   checked = false,
+  disabled = false,
   ...htmlAttributes
 }: CheckboxIconProps) => (
   <span
     {...htmlAttributes}
-    className={cx(classBase, { [`${classBase}-checked`]: checked })}
+    className={cx(classBase, {
+      [`${classBase}-checked-${disabled ? "disabled" : "enabled"}`]: checked,
+    })}
   />
 );