|
1 |
| -import React from "react"; |
| 1 | +import React, { useMemo } from "react"; |
2 | 2 | import styled from "styled-components";
|
3 | 3 |
|
4 | 4 | import { responsiveSize } from "styles/responsiveSize";
|
@@ -34,24 +34,28 @@ const StyledField = styled(Field)<{ style?: string }>`
|
34 | 34 | ${({ style }) => style ?? ""}
|
35 | 35 | `;
|
36 | 36 |
|
37 |
| -const truncateText = (text, limit) => { |
38 |
| - if (text.length > limit) { |
| 37 | +const truncateText = (text: string, limit: number) => { |
| 38 | + if (text && text.length > limit) { |
39 | 39 | return text.substring(0, limit) + "...";
|
40 | 40 | }
|
41 | 41 | return text;
|
42 | 42 | };
|
43 | 43 |
|
44 | 44 | type IDisputeInfoList = { fieldItems: FieldItem[] } & IDisputeInfo;
|
45 | 45 | const DisputeInfoList: React.FC<IDisputeInfoList> = ({ fieldItems, showLabels, disputeID, round }) => {
|
| 46 | + const FieldItems = useMemo( |
| 47 | + () => |
| 48 | + fieldItems.map((item) => |
| 49 | + item.display ? ( |
| 50 | + <StyledField key={item.name} {...(item as IField)} value={truncateText(item.value, 20)} displayAsList /> |
| 51 | + ) : null |
| 52 | + ), |
| 53 | + [fieldItems] |
| 54 | + ); |
| 55 | + |
46 | 56 | return (
|
47 | 57 | <Container isLabel={showLabels}>
|
48 |
| - <RestOfFieldsContainer> |
49 |
| - {fieldItems.map((item) => |
50 |
| - item.display ? ( |
51 |
| - <StyledField key={item.name} {...(item as IField)} value={truncateText(item.value, 20)} displayAsList /> |
52 |
| - ) : null |
53 |
| - )} |
54 |
| - </RestOfFieldsContainer> |
| 58 | + <RestOfFieldsContainer>{FieldItems}</RestOfFieldsContainer> |
55 | 59 | {showLabels ? <CardLabel disputeId={disputeID} round={round - 1} isList /> : null}
|
56 | 60 | </Container>
|
57 | 61 | );
|
|
0 commit comments