248 lines
7.6 KiB
TypeScript
248 lines
7.6 KiB
TypeScript
// Metro module 11478 (f11479).
|
|
import { useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import { CHANNEL_TITLE_LINE_HEIGHT } from "../../channel_list_v2/native/RedesignChannelListConstants";
|
|
import { UnreadSetting } from "../../read_states/ReadStateConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { isAndroid } from "../../../_bundle/Module501";
|
|
import { Icon } from "../../../design/void/native";
|
|
import StaticChannelIndicator from "../../channel_list_v2/native/components/StaticChannelIndicator";
|
|
import { AnimatedPressableHighlight } from "../../../design/components/experimental/native";
|
|
import TouchableBackground from "../../../components_native/common/TouchableBackground";
|
|
let useStyles, c7815_10;
|
|
const BaseChannelSubtitle = function BaseChannelSubtitle(props) {
|
|
let props2;
|
|
const { mode: mode2, subtitle } = props;
|
|
if (mode2 !== c7815_10.UNREAD_IMPORTANT && (mode2 !== c7815_10.RELEVANT && mode2 !== c7815_10.SELECTED)) {
|
|
c7815_10.MUTED;
|
|
props2 = {
|
|
variant: "text-xs/medium",
|
|
color: "text-muted"
|
|
};
|
|
} else {
|
|
props2 = {
|
|
variant: "text-xs/medium",
|
|
color: "redesign-channel-name-text"
|
|
};
|
|
}
|
|
return subtitle != null ? <Text experimental_useNativeText={!isAndroid()} lineClamp={1} {...props2}>{subtitle}</Text> : null;
|
|
};
|
|
useStyles = createStyles((a0) => ({
|
|
rowPaddingNoIcon: {
|
|
paddingHorizontal: 6
|
|
},
|
|
rowSelected: {
|
|
borderRadius: Module712.modules.mobile.CHANNEL_ITEM_RADIUS,
|
|
backgroundColor: Module712.colors.MOBILE_CHANNEL_ITEM_BACKGROUND_SELECTED
|
|
},
|
|
unreadIndicator: {
|
|
left: -Module712.space.PX_8
|
|
},
|
|
channelIcon: {
|
|
width: 16,
|
|
height: 16,
|
|
marginRight: 8,
|
|
opacity: a0 === c7815_10.MUTED ? 0.5 : 1
|
|
},
|
|
redesignedChannelIcon: {
|
|
marginRight: 8,
|
|
opacity: a0 === c7815_10.MUTED ? 0.5 : 1
|
|
},
|
|
channelIconNormal: {
|
|
tintColor: Module712.colors.CHANNEL_ICON
|
|
},
|
|
channelIconUnread: {
|
|
tintColor: Module712.colors.INTERACTIVE_TEXT_ACTIVE
|
|
},
|
|
channelIconMuted: {
|
|
tintColor: Module712.colors.ICON_MUTED
|
|
},
|
|
channel: {
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 8,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
position: "relative"
|
|
},
|
|
channelNameContainer: {
|
|
flex: 1,
|
|
flexDirection: "column",
|
|
alignItems: "stretch",
|
|
justifyContent: "center"
|
|
},
|
|
channelName: {
|
|
flexGrow: 1,
|
|
textAlign: "left",
|
|
lineHeight: CHANNEL_TITLE_LINE_HEIGHT,
|
|
opacity: a0 === c7815_10.MUTED ? 0.5 : 1
|
|
}
|
|
}));
|
|
c7815_10 = {
|
|
SELECTED: "Selected",
|
|
LOCKED: "Locked",
|
|
MUTED: "Muted",
|
|
RELEVANT: "Relevant",
|
|
UNREAD_LESS_IMPORTANT: "UnreadLessImportant",
|
|
UNREAD_IMPORTANT: "UnreadImportant",
|
|
DEFAULT: "Default"
|
|
};
|
|
export default function BaseChannelItem(props) {
|
|
const { icon, name, mode, hideIcon, disableHighlightOnPress = false, channelInfo, children, unread = false, ...props2 } = props;
|
|
const styles = useStyles(mode);
|
|
const r42 = <View style={useMemo(() => {
|
|
const r0 = [styles.channel, , ,];
|
|
let r4 = hideIcon;
|
|
if (hideIcon) {
|
|
r4 = styles.rowPaddingNoIcon;
|
|
}
|
|
r0[1] = r4;
|
|
r0[2] = mode === c7815_10.SELECTED && styles.rowSelected;
|
|
return r0;
|
|
}, [hideIcon, mode, styles])}>
|
|
{hideIcon ? !hideIcon : <StaticChannelIndicator style={styles.unreadIndicator} unread={unread} resolvedUnreadSetting={mode === c7815_10.UNREAD_LESS_IMPORTANT ? UnreadSetting.ONLY_MENTIONS : UnreadSetting.ALL_MESSAGES} />}
|
|
{hideIcon ? !hideIcon : icon}
|
|
{name}
|
|
{channelInfo}
|
|
</View>;
|
|
return disableHighlightOnPress ? <TouchableBackground {...props2}>
|
|
{r42}
|
|
{children}
|
|
</TouchableBackground> : <AnimatedPressableHighlight {...props2}>
|
|
{r42}
|
|
{children}
|
|
</AnimatedPressableHighlight>;
|
|
};
|
|
export { c7815_10 as ChannelModes };
|
|
export { BaseChannelSubtitle };
|
|
export function BaseChannelIcon(props) {
|
|
let channelIconMuted;
|
|
const { disableColor, mode: mode2, source, IconComponent, style, isChannelLive } = props;
|
|
const styles2 = useStyles(mode2);
|
|
const r2 = mode2 === c7815_10.MUTED;
|
|
const r3 = mode2 === c7815_10.UNREAD_IMPORTANT;
|
|
const r4 = mode2 === c7815_10.SELECTED;
|
|
const style2 = [styles2.channelIcon];
|
|
if (disableColor !== true) {
|
|
L8: {
|
|
if (r2) {
|
|
channelIconMuted = styles2.channelIconMuted;
|
|
} else {
|
|
if (!r3 && !r4) {
|
|
channelIconMuted = styles2.channelIconNormal;
|
|
break L8;
|
|
}
|
|
channelIconMuted = styles2.channelIconUnread;
|
|
}
|
|
}
|
|
style2.push(channelIconMuted);
|
|
}
|
|
if (style != null) {
|
|
style2.push(style);
|
|
}
|
|
return IconComponent != null ? <IconComponent size="sm" style={styles2.redesignedChannelIcon} color={isChannelLive ? "status-positive" : r2 ? "icon-muted" : r3 ? "interactive-text-active" : r4 ? "interactive-text-active" : "channel-icon"} /> : <Icon disableColor={disableColor} size={Icon.Sizes.CUSTOM} style={style2} source={source} />;
|
|
}
|
|
export function useChannelNameTextProps(a0) {
|
|
let r8;
|
|
L13: {
|
|
if (a0 !== c7815_10.UNREAD_IMPORTANT && a0 !== c7815_10.RELEVANT) {
|
|
if (a0 === c7815_10.UNREAD_LESS_IMPORTANT) {
|
|
r8 = {
|
|
variant: "text-md/medium",
|
|
color: "redesign-channel-name-muted-text"
|
|
};
|
|
break L13;
|
|
}
|
|
if (a0 === c7815_10.MUTED) {
|
|
r8 = {
|
|
variant: "text-md/medium",
|
|
color: "text-muted"
|
|
};
|
|
break L13;
|
|
}
|
|
if (a0 === c7815_10.SELECTED) {
|
|
r8 = {
|
|
variant: "text-md/medium",
|
|
color: "redesign-channel-name-text"
|
|
};
|
|
break L13;
|
|
}
|
|
r8 = {
|
|
variant: "text-md/medium",
|
|
color: "redesign-channel-name-muted-text"
|
|
};
|
|
} else {
|
|
r8 = {
|
|
variant: "text-md/semibold",
|
|
color: "redesign-channel-name-text"
|
|
};
|
|
}
|
|
}
|
|
return r8;
|
|
}
|
|
export function getChannelSubtitleTextProps(a0) {
|
|
let r7;
|
|
if (a0 !== c7815_10.UNREAD_IMPORTANT && (a0 !== c7815_10.RELEVANT && a0 !== c7815_10.SELECTED)) {
|
|
c7815_10.MUTED;
|
|
r7 = {
|
|
variant: "text-xs/medium",
|
|
color: "text-muted"
|
|
};
|
|
} else {
|
|
r7 = {
|
|
variant: "text-xs/medium",
|
|
color: "redesign-channel-name-text"
|
|
};
|
|
}
|
|
return r7;
|
|
}
|
|
export function BaseChannelName(props) {
|
|
let mode2, name, props2, props3, styles2, subtitle, textStyle;
|
|
L13: {
|
|
mode2 = props.mode;
|
|
name = props.name;
|
|
subtitle = props.subtitle;
|
|
textStyle = props.textStyle;
|
|
styles2 = useStyles(mode2);
|
|
props2 = {
|
|
style: styles2.channelNameContainer,
|
|
children: null
|
|
};
|
|
if (mode2 !== c7815_10.UNREAD_IMPORTANT && mode2 !== c7815_10.RELEVANT) {
|
|
if (mode2 === c7815_10.UNREAD_LESS_IMPORTANT) {
|
|
props3 = {
|
|
variant: "text-md/medium",
|
|
color: "redesign-channel-name-muted-text"
|
|
};
|
|
break L13;
|
|
}
|
|
if (mode2 === c7815_10.MUTED) {
|
|
props3 = {
|
|
variant: "text-md/medium",
|
|
color: "text-muted"
|
|
};
|
|
break L13;
|
|
}
|
|
if (mode2 === c7815_10.SELECTED) {
|
|
props3 = {
|
|
variant: "text-md/medium",
|
|
color: "redesign-channel-name-text"
|
|
};
|
|
break L13;
|
|
}
|
|
props3 = {
|
|
variant: "text-md/medium",
|
|
color: "redesign-channel-name-muted-text"
|
|
};
|
|
} else {
|
|
props3 = {
|
|
variant: "text-md/semibold",
|
|
color: "redesign-channel-name-text"
|
|
};
|
|
}
|
|
}
|
|
props2.children = [<Text experimental_useNativeText {...props3} lineClamp={1} style={[styles2.channelName, textStyle]}>{name}</Text>, <BaseChannelSubtitle mode={mode2} subtitle={subtitle} />];
|
|
return <View {...props2} />;
|
|
}
|