move shared code for cell rendering into utils (#510)

finos · Feb 13, 2023 · 6c68939 · 6c68939
1 parent 824abde
commit 6c68939
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 131 deletions.
diff --git a/vuu-ui/packages/vuu-datagrid-extras/src/cell-renderers/background-cell/BackgroundCell.tsx b/vuu-ui/packages/vuu-datagrid-extras/src/cell-renderers/background-cell/BackgroundCell.tsx
@@ -1,8 +1,15 @@
 import { ColumnType } from "@finos/vuu-datagrid-types";
 import { TableCellProps } from "@finos/vuu-datatable/src/TableCell";
-import { metadataKeys, registerComponent } from "@finos/vuu-utils";
+import {
+  DOWN1,
+  DOWN2,
+  metadataKeys,
+  registerComponent,
+  UP1,
+  UP2,
+} from "@finos/vuu-utils";
 import cx from "classnames";
-import { DOWN1, DOWN2, UP1, UP2, useDirection } from "./useDirection";
+import { useDirection } from "./useDirection";
 
 import "./BackgroundCell.css";
 import "./FlashingBackground.css";

diff --git a/vuu-ui/packages/vuu-datagrid-extras/src/cell-renderers/background-cell/useDirection.ts b/vuu-ui/packages/vuu-datagrid-extras/src/cell-renderers/background-cell/useDirection.ts
@@ -1,21 +1,16 @@
 import { useEffect, useRef } from "react";
 import { isTypeDescriptor } from "@finos/vuu-utils";
 import { KeyedColumnDescriptor } from "@finos/vuu-datagrid-types";
+import {
+  getMovingValueDirection,
+  isValidNumber,
+  valueChangeDirection,
+} from "@finos/vuu-utils";
 
 const INITIAL_VALUE = [undefined, undefined, undefined, undefined];
 
-type valueChangeDirection = "up1" | "up2" | "down1" | "down2" | "";
-
-export const UP1 = "up1";
-export const UP2 = "up2";
-export const DOWN1 = "down1";
-export const DOWN2 = "down2";
-
 type State = [string, unknown, KeyedColumnDescriptor, valueChangeDirection];
 
-const isValidNumber = (n: unknown): n is number =>
-  typeof n === "number" && isFinite(n);
-
 export function useDirection(
   key: string,
   value: unknown,
@@ -24,12 +19,18 @@ export function useDirection(
   const ref = useRef<State>();
   const [prevKey, prevValue, prevColumn, prevDirection] =
     ref.current || INITIAL_VALUE;
+
+  const { type: dataType } = column;
+  const decimals = isTypeDescriptor(dataType)
+    ? dataType.formatting?.decimals
+    : undefined;
+
   const direction =
     key === prevKey &&
     isValidNumber(value) &&
     isValidNumber(prevValue) &&
     column === prevColumn
-      ? getDirection(value, column, prevDirection, prevValue)
+      ? getMovingValueDirection(value, prevDirection, prevValue, decimals)
       : "";
 
   useEffect(() => {
@@ -38,55 +39,3 @@ export function useDirection(
 
   return direction;
 }
-
-function getDirection(
-  newValue: number,
-  column: KeyedColumnDescriptor,
-  direction?: valueChangeDirection,
-  prevValue?: number
-): valueChangeDirection {
-  if (
-    !isFinite(newValue) ||
-    prevValue === undefined ||
-    direction === undefined
-  ) {
-    return "";
-  } else {
-    let diff = newValue - prevValue;
-    if (diff) {
-      // make sure there is still a diff when reduced to number of decimals to be displayed
-      const { type: dataType } = column;
-      const decimals =
-        isTypeDescriptor(dataType) && dataType.formatting?.decimals;
-      if (typeof decimals === "number") {
-        diff = +newValue.toFixed(decimals) - +prevValue.toFixed(decimals);
-      }
-    }
-
-    if (diff) {
-      if (direction === "") {
-        if (diff < 0) {
-          return DOWN1;
-        } else {
-          return UP1;
-        }
-      } else if (diff > 0) {
-        if (direction === DOWN1 || direction === DOWN2 || direction === UP2) {
-          return UP1;
-        } else {
-          return UP2;
-        }
-      } else if (
-        direction === UP1 ||
-        direction === UP2 ||
-        direction === DOWN2
-      ) {
-        return DOWN1;
-      } else {
-        return DOWN2;
-      }
-    } else {
-      return "";
-    }
-  }
-}
diff --git a/vuu-ui/packages/vuu-datagrid/src/cell-renderers/background-cell.tsx b/vuu-ui/packages/vuu-datagrid/src/cell-renderers/background-cell.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import cx from "classnames";
-import { metadataKeys } from "@finos/vuu-utils";
+import { metadataKeys, UP1, UP2, DOWN1, DOWN2 } from "@finos/vuu-utils";
 import { useCellFormatter } from "../grid-cells/useCellFormatter";
-import useDirection, { UP1, UP2, DOWN1, DOWN2 } from "./use-direction";
+import { useDirection } from "./use-direction";
 
 import "./background-cell.css";
 import { GridCellProps } from "../grid-cells";

diff --git a/vuu-ui/packages/vuu-datagrid/src/cell-renderers/use-direction.ts b/vuu-ui/packages/vuu-datagrid/src/cell-renderers/use-direction.ts
@@ -1,35 +1,36 @@
 import { useEffect, useRef } from "react";
 import { isTypeDescriptor } from "@finos/vuu-utils";
 import { KeyedColumnDescriptor } from "@finos/vuu-datagrid-types";
+import {
+  getMovingValueDirection,
+  isValidNumber,
+  valueChangeDirection,
+} from "@finos/vuu-utils";
 
 const INITIAL_VALUE = [undefined, undefined, undefined, undefined];
 
-type valueChangeDirection = "up1" | "up2" | "down1" | "down2" | "";
-
-export const UP1 = "up1";
-export const UP2 = "up2";
-export const DOWN1 = "down1";
-export const DOWN2 = "down2";
-
 type State = [string, unknown, KeyedColumnDescriptor, valueChangeDirection];
 
-const isValidNumber = (n: unknown): n is number =>
-  typeof n === "number" && isFinite(n);
-
-export default function useDirection(
+export function useDirection(
   key: string,
   value: unknown,
   column: KeyedColumnDescriptor
 ) {
   const ref = useRef<State>();
   const [prevKey, prevValue, prevColumn, prevDirection] =
     ref.current || INITIAL_VALUE;
+
+  const { type: dataType } = column;
+  const decimals = isTypeDescriptor(dataType)
+    ? dataType.formatting?.decimals
+    : undefined;
+
   const direction =
     key === prevKey &&
     isValidNumber(value) &&
     isValidNumber(prevValue) &&
     column === prevColumn
-      ? getDirection(value, column, prevDirection, prevValue)
+      ? getMovingValueDirection(value, prevDirection, prevValue, decimals)
       : "";
 
   useEffect(() => {
@@ -38,55 +39,3 @@ export default function useDirection(
 
   return direction;
 }
-
-function getDirection(
-  newValue: number,
-  column: KeyedColumnDescriptor,
-  direction?: valueChangeDirection,
-  prevValue?: number
-): valueChangeDirection {
-  if (
-    !isFinite(newValue) ||
-    prevValue === undefined ||
-    direction === undefined
-  ) {
-    return "";
-  } else {
-    let diff = newValue - prevValue;
-    if (diff) {
-      // make sure there is still a diff when reduced to number of decimals to be displayed
-      const { type: dataType } = column;
-      const decimals =
-        isTypeDescriptor(dataType) && dataType.formatting?.decimals;
-      if (typeof decimals === "number") {
-        diff = +newValue.toFixed(decimals) - +prevValue.toFixed(decimals);
-      }
-    }
-
-    if (diff) {
-      if (direction === "") {
-        if (diff < 0) {
-          return DOWN1;
-        } else {
-          return UP1;
-        }
-      } else if (diff > 0) {
-        if (direction === DOWN1 || direction === DOWN2 || direction === UP2) {
-          return UP1;
-        } else {
-          return UP2;
-        }
-      } else if (
-        direction === UP1 ||
-        direction === UP2 ||
-        direction === DOWN2
-      ) {
-        return DOWN1;
-      } else {
-        return DOWN2;
-      }
-    } else {
-      return "";
-    }
-  }
-}
diff --git a/vuu-ui/packages/vuu-utils/src/data-utils.ts b/vuu-ui/packages/vuu-utils/src/data-utils.ts
@@ -0,0 +1,60 @@
+export type valueChangeDirection = "up1" | "up2" | "down1" | "down2" | "";
+
+export const UP1 = "up1";
+export const UP2 = "up2";
+export const DOWN1 = "down1";
+export const DOWN2 = "down2";
+
+export const isValidNumber = (n: unknown): n is number =>
+  typeof n === "number" && isFinite(n);
+
+export function getMovingValueDirection(
+  newValue: number,
+  direction?: valueChangeDirection,
+  prevValue?: number,
+  /** the number of decimal places to take into account when highlighting a change  */
+  decimalPlaces?: number
+): valueChangeDirection {
+  if (
+    !isFinite(newValue) ||
+    prevValue === undefined ||
+    direction === undefined
+  ) {
+    return "";
+  } else {
+    let diff = newValue - prevValue;
+    if (diff) {
+      // make sure there is still a diff when reduced to number of decimals to be displayed
+      if (typeof decimalPlaces === "number") {
+        diff =
+          +newValue.toFixed(decimalPlaces) - +prevValue.toFixed(decimalPlaces);
+      }
+    }
+
+    if (diff) {
+      if (direction === "") {
+        if (diff < 0) {
+          return DOWN1;
+        } else {
+          return UP1;
+        }
+      } else if (diff > 0) {
+        if (direction === DOWN1 || direction === DOWN2 || direction === UP2) {
+          return UP1;
+        } else {
+          return UP2;
+        }
+      } else if (
+        direction === UP1 ||
+        direction === UP2 ||
+        direction === DOWN2
+      ) {
+        return DOWN1;
+      } else {
+        return DOWN2;
+      }
+    } else {
+      return "";
+    }
+  }
+}
diff --git a/vuu-ui/packages/vuu-utils/src/index.ts b/vuu-ui/packages/vuu-utils/src/index.ts
@@ -2,6 +2,7 @@ export * from "./array-utils";
 export * from "./column-utils";
 export * from "./component-registry";
 export * from "./DataWindow";
+export * from "./data-utils";
 export * from "./date-utils";
 export * from "./filter-utils";
 export * from "./html-utils";