update

Author: radubrehar

examples/src/pages/tests/horizontal-layout/example.page.tsx

@@ -5,6 +5,7 @@ import {
   InfiniteTable,
   InfiniteTableColumn,
   InfiniteTablePropColumns,
+  useInfiniteColumnCell,
 } from '@infinite-table/infinite-react';
 import { DataSource } from '@infinite-table/infinite-react';
 
@@ -45,15 +46,113 @@ const style: InfiniteTableColumn<any>['style'] = (
 
 const header: InfiniteTableColumn<Developer>['header'] = ({
   horizontalLayoutPageIndex,
+
   column,
 }) => {
   return (
     <b>
-      {column.field} - {horizontalLayoutPageIndex}
+      {column.field} - {horizontalLayoutPageIndex}{' '}
+      {column.computedSortedAsc
+        ? '📈'
+        : column.computedSortedDesc
+        ? '📉'
+        : '👀'}
     </b>
   );
 };
 
+// const FlashingColumnCell = React.forwardRef(
+//   (props: React.HTMLProps<HTMLDivElement>, ref: React.Ref<HTMLDivElement>) => {
+//     const { domRef, value, column, rowInfo } =
+//       useInfiniteColumnCell<Developer>();
+
+//     const flashBackground = 'blue';
+//     const [flash, setFlash] = React.useState(false);
+
+//     const rowId = rowInfo.id;
+//     const columnId = column.id;
+//     const prevValueRef = React.useRef({
+//       columnId,
+//       rowId,
+//       value,
+//     });
+
+//     console.log(
+//       'render',
+//       // props.children?.props?.children?[1].props?.children.props.children[3]
+//     );
+
+//     React.useEffect(() => {
+//       const prev = prevValueRef.current;
+//       if (
+//         prev.value !== value &&
+//         prev.rowId === rowId &&
+//         prev.columnId === columnId
+//       ) {
+//         console.log('value changed', value, 'prev', prev.value);
+//         setFlash(true);
+//         setTimeout(() => {
+//           setFlash(false);
+//         }, 500);
+//       }
+
+//       console.log('value', value);
+//       prevValueRef.current = {
+//         columnId: column.id,
+//         rowId: rowInfo.id,
+//         value,
+//       };
+//     }, [value, columnId, rowId]);
+
+//     React.useEffect(() => {
+//       console.log('mount');
+//     }, []);
+
+//     return (
+//       <div
+//         ref={domRef}
+//         {...props}
+//         style={{
+//           ...props.style,
+//           background: flash ? flashBackground : props.style?.background,
+//         }}
+//       >
+//         {props.children}
+//       </div>
+//     );
+//   },
+// );
+
+// const Flashing = (props: { value: any }) => {
+//   const value = props.value;
+
+//   const prevValueRef = React.useRef(value);
+//   const { htmlElementRef } = useInfiniteColumnCell();
+//   const flash = () => {
+//     if (!htmlElementRef.current) {
+//       return;
+//     }
+
+//     htmlElementRef.current!.style.backgroundColor = 'red';
+//     setTimeout(() => {
+//       htmlElementRef.current!.style.backgroundColor = '';
+//     }, 500);
+//   };
+
+//   React.useEffect(() => {
+//     if (prevValueRef.current !== value) {
+//       flash();
+//     }
+//     prevValueRef.current = value;
+//   }, [value]);
+
+//   React.useEffect(() => {
+//     flash();
+//   }, []);
+
+//   return <div>{props.value}</div>;
+// };
+
 const columns: InfiniteTablePropColumns<Developer> = {
   id: {
     field: 'id',
@@ -75,6 +174,15 @@ const columns: InfiniteTablePropColumns<Developer> = {
     columnGroup: 'colgroup',
     style,
     header,
+    // renderValue: ({ value }) => {
+    //   console.log('renderValue', value);
+    //   return value;
+    //   // return <Flashing value={value} />;
+    // },
+    components: {
+      // ColumnCell: FlashingColumnCell,
+      // ColumnCell: FlashingColumnCell,
+    },
   },
   firstName: {
     field: 'firstName',
@@ -149,6 +257,7 @@ export default () => {
     return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k')
       .then((r) => r.json())
       .then((data) => {
+        // data.length = 2;
         return data;
         // return new Promise((resolve) => {
         //   setTimeout(() => {

source/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx

@@ -162,11 +162,22 @@ function InfiniteTableColumnCellFn<T>(props: InfiniteTableColumnCellProps<T>) {
 
     fieldsToColumn,
 
-    domRef,
+    domRef: initialDomRef,
     hidden,
     showZebraRows,
   } = props;
 
+  const htmlElementRef = React.useRef<HTMLElement | null>(null);
+  const domRef = useCallback(
+    (node: HTMLElement | null) => {
+      htmlElementRef.current = node;
+      if (initialDomRef) {
+        initialDomRef(node);
+      }
+    },
+    [initialDomRef],
+  );
+
   if (!column) {
     return <div ref={domRef}>no column</div>;
   }
@@ -271,6 +282,7 @@ function InfiniteTableColumnCellFn<T>(props: InfiniteTableColumnCellProps<T>) {
   const cellSelected = renderParam.cellSelected;
 
   renderParam.domRef = domRef;
+  renderParam.htmlElementRef = htmlElementRef;
 
   renderParam.selectCell = useCallback(renderParam.selectCell, [rowInfo]);
   renderParam.deselectCell = useCallback(renderParam.deselectCell, [rowInfo]);

source/src/components/InfiniteTable/components/InfiniteTableRow/columnRendering.tsx

@@ -293,7 +293,10 @@ export function getColumnRenderParam<T>(options: {
   const cellSelected =
     cellSelection?.isCellSelected(rowInfo.id, column.id) ?? false;
 
-  const renderParam: Omit<InfiniteTableColumnCellContextType<T>, 'domRef'> = {
+  const renderParam: Omit<
+    InfiniteTableColumnCellContextType<T>,
+    'domRef' | 'htmlElementRef'
+  > = {
     column,
     columnsMap,
     fieldsToColumn,

source/src/components/InfiniteTable/types/InfiniteTableColumn.ts

@@ -92,6 +92,7 @@ export type InfiniteTableColumnRenderParamBase<
   COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>,
 > = {
   domRef: InfiniteTableCellProps<DATA_TYPE>['domRef'];
+  htmlElementRef: React.MutableRefObject<HTMLElement | null>;
 
   rowIndexInHorizontalLayoutPage: null | number;
   horizontalLayoutPageIndex: null | number;