stream-chat-react-native-core/lib/module/components/ChannelList/ChannelListView.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ChannelListView = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _ChannelsContext = require("../../contexts/channelsContext/ChannelsContext");
var _ChatContext = require("../../contexts/chatContext/ChatContext");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _DebugContext = require("../../contexts/debugContext/DebugContext");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _hooks = require("../../hooks");
var _ChannelPreview = require("../ChannelPreview/ChannelPreview");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ChannelList/ChannelListView.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var StatusIndicator = () => {
  var _useChatContext = (0, _ChatContext.useChatContext)(),
    isOnline = _useChatContext.isOnline;
  var styles = useStyles();
  var _useChannelsContext = (0, _ChannelsContext.useChannelsContext)(),
    error = _useChannelsContext.error,
    loadingChannels = _useChannelsContext.loadingChannels,
    refreshList = _useChannelsContext.refreshList;
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    ChannelListHeaderErrorIndicator = _useComponentsContext.ChannelListHeaderErrorIndicator,
    ChannelListHeaderNetworkDownIndicator = _useComponentsContext.ChannelListHeaderNetworkDownIndicator;
  if (loadingChannels) {
    return null;
  }
  if (!isOnline) {
    return (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.statusIndicator,
      children: (0, _jsxRuntime.jsx)(ChannelListHeaderNetworkDownIndicator, {})
    });
  } else if (error) {
    return (0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.statusIndicator,
      children: (0, _jsxRuntime.jsx)(ChannelListHeaderErrorIndicator, {
        onPress: refreshList
      })
    });
  }
  return null;
};
var renderItem = ({
  item
}) => (0, _jsxRuntime.jsx)(_ChannelPreview.ChannelPreview, {
  channel: item
});
var keyExtractor = item => item.cid;
var ChannelListViewWithContext = props => {
  var onEndReachedCalledDuringCurrentScrollRef = (0, _react.useRef)(false);
  var additionalFlatListProps = props.additionalFlatListProps,
    channelListInitialized = props.channelListInitialized,
    channels = props.channels,
    error = props.error,
    forceUpdate = props.forceUpdate,
    hasNextPage = props.hasNextPage,
    loadingChannels = props.loadingChannels,
    loadingNextPage = props.loadingNextPage,
    loadMoreThreshold = props.loadMoreThreshold,
    loadNextPage = props.loadNextPage,
    refreshing = props.refreshing,
    refreshList = props.refreshList,
    reloadList = props.reloadList,
    setFlatListRef = props.setFlatListRef;
  var _useComponentsContext2 = (0, _ComponentsContext.useComponentsContext)(),
    EmptyStateIndicator = _useComponentsContext2.EmptyStateIndicator,
    ChannelListFooterLoadingIndicator = _useComponentsContext2.ChannelListFooterLoadingIndicator,
    ListHeaderComponent = _useComponentsContext2.ListHeaderComponent,
    LoadingErrorIndicator = _useComponentsContext2.LoadingErrorIndicator,
    LoadingIndicator = _useComponentsContext2.ChannelListLoadingIndicator;
  var _useState = (0, _react.useState)(true),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    loading = _useState2[0],
    setLoading = _useState2[1];
  var debugRef = (0, _DebugContext.useDebugContext)();
  var styles = useStyles();
  (0, _react.useEffect)(() => {
    if (!!loadingChannels !== loading) {
      setLoading(!!loadingChannels);
    }
  }, [loading, loadingChannels]);
  var isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
  if (isDebugModeEnabled) {
    if (debugRef.current.setEventType) {
      debugRef.current.setEventType('send');
    }
    if (debugRef.current.setSendEventParams) {
      debugRef.current.setSendEventParams({
        action: 'Channels',
        data: channels?.map(channel => ({
          data: channel.data,
          members: channel.state.members
        }))
      });
    }
  }
  var onEndReached = (0, _hooks.useStableCallback)(() => {
    if (!onEndReachedCalledDuringCurrentScrollRef.current && hasNextPage) {
      loadNextPage();
      onEndReachedCalledDuringCurrentScrollRef.current = true;
    }
  });
  if (error && !refreshing && !loadingChannels && (channels === null || !channelListInitialized)) {
    return (0, _jsxRuntime.jsx)(LoadingErrorIndicator, {
      error: error,
      listType: "channel",
      loadNextPage: loadNextPage,
      retry: reloadList
    });
  }
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
      contentContainerStyle: styles.flatListContentContainer,
      data: channels,
      extraData: forceUpdate,
      keyExtractor: keyExtractor,
      ListEmptyComponent: loading ? (0, _jsxRuntime.jsx)(LoadingIndicator, {}) : (0, _jsxRuntime.jsx)(EmptyStateIndicator, {
        listType: "channel"
      }),
      ListFooterComponent: loadingNextPage ? (0, _jsxRuntime.jsx)(ChannelListFooterLoadingIndicator, {}) : undefined,
      ListHeaderComponent: ListHeaderComponent,
      onEndReached: onEndReached,
      onEndReachedThreshold: loadMoreThreshold,
      onMomentumScrollBegin: () => onEndReachedCalledDuringCurrentScrollRef.current = false,
      onRefresh: refreshList,
      ref: setFlatListRef,
      refreshing: refreshing,
      renderItem: renderItem,
      style: styles.flatList,
      testID: "channel-list-view",
      ...additionalFlatListProps
    }), (0, _jsxRuntime.jsx)(StatusIndicator, {})]
  });
};
var ChannelListView = props => {
  var _useChannelsContext2 = (0, _ChannelsContext.useChannelsContext)(),
    additionalFlatListProps = _useChannelsContext2.additionalFlatListProps,
    channelListInitialized = _useChannelsContext2.channelListInitialized,
    channels = _useChannelsContext2.channels,
    error = _useChannelsContext2.error,
    forceUpdate = _useChannelsContext2.forceUpdate,
    hasNextPage = _useChannelsContext2.hasNextPage,
    loadingChannels = _useChannelsContext2.loadingChannels,
    loadingNextPage = _useChannelsContext2.loadingNextPage,
    loadMoreThreshold = _useChannelsContext2.loadMoreThreshold,
    loadNextPage = _useChannelsContext2.loadNextPage,
    refreshing = _useChannelsContext2.refreshing,
    refreshList = _useChannelsContext2.refreshList,
    reloadList = _useChannelsContext2.reloadList,
    setFlatListRef = _useChannelsContext2.setFlatListRef;
  return (0, _jsxRuntime.jsx)(ChannelListViewWithContext, {
    additionalFlatListProps,
    channelListInitialized,
    channels,
    error,
    forceUpdate,
    hasNextPage,
    loadingChannels,
    loadingNextPage,
    loadMoreThreshold,
    loadNextPage,
    refreshing,
    refreshList,
    reloadList,
    setFlatListRef,
    ...props
  });
};
exports.ChannelListView = ChannelListView;
ChannelListView.displayName = 'ChannelListView{channelListView}';
var useStyles = () => {
  var _useTheme = (0, _ThemeContext.useTheme)(),
    _useTheme$theme = _useTheme.theme,
    semantics = _useTheme$theme.semantics,
    _useTheme$theme$chann = _useTheme$theme.channelListView,
    flatList = _useTheme$theme$chann.flatList,
    flatListContent = _useTheme$theme$chann.flatListContent;
  return (0, _react.useMemo)(() => {
    return _reactNative.StyleSheet.create({
      flatList: {
        flex: 1,
        backgroundColor: semantics.backgroundCoreApp,
        ...flatList
      },
      flatListContentContainer: {
        flexGrow: 1,
        backgroundColor: semantics.backgroundCoreApp,
        ...flatListContent
      },
      statusIndicator: {
        left: 0,
        position: 'absolute',
        right: 0,
        top: 0
      }
    });
  }, [flatList, flatListContent, semantics]);
};
//# sourceMappingURL=ChannelListView.js.map