react-native-gifted-chat 2.8.0 → 2.8.2-alpha.0

package/src/__tests__/DayAnimated.test.tsx

@@ -0,0 +1,54 @@
+import 'react-native'
+import React from 'react'
+import renderer from 'react-test-renderer'
+import DayAnimated from '../MessageContainer/components/DayAnimated'
+import { DayProps } from '../Day'
+
+const mockDaysPositions = { value: {} }
+const mockScrolledY = { value: 0 }
+const mockListHeight = { value: 800 }
+
+const mockMessage = {
+  _id: 1,
+  text: 'Hello',
+  createdAt: new Date('2023-01-01'),
+  user: { _id: 1, name: 'User 1' },
+}
+
+describe('DayAnimated', () => {
+  it('should render DayAnimated with default Day component', () => {
+    const component = renderer.create(
+      <DayAnimated
+        scrolledY={mockScrolledY}
+        daysPositions={mockDaysPositions}
+        listHeight={mockListHeight}
+        messages={[mockMessage]}
+        isLoadingEarlier={false}
+      />
+    )
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should use custom renderDay when provided', () => {
+    const customRenderDay = jest.fn((props: DayProps) => <div data-testid='custom-day'>Custom Day: {props.createdAt}</div>)
+
+    const component = renderer.create(
+      <DayAnimated
+        scrolledY={mockScrolledY}
+        daysPositions={mockDaysPositions}
+        listHeight={mockListHeight}
+        messages={[mockMessage]}
+        isLoadingEarlier={false}
+        renderDay={customRenderDay}
+      />
+    )
+
+    // Force render to trigger the renderDay call if there's a createdAt
+    component.getInstance()
+
+    // The custom renderDay function should be available in the component
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/__tests__/GiftedChat.test.tsx

@@ -40,3 +40,28 @@ it('should render <GiftedChat/> and compare with snapshot', () => {
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
+
+it('should render <GiftedChat/> with disableKeyboardController=true', () => {
+  let tree
+
+  renderer.act(() => {
+    (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
+      height: {
+        value: 0,
+      },
+    })
+
+    tree = renderer.create(
+      <GiftedChat
+        messages={messages}
+        onSend={() => {}}
+        user={{
+          _id: 1,
+        }}
+        disableKeyboardController={true}
+      />
+    )
+  })
+
+  expect(tree.toJSON()).toMatchSnapshot()
+})

package/src/__tests__/__snapshots__/DayAnimated.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DayAnimated should render DayAnimated with default Day component 1`] = `null`;
+
+exports[`DayAnimated should use custom renderDay when provided 1`] = `null`;

package/src/__tests__/__snapshots__/GiftedChat.test.tsx.snap

@@ -26,3 +26,28 @@ exports[`should render <GiftedChat/> and compare with snapshot 1`] = `
   </View>
 </KeyboardProvider>
 `;
+
+exports[`should render <GiftedChat/> with disableKeyboardController=true 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "overflow": "hidden",
+        },
+      ]
+    }
+    testID="GC_WRAPPER"
+  />
+</View>
+`;

package/src/__tests__/__snapshots__/MessageContainer.test.tsx.snap

@@ -28,17 +28,17 @@ exports[`should render <MessageContainer /> and compare with snapshot 1`] = `
     automaticallyAdjustContentInsets={false}
     collapsable={false}
     data={[]}
-    extraData={
-      [
-        null,
-        false,
-      ]
-    }
+    extraData={null}
     getItem={[Function]}
     getItemCount={[Function]}
     invertStickyHeaders={true}
     inverted={true}
     isInvertedVirtualizedList={true}
+    jestAnimatedProps={
+      {
+        "value": {},
+      }
+    }
     jestAnimatedStyle={
       {
         "value": {},
@@ -72,9 +72,11 @@ exports[`should render <MessageContainer /> and compare with snapshot 1`] = `
             },
           ],
         },
-        {
-          "flex": 1,
-        },
+        [
+          {
+            "flex": 1,
+          },
+        ],
       ]
     }
     viewabilityConfigCallbackPairs={[]}

package/src/utils.ts

@@ -1,5 +1,5 @@
+import { useCallback, useEffect, useRef } from 'react'
 import dayjs from 'dayjs'
-
 import { IMessage } from './types'
 
 export function isSameDay (
@@ -29,3 +29,79 @@ export function isSameUser (
     diffMessage.user._id === currentMessage.user._id
   )
 }
+
+function processCallbackArguments (args: unknown[]): unknown[] {
+  const [e, ...rest] = args
+  const { nativeEvent } = (e as { nativeEvent?: unknown }) || {}
+  let params: unknown[] = []
+  if (e) {
+    if (nativeEvent)
+      params.push({ nativeEvent })
+    else
+      params.push(e)
+    if (rest)
+      params = params.concat(rest)
+  }
+
+  return params
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useCallbackDebounced<T extends (...args: any[]) => any>(callbackFunc: T, deps: React.DependencyList = [], time: number): (...args: Parameters<T>) => void {
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+  const savedFunc = useCallback((...args: Parameters<T>) => {
+    const params = processCallbackArguments(args)
+    if (timeoutId.current)
+      clearTimeout(timeoutId.current)
+    timeoutId.current = setTimeout(() => {
+      callbackFunc(...params as Parameters<T>)
+    }, time)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [callbackFunc, time, ...deps])
+
+  useEffect(() => {
+    return () => {
+      if (timeoutId.current)
+        clearTimeout(timeoutId.current)
+    }
+  }, [])
+
+  return savedFunc
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useCallbackThrottled<T extends (...args: any[]) => any>(callbackFunc: T, deps: React.DependencyList = [], time: number): (...args: Parameters<T>) => void {
+  const lastExecution = useRef<number>(0)
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+  // we use function instead of arrow to access arguments object
+  const savedFunc = useCallback((...args: Parameters<T>) => {
+    const params = processCallbackArguments(args)
+
+    const now = Date.now()
+    const timeSinceLastExecution = now - lastExecution.current
+
+    if (timeSinceLastExecution >= time) {
+      // Execute immediately if enough time has passed
+      lastExecution.current = now
+      callbackFunc(...params as Parameters<T>)
+    } else {
+      // Schedule execution for the remaining time
+      clearTimeout(timeoutId.current)
+      timeoutId.current = setTimeout(() => {
+        lastExecution.current = Date.now()
+        callbackFunc(...params as Parameters<T>)
+      }, time - timeSinceLastExecution)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [callbackFunc, time, ...deps])
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeoutId.current)
+    }
+  }, [])
+
+  return savedFunc
+}