Merge pull request GeekyAnts#4246 from GeekyAnts/fix/typing-issue-fon…

…t-styling Typing issue fix in Font Styling
madun · Oct 28, 2021 · ca1ccd4 · ca1ccd4
2 parents 7c7fb7c + 7b6859b
commit ca1ccd4
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 87 deletions.
diff --git a/src/components/composites/Tooltip/Tooltip.tsx b/src/components/composites/Tooltip/Tooltip.tsx
@@ -124,8 +124,8 @@ export const Tooltip = ({
 
   const targetRef = React.useRef(null);
 
-  const enterTimeout = React.useRef<number>();
-  const exitTimeout = React.useRef<number>();
+  const enterTimeout = React.useRef<any>();
+  const exitTimeout = React.useRef<any>();
   const tooltipID = useId();
 
   const openWithDelay = React.useCallback(() => {

diff --git a/src/hooks/useResolvedFontFamily.ts b/src/hooks/useResolvedFontFamily.ts
@@ -1,5 +1,5 @@
 import { useTheme } from './useTheme';
-
+import type { ITheme } from '../theme';
 /**
  *
  * @param props
@@ -10,9 +10,9 @@ import { useTheme } from './useTheme';
  * This function depends upon fontConfig token in typography for mapping.
  */
 export function useResolvedFontFamily(props: {
-  fontFamily?: string;
+  fontFamily?: keyof ITheme['fonts'];
   fontStyle?: string;
-  fontWeight?: string | number;
+  fontWeight?: keyof ITheme['fontWeights'];
 }) {
   const { fontFamily, fontStyle, fontWeight } = props;
   let newFontFamily = fontFamily;
@@ -21,8 +21,8 @@ export function useResolvedFontFamily(props: {
 
   const { fontConfig, fontWeights, fonts } = useTheme();
   if (fontWeight && fontStyle && fontFamily && fontFamily in fonts) {
-    const fontToken = fonts[fontFamily];
-
+    // TODO: Fix typing remove any.
+    const fontToken: any = fonts[fontFamily];
     if (fontConfig && fontConfig[fontToken]) {
       // If a custom font family is resolved, set fontWeight and fontStyle to undefined.
       // https://github.com/GeekyAnts/NativeBase/issues/3811

diff --git a/src/theme/base/typography.ts b/src/theme/base/typography.ts
@@ -19,85 +19,84 @@ const typography = {
     '4xl': '3em',
     '5xl': '4em',
   },
-  // fontConfig: {
-  //   Roboto: {
-  //     100: {
-  //       normal: 'Roboto-Light',
-  //       italic: 'Roboto-LightItalic',
-  //     },
-  //     200: {
-  //       normal: 'Roboto-Light',
-  //       italic: 'Roboto-LightItalic',
-  //     },
-  //     300: {
-  //       normal: 'Roboto-Light',
-  //       italic: 'Roboto-LightItalic',
-  //     },
-  //     400: {
-  //       normal: 'Roboto-Regular',
-  //       italic: 'Roboto-Italic',
-  //     },
-  //     500: {
-  //       normal: 'Roboto-Medium',
-  //       italic: 'Roboto-MediumItalic',
-  //     },
-  //     600: {
-  //       normal: 'Roboto-Medium',
-  //       italic: 'Roboto-MediumItalic',
-  //     },
-  //     700: {
-  //       normal: 'Roboto-Bold',
-  //       italic: 'Roboto-BoldItalic',
-  //     },
-  //     800: {
-  //       normal: 'Roboto-Bold',
-  //       italic: 'Roboto-BoldItalic',
-  //     },
-  //     900: {
-  //       normal: 'Roboto-Bold',
-  //       italic: 'Roboto-BoldItalic',
-  //     },
-  //   },
-
-  //   Montserrat: {
-  //     100: {
-  //       normal: 'Montserrat-Light',
-  //       italic: 'Montserrat-LightItalic',
-  //     },
-  //     200: {
-  //       normal: 'Montserrat-Light',
-  //       italic: 'Montserrat-LightItalic',
-  //     },
-  //     300: {
-  //       normal: 'Montserrat-Light',
-  //       italic: 'Montserrat-LightItalic',
-  //     },
-  //     400: {
-  //       normal: 'Montserrat-Regular',
-  //       italic: 'Montserrat-Italic',
-  //     },
-  //     500: {
-  //       normal: 'Montserrat-Medium',
-  //       italic: 'Montserrat-MediumItalic',
-  //     },
-  //     600: {
-  //       normal: 'Montserrat-SemiBold',
-  //       italic: 'Montserrat-SemiBoldItalic',
-  //     },
-  //     700: {
-  //       normal: 'Montserrat-Bold',
-  //       italic: 'Montserrat-BoldItalic',
-  //     },
-  //     800: {
-  //       normal: 'Montserrat-ExtraBold',
-  //       italic: 'Montserrat-ExtraBoldItalic',
-  //     },
-  //     900: {
-  //       normal: 'Montserrat-Black',
-  //       italic: 'Montserrat-BlackItalic',
-  //     },
-  //   },
-  // },
+  fontConfig: {
+    //   Roboto: {
+    //     100: {
+    //       normal: 'Roboto-Light',
+    //       italic: 'Roboto-LightItalic',
+    //     },
+    //     200: {
+    //       normal: 'Roboto-Light',
+    //       italic: 'Roboto-LightItalic',
+    //     },
+    //     300: {
+    //       normal: 'Roboto-Light',
+    //       italic: 'Roboto-LightItalic',
+    //     },
+    //     400: {
+    //       normal: 'Roboto-Regular',
+    //       italic: 'Roboto-Italic',
+    //     },
+    //     500: {
+    //       normal: 'Roboto-Medium',
+    //       italic: 'Roboto-MediumItalic',
+    //     },
+    //     600: {
+    //       normal: 'Roboto-Medium',
+    //       italic: 'Roboto-MediumItalic',
+    //     },
+    //     700: {
+    //       normal: 'Roboto-Bold',
+    //       italic: 'Roboto-BoldItalic',
+    //     },
+    //     800: {
+    //       normal: 'Roboto-Bold',
+    //       italic: 'Roboto-BoldItalic',
+    //     },
+    //     900: {
+    //       normal: 'Roboto-Bold',
+    //       italic: 'Roboto-BoldItalic',
+    //     },
+    //   },
+    //   Montserrat: {
+    //     100: {
+    //       normal: 'Montserrat-Light',
+    //       italic: 'Montserrat-LightItalic',
+    //     },
+    //     200: {
+    //       normal: 'Montserrat-Light',
+    //       italic: 'Montserrat-LightItalic',
+    //     },
+    //     300: {
+    //       normal: 'Montserrat-Light',
+    //       italic: 'Montserrat-LightItalic',
+    //     },
+    //     400: {
+    //       normal: 'Montserrat-Regular',
+    //       italic: 'Montserrat-Italic',
+    //     },
+    //     500: {
+    //       normal: 'Montserrat-Medium',
+    //       italic: 'Montserrat-MediumItalic',
+    //     },
+    //     600: {
+    //       normal: 'Montserrat-SemiBold',
+    //       italic: 'Montserrat-SemiBoldItalic',
+    //     },
+    //     700: {
+    //       normal: 'Montserrat-Bold',
+    //       italic: 'Montserrat-BoldItalic',
+    //     },
+    //     800: {
+    //       normal: 'Montserrat-ExtraBold',
+    //       italic: 'Montserrat-ExtraBoldItalic',
+    //     },
+    //     900: {
+    //       normal: 'Montserrat-Black',
+    //       italic: 'Montserrat-BlackItalic',
+    //     },
+    //   },
+  },
   fontWeights: {
     hairline: 100,
     thin: 200,

diff --git a/src/theme/index.ts b/src/theme/index.ts
@@ -15,13 +15,14 @@ const config: ColorModeOptions = {
   initialColorMode: 'light',
   accessibleColors: false,
 };
+
 const theme = {
   ...base,
   components,
   config,
 };
 
-export type Theme = typeof theme;
+export type Theme = typeof theme & { fontConfig: any };
 
 export interface ICustomTheme {}