stream-chat-react-native-core 5.22.0-beta.2 → 5.22.0-beta.3

package/lib/module/components/ChannelPreview/ChannelPreviewMessenger.js

@@ -19,7 +19,7 @@ var _useChannelPreviewDisplayName = require("./hooks/useChannelPreviewDisplayNam
 var _ChannelsContext = require("../../contexts/channelsContext/ChannelsContext");
 var _ChatContext = require("../../contexts/chatContext/ChatContext");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
-var _utils = require("../../utils/utils");
+var _useViewport2 = require("../../hooks/useViewport");
 var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx";
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -51,7 +51,6 @@ var styles = _reactNative.StyleSheet.create({
     fontWeight: '700'
   }
 });
-var maxWidth = (0, _utils.vw)(80) - 16 - 40;
 var ChannelPreviewMessengerWithContext = function ChannelPreviewMessengerWithContext(props) {
   var channel = props.channel,
     formatLatestMessageDate = props.formatLatestMessageDate,
@@ -71,6 +70,9 @@ var ChannelPreviewMessengerWithContext = function ChannelPreviewMessengerWithCon
     _props$PreviewMutedSt = props.PreviewMutedStatus,
     PreviewMutedStatus = _props$PreviewMutedSt === void 0 ? _ChannelPreviewMutedStatus.ChannelPreviewMutedStatus : _props$PreviewMutedSt,
     unread = props.unread;
+  var _useViewport = (0, _useViewport2.useViewport)(),
+    vw = _useViewport.vw;
+  var maxWidth = vw(80) - 16 - 40;
   var _useTheme = (0, _ThemeContext.useTheme)(),
     _useTheme$theme = _useTheme.theme,
     _useTheme$theme$chann = _useTheme$theme.channelPreview,
@@ -113,7 +115,7 @@ var ChannelPreviewMessengerWithContext = function ChannelPreviewMessengerWithCon
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 148,
+      lineNumber: 149,
       columnNumber: 5
     }
   }, _react["default"].createElement(PreviewAvatar, {
@@ -121,7 +123,7 @@ var ChannelPreviewMessengerWithContext = function ChannelPreviewMessengerWithCon
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 161,
+      lineNumber: 162,
       columnNumber: 7
     }
   }), _react["default"].createElement(_reactNative.View, {
@@ -130,7 +132,7 @@ var ChannelPreviewMessengerWithContext = function ChannelPreviewMessengerWithCon
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 162,
+      lineNumber: 163,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -138,7 +140,7 @@ var ChannelPreviewMessengerWithContext = function ChannelPreviewMessengerWithCon
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 166,
+      lineNumber: 167,
       columnNumber: 9
     }
   }, _react["default"].createElement(PreviewTitle, {
@@ -147,7 +149,7 @@ var ChannelPreviewMessengerWithContext = function ChannelPreviewMessengerWithCon
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 167,
+      lineNumber: 168,
       columnNumber: 11
     }
   }), _react["default"].createElement(_reactNative.View, {
@@ -155,14 +157,14 @@ var ChannelPreviewMessengerWithContext = function ChannelPreviewMessengerWithCon
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 168,
+      lineNumber: 169,
       columnNumber: 11
     }
   }, isChannelMuted && _react["default"].createElement(PreviewMutedStatus, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 169,
+      lineNumber: 170,
       columnNumber: 32
     }
   }), _react["default"].createElement(PreviewUnreadCount, {
@@ -172,7 +174,7 @@ var ChannelPreviewMessengerWithContext = function ChannelPreviewMessengerWithCon
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 170,
+      lineNumber: 171,
       columnNumber: 13
     }
   }))), _react["default"].createElement(_reactNative.View, {
@@ -180,7 +182,7 @@ var ChannelPreviewMessengerWithContext = function ChannelPreviewMessengerWithCon
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 173,
+      lineNumber: 174,
       columnNumber: 9
     }
   }, _react["default"].createElement(PreviewMessage, {
@@ -188,7 +190,7 @@ var ChannelPreviewMessengerWithContext = function ChannelPreviewMessengerWithCon
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 174,
+      lineNumber: 175,
       columnNumber: 11
     }
   }), _react["default"].createElement(PreviewStatus, {
@@ -198,7 +200,7 @@ var ChannelPreviewMessengerWithContext = function ChannelPreviewMessengerWithCon
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 175,
+      lineNumber: 176,
       columnNumber: 11
     }
   }))));
@@ -227,7 +229,7 @@ var ChannelPreviewMessenger = function ChannelPreviewMessenger(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 223,
+      lineNumber: 224,
       columnNumber: 5
     }
   }));

