60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
// Metro module 11734 (f11735).
|
|
import { memo } from "react";
|
|
import { View } from "react-native";
|
|
import { AVATAR_SIZE_MAP, AvatarSizes } from "../../../../design/void/native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { CHAT_PLACEHOLDER_ROW_MARGIN_TOP, CHAT_PLACEHOLDER_ROW_LINE_HEIGHT, CHAT_PLACEHOLDER_ROW_LINE_MARGIN_TOP } from "./getChatPlaceholderRowHeight";
|
|
import getChatPlaceholderRowWidth from "./getChatPlaceholderRowWidth";
|
|
const height = AVATAR_SIZE_MAP[AvatarSizes.NORMAL];
|
|
const useStyles = createStyles({
|
|
row: {
|
|
paddingLeft: Module712.space.PX_12,
|
|
paddingTop: CHAT_PLACEHOLDER_ROW_MARGIN_TOP,
|
|
flexDirection: "row"
|
|
},
|
|
rowInner: {
|
|
marginHorizontal: Module712.space.PX_12,
|
|
flex: 1
|
|
},
|
|
placeholderAvatar: {
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
|
|
height,
|
|
width: height,
|
|
borderRadius: Module712.radii.round
|
|
},
|
|
placeholderText: {
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
|
|
height: CHAT_PLACEHOLDER_ROW_LINE_HEIGHT,
|
|
borderRadius: Module712.radii.sm
|
|
},
|
|
placeholderBody: {
|
|
marginTop: CHAT_PLACEHOLDER_ROW_LINE_MARGIN_TOP,
|
|
width: "100%"
|
|
}
|
|
});
|
|
const r75 = memo(function ChatPlaceholderRow(props) {
|
|
const lines = props.lines;
|
|
const styles = useStyles();
|
|
const r25 = Math.floor(10 * Math.random());
|
|
const r18 = Math.floor(50 * Math.random()) + 10;
|
|
const r33 = [];
|
|
let key = 0;
|
|
while (key < lines) {
|
|
r33.push(<View key={key} style={[styles.placeholderText, styles.placeholderBody, {
|
|
width: `${getChatPlaceholderRowWidth(r25 + key)}%`
|
|
}]} />);
|
|
key = key + 1;
|
|
}
|
|
return <View style={styles.row}>
|
|
<View style={styles.placeholderAvatar} />
|
|
<View style={styles.rowInner}>
|
|
<View style={[styles.placeholderText, {
|
|
width: `${r18}%`
|
|
}]} />
|
|
{r33}
|
|
</View>
|
|
</View>;
|
|
});
|
|
export default r75;
|