[BOOKINGSG-4362][WK] truncated the category title

LifeSG · Aug 25, 2023 · 4fa9f7b · 4fa9f7b
1 parent e95bc12
commit 4fa9f7b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 24 deletions.
diff --git a/src/shared/nested-dropdown-list/list-item.styles.tsx b/src/shared/nested-dropdown-list/list-item.styles.tsx
@@ -21,7 +21,7 @@ interface ListItemSelectorProps {
     $multiSelect: boolean;
 }
 
-interface LabelProps {
+interface TruncateProps {
     $truncateType?: TruncateType;
 }
 
@@ -89,7 +89,7 @@ export const Item = styled.li<ItemProps>`
     }}
 `;
 
-export const Label = styled.div<LabelProps>`
+export const Label = styled.div<TruncateProps>`
     ${TextStyleHelper.getTextStyle("Body", "regular")}
     overflow: hidden;
 
@@ -182,7 +182,7 @@ export const TriangleIcon = styled(TriangleForwardFillIcon)`
     color: ${Color.Primary};
 `;
 
-export const Title = styled.button`
+export const TitleButton = styled.button`
     ${TextStyleHelper.getTextStyle("H4", "semibold")}
     color: ${Color.Neutral[1]};
     text-align: left;
@@ -193,15 +193,24 @@ export const Title = styled.button`
     cursor: pointer;
     width: 100%;
     padding: 0;
-    overflow-wrap: anywhere;
-
-    span {
-        overflow: hidden;
-        display: -webkit-box;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-    }
+    overflow: hidden;
+`;
+
+export const Title = styled.div<TruncateProps>`
+    ${(props) => {
+        switch (props.$truncateType) {
+            case "middle":
+                break;
+            case "end":
+            default:
+                return css`
+                    display: -webkit-box;
+                    text-overflow: ellipsis;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                `;
+        }
+    }}
 `;
 
 export const List = styled.ul<ListProps>`

diff --git a/src/shared/nested-dropdown-list/list-item.tsx b/src/shared/nested-dropdown-list/list-item.tsx
@@ -12,12 +12,15 @@ import {
     List,
     ListItemSelector,
     Title,
+    TitleButton,
     TriangleIcon,
     TruncateContainer,
     TruncateFirstLine,
     TruncateSecondLine,
 } from "./list-item.styles";
 
+type LabelType = "category" | "label";
+
 interface ListItemProps<V1, V2, V3> {
     item: CombinedFormattedOptionProps<V1, V2, V3>;
     selectableCategory?: boolean | undefined;
@@ -49,6 +52,7 @@ export const ListItem = <V1, V2, V3>({
     // CONST, REF, STATE
     // =============================================================================
     const labelRef = useRef<HTMLLIElement>();
+    const categoryRef = useRef<HTMLDivElement>();
 
     // =============================================================================
     // EVENT HANDLERS
@@ -78,15 +82,20 @@ export const ListItem = <V1, V2, V3>({
     // HELPER FUNCTIONS
     // =============================================================================
     const hasExceededContainer = (
-        item: CombinedFormattedOptionProps<V1, V2, V3>
+        item: CombinedFormattedOptionProps<V1, V2, V3>,
+        type: LabelType
     ) => {
         const displayText = item.label;
 
         let widthOfElement = 0;
-        if (labelRef && labelRef.current) {
+        if (type === "label" && labelRef && labelRef.current) {
             widthOfElement = labelRef.current.getBoundingClientRect().width;
         }
 
+        if (type === "category" && categoryRef && categoryRef.current) {
+            widthOfElement = categoryRef.current.getBoundingClientRect().width;
+        }
+
         return StringHelper.shouldTruncateToTwoLines(
             displayText,
             widthOfElement
@@ -203,9 +212,14 @@ export const ListItem = <V1, V2, V3>({
         return (
             <Category {...categoryProps}>
                 {renderCategoryIcon()}
-                <Title {...titleProps}>
-                    <span>{item.label}</span>
-                </Title>
+                <TitleButton {...titleProps}>
+                    <Title ref={categoryRef} $truncateType={itemTruncationType}>
+                        {itemTruncationType === "middle" &&
+                        hasExceededContainer(item, "category")
+                            ? renderTruncatedText(item)
+                            : item.label}
+                    </Title>
+                </TitleButton>
             </Category>
         );
     };
@@ -222,7 +236,7 @@ export const ListItem = <V1, V2, V3>({
                 )}
                 <Label $truncateType={itemTruncationType}>
                     {itemTruncationType === "middle" &&
-                    hasExceededContainer(item)
+                    hasExceededContainer(item, "label")
                         ? renderTruncatedText(item)
                         : renderBolded(item)}
                 </Label>

diff --git a/src/shared/nested-dropdown-list/nested-dropdown-list.tsx b/src/shared/nested-dropdown-list/nested-dropdown-list.tsx
@@ -582,12 +582,6 @@ export const NestedDropdownList = <V1, V2, V3>({
         );
     };
 
-    /**
-        TODO:
-        16. renderBottomCta
-        19. middle truncation
-     */
-
     return (
         <>
             <Container