@sendbird/uikit-react-native/lib/module/domain/groupChannelThread/component/GroupChannelThreadHeader.js

Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

import React, { useContext } from 'react';
import { Box, Icon, Text, createStyleSheet, useHeaderStyle, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
import { GroupChannelThreadContexts } from '../module/moduleContext';
const GroupChannelThreadHeader = ({
  onPressLeft,
  onPressSubtitle
}) => {
  const {
    headerTitle,
    channel
  } = useContext(GroupChannelThreadContexts.Fragment);
  const {
    HeaderComponent
  } = useHeaderStyle();
  const {
    STRINGS
  } = useLocalization();
  const {
    select,
    colors,
    palette
  } = useUIKitTheme();
  const {
    currentUser
  } = useSendbirdChat();
  const renderSubtitle = () => {
    if (!currentUser) return null;
    return /*#__PURE__*/React.createElement(Text, {
      onPress: onPressSubtitle,
      caption2: true,
      style: styles.subtitle,
      color: select({
        light: palette.primary300,
        dark: palette.primary200
      }),
      numberOfLines: 1
    }, STRINGS.GROUP_CHANNEL_THREAD.HEADER_SUBTITLE(currentUser.userId, channel));
  };
  return /*#__PURE__*/React.createElement(HeaderComponent, {
    clearTitleMargin: true,
    title: /*#__PURE__*/React.createElement(Box, {
      style: styles.titleContainer
    }, /*#__PURE__*/React.createElement(Box, {
      flexShrink: 1,
      alignItems: 'flex-start'
    }, /*#__PURE__*/React.createElement(Text, {
      h2: true,
      color: colors.onBackground01,
      numberOfLines: 1
    }, headerTitle), renderSubtitle())),
    left: /*#__PURE__*/React.createElement(Icon, {
      icon: 'arrow-left',
      size: 24
    }),
    onPressLeft: onPressLeft
  });
};
const styles = createStyleSheet({
  titleContainer: {
    maxWidth: '100%',
    flexDirection: 'row',
    width: '100%'
  },
  subtitle: {
    marginTop: 2
  }
});
export default GroupChannelThreadHeader;
//# sourceMappingURL=GroupChannelThreadHeader.js.map