97 lines
4.6 KiB
TypeScript
97 lines
4.6 KiB
TypeScript
// Metro module 11670 (f11671).
|
|
import { View } from "react-native";
|
|
import AccessibilityStore from "../../../a11y/AccessibilityStore";
|
|
import { jsx } from "react/jsx-runtime";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import useMaybeGetSortedBoosts, { useGetBoostUserConfig } from "../hooks/useMaybeGetSortedBoosts";
|
|
import { calendarFormat } from "../../../../utils/DateUtils";
|
|
import { getRelativeTimestamp } from "../../../notification_center/NotificationCenterUtils";
|
|
import { useStateFromStores } from "../../../../_bundle/Module589";
|
|
import { useProcessColorStringsArray, useIsRoleStyleAndRoleColorsEligibleForERC } from "../../enhanced_role_colors/native/EnhancedRoleColorUtils";
|
|
import { BoostGemIcon } from "../../../../design/components/Icon/native/redesign/generated/BoostGemIcon";
|
|
import { BoostTier1Icon } from "../../../../design/components/Icon/native/redesign/generated/BoostTier1Icon";
|
|
import { BoostGemSlashIcon } from "../../../../design/components/Icon/native/redesign/generated/BoostGemSlashIcon";
|
|
import { RoleDot } from "../../../../design/void/native";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import getBoostRowMessageText from "../utils/getBoostRowMessageText";
|
|
import { useExpiringBoostsEnabled } from "../experiments/ExpiringBoostsExperiment";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
let useStyles;
|
|
const GuildPowerupsRecentActivityRow = function GuildPowerupsRecentActivityRow(props) {
|
|
const { row, isExpiringBoostsEnabled } = props;
|
|
const { boost, phase, sortKey } = row;
|
|
const styles = useStyles();
|
|
const getBoostUserConfig = useGetBoostUserConfig(boost);
|
|
const { username, roleColor, roleColorStrings } = getBoostUserConfig;
|
|
const r9 = isExpiringBoostsEnabled ? calendarFormat(new Date(sortKey)) : getRelativeTimestamp(sortKey, true);
|
|
const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.roleStyle);
|
|
const r21 = stateFromStores === "username" && roleColor != null ? {
|
|
color: roleColor
|
|
} : {};
|
|
const processColorStringsArray = useProcessColorStringsArray(roleColorStrings);
|
|
const isRoleStyleAndRoleColorsEligibleForERC = useIsRoleStyleAndRoleColorsEligibleForERC(boost.guildId, boost.userId, stateFromStores, processColorStringsArray);
|
|
const r61 = phase === "gave";
|
|
return <View style={styles.boostRowContainer}>
|
|
{jsx(r61 ? BoostGemIcon : phase === "expiring" ? BoostTier1Icon : BoostGemSlashIcon, r61 ? {
|
|
color: Module712.unsafe_rawColors.GUILD_BOOSTING_PINK,
|
|
size: "sm"
|
|
} : {
|
|
size: "sm"
|
|
})}
|
|
<View style={styles.boostMessage}>
|
|
{stateFromStores === "dot" && roleColor != null && <RoleDot size="small" color={roleColor} colors={roleColorStrings} />}
|
|
<Text variant="text-md/medium" color="interactive-text-active" lineClamp={1} style={[styles.username, r21]} gradientColors={isRoleStyleAndRoleColorsEligibleForERC ? processColorStringsArray : void 0}>{username}</Text>
|
|
<Text variant="text-md/medium" color="interactive-text-active">{" "}</Text>
|
|
<Text variant="text-md/medium" lineClamp={1} style={styles.messageText}>
|
|
{getBoostRowMessageText(row)}
|
|
</Text>
|
|
</View>
|
|
<Text variant="text-xs/semibold" style={styles.timestamp}>{r9}</Text>
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
sectionContainer: {
|
|
marginTop: Module712.space.PX_16,
|
|
paddingHorizontal: Module712.space.PX_16
|
|
},
|
|
boostContainer: {
|
|
gap: Module712.space.PX_12,
|
|
marginTop: Module712.space.PX_16
|
|
},
|
|
boostRowContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 8
|
|
},
|
|
boostMessage: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
username: {
|
|
maxWidth: 170,
|
|
flexShrink: 1
|
|
},
|
|
messageText: {
|
|
flexShrink: 0
|
|
},
|
|
timestamp: {
|
|
flexShrink: 0
|
|
}
|
|
});
|
|
export default function GuildPowerupsRecentActivitySection(props) {
|
|
const guildId = props.guildId;
|
|
const styles = useStyles();
|
|
const maybeGetSortedBoosts = useMaybeGetSortedBoosts(guildId, 10);
|
|
const expiringBoostsEnabled = useExpiringBoostsEnabled("GuildPowerupsRecentActivity");
|
|
return maybeGetSortedBoosts.length !== 0 ? <View style={styles.sectionContainer}>
|
|
<Text variant="heading-lg/semibold" color="text-subtle">
|
|
{intl.string(t.yM9Krm)}
|
|
</Text>
|
|
<View style={styles.boostContainer}>
|
|
{maybeGetSortedBoosts.map((maybeGetSortedBoost) => <GuildPowerupsRecentActivityRow key={`boost-${maybeGetSortedBoost.boost.id}`} row={maybeGetSortedBoost} isExpiringBoostsEnabled={expiringBoostsEnabled} />)}
|
|
</View>
|
|
</View> : null;
|
|
};
|