package/lib/module/components/ChannelPreview/ChannelPreviewMessenger.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeGestureHandler","_ChannelAvatar","_ChannelPreviewMessage","_ChannelPreviewMutedStatus","_ChannelPreviewStatus","_ChannelPreviewTitle","_ChannelPreviewUnreadCount","_useChannelPreviewDisplayName","_ChannelsContext","_ChatContext","_ThemeContext","_utils","_this","_jsxFileName","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","styles","StyleSheet","create","container","borderBottomWidth","flex","flexDirection","paddingHorizontal","paddingVertical","contentContainer","row","alignItems","justifyContent","paddingLeft","statusContainer","display","title","fontSize","fontWeight","maxWidth","vw","ChannelPreviewMessengerWithContext","props","channel","formatLatestMessageDate","latestMessagePreview","maxUnreadCount","onSelect","_props$PreviewAvatar","PreviewAvatar","ChannelAvatar","_props$PreviewMessage","PreviewMessage","ChannelPreviewMessage","_props$PreviewStatus","PreviewStatus","ChannelPreviewStatus","_props$PreviewTitle","PreviewTitle","ChannelPreviewTitle","_props$PreviewUnreadC","PreviewUnreadCount","ChannelPreviewUnreadCount","_props$PreviewMutedSt","PreviewMutedStatus","ChannelPreviewMutedStatus","unread","_useTheme","useTheme","_useTheme$theme","theme","_useTheme$theme$chann","channelPreview","_useTheme$theme$color","colors","border","white_snow","_useChatContext","useChatContext","client","displayName","useChannelPreviewDisplayName","Math","floor","_useState","useState","muteStatus","muted","_useState2","_slicedToArray2","isChannelMuted","setIsChannelMuted","useEffect","handleEvent","on","off","createElement","TouchableOpacity","onPress","style","backgroundColor","borderBottomColor","testID","__self","__source","fileName","lineNumber","columnNumber","View","id","MemoizedChannelPreviewMessengerWithContext","React","memo","ChannelPreviewMessenger","_useChannelsContext","useChannelsContext","_extends2","exports"],"sources":["ChannelPreviewMessenger.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { TouchableOpacity } from 'react-native-gesture-handler';\n\nimport { ChannelAvatar } from './ChannelAvatar';\nimport type { ChannelPreviewProps } from './ChannelPreview';\nimport { ChannelPreviewMessage } from './ChannelPreviewMessage';\nimport { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';\nimport { ChannelPreviewStatus } from './ChannelPreviewStatus';\nimport { ChannelPreviewTitle } from './ChannelPreviewTitle';\nimport { ChannelPreviewUnreadCount } from './ChannelPreviewUnreadCount';\nimport { useChannelPreviewDisplayName } from './hooks/useChannelPreviewDisplayName';\n\nimport type { LatestMessagePreview } from './hooks/useLatestMessagePreview';\n\nimport {\n  ChannelsContextValue,\n  useChannelsContext,\n} from '../../contexts/channelsContext/ChannelsContext';\nimport { useChatContext } from '../../contexts/chatContext/ChatContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { vw } from '../../utils/utils';\n\nconst styles = StyleSheet.create({\n  container: {\n    borderBottomWidth: 1,\n    flex: 1,\n    flexDirection: 'row',\n    paddingHorizontal: 8,\n    paddingVertical: 12,\n  },\n  contentContainer: { flex: 1 },\n  row: {\n    alignItems: 'center',\n    flex: 1,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    paddingLeft: 8,\n  },\n  statusContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n  },\n  title: { fontSize: 14, fontWeight: '700' },\n});\n\nconst maxWidth = vw(80) - 16 - 40;\n\nexport type ChannelPreviewMessengerPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> &\n  Pick<\n    ChannelsContextValue<StreamChatGenerics>,\n    | 'maxUnreadCount'\n    | 'onSelect'\n    | 'PreviewAvatar'\n    | 'PreviewMessage'\n    | 'PreviewMutedStatus'\n    | 'PreviewStatus'\n    | 'PreviewTitle'\n    | 'PreviewUnreadCount'\n  > & {\n    /**\n     * Latest message on a channel, formatted for preview\n     *\n     * e.g.,\n     *\n     * ```json\n     * {\n     *  created_at: '' ,\n     *  messageObject: { ... },\n     *  previews: {\n     *    bold: true,\n     *    text: 'This is the message preview text'\n     *  },\n     *  status: 0 | 1 | 2 // read states of the latest message.\n     * }\n     * ```\n     *\n     * The read status is either of the following:\n     *\n     * 0: The message was not sent by the current user\n     * 1: The message was sent by the current user and is unread\n     * 2: The message was sent by the current user and is read\n     *\n     * @overrideType object\n     */\n    latestMessagePreview: LatestMessagePreview<StreamChatGenerics>;\n    /**\n     * Formatter function for date of latest message.\n     * @param date Message date\n     * @returns Formatted date string\n     *\n     * By default today's date is shown in 'HH:mm A' format and other dates\n     * are displayed in 'DD/MM/YY' format. props.latestMessage.created_at is the\n     * default formatted date. This default logic is part of ChannelPreview component.\n     */\n    formatLatestMessageDate?: (date: Date) => string;\n    /** Number of unread messages on the channel */\n    unread?: number;\n  };\n\nconst ChannelPreviewMessengerWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,\n) => {\n  const {\n    channel,\n    formatLatestMessageDate,\n    latestMessagePreview,\n    maxUnreadCount,\n    onSelect,\n    PreviewAvatar = ChannelAvatar,\n    PreviewMessage = ChannelPreviewMessage,\n    PreviewStatus = ChannelPreviewStatus,\n    PreviewTitle = ChannelPreviewTitle,\n    PreviewUnreadCount = ChannelPreviewUnreadCount,\n    PreviewMutedStatus = ChannelPreviewMutedStatus,\n    unread,\n  } = props;\n\n  const {\n    theme: {\n      channelPreview: { container, contentContainer, row, title },\n      colors: { border, white_snow },\n    },\n  } = useTheme();\n\n  const { client } = useChatContext<StreamChatGenerics>();\n\n  const displayName = useChannelPreviewDisplayName(\n    channel,\n    Math.floor(maxWidth / ((title.fontSize || styles.title.fontSize) / 2)),\n  );\n\n  const [isChannelMuted, setIsChannelMuted] = useState(() => channel.muteStatus().muted);\n\n  useEffect(() => {\n    const handleEvent = () => setIsChannelMuted(channel.muteStatus().muted);\n\n    client.on('notification.channel_mutes_updated', handleEvent);\n    return () => client.off('notification.channel_mutes_updated', handleEvent);\n  }, [client]);\n\n  return (\n    <TouchableOpacity\n      onPress={() => {\n        if (onSelect) {\n          onSelect(channel);\n        }\n      }}\n      style={[\n        styles.container,\n        { backgroundColor: white_snow, borderBottomColor: border },\n        container,\n      ]}\n      testID='channel-preview-button'\n    >\n      <PreviewAvatar channel={channel} />\n      <View\n        style={[styles.contentContainer, contentContainer]}\n        testID={`channel-preview-content-${channel.id}`}\n      >\n        <View style={[styles.row, row]}>\n          <PreviewTitle channel={channel} displayName={displayName} />\n          <View style={[styles.statusContainer, row]}>\n            {isChannelMuted && <PreviewMutedStatus />}\n            <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />\n          </View>\n        </View>\n        <View style={[styles.row, row]}>\n          <PreviewMessage latestMessagePreview={latestMessagePreview} />\n          <PreviewStatus\n            channel={channel}\n            formatLatestMessageDate={formatLatestMessageDate}\n            latestMessagePreview={latestMessagePreview}\n          />\n        </View>\n      </View>\n    </TouchableOpacity>\n  );\n};\n\nexport type ChannelPreviewMessengerProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<\n  Omit<\n    ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,\n    'channel' | 'latestMessagePreview'\n  >\n> &\n  Pick<\n    ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,\n    'channel' | 'latestMessagePreview'\n  >;\n\nconst MemoizedChannelPreviewMessengerWithContext = React.memo(\n  ChannelPreviewMessengerWithContext,\n) as typeof ChannelPreviewMessengerWithContext;\n\n/**\n * This UI component displays an individual preview item for each channel in a list. It also receives all props\n * from the ChannelPreview component.\n */\nexport const ChannelPreviewMessenger = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ChannelPreviewMessengerProps<StreamChatGenerics>,\n) => {\n  const {\n    maxUnreadCount,\n    onSelect,\n    PreviewAvatar,\n    PreviewMessage,\n    PreviewMutedStatus,\n    PreviewStatus,\n    PreviewTitle,\n    PreviewUnreadCount,\n  } = useChannelsContext<StreamChatGenerics>();\n  return (\n    <MemoizedChannelPreviewMessengerWithContext\n      {...{\n        maxUnreadCount,\n        onSelect,\n        PreviewAvatar,\n        PreviewMessage,\n        PreviewMutedStatus,\n        PreviewStatus,\n        PreviewTitle,\n        PreviewUnreadCount,\n      }}\n      {...props}\n    />\n  );\n};\n\nChannelPreviewMessenger.displayName = 'ChannelPreviewMessenger{channelPreview}';\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeGestureHandler","_ChannelAvatar","_ChannelPreviewMessage","_ChannelPreviewMutedStatus","_ChannelPreviewStatus","_ChannelPreviewTitle","_ChannelPreviewUnreadCount","_useChannelPreviewDisplayName","_ChannelsContext","_ChatContext","_ThemeContext","_useViewport2","_this","_jsxFileName","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","styles","StyleSheet","create","container","borderBottomWidth","flex","flexDirection","paddingHorizontal","paddingVertical","contentContainer","row","alignItems","justifyContent","paddingLeft","statusContainer","display","title","fontSize","fontWeight","ChannelPreviewMessengerWithContext","props","channel","formatLatestMessageDate","latestMessagePreview","maxUnreadCount","onSelect","_props$PreviewAvatar","PreviewAvatar","ChannelAvatar","_props$PreviewMessage","PreviewMessage","ChannelPreviewMessage","_props$PreviewStatus","PreviewStatus","ChannelPreviewStatus","_props$PreviewTitle","PreviewTitle","ChannelPreviewTitle","_props$PreviewUnreadC","PreviewUnreadCount","ChannelPreviewUnreadCount","_props$PreviewMutedSt","PreviewMutedStatus","ChannelPreviewMutedStatus","unread","_useViewport","useViewport","vw","maxWidth","_useTheme","useTheme","_useTheme$theme","theme","_useTheme$theme$chann","channelPreview","_useTheme$theme$color","colors","border","white_snow","_useChatContext","useChatContext","client","displayName","useChannelPreviewDisplayName","Math","floor","_useState","useState","muteStatus","muted","_useState2","_slicedToArray2","isChannelMuted","setIsChannelMuted","useEffect","handleEvent","on","off","createElement","TouchableOpacity","onPress","style","backgroundColor","borderBottomColor","testID","__self","__source","fileName","lineNumber","columnNumber","View","id","MemoizedChannelPreviewMessengerWithContext","React","memo","ChannelPreviewMessenger","_useChannelsContext","useChannelsContext","_extends2","exports"],"sources":["ChannelPreviewMessenger.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { TouchableOpacity } from 'react-native-gesture-handler';\n\nimport { ChannelAvatar } from './ChannelAvatar';\nimport type { ChannelPreviewProps } from './ChannelPreview';\nimport { ChannelPreviewMessage } from './ChannelPreviewMessage';\nimport { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';\nimport { ChannelPreviewStatus } from './ChannelPreviewStatus';\nimport { ChannelPreviewTitle } from './ChannelPreviewTitle';\nimport { ChannelPreviewUnreadCount } from './ChannelPreviewUnreadCount';\nimport { useChannelPreviewDisplayName } from './hooks/useChannelPreviewDisplayName';\n\nimport type { LatestMessagePreview } from './hooks/useLatestMessagePreview';\n\nimport {\n  ChannelsContextValue,\n  useChannelsContext,\n} from '../../contexts/channelsContext/ChannelsContext';\nimport { useChatContext } from '../../contexts/chatContext/ChatContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useViewport } from '../../hooks/useViewport';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\n\nconst styles = StyleSheet.create({\n  container: {\n    borderBottomWidth: 1,\n    flex: 1,\n    flexDirection: 'row',\n    paddingHorizontal: 8,\n    paddingVertical: 12,\n  },\n  contentContainer: { flex: 1 },\n  row: {\n    alignItems: 'center',\n    flex: 1,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    paddingLeft: 8,\n  },\n  statusContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n  },\n  title: { fontSize: 14, fontWeight: '700' },\n});\n\nexport type ChannelPreviewMessengerPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> &\n  Pick<\n    ChannelsContextValue<StreamChatGenerics>,\n    | 'maxUnreadCount'\n    | 'onSelect'\n    | 'PreviewAvatar'\n    | 'PreviewMessage'\n    | 'PreviewMutedStatus'\n    | 'PreviewStatus'\n    | 'PreviewTitle'\n    | 'PreviewUnreadCount'\n  > & {\n    /**\n     * Latest message on a channel, formatted for preview\n     *\n     * e.g.,\n     *\n     * ```json\n     * {\n     *  created_at: '' ,\n     *  messageObject: { ... },\n     *  previews: {\n     *    bold: true,\n     *    text: 'This is the message preview text'\n     *  },\n     *  status: 0 | 1 | 2 // read states of the latest message.\n     * }\n     * ```\n     *\n     * The read status is either of the following:\n     *\n     * 0: The message was not sent by the current user\n     * 1: The message was sent by the current user and is unread\n     * 2: The message was sent by the current user and is read\n     *\n     * @overrideType object\n     */\n    latestMessagePreview: LatestMessagePreview<StreamChatGenerics>;\n    /**\n     * Formatter function for date of latest message.\n     * @param date Message date\n     * @returns Formatted date string\n     *\n     * By default today's date is shown in 'HH:mm A' format and other dates\n     * are displayed in 'DD/MM/YY' format. props.latestMessage.created_at is the\n     * default formatted date. This default logic is part of ChannelPreview component.\n     */\n    formatLatestMessageDate?: (date: Date) => string;\n    /** Number of unread messages on the channel */\n    unread?: number;\n  };\n\nconst ChannelPreviewMessengerWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,\n) => {\n  const {\n    channel,\n    formatLatestMessageDate,\n    latestMessagePreview,\n    maxUnreadCount,\n    onSelect,\n    PreviewAvatar = ChannelAvatar,\n    PreviewMessage = ChannelPreviewMessage,\n    PreviewStatus = ChannelPreviewStatus,\n    PreviewTitle = ChannelPreviewTitle,\n    PreviewUnreadCount = ChannelPreviewUnreadCount,\n    PreviewMutedStatus = ChannelPreviewMutedStatus,\n    unread,\n  } = props;\n  const { vw } = useViewport();\n\n  const maxWidth = vw(80) - 16 - 40;\n\n  const {\n    theme: {\n      channelPreview: { container, contentContainer, row, title },\n      colors: { border, white_snow },\n    },\n  } = useTheme();\n\n  const { client } = useChatContext<StreamChatGenerics>();\n\n  const displayName = useChannelPreviewDisplayName(\n    channel,\n    Math.floor(maxWidth / ((title.fontSize || styles.title.fontSize) / 2)),\n  );\n\n  const [isChannelMuted, setIsChannelMuted] = useState(() => channel.muteStatus().muted);\n\n  useEffect(() => {\n    const handleEvent = () => setIsChannelMuted(channel.muteStatus().muted);\n\n    client.on('notification.channel_mutes_updated', handleEvent);\n    return () => client.off('notification.channel_mutes_updated', handleEvent);\n  }, [client]);\n\n  return (\n    <TouchableOpacity\n      onPress={() => {\n        if (onSelect) {\n          onSelect(channel);\n        }\n      }}\n      style={[\n        styles.container,\n        { backgroundColor: white_snow, borderBottomColor: border },\n        container,\n      ]}\n      testID='channel-preview-button'\n    >\n      <PreviewAvatar channel={channel} />\n      <View\n        style={[styles.contentContainer, contentContainer]}\n        testID={`channel-preview-content-${channel.id}`}\n      >\n        <View style={[styles.row, row]}>\n          <PreviewTitle channel={channel} displayName={displayName} />\n          <View style={[styles.statusContainer, row]}>\n            {isChannelMuted && <PreviewMutedStatus />}\n            <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />\n          </View>\n        </View>\n        <View style={[styles.row, row]}>\n          <PreviewMessage latestMessagePreview={latestMessagePreview} />\n          <PreviewStatus\n            channel={channel}\n            formatLatestMessageDate={formatLatestMessageDate}\n            latestMessagePreview={latestMessagePreview}\n          />\n        </View>\n      </View>\n    </TouchableOpacity>\n  );\n};\n\nexport type ChannelPreviewMessengerProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<\n  Omit<\n    ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,\n    'channel' | 'latestMessagePreview'\n  >\n> &\n  Pick<\n    ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,\n    'channel' | 'latestMessagePreview'\n  >;\n\nconst MemoizedChannelPreviewMessengerWithContext = React.memo(\n  ChannelPreviewMessengerWithContext,\n) as typeof ChannelPreviewMessengerWithContext;\n\n/**\n * This UI component displays an individual preview item for each channel in a list. It also receives all props\n * from the ChannelPreview component.\n */\nexport const ChannelPreviewMessenger = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ChannelPreviewMessengerProps<StreamChatGenerics>,\n) => {\n  const {\n    maxUnreadCount,\n    onSelect,\n    PreviewAvatar,\n    PreviewMessage,\n    PreviewMutedStatus,\n    PreviewStatus,\n    PreviewTitle,\n    PreviewUnreadCount,\n  } = useChannelsContext<StreamChatGenerics>();\n  return (\n    <MemoizedChannelPreviewMessengerWithContext\n      {...{\n        maxUnreadCount,\n        onSelect,\n        PreviewAvatar,\n        PreviewMessage,\n        PreviewMutedStatus,\n        PreviewStatus,\n        PreviewTitle,\n        PreviewUnreadCount,\n      }}\n      {...props}\n    />\n  );\n};\n\nChannelPreviewMessenger.displayName = 'ChannelPreviewMessenger{channelPreview}';\n"],"mappings":"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"}

