Merge pull request #936 from web3ui/fix/credentials

[Copy,Hide]: Fix button types
web3ui · Dec 8, 2022 · b54c4d2 · b54c4d2
2 parents 89da8e6 + 6d5732f
commit b54c4d2
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 80 deletions.
diff --git a/.changeset/rotten-starfishes-watch.md b/.changeset/rotten-starfishes-watch.md
@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': patch
+---
+
+Fix Hide and copy buttons
diff --git a/packages/core/src/lib/CopyButton/CopyButton.tsx b/packages/core/src/lib/CopyButton/CopyButton.tsx
@@ -49,6 +49,7 @@ const CopyButton: FC<CopyButtonProps> = ({
         <ButtonStyled
             className="input_copy"
             data-testid="test-copy-button"
+            type="button"
             iconSize={iconSize}
             onClick={(e) => {
                 onCopy(e);

diff --git a/packages/core/src/lib/Credentials/Credentials.stories.tsx b/packages/core/src/lib/Credentials/Credentials.stories.tsx
@@ -75,4 +75,5 @@ Customize.args = {
     },
     hasHideButton: false,
     text: 'https://xj5hyiafwkhn.moralis.io:2053/servers',
+    textColor: 'white',
 };
diff --git a/packages/core/src/lib/Credentials/Credentials.tsx b/packages/core/src/lib/Credentials/Credentials.tsx
@@ -39,10 +39,9 @@ const Credentials: FC<ICredentialsProps> = ({
 
     useEffect(() => setIsValueHidden(isHidden), [isHidden]);
 
-    useEffect(
-        () => setIsMultiline((text.match(/\n/g) || []).length > 0),
-        [text],
-    );
+    useEffect(() => setIsMultiline((text.match(/\n/g) || []).length > 0), [
+        text,
+    ]);
 
     return (
         <CredentialsStyled
@@ -64,7 +63,7 @@ const Credentials: FC<ICredentialsProps> = ({
                     isMultiline={isMultiline}
                 >
                     <Typography
-                        color={isValueHidden ? color.blueGray50 : textColor}
+                        color={textColor ?? customize?.color ?? color.blue70}
                         data-testid="test-cred-new-comp-heading"
                         fontSize={customize?.fontSize}
                         monospace
@@ -79,6 +78,12 @@ const Credentials: FC<ICredentialsProps> = ({
                             <TruncateString
                                 text={text}
                                 percentageOfCharsAfterTrunc={55}
+                                textColor={
+                                    textColor ??
+                                    customize?.color ??
+                                    color.blue70
+                                }
+                                fontSize={customize?.fontSize ?? '16px'}
                             />
                         )}
                     </Typography>

diff --git a/packages/core/src/lib/Credentials/components/TruncateString.tsx b/packages/core/src/lib/Credentials/components/TruncateString.tsx
@@ -1,93 +1,117 @@
+import { color } from '@web3uikit/styles';
 import { useEffect, FC, useRef, useState } from 'react';
 import { ITruncateStringProps, TStringTruncate } from '../types';
 
-const truncateString = ({ leftPercentage = 50, measurements, replaceString, text }: TStringTruncate): string => {
-  if (measurements.text && measurements.component && measurements.text > measurements.component) {
-    const size = (percentage: number) => measurements.component * (percentage / 100);
-    const portion = (size: number) => Math.floor((text.length * size) / measurements.text);
+const truncateString = ({
+    leftPercentage = 50,
+    measurements,
+    replaceString,
+    text,
+}: TStringTruncate): string => {
+    if (
+        measurements.text &&
+        measurements.component &&
+        measurements.text > measurements.component
+    ) {
+        const size = (percentage: number) =>
+            measurements.component * (percentage / 100);
+        const portion = (size: number) =>
+            Math.floor((text.length * size) / measurements.text);
 
-    const leftPart = text.slice(0, Math.max(0, portion(size(leftPercentage)) - replaceString.length));
+        const leftPart = text.slice(
+            0,
+            Math.max(0, portion(size(leftPercentage)) - replaceString.length),
+        );
 
-    const rightPart = text.slice(text.length - portion(size(100 - leftPercentage)) + replaceString.length, text.length);
+        const rightPart = text.slice(
+            text.length -
+                portion(size(100 - leftPercentage)) +
+                replaceString.length,
+            text.length,
+        );
 
-    return `${leftPart}${replaceString}${rightPart}`;
-  } else {
-    return text;
-  }
+        return `${leftPart}${replaceString}${rightPart}`;
+    } else {
+        return text;
+    }
 };
 
-const TruncateString: FC<ITruncateStringProps> = ({
-  replaceString = '...',
-  percentageOfCharsAfterTrunc = 50,
-  text = ''
+export const TruncateString: FC<ITruncateStringProps> = ({
+    fontSize = '16px',
+    percentageOfCharsAfterTrunc = 50,
+    replaceString = '...',
+    text = '',
+    textColor = color.blue70,
 }) => {
-  const [truncating, setTruncating] = useState(true);
-  const [truncatedString, setTruncatedString] = useState<string | null>(null);
-  const componentRef = useRef<HTMLDivElement>(null);
-  const textRef = useRef<HTMLSpanElement>(null);
-  const replaceStrRef = useRef<HTMLSpanElement>(null);
+    const [truncating, setTruncating] = useState(true);
+    const [truncatedString, setTruncatedString] = useState<string | null>(null);
+    const componentRef = useRef<HTMLDivElement>(null);
+    const textRef = useRef<HTMLSpanElement>(null);
+    const replaceStrRef = useRef<HTMLSpanElement>(null);
 
-  const getTruncatedString = (text: string) => {
-    const measurements = {
-      component: componentRef.current?.offsetWidth || 0,
-      replace: replaceStrRef.current?.offsetWidth || 0,
-      text: textRef.current?.offsetWidth || 0
+    const getTruncatedString = (text: string) => {
+        const measurements = {
+            component: componentRef.current?.offsetWidth || 0,
+            replace: replaceStrRef.current?.offsetWidth || 0,
+            text: textRef.current?.offsetWidth || 0,
+        };
+        return truncateString({
+            leftPercentage: percentageOfCharsAfterTrunc,
+            measurements,
+            replaceString,
+            text,
+        });
     };
-    return truncateString({
-      leftPercentage: percentageOfCharsAfterTrunc,
-      measurements,
-      replaceString,
-      text
-    });
-  };
 
-  useEffect(() => {
-    if (!truncatedString?.includes('...')) {
-      setTruncatedString(text);
-    } else {
-      setTruncating(true);
-    }
-  }, [text]);
+    useEffect(() => {
+        if (!truncatedString?.includes('...')) {
+            setTruncatedString(text);
+        } else {
+            setTruncating(true);
+        }
+    }, [text]);
 
-  useEffect(() => {
-    // 2. Call Truncating function on every state change
-    if (truncating) {
-      const ts = getTruncatedString(text);
-      setTruncatedString(ts);
-      setTruncating(false);
-    }
-  }, [truncating]);
+    useEffect(() => {
+        // 2. Call Truncating function on every state change
+        if (truncating) {
+            const ts = getTruncatedString(text);
+            setTruncatedString(ts);
+            setTruncating(false);
+        }
+    }, [truncating]);
 
-  useEffect(() => {
-    // Debounce Mechanism
-    let timeoutId: any = null;
-    const truncateListener = () => {
-      clearTimeout(timeoutId);
-      // 1. Resizing window sets Truncating state to True
-      timeoutId = setTimeout(() => setTruncating(true), 50);
-    };
-    window.addEventListener('resize', truncateListener);
+    useEffect(() => {
+        // Debounce Mechanism
+        let timeoutId: any = null;
+        const truncateListener = () => {
+            clearTimeout(timeoutId);
+            // 1. Resizing window sets Truncating state to True
+            timeoutId = setTimeout(() => setTruncating(true), 50);
+        };
+        window.addEventListener('resize', truncateListener);
 
-    // Remove listener on component unmount
-    return () => {
-      window.removeEventListener('resize', truncateListener);
-    };
-  }, []);
+        // Remove listener on component unmount
+        return () => {
+            window.removeEventListener('resize', truncateListener);
+        };
+    }, []);
 
-  return (
-    <div
-      ref={componentRef}
-      style={{
-        display: 'block',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap'
-      }}
-    >
-      {truncating && <span ref={textRef}>{text}</span>}
-      {truncating && <span ref={replaceStrRef}>{replaceString}</span>}
-      {!truncating && truncatedString}
-    </div>
-  );
+    return (
+        <div
+            ref={componentRef}
+            style={{
+                display: 'block',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                color: textColor,
+                fontSize: fontSize,
+            }}
+        >
+            {truncating && <span ref={textRef}>{text}</span>}
+            {truncating && <span ref={replaceStrRef}>{replaceString}</span>}
+            {!truncating && truncatedString}
+        </div>
+    );
 };
 
 export default TruncateString;
diff --git a/packages/core/src/lib/Credentials/types.ts b/packages/core/src/lib/Credentials/types.ts
@@ -42,7 +42,7 @@ export interface ICredentialsProps
     /**
      * color of the text
      */
-    textColor?: string | typeof color;
+    textColor?: string;
 
     /**
      * width of component
@@ -85,6 +85,16 @@ export interface ITruncateStringProps {
      * Percentage of characters(approx) to remain after truncate
      */
     percentageOfCharsAfterTrunc?: number;
+
+    /**
+     * color of text
+     */
+    textColor: string;
+
+    /**
+     * size of font
+     */
+    fontSize: string;
 }
 
 export type TStringTruncate = {

diff --git a/packages/core/src/lib/HideButton/HideButton.tsx b/packages/core/src/lib/HideButton/HideButton.tsx
@@ -18,6 +18,7 @@ const HideButton: FC<IHideButtonProps> = ({
 }) => {
     return (
         <HideButtonStyled
+            type="button"
             onClick={onToggle}
             data-testid="test-hide-button"
             {...props}

diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
@@ -46,6 +46,7 @@ export * from './Tag';
 export * from './TextArea';
 export * from './Todo';
 export * from './Tooltip';
+export * from './Credentials/components/TruncateString';
 export * from './Typography';
 export * from './Upload';
 export * from './VerifyCode';