feat: add text fitter

lifinance · Jun 1, 2022 · ad1e272 · ad1e272
1 parent 1810084
commit ad1e272
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 11 deletions.
diff --git a/packages/widget/src/components/StepToken.tsx b/packages/widget/src/components/StepToken.tsx
@@ -2,26 +2,34 @@
 import { TokenAmount } from '@lifinance/sdk';
 import { Avatar, Box, BoxProps, Typography } from '@mui/material';
 import { formatTokenAmount } from '../utils/format';
+import { TextFitter } from './TextFitter';
 
 export const StepToken: React.FC<{ token: TokenAmount } & BoxProps> = ({
   token,
   ...other
 }) => {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }} {...other}>
-      <Avatar src={token.logoURI} alt={token.symbol} sx={{ marginRight: 2 }}>
-        {token.symbol[0]}
-      </Avatar>
-      <Typography fontSize={24} fontWeight="700" lineHeight={1.333334}>
-        {formatTokenAmount(token.amount, token.decimals)}
-      </Typography>
+    <Box flex={1} height={46} {...other}>
+      <Box display="flex" flex={1}>
+        <Avatar src={token.logoURI} alt={token.symbol} sx={{ marginRight: 2 }}>
+          {token.symbol[0]}
+        </Avatar>
+        <TextFitter
+          maxHeight={32}
+          textStyle={{
+            fontWeight: 700,
+          }}
+        >
+          {formatTokenAmount(token.amount, token.decimals)}
+        </TextFitter>
+      </Box>
       <Typography
         fontSize={14}
-        lineHeight={1.8577}
+        lineHeight={1}
         fontWeight="500"
-        alignSelf="flex-end"
         color="text.secondary"
-        mx={1}
+        mr={1}
+        ml={6}
       >
         {token.symbol}
       </Typography>

diff --git a/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx b/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx
@@ -41,7 +41,7 @@ export const SwapRoutes: React.FC<BoxProps> = (props) => {
             <Skeleton
               variant="rectangular"
               width="100%"
-              height={167}
+              height={181}
               sx={(theme: Theme) => ({
                 borderRadius:
                   theme.shape.borderRadiusSecondary / theme.shape.borderRadius,

diff --git a/packages/widget/src/components/TextFitter/TextFitter.tsx b/packages/widget/src/components/TextFitter/TextFitter.tsx
@@ -0,0 +1,79 @@
+import {
+  PropsWithChildren,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { TextFitterProps } from './types';
+
+const initialState = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+
+export const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({
+  children,
+  width = '100%',
+  height,
+  maxHeight,
+  preserveAspectRatio = 'xMinYMid meet',
+  textStyle,
+  svgStyle,
+  cropTop,
+  cropBottom,
+  onFit,
+}) => {
+  const textRef = useRef<SVGTextElement>(null);
+  const [viewBox, setViewBox] = useState<Partial<DOMRect>>(initialState);
+  const [textRect, setTextRect] = useState<Partial<DOMRect>>(initialState);
+
+  const calculateBox = useCallback(() => {
+    if (!textRef.current) {
+      return;
+    }
+    const box = textRef.current.getBBox();
+    if (cropTop) {
+      box.y += box.height * cropTop;
+      box.height -= box.height * cropTop;
+    }
+    if (cropBottom) {
+      box.height -= box.height * cropBottom;
+    }
+    setViewBox(box);
+    setTextRect(textRef.current.getBoundingClientRect());
+    onFit?.();
+  }, [cropBottom, cropTop, onFit]);
+
+  useLayoutEffect(() => {
+    calculateBox();
+  }, [calculateBox, children]);
+
+  useLayoutEffect(() => {
+    if (document.fonts) {
+      document.fonts.ready.then(() => {
+        calculateBox();
+      });
+    }
+  }, [calculateBox]);
+
+  return (
+    <svg
+      style={svgStyle}
+      viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
+      width={width}
+      height={
+        textRect.height && maxHeight && textRect.height >= maxHeight
+          ? maxHeight
+          : height
+      }
+      preserveAspectRatio={preserveAspectRatio}
+    >
+      <text x={0} y={0} style={textStyle} ref={textRef}>
+        {children}
+      </text>
+    </svg>
+  );
+};
diff --git a/packages/widget/src/components/TextFitter/index.ts b/packages/widget/src/components/TextFitter/index.ts
@@ -0,0 +1 @@
+export * from './TextFitter';
diff --git a/packages/widget/src/components/TextFitter/types.ts b/packages/widget/src/components/TextFitter/types.ts
@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+
+export interface TextFitterProps {
+  textStyle?: CSSProperties;
+  svgStyle?: CSSProperties;
+  onFit?(): void;
+  maxHeight?: string | number;
+  height?: string | number;
+  width?: string | number;
+  preserveAspectRatio?: string;
+  cropTop?: number;
+  cropBottom?: number;
+}