package/lib/module/components/ChannelPreview/hooks/useChannelPreviewDisplayName.js

@@ -6,8 +6,7 @@ exports.useChannelPreviewDisplayName = exports.getChannelPreviewDisplayName = vo
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _ChatContext = require("../../../contexts/chatContext/ChatContext");
-var _utils = require("../../../utils/utils");
-var DEFAULT_MAX_CHARACTER_LENGTH = ((0, _utils.vw)(100) - 16) / 6;
+var _useViewport2 = require("../../../hooks/useViewport");
 var ELLIPSIS = "...";
 var getMemberName = function getMemberName(member) {
   var _member$user, _member$user2;
@@ -58,6 +57,9 @@ var useChannelPreviewDisplayName = function useChannelPreviewDisplayName(channel
   var _channel$state, _channel$data;
   var _useChatContext = (0, _ChatContext.useChatContext)(),
     client = _useChatContext.client;
+  var _useViewport = (0, _useViewport2.useViewport)(),
+    vw = _useViewport.vw;
+  var DEFAULT_MAX_CHARACTER_LENGTH = (vw(100) - 16) / 6;
   var currentUserId = client == null ? void 0 : client.userID;
   var members = channel == null ? void 0 : (_channel$state = channel.state) == null ? void 0 : _channel$state.members;
   var numOfMembers = Object.keys(members || {}).length;

package/lib/module/components/ChannelPreview/hooks/useChannelPreviewDisplayName.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_ChatContext","_utils","DEFAULT_MAX_CHARACTER_LENGTH","vw","ELLIPSIS","getMemberName","member","_member$user","_member$user2","user","name","id","getChannelPreviewDisplayName","_ref","channelName","characterLimit","currentUserId","members","channelMembers","Object","values","otherMembers","filter","_member$user3","sort","prevUser","nextUser","_prevUser$user$name","_prevUser$user","_nextUser$user$name","_nextUser$user","toLowerCase","localeCompare","toLocaleUpperCase","createChannelNameSuffix","remainingNumberOfMembers","length","slice","reduce","result","currentMember","index","originalArray","currentMemberName","resultHasSpaceForCurrentMemberName","truncateLimit","tuncatedCurrentMemberName","channelNameSuffix","exports","useChannelPreviewDisplayName","channel","characterLength","_channel$state","_channel$data","_useChatContext","useChatContext","client","userID","state","numOfMembers","keys","data","_useState","useState","_useState2","_slicedToArray2","displayName","setDisplayName","useEffect"],"sources":["useChannelPreviewDisplayName.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { Channel, ChannelMemberResponse } from 'stream-chat';\n\nimport { useChatContext } from '../../../contexts/chatContext/ChatContext';\n\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\nimport { vw } from '../../../utils/utils';\n\nconst DEFAULT_MAX_CHARACTER_LENGTH = (vw(100) - 16) / 6;\n\nconst ELLIPSIS = `...`;\n\nconst getMemberName = (member: ChannelMemberResponse) =>\n  member.user?.name || member.user?.id || 'Unknown User';\n\nexport const getChannelPreviewDisplayName = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  channelName,\n  characterLimit,\n  currentUserId,\n  members,\n}: {\n  characterLimit: number;\n  channelName?: string;\n  currentUserId?: string;\n  members?: Channel<StreamChatGenerics>['state']['members'];\n}): string => {\n  if (channelName) return channelName;\n\n  const channelMembers = Object.values(members || {});\n\n  const otherMembers = channelMembers.filter((member) => member.user?.id !== currentUserId);\n  otherMembers.sort((prevUser, nextUser) =>\n    (prevUser?.user?.name ?? '')\n      .toLowerCase()\n      .localeCompare((nextUser?.user?.name ?? '').toLocaleUpperCase()),\n  );\n\n  const createChannelNameSuffix = (remainingNumberOfMembers: number) =>\n    remainingNumberOfMembers <= 1 ? `${ELLIPSIS}` : `,${ELLIPSIS}+${remainingNumberOfMembers}`;\n\n  if (otherMembers.length === 1) {\n    const name = getMemberName(otherMembers[0]);\n    return name.length > characterLimit\n      ? `${name.slice(0, characterLimit - ELLIPSIS.length)}${ELLIPSIS}`\n      : name;\n  }\n\n  const name = otherMembers.reduce((result, currentMember, index, originalArray) => {\n    if (result.length >= characterLimit) {\n      return result;\n    }\n\n    const currentMemberName = getMemberName(currentMember);\n\n    const resultHasSpaceForCurrentMemberName =\n      result.length + (currentMemberName.length + ELLIPSIS.length) < characterLimit;\n\n    if (resultHasSpaceForCurrentMemberName) {\n      return result.length > 0 ? `${result}, ${currentMemberName}` : `${currentMemberName}`;\n    } else {\n      const remainingNumberOfMembers = originalArray.length - index;\n      const truncateLimit = characterLimit - (ELLIPSIS.length + result.length);\n      const tuncatedCurrentMemberName = `, ${currentMemberName.slice(0, truncateLimit)}`;\n\n      const channelNameSuffix = createChannelNameSuffix(remainingNumberOfMembers);\n\n      return `${result}${tuncatedCurrentMemberName}${channelNameSuffix}`;\n    }\n  }, '');\n\n  return name;\n};\n\nexport const useChannelPreviewDisplayName = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  channel?: Channel<StreamChatGenerics>,\n  characterLength?: number,\n) => {\n  const { client } = useChatContext<StreamChatGenerics>();\n\n  const currentUserId = client?.userID;\n  const members = channel?.state?.members;\n  const numOfMembers = Object.keys(members || {}).length;\n  const channelName = channel?.data?.name;\n  const characterLimit = characterLength || DEFAULT_MAX_CHARACTER_LENGTH;\n  const [displayName, setDisplayName] = useState(\n    getChannelPreviewDisplayName({\n      channelName,\n      characterLimit,\n      currentUserId,\n      members,\n    }),\n  );\n\n  useEffect(() => {\n    setDisplayName(\n      getChannelPreviewDisplayName({\n        channelName,\n        characterLimit,\n        currentUserId,\n        members,\n      }),\n    );\n  }, [channelName, currentUserId, characterLimit, numOfMembers]);\n\n  return displayName;\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","require","_ChatContext","_useViewport2","ELLIPSIS","getMemberName","member","_member$user","_member$user2","user","name","id","getChannelPreviewDisplayName","_ref","channelName","characterLimit","currentUserId","members","channelMembers","Object","values","otherMembers","filter","_member$user3","sort","prevUser","nextUser","_prevUser$user$name","_prevUser$user","_nextUser$user$name","_nextUser$user","toLowerCase","localeCompare","toLocaleUpperCase","createChannelNameSuffix","remainingNumberOfMembers","length","slice","reduce","result","currentMember","index","originalArray","currentMemberName","resultHasSpaceForCurrentMemberName","truncateLimit","tuncatedCurrentMemberName","channelNameSuffix","exports","useChannelPreviewDisplayName","channel","characterLength","_channel$state","_channel$data","_useChatContext","useChatContext","client","_useViewport","useViewport","vw","DEFAULT_MAX_CHARACTER_LENGTH","userID","state","numOfMembers","keys","data","_useState","useState","_useState2","_slicedToArray2","displayName","setDisplayName","useEffect"],"sources":["useChannelPreviewDisplayName.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { Channel, ChannelMemberResponse } from 'stream-chat';\n\nimport { useChatContext } from '../../../contexts/chatContext/ChatContext';\nimport { useViewport } from '../../../hooks/useViewport';\n\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\n\nconst ELLIPSIS = `...`;\n\nconst getMemberName = (member: ChannelMemberResponse) =>\n  member.user?.name || member.user?.id || 'Unknown User';\n\nexport const getChannelPreviewDisplayName = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  channelName,\n  characterLimit,\n  currentUserId,\n  members,\n}: {\n  characterLimit: number;\n  channelName?: string;\n  currentUserId?: string;\n  members?: Channel<StreamChatGenerics>['state']['members'];\n}): string => {\n  if (channelName) return channelName;\n\n  const channelMembers = Object.values(members || {});\n\n  const otherMembers = channelMembers.filter((member) => member.user?.id !== currentUserId);\n  otherMembers.sort((prevUser, nextUser) =>\n    (prevUser?.user?.name ?? '')\n      .toLowerCase()\n      .localeCompare((nextUser?.user?.name ?? '').toLocaleUpperCase()),\n  );\n\n  const createChannelNameSuffix = (remainingNumberOfMembers: number) =>\n    remainingNumberOfMembers <= 1 ? `${ELLIPSIS}` : `,${ELLIPSIS}+${remainingNumberOfMembers}`;\n\n  if (otherMembers.length === 1) {\n    const name = getMemberName(otherMembers[0]);\n    return name.length > characterLimit\n      ? `${name.slice(0, characterLimit - ELLIPSIS.length)}${ELLIPSIS}`\n      : name;\n  }\n\n  const name = otherMembers.reduce((result, currentMember, index, originalArray) => {\n    if (result.length >= characterLimit) {\n      return result;\n    }\n\n    const currentMemberName = getMemberName(currentMember);\n\n    const resultHasSpaceForCurrentMemberName =\n      result.length + (currentMemberName.length + ELLIPSIS.length) < characterLimit;\n\n    if (resultHasSpaceForCurrentMemberName) {\n      return result.length > 0 ? `${result}, ${currentMemberName}` : `${currentMemberName}`;\n    } else {\n      const remainingNumberOfMembers = originalArray.length - index;\n      const truncateLimit = characterLimit - (ELLIPSIS.length + result.length);\n      const tuncatedCurrentMemberName = `, ${currentMemberName.slice(0, truncateLimit)}`;\n\n      const channelNameSuffix = createChannelNameSuffix(remainingNumberOfMembers);\n\n      return `${result}${tuncatedCurrentMemberName}${channelNameSuffix}`;\n    }\n  }, '');\n\n  return name;\n};\n\nexport const useChannelPreviewDisplayName = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  channel?: Channel<StreamChatGenerics>,\n  characterLength?: number,\n) => {\n  const { client } = useChatContext<StreamChatGenerics>();\n  const { vw } = useViewport();\n\n  const DEFAULT_MAX_CHARACTER_LENGTH = (vw(100) - 16) / 6;\n\n  const currentUserId = client?.userID;\n  const members = channel?.state?.members;\n  const numOfMembers = Object.keys(members || {}).length;\n  const channelName = channel?.data?.name;\n  const characterLimit = characterLength || DEFAULT_MAX_CHARACTER_LENGTH;\n  const [displayName, setDisplayName] = useState(\n    getChannelPreviewDisplayName({\n      channelName,\n      characterLimit,\n      currentUserId,\n      members,\n    }),\n  );\n\n  useEffect(() => {\n    setDisplayName(\n      getChannelPreviewDisplayName({\n        channelName,\n        characterLimit,\n        currentUserId,\n        members,\n      }),\n    );\n  }, [channelName, currentUserId, characterLimit, numOfMembers]);\n\n  return displayName;\n};\n"],"mappings":"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"}

