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

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ThreadList = exports.DefaultThreadListLoadingNextIndicator = exports.DefaultThreadListLoadingIndicator = exports.DefaultThreadListEmptyPlaceholder = exports.DefaultThreadListComponent = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _ThreadListItem = require("./ThreadListItem");
var _ThreadListItemSkeleton = require("./ThreadListItemSkeleton");
var _contexts = require("../../contexts");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _ThreadsContext = require("../../contexts/threadsContext/ThreadsContext");
var _hooks = require("../../hooks");
var _useLazyRef = require("../../hooks/useLazyRef");
var _utils = require("../../utils/utils");
var _EmptyStateIndicator = require("../Indicators/EmptyStateIndicator");
var _LoadingIndicator = require("../Indicators/LoadingIndicator");
var _NotificationTargetContext = require("../Notifications/NotificationTargetContext");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ThreadList/ThreadList.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 selector = nextValue => ({
  isLoading: nextValue.pagination.isLoading,
  isLoadingNext: nextValue.pagination.isLoadingNext,
  threads: nextValue.threads
});
var DefaultThreadListEmptyPlaceholder = () => (0, _jsxRuntime.jsx)(_EmptyStateIndicator.EmptyStateIndicator, {
  listType: "threads"
});
exports.DefaultThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder;
var DefaultThreadListLoadingIndicator = () => (0, _jsxRuntime.jsx)(_reactNative.View, {
  style: {
    flex: 1
  },
  children: Array.from({
    length: 10
  }).map((_, index) => (0, _jsxRuntime.jsx)(_ThreadListItemSkeleton.ThreadListItemSkeleton, {}, index))
});
exports.DefaultThreadListLoadingIndicator = DefaultThreadListLoadingIndicator;
var DefaultThreadListLoadingNextIndicator = () => (0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
  listType: "threads"
});
exports.DefaultThreadListLoadingNextIndicator = DefaultThreadListLoadingNextIndicator;
var renderItem = props => (0, _jsxRuntime.jsx)(_ThreadListItem.ThreadListItem, {
  thread: props.item
});
var DefaultThreadListComponent = () => {
  var _useThreadsContext = (0, _ThreadsContext.useThreadsContext)(),
    additionalFlatListProps = _useThreadsContext.additionalFlatListProps,
    isLoading = _useThreadsContext.isLoading,
    isLoadingNext = _useThreadsContext.isLoadingNext,
    loadMore = _useThreadsContext.loadMore,
    threads = _useThreadsContext.threads;
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    ThreadListEmptyPlaceholder = _useComponentsContext.ThreadListEmptyPlaceholder,
    ThreadListLoadingIndicator = _useComponentsContext.ThreadListLoadingIndicator,
    ThreadListLoadingMoreIndicator = _useComponentsContext.ThreadListLoadingMoreIndicator,
    ThreadListUnreadBanner = _useComponentsContext.ThreadListUnreadBanner;
  if (isLoading) {
    return (0, _jsxRuntime.jsx)(ThreadListLoadingIndicator, {});
  }
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(ThreadListUnreadBanner, {}), (0, _jsxRuntime.jsx)(_reactNative.FlatList, {
      contentContainerStyle: {
        flexGrow: 1
      },
      data: threads,
      keyExtractor: props => props.id,
      ListEmptyComponent: ThreadListEmptyPlaceholder,
      ListFooterComponent: isLoadingNext ? ThreadListLoadingMoreIndicator : undefined,
      onEndReached: loadMore,
      renderItem: renderItem,
      testID: "thread-flatlist",
      ...additionalFlatListProps
    })]
  });
};
exports.DefaultThreadListComponent = DefaultThreadListComponent;
var ThreadList = props => {
  var _props$isFocused = props.isFocused,
    isFocused = _props$isFocused === void 0 ? true : _props$isFocused,
    notificationHostIdProp = props.notificationHostId;
  var _useComponentsContext2 = (0, _ComponentsContext.useComponentsContext)(),
    NotificationList = _useComponentsContext2.NotificationList,
    ThreadListContent = _useComponentsContext2.ThreadListComponent;
  var _useChatContext = (0, _contexts.useChatContext)(),
    client = _useChatContext.client;
  var fallbackNotificationHostIdRef = (0, _useLazyRef.useLazyRef)(() => `thread-list:${(0, _utils.generateRandomId)()}`);
  var notificationHostId = notificationHostIdProp != null ? notificationHostIdProp : fallbackNotificationHostIdRef.current;
  (0, _react.useEffect)(() => {
    if (!client) {
      return;
    }
    if (isFocused) {
      client.threads.activate();
    } else {
      client.threads.deactivate();
    }
  }, [client, isFocused]);
  (0, _react.useEffect)(() => {
    if (!client) {
      return;
    }
    var listener = client.on('connection.recovered', () => {
      client.threads.reload({
        force: true
      });
    });
    return () => {
      client.threads.deactivate();
      listener.unsubscribe();
    };
  }, [client]);
  var _useStateStore = (0, _hooks.useStateStore)(client.threads.state, selector),
    isLoading = _useStateStore.isLoading,
    isLoadingNext = _useStateStore.isLoadingNext,
    threads = _useStateStore.threads;
  return (0, _jsxRuntime.jsx)(_NotificationTargetContext.NotificationTargetProvider, {
    hostId: notificationHostId,
    panel: "thread-list",
    children: (0, _jsxRuntime.jsx)(_ThreadsContext.ThreadsProvider, {
      value: {
        isLoading,
        isLoadingNext,
        loadMore: client.threads.loadNextPage,
        threads,
        ...props
      },
      children: (0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: styles.container,
        children: [(0, _jsxRuntime.jsx)(ThreadListContent, {}), (0, _jsxRuntime.jsx)(NotificationList, {})]
      })
    })
  });
};
exports.ThreadList = ThreadList;
var styles = _reactNative.StyleSheet.create({
  container: {
    flex: 1
  }
});
//# sourceMappingURL=ThreadList.js.map