@true-engineering/true-react-common-ui-kit 3.0.0-alpha.19 → 3.0.0-alpha.20

package/package.json

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

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
@@ -8,7 +8,7 @@ import {
   isNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
+import { useMergedRefs, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Skeleton } from '../Skeleton';
 import { ThemedPreloader } from '../ThemedPreloader';
@@ -73,18 +73,44 @@ export function FlexibleTable<Values extends Record<string, any>>({
     currentComponentName: 'FlexibleTable',
   });
 
-  const [isHorizontallyScrolled, setIsHorizontallyScrolled] = useState(false);
-  const [hasScrollBar, setHasScrollBar] = useState(false);
-
   const observer = useRef<IntersectionObserver>();
   const scrollRef = useRef<HTMLDivElement>(null);
-  const ref = refForScroll ?? scrollRef;
 
   const showedColumns = useMemo(
     () => enabledColumns ?? Object.keys(config),
     [enabledColumns, config],
   );
 
+  const getDataScrollAttributeSetter = useCallback(
+    (key: string, setter: (el: HTMLDivElement) => boolean) => (el?: HTMLDivElement) => {
+      if (isHorizontallyScrollable && isNotEmpty(el) && setter(el)) {
+        el.dataset[key] = 'true';
+      } else {
+        el?.removeAttribute(`data-${key}`);
+      }
+    },
+    [isHorizontallyScrollable],
+  );
+
+  // Когда таблица имеет скроллбар - добавляем аттрибут scrollable
+  const setHasScrollBarAttribute = useCallback(
+    getDataScrollAttributeSetter('scrollable', hasHorizontalScrollBar),
+    [getDataScrollAttributeSetter],
+  );
+
+  // Когда таблица проскроллена - добавляем аттрибут scrolled
+  const setIsScrolledAttribute = useCallback(
+    getDataScrollAttributeSetter('scrolled', (el) => el.scrollLeft > 0),
+    [getDataScrollAttributeSetter],
+  );
+
+  const ref = useMergedRefs([
+    refForScroll,
+    scrollRef,
+    setHasScrollBarAttribute,
+    setIsScrolledAttribute,
+  ]);
+
   const initIntersectionObserver = useCallback(
     (node: HTMLDivElement) => {
       if (infinityScrollConfig) {
@@ -118,21 +144,19 @@ export function FlexibleTable<Values extends Record<string, any>>({
   );
 
   useEffect(() => {
-    const scrollContainer = ref.current;
-    if (isEmpty(scrollContainer) || !isHorizontallyScrollable || !isFirstColumnSticky) {
+    const scrollContainer = scrollRef.current;
+    if (isEmpty(scrollContainer) || !isHorizontallyScrollable) {
       return;
     }
 
     const scrollHandler = () => {
-      setIsHorizontallyScrolled(scrollContainer.scrollLeft > 0);
+      setIsScrolledAttribute(scrollContainer);
     };
 
     const resizeHandler = () => {
-      setHasScrollBar(hasHorizontalScrollBar(scrollContainer));
+      setHasScrollBarAttribute(scrollContainer);
     };
 
-    resizeHandler();
-
     scrollContainer.addEventListener('scroll', scrollHandler);
     window.addEventListener('resize', resizeHandler);
 
@@ -140,17 +164,10 @@ export function FlexibleTable<Values extends Record<string, any>>({
       scrollContainer.removeEventListener('scroll', scrollHandler);
       window.removeEventListener('resize', resizeHandler);
     };
-  }, [ref]);
+  }, [scrollRef, setIsScrolledAttribute, setHasScrollBarAttribute]);
 
   return (
-    <div
-      ref={ref}
-      className={clsx({ [classes.scroll]: isHorizontallyScrollable })}
-      {...addDataAttributes({
-        scrolled: isHorizontallyScrolled ? true : undefined,
-        scrollable: isHorizontallyScrollable && hasScrollBar ? true : undefined,
-      })}
-    >
+    <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
       <table className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
         <thead>
           <tr className={classes.headerRow}>

package/src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './use-dropdown';
 export * from './use-tweak-styles';
 export * from './use-did-mount-effect';
 export * from './use-mixed-styles';
+export * from './use-merged-refs';

package/src/hooks/use-merged-refs.ts

@@ -0,0 +1,4 @@
+import { useMemo } from 'react';
+import { mergeRefs } from '@true-engineering/true-react-platform-helpers';
+
+export const useMergedRefs: typeof mergeRefs = (refs) => useMemo(() => mergeRefs(refs), refs);