package/lib/module/components/ImageGallery/ImageGallery.js

@@ -23,10 +23,10 @@ var _useImageGalleryGestures = require("./hooks/useImageGalleryGestures");
 var _ImageGalleryContext = require("../../contexts/imageGalleryContext/ImageGalleryContext");
 var _OverlayContext = require("../../contexts/overlayContext/OverlayContext");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
+var _useViewport2 = require("../../hooks/useViewport");
 var _native = require("../../native");
 var _getResizedImageUrl = require("../../utils/getResizedImageUrl");
 var _getUrlOfImageAttachment = require("../../utils/getUrlOfImageAttachment");
-var _utils = require("../../utils/utils");
 var _getGiphyMimeType = require("../Attachment/utils/getGiphyMimeType");
 var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ImageGallery/ImageGallery.tsx";
@@ -34,9 +34,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var isAndroid = _reactNative.Platform.OS === 'android';
 var fullScreenHeight = _reactNative.Dimensions.get('screen').height;
-var measuredScreenHeight = (0, _utils.vh)(100);
-var screenWidth = (0, _utils.vw)(100);
-var halfScreenWidth = (0, _utils.vw)(50);
 var MARGIN = 32;
 var HasPinched = function (HasPinched) {
   HasPinched[HasPinched["FALSE"] = 0] = "FALSE";
@@ -84,10 +81,16 @@ var ImageGallery = function ImageGallery(props) {
     messages = _useImageGalleryConte.messages,
     selectedMessage = _useImageGalleryConte.selectedMessage,
     setSelectedMessage = _useImageGalleryConte.setSelectedMessage;
+  var _useViewport = (0, _useViewport2.useViewport)(),
+    vh = _useViewport.vh,
+    vw = _useViewport.vw;
+  var measuredScreenHeight = vh(100);
+  var screenWidth = vw(100);
+  var halfScreenWidth = vw(50);
   var statusBarHeight = (_StatusBar$currentHei = _reactNative.StatusBar.currentHeight) != null ? _StatusBar$currentHei : 0;
   var bottomBarHeight = fullScreenHeight - measuredScreenHeight - statusBarHeight;
   var androidScreenHeightAdjustment = translucentStatusBar ? bottomBarHeight === statusBarHeight || bottomBarHeight < 0 ? 0 : statusBarHeight : bottomBarHeight === statusBarHeight || bottomBarHeight < 0 ? -statusBarHeight : 0;
-  var screenHeight = isAndroid ? _reactNative.Dimensions.get('window').height + androidScreenHeightAdjustment : (0, _utils.vh)(100);
+  var screenHeight = isAndroid ? _reactNative.Dimensions.get('window').height + androidScreenHeightAdjustment : vh(100);
   var halfScreenHeight = screenHeight / 2;
   var quarterScreenHeight = screenHeight / 4;
   var snapPoints = _react["default"].useMemo(function () {
@@ -325,7 +328,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 535,
+      lineNumber: 539,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -333,7 +336,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 540,
+      lineNumber: 544,
       columnNumber: 7
     }
   }), _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
@@ -345,7 +348,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 541,
+      lineNumber: 545,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -353,7 +356,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 548,
+      lineNumber: 552,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
@@ -367,7 +370,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 549,
+      lineNumber: 553,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -375,7 +378,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 558,
+      lineNumber: 562,
       columnNumber: 13
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PinchGestureHandler, {
@@ -385,7 +388,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 559,
+      lineNumber: 563,
       columnNumber: 15
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -393,7 +396,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 564,
+      lineNumber: 568,
       columnNumber: 17
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
@@ -406,7 +409,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 565,
+      lineNumber: 569,
       columnNumber: 19
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -414,7 +417,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 573,
+      lineNumber: 577,
       columnNumber: 21
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -428,7 +431,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 574,
+      lineNumber: 578,
       columnNumber: 23
     }
   }, imageGalleryAttachments.map(function (photo, i) {
@@ -461,7 +464,7 @@ var ImageGallery = function ImageGallery(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 591,
+        lineNumber: 595,
         columnNumber: 29
       }
     }) : _react["default"].createElement(_AnimatedGalleryImage.AnimatedGalleryImage, {
@@ -485,7 +488,7 @@ var ImageGallery = function ImageGallery(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 620,
+        lineNumber: 624,
         columnNumber: 29
       }
     });
