Skip to content

Commit 35de417

Browse files
xMartinxMartin
authored
Merge pull request #206 from xMartin/format-amounts-with-sup-fraction-digits
Format amounts with sup fraction digits
2 parents 6dc8792 + e4bd937 commit 35de417

File tree

6 files changed

+190
-28
lines changed

6 files changed

+190
-28
lines changed

‎src/components/__snapshots__/main.test.tsx.snap

+30-3
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,16 @@ exports[`renders summary and transaction list 1`] = `
184184
<td
185185
className="amount"
186186
>
187-
-11.7
187+
<span
188+
className="amount-integer"
189+
>
190+
-11
191+
</span>
192+
<small
193+
className="amount-fraction"
194+
>
195+
70
196+
</small>
188197
</td>
189198
</tr>
190199
<tr
@@ -203,7 +212,16 @@ exports[`renders summary and transaction list 1`] = `
203212
<td
204213
className="amount"
205214
>
206-
11.7
215+
<span
216+
className="amount-integer"
217+
>
218+
11
219+
</span>
220+
<small
221+
className="amount-fraction"
222+
>
223+
70
224+
</small>
207225
</td>
208226
</tr>
209227
</tbody>
@@ -250,7 +268,16 @@ exports[`renders summary and transaction list 1`] = `
250268
<td
251269
className="total"
252270
>
253-
22.8
271+
<span
272+
className="amount-integer"
273+
>
274+
22
275+
</span>
276+
<small
277+
className="amount-fraction"
278+
>
279+
80
280+
</small>
254281
</td>
255282
</tr>
256283
</tbody>

‎src/components/amount.test.tsx

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React from "react";
2+
import { render, screen } from "@testing-library/react";
3+
import Amount from "./amount";
4+
5+
it("renders 0 correctly", () => {
6+
const { asFragment } = render(<Amount>{0}</Amount>);
7+
const integer = asFragment()
8+
.querySelector(".amount-integer")
9+
?.innerHTML.trim();
10+
const fraction = asFragment()
11+
.querySelector(".amount-fraction")
12+
?.innerHTML.trim();
13+
expect(integer).toBe("0");
14+
expect(fraction).toBe("00");
15+
});
16+
17+
it("renders positive two-digit integer correctly", () => {
18+
const { asFragment } = render(<Amount>{15}</Amount>);
19+
const integer = asFragment()
20+
.querySelector(".amount-integer")
21+
?.innerHTML.trim();
22+
const fraction = asFragment()
23+
.querySelector(".amount-fraction")
24+
?.innerHTML.trim();
25+
expect(integer).toBe("15");
26+
expect(fraction).toBe("00");
27+
});
28+
29+
it("renders negative integer correctly", () => {
30+
const { asFragment } = render(<Amount>{-8}</Amount>);
31+
const integer = asFragment()
32+
.querySelector(".amount-integer")
33+
?.innerHTML.trim();
34+
const fraction = asFragment()
35+
.querySelector(".amount-fraction")
36+
?.innerHTML.trim();
37+
expect(integer).toBe("-8");
38+
expect(fraction).toBe("00");
39+
});
40+
41+
it("renders number with 1 fraction digit correctly", () => {
42+
const { asFragment } = render(<Amount>{28.4}</Amount>);
43+
const integer = asFragment()
44+
.querySelector(".amount-integer")
45+
?.innerHTML.trim();
46+
const fraction = asFragment()
47+
.querySelector(".amount-fraction")
48+
?.innerHTML.trim();
49+
expect(integer).toBe("28");
50+
expect(fraction).toBe("40");
51+
});
52+
53+
it("renders number with 2 fraction digits correctly", () => {
54+
const { asFragment } = render(<Amount>{231.87}</Amount>);
55+
const integer = asFragment()
56+
.querySelector(".amount-integer")
57+
?.innerHTML.trim();
58+
const fraction = asFragment()
59+
.querySelector(".amount-fraction")
60+
?.innerHTML.trim();
61+
expect(integer).toBe("231");
62+
expect(fraction).toBe("87");
63+
});
64+
65+
it("renders number with 3 fraction digits rounded up correctly", () => {
66+
const { asFragment } = render(<Amount>{0.336}</Amount>);
67+
const integer = asFragment()
68+
.querySelector(".amount-integer")
69+
?.innerHTML.trim();
70+
const fraction = asFragment()
71+
.querySelector(".amount-fraction")
72+
?.innerHTML.trim();
73+
expect(integer).toBe("0");
74+
expect(fraction).toBe("34");
75+
});
76+
77+
it("renders number with 3 fraction digits rounded down correctly", () => {
78+
const { asFragment } = render(<Amount>{-72.168}</Amount>);
79+
const integer = asFragment()
80+
.querySelector(".amount-integer")
81+
?.innerHTML.trim();
82+
const fraction = asFragment()
83+
.querySelector(".amount-fraction")
84+
?.innerHTML.trim();
85+
expect(integer).toBe("-72");
86+
expect(fraction).toBe("17");
87+
});
88+
89+
it("hides fraction if it's zero and hide zero flag is set", () => {
90+
const { asFragment } = render(<Amount hideZeroFraction>{-28}</Amount>);
91+
const integer = asFragment()
92+
.querySelector(".amount-integer")
93+
?.innerHTML.trim();
94+
expect(integer).toBe("-28");
95+
expect(asFragment().querySelector(".amount-fraction")).toBeNull();
96+
});
97+
98+
it("shows fraction if hide zero flag is set but it's not zero", () => {
99+
const { asFragment } = render(<Amount hideZeroFraction>{-12.8}</Amount>);
100+
const integer = asFragment()
101+
.querySelector(".amount-integer")
102+
?.innerHTML.trim();
103+
const fraction = asFragment()
104+
.querySelector(".amount-fraction")
105+
?.innerHTML.trim();
106+
expect(integer).toBe("-12");
107+
expect(fraction).toBe("80");
108+
});

‎src/components/amount.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { memo, FunctionComponent } from "react";
2+
3+
interface Props {
4+
children: number;
5+
hideZeroFraction?: boolean;
6+
}
7+
8+
const Amount: FunctionComponent<Props> = ({
9+
children: value,
10+
hideZeroFraction,
11+
}) => {
12+
const integer = Math.trunc(value);
13+
const fraction = Math.round(Math.abs(value % 1) * 100);
14+
const paddedFraction = fraction < 10 ? `0${fraction}` : fraction;
15+
16+
const showFraction = !hideZeroFraction || paddedFraction !== "00";
17+
18+
return (
19+
<>
20+
<span className="amount-integer">{integer}</span>
21+
{showFraction && (
22+
<small className="amount-fraction">{paddedFraction}</small>
23+
)}
24+
</>
25+
);
26+
};
27+
28+
export default memo(Amount);

‎src/components/summary.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { memo, FunctionComponent } from "react";
22
import { Account } from "../types";
3+
import Amount from "./amount";
34

45
interface Props {
56
accounts: Account[];
@@ -46,7 +47,9 @@ const Summary: FunctionComponent<Props> = ({ accounts }) => (
4647
{formatData(accounts).map((account) => (
4748
<tr key={account.participant} style={account.style}>
4849
<th className="account">{account.participant}</th>
49-
<td className="amount">{account.amount}</td>
50+
<td className="amount">
51+
<Amount>{account.amount}</Amount>
52+
</td>
5053
</tr>
5154
))}
5255
</tbody>

‎src/components/transactionlistitem.tsx

+14-18
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,15 @@
1-
import React, { FunctionComponent, memo, ReactElement } from "react";
1+
import React, { FunctionComponent, memo } from "react";
22
import { Transaction, TransactionType } from "../types";
3+
import Amount from "./amount";
34

45
interface Props {
56
transaction: Transaction;
67
onDetailsClick: (tabId: string, transactionId: string) => void;
78
}
89

9-
interface ViewData {
10-
title: string;
11-
payments?: string | ReactElement;
12-
participants?: string;
13-
total?: number;
14-
}
15-
1610
const formatData = (data: Transaction) => {
1711
const round = (amount: number) => Math.round(amount * 100) / 100;
1812

19-
const result: ViewData = {
20-
title: data.description,
21-
};
22-
2313
const paymentsList = data.participants
2414
.filter((participant) => {
2515
return data.transactionType === TransactionType.DIRECT
@@ -55,8 +45,7 @@ const formatData = (data: Transaction) => {
5545

5646
total += payment.amount;
5747
});
58-
result.payments = <strong>{payments}</strong>;
59-
result.total = round(total);
48+
total = round(total);
6049

6150
const participantsList = data.participants
6251
.map((participant) => participant.participant)
@@ -72,9 +61,14 @@ const formatData = (data: Transaction) => {
7261

7362
participants += participant + ", ";
7463
});
75-
result.participants = participants.substring(0, participants.length - 2);
64+
participants = participants.substring(0, participants.length - 2);
7665

77-
return result;
66+
return {
67+
title: data.description,
68+
payments,
69+
participants,
70+
total,
71+
};
7872
};
7973

8074
const TransactionListItem: FunctionComponent<Props> = ({
@@ -94,11 +88,13 @@ const TransactionListItem: FunctionComponent<Props> = ({
9488
<td className="title">
9589
{data.title}
9690
<div className="payments">
97-
{data.payments}
91+
<strong>{data.payments}</strong>
9892
{data.participants}
9993
</div>
10094
</td>
101-
<td className="total">{data.total}</td>
95+
<td className="total">
96+
<Amount hideZeroFraction>{data.total}</Amount>
97+
</td>
10298
</tr>
10399
</tbody>
104100
</table>

‎src/index.css

+6-6
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,12 @@ button.selected {
9595
background: var(--button-selected-background-color);
9696
}
9797

98+
.amount-fraction {
99+
font-size: 60%;
100+
vertical-align: top;
101+
margin-left: 0.2em;
102+
}
103+
98104
select {
99105
cursor: pointer;
100106
margin: 0;
@@ -598,12 +604,6 @@ input[type="number"] {
598604
width: 100%;
599605
padding: 0;
600606
}
601-
#transactions .transaction .total {
602-
line-height: 1.1em;
603-
white-space: nowrap;
604-
padding: 0;
605-
vertical-align: middle;
606-
}
607607
#transactions .transaction .payments {
608608
margin-top: 2px;
609609
font-size: 12px;

0 commit comments

Comments
 (0)