270 lines
11 KiB
TypeScript
270 lines
11 KiB
TypeScript
// Metro module 13920 (f13921).
|
|
import * as Module19 from "react";
|
|
import { useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import { FamilyCenterAction, TeenActionDisplayType } from "../FamilyCenterConstants";
|
|
import { AnalyticEvents } from "../../../Constants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import useIsInAdultAgeGroup from "../hooks/useIsInAdultAgeGroup";
|
|
import { useActiveLinkUserIds, useActivityWindowTimeStamp, useActiveLinkUsers } from "../hooks/useUserLinks";
|
|
import { getActivityWindowTimestampFormatter, getSortedActivityTypeConfigs } from "../FamilyCenterUtils";
|
|
import { useAgeSpecificText } from "../hooks/useAgeSpecificText";
|
|
import { intl } from "../../../intl/index.native";
|
|
import FamilyCenter_messages from "../FamilyCenter.messages";
|
|
import { Icon, AVATAR_SIZE_MAP, AvatarSizes, Avatar } from "../../../design/void/native";
|
|
import Module13921 from "../../../_bundle/Module13921";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import TouchableHitBox from "../../../design/void/TouchableHitBox/native/TouchableHitBox";
|
|
import ModalActionCreators from "../../../actions/ModalActionCreators";
|
|
import Module6550 from "../../../_bundle/Module6550";
|
|
import FamilyCenterUsernameHeader from "./FamilyCenterUsernameHeader";
|
|
import { useSelectedTeenUser } from "../hooks/useSelectedTeenUser";
|
|
import { useFamilyCenterActions } from "../hooks/useFamilyCenterActions";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import { presentFailedToast } from "../../toast/native/ToastUtils";
|
|
import UserUtils from "../../../utils/UserUtils";
|
|
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
|
|
import Module10737 from "../../../_bundle/Module10737";
|
|
import { useHasActionForAnyDisplayType } from "../hooks/useFamilyCenterActivities";
|
|
import FamilyCenterActivityTotal from "./FamilyCenterActivityTotal";
|
|
import FamilyCenterTopActivity from "./FamilyCenterTopActivity";
|
|
import FamilyCenterActivitySection from "./FamilyCenterActivitySection";
|
|
import FamilyCenterSettingsControls from "./FamilyCenterSettingsControls";
|
|
let c9712_10, useStyles, FamilyCenterHeaderSubText, useStyles2, Component, FamilyCenterActivityCardHeader, useStyles3, FamilyCenterActivityCardAccountSelect, useStyles4;
|
|
const FamilyCenterActivityCardPrefaceText = function FamilyCenterActivityCardPrefaceText() {
|
|
const styles2 = useStyles();
|
|
const isInAdultAgeGroup = useIsInAdultAgeGroup();
|
|
const activeLinkUserIds = useActiveLinkUserIds();
|
|
const activityWindowTimeStamp = useActivityWindowTimeStamp(getActivityWindowTimestampFormatter(!!isInAdultAgeGroup));
|
|
const ageSpecificText = useAgeSpecificText(intl.formatToPlainString(FamilyCenter_messages.tazvHQ, {
|
|
activeLinks: activeLinkUserIds.length
|
|
}), intl.string(FamilyCenter_messages.KrLnkE));
|
|
return <View style={styles2.container}>
|
|
{isInAdultAgeGroup ? null : <Icon color={styles2.icon.color} source={Module13921} style={styles2.icon} />}
|
|
<Text style={styles2.text} variant="text-xs/semibold" color="text-subtle">
|
|
{activeLinkUserIds.length > 1 ? isInAdultAgeGroup ? activityWindowTimeStamp : ageSpecificText : ageSpecificText}
|
|
</Text>
|
|
<TouchableHitBox onPress={function onPress() {
|
|
ModalActionCreators.pushLazy(import("./FamilyCenterModalDataTooltip"));
|
|
}}>
|
|
<Icon color={styles2.icon.color} source={Module6550} size={Icon.Sizes.EXTRA_SMALL} style={styles2.icon} />
|
|
</TouchableHitBox>
|
|
</View>;
|
|
};
|
|
FamilyCenterHeaderSubText = function FamilyCenterHeaderSubText() {
|
|
const isInAdultAgeGroup = useIsInAdultAgeGroup();
|
|
const activeLinkUserIds = useActiveLinkUserIds();
|
|
const activityWindowTimeStamp = useActivityWindowTimeStamp(getActivityWindowTimestampFormatter(!!isInAdultAgeGroup));
|
|
return isInAdultAgeGroup ? activeLinkUserIds.length > 1 ? null : <Text variant="text-sm/medium" color="text-muted">{activityWindowTimeStamp}</Text> : <Text variant="text-sm/medium" color="text-muted">{activityWindowTimeStamp}</Text>;
|
|
};
|
|
FamilyCenterActivityCardHeader = function FamilyCenterActivityCardHeader() {
|
|
const activeLinkUserIds = useActiveLinkUserIds();
|
|
const isInAdultAgeGroup = useIsInAdultAgeGroup();
|
|
const selectedTeenUser2 = useSelectedTeenUser();
|
|
return selectedTeenUser2 !== void 0 ? isInAdultAgeGroup && activeLinkUserIds.length !== 1 ? <FamilyCenterActivityCardAccountSelect /> : <View>
|
|
<Component user={selectedTeenUser2} />
|
|
</View> : null;
|
|
};
|
|
FamilyCenterActivityCardAccountSelect = function FamilyCenterActivityCardAccountSelect() {
|
|
let memo;
|
|
const styles3 = useStyles3();
|
|
const activeLinkUsers = useActiveLinkUsers();
|
|
const selectedTeenUser = useSelectedTeenUser();
|
|
const selectTeenUser = useFamilyCenterActions({
|
|
onSuccess: () => ActionSheetActionCreators.hideActionSheet(c9712_10),
|
|
onError: () => presentFailedToast(intl.string(FamilyCenter_messages.Wu8BK2))
|
|
}).selectTeenUser;
|
|
memo = useMemo(() => activeLinkUsers.map((activeLinkUser) => ({
|
|
label: `${UserUtils.getName(activeLinkUser)} (${UserUtils.getUserTag(activeLinkUser)})`,
|
|
value: activeLinkUser.id
|
|
})), [activeLinkUsers]);
|
|
return selectedTeenUser !== void 0 ? <View>
|
|
<TouchableHitBox style={styles3.touch} accessibilityRole="spinbutton" onPress={function onPress() {
|
|
if (selectedTeenUser !== void 0) {
|
|
ActionSheetActionCreators.openLazy(import("../../../components_native/common/ItemSelectorActionSheet"), c9712_10, {
|
|
title: intl.string(FamilyCenter_messages.vORl9Q),
|
|
items: memo,
|
|
onItemSelect: (a0) => {
|
|
if (a0 != null && a0 !== selectedTeenUser.id) {
|
|
selectTeenUser(a0);
|
|
AnalyticsUtils.track(AnalyticEvents.FAMILY_CENTER_ACTION, {
|
|
action: FamilyCenterAction.SelectTeen
|
|
});
|
|
}
|
|
setImmediate(() => {
|
|
ActionSheetActionCreators.hideActionSheet(c9712_10);
|
|
});
|
|
},
|
|
selectedItem: selectedTeenUser.id,
|
|
hasIcons: false
|
|
});
|
|
}
|
|
}}>
|
|
<Component user={selectedTeenUser} inSelector />
|
|
<Icon style={styles3.icon} size={Icon.Sizes.MEDIUM} source={Module10737} />
|
|
</TouchableHitBox>
|
|
</View> : null;
|
|
};
|
|
c9712_10 = "FamilyCenterTeenAccountSelect";
|
|
useStyles = createStyles({
|
|
container: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
icon: {
|
|
color: Module712.colors.ICON_SUBTLE,
|
|
width: Module712.space.PX_16,
|
|
height: Module712.space.PX_16
|
|
},
|
|
text: {
|
|
marginHorizontal: Module712.space.PX_4
|
|
}
|
|
});
|
|
useStyles2 = createStyles({
|
|
header: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
padding: Module712.space.PX_12,
|
|
flex: 1,
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGHEST,
|
|
borderTopLeftRadius: Module712.radii.md,
|
|
borderTopRightRadius: Module712.radii.md
|
|
},
|
|
avatar: {
|
|
borderRadius: AVATAR_SIZE_MAP[AvatarSizes.NORMAL] / 2,
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
|
|
},
|
|
avatarContainer: {
|
|
marginRight: Module712.space.PX_12,
|
|
alignItems: "flex-start"
|
|
},
|
|
userHeader: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "100%",
|
|
paddingRight: Module712.space.PX_16
|
|
},
|
|
nonSelectorHeader: {
|
|
flex: 1,
|
|
paddingRight: Module712.space.PX_16
|
|
}
|
|
});
|
|
Component = Module19.memo(({ user, inSelector }) => {
|
|
const styles2 = useStyles2();
|
|
return <View style={styles2.header}>
|
|
<View style={styles2.avatarContainer}>
|
|
<Avatar avatarStyle={styles2.avatar} user={user} guildId={void 0} disablePlaceholder avatarDecoration={user.avatarDecoration} size={inSelector ? AvatarSizes.SMALL : AvatarSizes.NORMAL} />
|
|
</View>
|
|
<View style={[styles2.userHeader, inSelector ? void 0 : styles2.nonSelectorHeader]}>
|
|
<FamilyCenterUsernameHeader user={user} />
|
|
<FamilyCenterHeaderSubText />
|
|
</View>
|
|
</View>;
|
|
});
|
|
Component.displayName = "FamilyCenterActivityCardAccount";
|
|
useStyles3 = createStyles({
|
|
touch: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "flex-start",
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGHEST,
|
|
...Module712.shadows.SHADOW_LOW
|
|
},
|
|
icon: {
|
|
color: Module712.colors.INTERACTIVE_TEXT_DEFAULT,
|
|
width: Module712.space.PX_24,
|
|
height: Module712.space.PX_24,
|
|
transform: [{
|
|
rotate: "90deg"
|
|
}],
|
|
marginHorizontal: Module712.space.PX_8
|
|
}
|
|
});
|
|
useStyles4 = createStyles({
|
|
card: {
|
|
marginTop: Module712.space.PX_16
|
|
},
|
|
preface: {
|
|
display: "flex",
|
|
marginBottom: Module712.space.PX_12
|
|
},
|
|
container: {
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
|
|
borderRadius: Module712.radii.md
|
|
},
|
|
content: {
|
|
padding: Module712.space.PX_16,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: Module712.space.PX_32
|
|
},
|
|
totals: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
justifyContent: "space-between",
|
|
gap: Module712.space.PX_8
|
|
},
|
|
first: {
|
|
width: "100%"
|
|
},
|
|
other: {
|
|
width: "48.5%"
|
|
},
|
|
activities: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: Module712.space.PX_32
|
|
},
|
|
settingsControls: {
|
|
marginTop: Module712.space.PX_24
|
|
}
|
|
});
|
|
export default function FamilyCenterActivityCard() {
|
|
const styles = useStyles4();
|
|
const selectedTeenUser2 = useSelectedTeenUser();
|
|
const hasActionForAnyDisplayType = useHasActionForAnyDisplayType();
|
|
if (selectedTeenUser2 === void 0) {
|
|
return null;
|
|
}
|
|
const sortedActivityTypeConfigs = getSortedActivityTypeConfigs();
|
|
return <View style={styles.card}>
|
|
<View style={styles.preface}>
|
|
<FamilyCenterActivityCardPrefaceText />
|
|
</View>
|
|
<View style={styles.container}>
|
|
<FamilyCenterActivityCardHeader />
|
|
<View style={styles.content}>
|
|
<View style={styles.totals}>
|
|
{sortedActivityTypeConfigs.filter((sortedActivityTypeConfig) => {
|
|
const [r8] = sortedActivityTypeConfig;
|
|
return r8 !== TeenActionDisplayType.GIFTS;
|
|
}).map((item, index) => {
|
|
const [displayType, , ] = item;
|
|
return <View key={`total-${displayType}`} style={index === 0 ? styles.first : styles.other}>
|
|
<FamilyCenterActivityTotal displayType={displayType} />
|
|
</View>;
|
|
})}
|
|
</View>
|
|
<FamilyCenterTopActivity />
|
|
{hasActionForAnyDisplayType ? <View style={styles.activities}>
|
|
{sortedActivityTypeConfigs.map((sortedActivityTypeConfig) => {
|
|
const [displayType, , ] = sortedActivityTypeConfig;
|
|
return <FamilyCenterActivitySection key={`section-${displayType}`} displayType={displayType} />;
|
|
})}
|
|
</View> : null}
|
|
</View>
|
|
</View>
|
|
<View style={styles.settingsControls}>
|
|
<FamilyCenterSettingsControls />
|
|
</View>
|
|
</View>;
|
|
};
|
|
export { Component as FamilyCenterActivityCardAccount };
|
|
export { FamilyCenterActivityCardHeader };
|
|
export { FamilyCenterActivityCardAccountSelect };
|