@@ -497,7 +500,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 653,
+      lineNumber: 657,
       columnNumber: 7
     }
   })), imageGalleryAttachments.length > 0 && _react["default"].createElement(_ImageGalleryFooter.ImageGalleryFooter, (0, _extends2["default"])({
@@ -517,7 +520,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 661,
+      lineNumber: 665,
       columnNumber: 9
     }
   })), _react["default"].createElement(_ImageGalleryOverlay.ImageGalleryOverlay, {
@@ -527,14 +530,14 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 678,
+      lineNumber: 682,
       columnNumber: 7
     }
   }), _react["default"].createElement(_bottomSheet.BottomSheetModalProvider, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 683,
+      lineNumber: 687,
       columnNumber: 7
     }
   }, _react["default"].createElement(_bottomSheet.BottomSheetModal, {
@@ -547,7 +550,7 @@ var ImageGallery = function ImageGallery(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 688,
+          lineNumber: 692,
           columnNumber: 13
         }
       }));
@@ -562,7 +565,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 684,
+      lineNumber: 688,
       columnNumber: 9
     }
   }, _react["default"].createElement(_ImageGrid.ImageGrid, (0, _extends2["default"])({
@@ -574,7 +577,7 @@ var ImageGallery = function ImageGallery(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 699,
+      lineNumber: 703,
       columnNumber: 11
     }
   })))));