fix: some types

niloofar-deriv · Jan 29, 2023 · cbc304e · cbc304e
1 parent 1fd72f1
commit cbc304e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/packages/components/src/components/dropdown/dropdown.tsx b/packages/components/src/components/dropdown/dropdown.tsx
@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { mobileOSDetect, getPosition } from '@deriv/shared';
 import { TList, findNextFocusableNode, findPreviousFocusableNode, TListItem } from './utility';
-import Items from './items.jsx';
-import DisplayText from './display-text.jsx';
+import Items from './items';
+import DisplayText from './display-text';
 import Text from '../text/text';
 import { IClickEvent, useBlockScroll, useOnClickOutside } from '../../hooks';
 import ThemedScrollbars from '../themed-scrollbars/themed-scrollbars';
@@ -60,7 +60,7 @@ type TDropdownList = {
     is_large?: boolean;
     is_list_visible: boolean;
     list: TList;
-    nodes: any;
+    // nodes: any;
     onKeyPressed: (event: KeyboardEvent, item: TListItem) => void;
     parent_ref: React.RefObject<HTMLElement>;
     portal_id?: string;
@@ -98,7 +98,7 @@ const DropdownList = React.forwardRef<HTMLDivElement, TDropdownList>((props, lis
             const position_style = getPosition({
                 preferred_alignment: is_alignment_top ? 'top' : 'bottom',
                 parent_el: parent_ref.current,
-                child_el: list_ref.current,
+                child_el: (list_ref as React.MutableRefObject<HTMLElement>).current,
             });
             setStyle(position_style.style);
         }
@@ -154,7 +154,10 @@ const DropdownList = React.forwardRef<HTMLDivElement, TDropdownList>((props, lis
 
     // Upon render via css transition group, we use this as a callback to set the width/height of the dropdown list in the state
     const setListDimension = () =>
-        setListDimensions([initial_offset || list_ref.current.offsetWidth, list_ref.current.offsetHeight]);
+        setListDimensions([
+            initial_offset || (list_ref as React.MutableRefObject<HTMLElement>).current.offsetWidth,
+            (list_ref as React.MutableRefObject<HTMLElement>).current.offsetHeight,
+        ]);
 
     const getDropDownAlignment = () => {
         if (is_portal) return undefined;

diff --git a/packages/components/src/components/dropdown/items.tsx b/packages/components/src/components/dropdown/items.tsx
@@ -12,7 +12,7 @@ type TItem = {
     onKeyPressed: (event: KeyboardEvent, item: TListItem) => void;
     value?: string | number;
     is_align_text_left?: boolean;
-    nodes?: any;
+    // nodes?: any;
     item: TListItem;
 };
 

diff --git a/packages/components/src/components/dropdown/utility.ts b/packages/components/src/components/dropdown/utility.ts
@@ -8,6 +8,16 @@ export type TListItem = {
 
 export type TList = TListItem[];
 
+type TActiveNode = Node & {
+    attributes: {
+        tabIndex: number;
+    };
+    nextSibling: TActiveNode;
+    previousSibling: TActiveNode;
+};
+
+type TFocusableNode = (active_node: TActiveNode) => TActiveNode | null;
+
 export const getDisplayText = (list: TList, value: string | number) => {
     const findInArray = (arr_list: TList) => (arr_list.find(item => item.value === value) || {}).text;
     let text = '';
@@ -22,7 +32,7 @@ export const getDisplayText = (list: TList, value: string | number) => {
     return text;
 };
 
-export const findNextFocusableNode = active_node => {
+export const findNextFocusableNode: TFocusableNode = active_node => {
     if (!active_node) return null;
     if (active_node.attributes.tabIndex) return active_node;
     return findNextFocusableNode(active_node.nextSibling);