@true-engineering/true-react-common-ui-kit 3.0.0-alpha.13 → 3.0.0-alpha.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.0.0-alpha.13",
+  "version": "3.0.0-alpha.15",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataTestId, isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
@@ -105,15 +105,27 @@ export function FlexibleTable<Values extends Record<string, any>>({
 
   useEffect(() => {
     const scrollContainer = ref.current;
-    if (scrollContainer === null || !isHorizontallyScrollable || !isFirstColumnSticky) {
+    if (isEmpty(scrollContainer) || !isHorizontallyScrollable || !isFirstColumnSticky) {
       return;
     }
-    setHasScrollBar(hasHorizontalScrollBar(scrollContainer));
-    const scrollHandler = (e: Event) => {
-      setIsHorizontallyScrolled((e.target as HTMLDivElement).scrollLeft > 0);
+
+    const scrollHandler = () => {
+      setIsHorizontallyScrolled(scrollContainer.scrollLeft > 0);
+    };
+
+    const resizeHandler = () => {
+      setHasScrollBar(hasHorizontalScrollBar(scrollContainer));
     };
+
+    resizeHandler();
+
     scrollContainer.addEventListener('scroll', scrollHandler);
-    return () => scrollContainer.removeEventListener('scroll', scrollHandler);
+    window.addEventListener('resize', resizeHandler);
+
+    return () => {
+      scrollContainer.removeEventListener('scroll', scrollHandler);
+      window.removeEventListener('resize', resizeHandler);
+    };
   }, [ref]);
 
   return (