Basket finale (#1093)

* fix double add button on column header, basket edit

* fix fade behaviour of Background Cell Renderer, add example

* switch RCP message types to RPC

vuu-ui/packages/vuu-protocol-types/index.d.ts

@@ -216,7 +216,7 @@ export interface ServerToClientRPC {
 export interface ServerToClientViewportRpcResponse {
   action: {
     msg?: string;
-    type: "VP_RCP_FAILURE" | "VP_RCP_SUCCESS";
+    type: "VP_RPC_FAILURE" | "VP_RPC_SUCCESS";
   };
   type: "VIEW_PORT_RPC_REPONSE";
   method: string;

vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.css

@@ -0,0 +1,105 @@
+
+.vuuBackgroundCell {
+  --background-animation-duration: 10s;
+  color: var(--vuuBackgroundCell-color, var(--vuu-color-gray-80));
+  padding-right: var(--salt-size-unit);
+  position: relative;
+  z-index: -1;
+}
+
+.vuuBackgroundCell-arrowBackground,
+.vuuBackgroundCell-arrowOnly {
+  padding-left: 14px;
+}
+
+.vuuBackgroundCell-arrow {
+  background-color: var(--background-cell-background);
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+.vuuBackgroundCell-arrow {
+  text-align: left;
+}
+.vuuBackgroundCell-arrow + .num {
+  padding-left: 8px;
+}
+
+.right .vuuBackgroundCell-arrow {
+  text-align: right;
+}
+.right .vuuBackgroundCell-arrow + .num {
+  padding-right: 8px;
+}
+
+.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+  background-color: transparent;
+}
+
+.vuuBackgroundCell-backgroundOnly.up1,
+.vuuBackgroundCell-arrowBackground.up1 {
+  animation-duration: var(--background-animation-duration);
+  animation-name: vuubgup1;
+}
+
+.vuuBackgroundCell-backgroundOnly.up2,
+.vuuBackgroundCell-arrowBackground.up2 {
+  animation-duration: var(--background-animation-duration);
+  animation-name: vuubgup2;
+}
+
+.vuuBackgroundCell-backgroundOnly.down1,
+.vuuBackgroundCell-arrowBackground.down1 {
+  animation-duration: var(--background-animation-duration);
+  animation-name: vuubgdown1;
+}
+
+.vuuBackgroundCell-backgroundOnly.down2,
+.vuuBackgroundCell-arrowBackground.down2 {
+  animation-duration: var(--background-animation-duration);
+  animation-name: vuubgdown2;
+}
+
+.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+  animation-duration: 30s;
+  animation-name: vuuarrowup1;
+}
+
+.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+  animation-duration: 30s;
+  animation-name: vuuarrowup2;
+}
+
+.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+  animation-duration: 30s;
+  animation-name: vuuarrowdown1;
+}
+
+.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+  animation-duration: 30s;
+  animation-name: vuuarrowdown2;
+}
+
+.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
+  animation-duration: 30s;
+  animation-name: vuubgarrowup1;
+}
+
+.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
+  animation-duration: 30s;
+  animation-name: vuubgarrowup2;
+}
+
+.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
+  animation-duration: 30s;
+  animation-name: vuubgarrowdown1;
+}
+
+.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
+  animation-duration: 30s;
+  animation-name: vuubgarrowdown2;
+}

vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.tsx → vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.tsx

@@ -1,3 +1,4 @@
+import { dataAndColumnUnchanged } from "@finos/vuu-table";
 import { ColumnType, TableCellProps } from "@finos/vuu-table-types";
 import {
   DOWN1,
@@ -9,10 +10,11 @@ import {
   UP2,
 } from "@finos/vuu-utils";
 import cx from "clsx";
+import { memo } from "react";
 import { useDirection } from "./useDirection";
 
 import "./BackgroundCell.css";
-import "./FlashingBackground.css";
+import "./BackgroundKeyframes.css";
 
 const CHAR_ARROW_UP = String.fromCharCode(11014);
 const CHAR_ARROW_DOWN = String.fromCharCode(11015);
@@ -37,8 +39,11 @@ const getFlashStyle = (colType?: ColumnType) => {
   return FlashStyle.BackgroundOnly;
 };
 
-// export to avoid tree shaking, component is not consumed directly
-export const BackgroundCell = ({ column, columnMap, row }: TableCellProps) => {
+export const BackgroundCell = memo(function BackgroundCell({
+  column,
+  columnMap,
+  row,
+}: TableCellProps) {
   //TODO what about click handling
 
   const { name, type, valueFormatter } = column;
@@ -66,11 +71,12 @@ export const BackgroundCell = ({ column, columnMap, row }: TableCellProps) => {
 
   return (
     <div className={className} tabIndex={-1}>
-      <div className={`${classBase}-flasher`}>{arrow}</div>
+      <div className={`${classBase}-arrow`}>{arrow}</div>
       {valueFormatter(row[dataIdx])}
     </div>
   );
-};
+},
+dataAndColumnUnchanged);
 
 registerComponent(
   "vuu.price-move-background",