react-native-gifted-chat 2.4.1 → 2.6.0

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

@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <MessageContainer /> and compare with snapshot 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    ListEmptyComponent={[Function]}
+    ListFooterComponent={[Function]}
+    ListHeaderComponent={[Function]}
+    automaticallyAdjustContentInsets={false}
+    contentContainerStyle={
+      {
+        "flexGrow": 1,
+        "justifyContent": "flex-start",
+      }
+    }
+    data={[]}
+    extraData={
+      [
+        null,
+        false,
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    invertStickyHeaders={true}
+    inverted={true}
+    isInvertedVirtualizedList={true}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onEndReached={[Function]}
+    onEndReachedThreshold={0.1}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    removeClippedSubviews={false}
+    renderItem={[Function]}
+    scrollEventThrottle={100}
+    stickyHeaderIndices={[]}
+    style={
+      [
+        {
+          "transform": [
+            {
+              "scaleY": -1,
+            },
+          ],
+        },
+        {
+          "flex": 1,
+        },
+      ]
+    }
+    viewabilityConfigCallbackPairs={[]}
+  >
+    <View>
+      <View
+        collapsable={false}
+        onLayout={[Function]}
+        style={
+          {
+            "transform": [
+              {
+                "scaleY": -1,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            {
+              "backgroundColor": "#f0f0f0",
+              "borderRadius": 15,
+              "height": 0,
+              "marginBottom": 0,
+              "marginLeft": 8,
+              "transform": [
+                {
+                  "translateY": 200,
+                },
+              ],
+              "width": 45,
+            }
+          }
+        />
+      </View>
+      <View
+        style={
+          {
+            "flex": 1,
+          }
+        }
+      />
+      <View
+        onLayout={[Function]}
+        style={
+          {
+            "transform": [
+              {
+                "scaleY": -1,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "flex": 1,
+            }
+          }
+        />
+      </View>
+    </View>
+  </RCTScrollView>
+</View>
+`;

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

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageImage should  render <MessageImage /> and compare with snapshot 1`] = `
+<View>
+  <Lightbox
+    activeProps={
+      {
+        "style": {
+          "flex": 1,
+          "resizeMode": "contain",
+        },
+      }
+    }
+  >
+    <Image
+      source={
+        {
+          "uri": "url://to/image.png",
+        }
+      }
+      style={
+        [
+          {
+            "borderRadius": 13,
+            "height": 100,
+            "margin": 3,
+            "resizeMode": "cover",
+            "width": 150,
+          },
+          undefined,
+        ]
+      }
+    />
+  </Lightbox>
+</View>
+`;
+
+exports[`MessageImage should not render <MessageImage /> and compare with snapshot 1`] = `null`;

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render <MessageText /> and compare with snapshot 1`] = `
+<View
+  style={
+    [
+      {},
+      undefined,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "black",
+          "fontSize": 16,
+          "lineHeight": 20,
+          "marginBottom": 5,
+          "marginLeft": 10,
+          "marginRight": 10,
+          "marginTop": 5,
+        },
+        undefined,
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

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

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Send should always render <Send /> and compare with snapshot 1`] = `
+<View
+  accessibilityLabel="send"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "height": 44,
+      "justifyContent": "flex-end",
+      "opacity": 1,
+    }
+  }
+  testID="GC_SEND_TOUCHABLE"
+>
+  <View>
+    <Text
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "color": "#0084ff",
+            "fontSize": 17,
+            "fontWeight": "600",
+            "marginBottom": 12,
+            "marginLeft": 10,
+            "marginRight": 10,
+          },
+          undefined,
+        ]
+      }
+    >
+      Send
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Send should not render <Send /> and compare with snapshot 1`] = `null`;
+
+exports[`Send should render <Send /> where there is input and compare with snapshot 1`] = `
+<View
+  accessibilityLabel="send"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "height": 44,
+      "justifyContent": "flex-end",
+      "opacity": 1,
+    }
+  }
+  testID="GC_SEND_TOUCHABLE"
+>
+  <View>
+    <Text
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "color": "#0084ff",
+            "fontSize": 17,
+            "fontWeight": "600",
+            "marginBottom": 12,
+            "marginLeft": 10,
+            "marginRight": 10,
+          },
+          undefined,
+        ]
+      }
+    >
+      Send
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SystemMessage should not render <SystemMessage /> and compare with snapshot 1`] = `null`;
+
+exports[`SystemMessage should render <SystemMessage /> and compare with snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "flex": 1,
+        "justifyContent": "center",
+        "marginBottom": 10,
+        "marginTop": 5,
+      },
+      undefined,
+    ]
+  }
+>
+  <View>
+    <Text
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "color": "#b2b2b2",
+            "fontSize": 12,
+            "fontWeight": "300",
+          },
+          undefined,
+        ]
+      }
+    >
+      test
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Time should not render <Time /> and compare with snapshot 1`] = `null`;
+
+exports[`Time should render <Time /> and compare with snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "marginBottom": 5,
+        "marginLeft": 10,
+        "marginRight": 10,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    style={
+      [
+        {
+          "color": "#aaa",
+          "fontSize": 10,
+          "textAlign": "right",
+        },
+        undefined,
+      ]
+    }
+  >
+    10:05 AM
+  </Text>
+</View>
+`;

package/src/__tests__/data.ts

@@ -0,0 +1,8 @@
+import { IMessage } from '../Models'
+
+export const DEFAULT_TEST_MESSAGE: IMessage = {
+  _id: 'test',
+  text: 'test',
+  user: { _id: 'test' },
+  createdAt: new Date(2022, 3, 17),
+}

package/src/__tests__/utils.test.ts

@@ -0,0 +1,31 @@
+import { isSameDay, isSameUser } from '../utils'
+
+it('should test if same day', () => {
+  const now = new Date()
+  expect(
+    isSameDay(
+      {
+        _id: 1,
+        text: 'test',
+        createdAt: now,
+        user: { _id: 1 },
+      },
+      {
+        _id: 2,
+        text: 'test2',
+        createdAt: now,
+        user: { _id: 2 },
+      }
+    )
+  ).toBe(true)
+})
+
+it('should test if same user', () => {
+  const message = {
+    _id: 1,
+    text: 'test',
+    createdAt: new Date(),
+    user: { _id: 1 },
+  }
+  expect(isSameUser(message, message)).toBe(true)
+})

package/src/hooks/useUpdateLayoutEffect.ts

@@ -0,0 +1,21 @@
+import { DependencyList, useLayoutEffect, useRef } from 'react'
+
+/**
+ * A custom useEffect hook that only triggers on updates, not on initial mount
+ * Idea stolen from: https://stackoverflow.com/a/55075818/1526448
+ * @param {()=>void} effect the function to call
+ * @param {DependencyList} dependencies the state(s) that fires the update
+ */
+export function useUpdateLayoutEffect (
+  effect: () => void,
+  dependencies: DependencyList = []
+) {
+  const isInitialMount = useRef(true)
+
+  useLayoutEffect(() => {
+    if (isInitialMount.current)
+      isInitialMount.current = false
+    else
+      effect()
+  }, dependencies)
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './GiftedChat'
+export * from './Constant'
+export * from './utils'
+export * from './GiftedChatContext'

package/src/logging.ts

@@ -0,0 +1,8 @@
+const styleString = (color: string) => `color: ${color}; font-weight: bold`
+const headerLog = '%c[react-native-gifted-chat]'
+
+export const warning = (...args: unknown[]) =>
+  console.log(headerLog, styleString('orange'), ...args)
+
+export const error = (...args: unknown[]) =>
+  console.log(headerLog, styleString('red'), ...args)

package/src/utils.ts

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types'
+import dayjs from 'dayjs'
+
+import { IMessage } from './Models'
+
+export const StylePropType = PropTypes.oneOfType([
+  PropTypes.array,
+  PropTypes.object,
+  PropTypes.number,
+  PropTypes.bool,
+])
+
+export function isSameDay (
+  currentMessage: IMessage,
+  diffMessage: IMessage | null | undefined
+) {
+  if (!diffMessage || !diffMessage.createdAt)
+    return false
+
+  const currentCreatedAt = dayjs(currentMessage.createdAt)
+  const diffCreatedAt = dayjs(diffMessage.createdAt)
+
+  if (!currentCreatedAt.isValid() || !diffCreatedAt.isValid())
+    return false
+
+  return currentCreatedAt.isSame(diffCreatedAt, 'day')
+}
+
+export function isSameUser (
+  currentMessage: IMessage,
+  diffMessage: IMessage | null | undefined
+) {
+  return !!(
+    diffMessage &&
+    diffMessage.user &&
+    currentMessage.user &&
+    diffMessage.user._id === currentMessage.user._id
+  )
+}

package/.eslintignore

@@ -1,2 +0,0 @@
-
-example/*

package/.eslintrc.js

@@ -1,21 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
-  // extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
-  rules: {
-    'member-access': 0,
-    'interface-name': 0,
-    'ordered-imports': 0,
-    'object-literal-sort-keys': 0,
-    'variable-name': 0,
-    'one-variable-per-declaration': 0,
-    'no-empty': 0,
-    'no-console': 0,
-    'no-shadowed-variable': 0,
-    'no-extra-boolean-cast': 0,
-  },
-}

package/jest.config.js

@@ -1,15 +0,0 @@
-module.exports = {
-  preset: 'react-native',
-  setupFiles: ['<rootDir>/tests/setup.js'],
-  moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx'],
-  transform: {
-    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
-    // '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
-  },
-  transformIgnorePatterns: [
-    '/node_modules/(?!(@react-native|react-native)).*/',
-  ],
-  testMatch: ['**/*.test.ts?(x)'],
-  modulePathIgnorePatterns: ['<rootDir>/example'],
-  coveragePathIgnorePatterns: ['./src/__tests__/'],
-}