Skip to content

Commit 6c68939

Browse files
heswellheswell
authored
move shared code for cell rendering into utils (#510)
1 parent 824abde commit 6c68939

6 files changed

Lines changed: 97 additions & 131 deletions

File tree

‎vuu-ui/packages/vuu-datagrid-extras/src/cell-renderers/background-cell/BackgroundCell.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
import { ColumnType } from "@finos/vuu-datagrid-types";
22
import { TableCellProps } from "@finos/vuu-datatable/src/TableCell";
3-
import { metadataKeys, registerComponent } from "@finos/vuu-utils";
3+
import {
4+
DOWN1,
5+
DOWN2,
6+
metadataKeys,
7+
registerComponent,
8+
UP1,
9+
UP2,
10+
} from "@finos/vuu-utils";
411
import cx from "classnames";
5-
import { DOWN1, DOWN2, UP1, UP2, useDirection } from "./useDirection";
12+
import { useDirection } from "./useDirection";
613

714
import "./BackgroundCell.css";
815
import "./FlashingBackground.css";

‎vuu-ui/packages/vuu-datagrid-extras/src/cell-renderers/background-cell/useDirection.ts‎

Lines changed: 12 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,16 @@
11
import { useEffect, useRef } from "react";
22
import { isTypeDescriptor } from "@finos/vuu-utils";
33
import { KeyedColumnDescriptor } from "@finos/vuu-datagrid-types";
4+
import {
5+
getMovingValueDirection,
6+
isValidNumber,
7+
valueChangeDirection,
8+
} from "@finos/vuu-utils";
49

510
const INITIAL_VALUE = [undefined, undefined, undefined, undefined];
611

7-
type valueChangeDirection = "up1" | "up2" | "down1" | "down2" | "";
8-
9-
export const UP1 = "up1";
10-
export const UP2 = "up2";
11-
export const DOWN1 = "down1";
12-
export const DOWN2 = "down2";
13-
1412
type State = [string, unknown, KeyedColumnDescriptor, valueChangeDirection];
1513

16-
const isValidNumber = (n: unknown): n is number =>
17-
typeof n === "number" && isFinite(n);
18-
1914
export function useDirection(
2015
key: string,
2116
value: unknown,
@@ -24,12 +19,18 @@ export function useDirection(
2419
const ref = useRef<State>();
2520
const [prevKey, prevValue, prevColumn, prevDirection] =
2621
ref.current || INITIAL_VALUE;
22+
23+
const { type: dataType } = column;
24+
const decimals = isTypeDescriptor(dataType)
25+
? dataType.formatting?.decimals
26+
: undefined;
27+
2728
const direction =
2829
key === prevKey &&
2930
isValidNumber(value) &&
3031
isValidNumber(prevValue) &&
3132
column === prevColumn
32-
? getDirection(value, column, prevDirection, prevValue)
33+
? getMovingValueDirection(value, prevDirection, prevValue, decimals)
3334
: "";
3435

3536
useEffect(() => {
@@ -38,55 +39,3 @@ export function useDirection(
3839

3940
return direction;
4041
}
41-
42-
function getDirection(
43-
newValue: number,
44-
column: KeyedColumnDescriptor,
45-
direction?: valueChangeDirection,
46-
prevValue?: number
47-
): valueChangeDirection {
48-
if (
49-
!isFinite(newValue) ||
50-
prevValue === undefined ||
51-
direction === undefined
52-
) {
53-
return "";
54-
} else {
55-
let diff = newValue - prevValue;
56-
if (diff) {
57-
// make sure there is still a diff when reduced to number of decimals to be displayed
58-
const { type: dataType } = column;
59-
const decimals =
60-
isTypeDescriptor(dataType) && dataType.formatting?.decimals;
61-
if (typeof decimals === "number") {
62-
diff = +newValue.toFixed(decimals) - +prevValue.toFixed(decimals);
63-
}
64-
}
65-
66-
if (diff) {
67-
if (direction === "") {
68-
if (diff < 0) {
69-
return DOWN1;
70-
} else {
71-
return UP1;
72-
}
73-
} else if (diff > 0) {
74-
if (direction === DOWN1 || direction === DOWN2 || direction === UP2) {
75-
return UP1;
76-
} else {
77-
return UP2;
78-
}
79-
} else if (
80-
direction === UP1 ||
81-
direction === UP2 ||
82-
direction === DOWN2
83-
) {
84-
return DOWN1;
85-
} else {
86-
return DOWN2;
87-
}
88-
} else {
89-
return "";
90-
}
91-
}
92-
}

‎vuu-ui/packages/vuu-datagrid/src/cell-renderers/background-cell.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from "react";
22
import cx from "classnames";
3-
import { metadataKeys } from "@finos/vuu-utils";
3+
import { metadataKeys, UP1, UP2, DOWN1, DOWN2 } from "@finos/vuu-utils";
44
import { useCellFormatter } from "../grid-cells/useCellFormatter";
5-
import useDirection, { UP1, UP2, DOWN1, DOWN2 } from "./use-direction";
5+
import { useDirection } from "./use-direction";
66

77
import "./background-cell.css";
88
import { GridCellProps } from "../grid-cells";

‎vuu-ui/packages/vuu-datagrid/src/cell-renderers/use-direction.ts‎

Lines changed: 13 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,36 @@
11
import { useEffect, useRef } from "react";
22
import { isTypeDescriptor } from "@finos/vuu-utils";
33
import { KeyedColumnDescriptor } from "@finos/vuu-datagrid-types";
4+
import {
5+
getMovingValueDirection,
6+
isValidNumber,
7+
valueChangeDirection,
8+
} from "@finos/vuu-utils";
49

510
const INITIAL_VALUE = [undefined, undefined, undefined, undefined];
611

7-
type valueChangeDirection = "up1" | "up2" | "down1" | "down2" | "";
8-
9-
export const UP1 = "up1";
10-
export const UP2 = "up2";
11-
export const DOWN1 = "down1";
12-
export const DOWN2 = "down2";
13-
1412
type State = [string, unknown, KeyedColumnDescriptor, valueChangeDirection];
1513

16-
const isValidNumber = (n: unknown): n is number =>
17-
typeof n === "number" && isFinite(n);
18-
19-
export default function useDirection(
14+
export function useDirection(
2015
key: string,
2116
value: unknown,
2217
column: KeyedColumnDescriptor
2318
) {
2419
const ref = useRef<State>();
2520
const [prevKey, prevValue, prevColumn, prevDirection] =
2621
ref.current || INITIAL_VALUE;
22+
23+
const { type: dataType } = column;
24+
const decimals = isTypeDescriptor(dataType)
25+
? dataType.formatting?.decimals
26+
: undefined;
27+
2728
const direction =
2829
key === prevKey &&
2930
isValidNumber(value) &&
3031
isValidNumber(prevValue) &&
3132
column === prevColumn
32-
? getDirection(value, column, prevDirection, prevValue)
33+
? getMovingValueDirection(value, prevDirection, prevValue, decimals)
3334
: "";
3435

3536
useEffect(() => {
@@ -38,55 +39,3 @@ export default function useDirection(
3839

3940
return direction;
4041
}
41-
42-
function getDirection(
43-
newValue: number,
44-
column: KeyedColumnDescriptor,
45-
direction?: valueChangeDirection,
46-
prevValue?: number
47-
): valueChangeDirection {
48-
if (
49-
!isFinite(newValue) ||
50-
prevValue === undefined ||
51-
direction === undefined
52-
) {
53-
return "";
54-
} else {
55-
let diff = newValue - prevValue;
56-
if (diff) {
57-
// make sure there is still a diff when reduced to number of decimals to be displayed
58-
const { type: dataType } = column;
59-
const decimals =
60-
isTypeDescriptor(dataType) && dataType.formatting?.decimals;
61-
if (typeof decimals === "number") {
62-
diff = +newValue.toFixed(decimals) - +prevValue.toFixed(decimals);
63-
}
64-
}
65-
66-
if (diff) {
67-
if (direction === "") {
68-
if (diff < 0) {
69-
return DOWN1;
70-
} else {
71-
return UP1;
72-
}
73-
} else if (diff > 0) {
74-
if (direction === DOWN1 || direction === DOWN2 || direction === UP2) {
75-
return UP1;
76-
} else {
77-
return UP2;
78-
}
79-
} else if (
80-
direction === UP1 ||
81-
direction === UP2 ||
82-
direction === DOWN2
83-
) {
84-
return DOWN1;
85-
} else {
86-
return DOWN2;
87-
}
88-
} else {
89-
return "";
90-
}
91-
}
92-
}

‎vuu-ui/packages/vuu-utils/src/data-utils.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
export type valueChangeDirection = "up1" | "up2" | "down1" | "down2" | "";
2+
3+
export const UP1 = "up1";
4+
export const UP2 = "up2";
5+
export const DOWN1 = "down1";
6+
export const DOWN2 = "down2";
7+
8+
export const isValidNumber = (n: unknown): n is number =>
9+
typeof n === "number" && isFinite(n);
10+
11+
export function getMovingValueDirection(
12+
newValue: number,
13+
direction?: valueChangeDirection,
14+
prevValue?: number,
15+
/** the number of decimal places to take into account when highlighting a change */
16+
decimalPlaces?: number
17+
): valueChangeDirection {
18+
if (
19+
!isFinite(newValue) ||
20+
prevValue === undefined ||
21+
direction === undefined
22+
) {
23+
return "";
24+
} else {
25+
let diff = newValue - prevValue;
26+
if (diff) {
27+
// make sure there is still a diff when reduced to number of decimals to be displayed
28+
if (typeof decimalPlaces === "number") {
29+
diff =
30+
+newValue.toFixed(decimalPlaces) - +prevValue.toFixed(decimalPlaces);
31+
}
32+
}
33+
34+
if (diff) {
35+
if (direction === "") {
36+
if (diff < 0) {
37+
return DOWN1;
38+
} else {
39+
return UP1;
40+
}
41+
} else if (diff > 0) {
42+
if (direction === DOWN1 || direction === DOWN2 || direction === UP2) {
43+
return UP1;
44+
} else {
45+
return UP2;
46+
}
47+
} else if (
48+
direction === UP1 ||
49+
direction === UP2 ||
50+
direction === DOWN2
51+
) {
52+
return DOWN1;
53+
} else {
54+
return DOWN2;
55+
}
56+
} else {
57+
return "";
58+
}
59+
}
60+
}

‎vuu-ui/packages/vuu-utils/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export * from "./array-utils";
22
export * from "./column-utils";
33
export * from "./component-registry";
44
export * from "./DataWindow";
5+
export * from "./data-utils";
56
export * from "./date-utils";
67
export * from "./filter-utils";
78
export * from "./html-utils";

0 commit comments

Comments
 (0)