117 lines
4.7 KiB
TypeScript
117 lines
4.7 KiB
TypeScript
// Metro module 13930 (f13931).
|
|
import { useState, useCallback } from "react";
|
|
import { ActivityIndicator, View } from "react-native";
|
|
import { FAMILY_CENTER_ITEMS_SHOWN_INCREMENTS, TeenActionDisplayType } from "../FamilyCenterConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import useIsInAdultAgeGroup from "../hooks/useIsInAdultAgeGroup";
|
|
import { getActivityTypeTextConfigs } from "../FamilyCenterUtils";
|
|
import { useActionsForDisplayType, useFormattedTotalForDisplayType, useActionTotalsForDisplayType } from "../hooks/useFamilyCenterActivities";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { useFamilyCenterActions } from "../hooks/useFamilyCenterActions";
|
|
import { intl } from "../../../intl/index.native";
|
|
import FamilyCenter_messages from "../FamilyCenter.messages";
|
|
import FamilyCenterActivityRow from "./FamilyCenterActivityRow";
|
|
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
let useStyles, useStyles2;
|
|
const FamilyCenterActivitySectionHeader = function FamilyCenterActivitySectionHeader(props) {
|
|
let r31;
|
|
const displayType2 = props.displayType;
|
|
const styles = useStyles();
|
|
let r17 = useIsInAdultAgeGroup();
|
|
const r11 = getActivityTypeTextConfigs().get(displayType2);
|
|
const actionsForDisplayType = useActionsForDisplayType(displayType2);
|
|
const formattedTotalForDisplayType = useFormattedTotalForDisplayType(displayType2);
|
|
if (!(displayType2 !== TeenActionDisplayType.PURCHASES && displayType2 !== TeenActionDisplayType.GIFTS)) {
|
|
r31 = formattedTotalForDisplayType;
|
|
if (r31 === null) {
|
|
r31 = actionsForDisplayType.length;
|
|
}
|
|
} else {
|
|
r31 = actionsForDisplayType.length;
|
|
}
|
|
const r34 = r11 == null ? void 0 : r11.sectionHeader(r31);
|
|
const sectionDescription = r11?.sectionDescription;
|
|
let r38 = null;
|
|
if (sectionDescription !== void 0) {
|
|
const r39 = r11 == null;
|
|
let r40 = void 0;
|
|
if (!r39) {
|
|
if (r17 == null) {
|
|
r17 = false;
|
|
}
|
|
r40 = r11.sectionDescription(r17);
|
|
}
|
|
r38 = r40;
|
|
}
|
|
return <View>
|
|
<Text variant="text-sm/semibold" style={styles.header}>{r34}</Text>
|
|
{r38 !== null ? <Text variant="text-sm/medium" color="text-muted" style={styles.description}>{r38}</Text> : null}
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
header: {
|
|
marginBottom: Module712.space.PX_4
|
|
},
|
|
description: {
|
|
marginBottom: Module712.space.PX_8
|
|
}
|
|
});
|
|
useStyles2 = createStyles({
|
|
container: {
|
|
display: "flex"
|
|
},
|
|
loadMoreContainer: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
width: "100%"
|
|
},
|
|
loadMore: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderBottomRightRadius: Module712.radii.sm,
|
|
borderBottomLeftRadius: Module712.radii.sm,
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
|
|
width: "60%"
|
|
},
|
|
loadMoreButton: {
|
|
paddingVertical: 4
|
|
}
|
|
});
|
|
export default function FamilyCenterActivitySection(props) {
|
|
const displayType = props.displayType;
|
|
const styles2 = useStyles2();
|
|
const actionsForDisplayType = useActionsForDisplayType(displayType);
|
|
const actionTotalsForDisplayType = useActionTotalsForDisplayType(displayType);
|
|
const familyCenterActions = useFamilyCenterActions({});
|
|
const { loadMore, isMoreLoading } = familyCenterActions;
|
|
const [state, setState] = useState(FAMILY_CENTER_ITEMS_SHOWN_INCREMENTS);
|
|
const r38 = actionsForDisplayType.slice(0, state);
|
|
const callback = useCallback(() => {
|
|
setState((prevState) => prevState + FAMILY_CENTER_ITEMS_SHOWN_INCREMENTS);
|
|
loadMore(displayType);
|
|
}, [loadMore, displayType]);
|
|
if (actionsForDisplayType.length === 0) {
|
|
return null;
|
|
}
|
|
const accessibilityLabel = intl.formatToPlainString(FamilyCenter_messages["7dMmJY"], {
|
|
pageSize: Math.min(actionTotalsForDisplayType - r38.length, FAMILY_CENTER_ITEMS_SHOWN_INCREMENTS)
|
|
});
|
|
return <View style={styles2.container}>
|
|
<FamilyCenterActivitySectionHeader displayType={displayType} />
|
|
{r38.map((item) => <FamilyCenterActivityRow key={item.event_id} action={item} />)}
|
|
{r38.length < actionTotalsForDisplayType ? <View style={styles2.loadMoreContainer}>
|
|
{isMoreLoading ? <View style={styles2.loadMore}>
|
|
<ActivityIndicator style={styles2.loadMoreButton} animating color="#fff" size="small" />
|
|
</View> : <PressableOpacity style={styles2.loadMore} accessibilityLabel={accessibilityLabel} accessibilityRole="button" onPress={callback}>
|
|
<Text style={styles2.loadMoreButton} variant="text-xs/semibold" color="text-overlay-light">{accessibilityLabel}</Text>
|
|
</PressableOpacity>}
|
|
</View> : null}
|
|
</View>;
|
|
};
|