111 lines
4.6 KiB
TypeScript
111 lines
4.6 KiB
TypeScript
// Metro module 8097 (f8098).
|
|
import { useMemo } from "react";
|
|
import { View, StyleSheet } from "react-native";
|
|
import { useFramePreviewOverrideStore } from "./tooling/FramePreviewOverrideStore";
|
|
import { PROFILE_FRAME_RESPONSIVE_RAIL_MIN_ASPECT_RATIO, PROFILE_FRAME_Z_INDEX } from "./ProfileFrameConstants";
|
|
import { UserProfileThemeTypes } from "../../../user_profile/native/Constants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import useProfileFrameLayerAsset from "./useProfileFrameLayerAsset";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import scaleProfileFrame from "../scaleProfileFrame";
|
|
import FramePreviewOverrideFrame from "./tooling/FramePreviewOverrideFrame";
|
|
let useStyles, LiveProfileFrame;
|
|
const ProfileFrameLayer = function ProfileFrameLayer(props) {
|
|
const { skuId, layer, overflowTop, overflowBottom, overflowHorizontal, containerWidth: containerWidth2, containerHeight: containerHeight2 } = props;
|
|
const styles = useStyles();
|
|
const width = containerWidth2 + 2 * overflowHorizontal;
|
|
const profileFrameLayerAsset = useProfileFrameLayerAsset({
|
|
skuId,
|
|
layer,
|
|
width
|
|
});
|
|
const { assetUrl, imageHeight } = profileFrameLayerAsset;
|
|
const memo = useMemo(() => {
|
|
const r1 = {
|
|
left: -overflowHorizontal,
|
|
right: -overflowHorizontal,
|
|
zIndex: PROFILE_FRAME_Z_INDEX[layer.order]
|
|
};
|
|
const type = layer.type;
|
|
if (type === "staple") {
|
|
return {
|
|
...r1,
|
|
top: layer.anchor === "top" ? -overflowTop : void 0,
|
|
bottom: layer.anchor === "bottom" ? -overflowBottom : void 0
|
|
};
|
|
}
|
|
if (type === "rail") {
|
|
return {
|
|
...r1,
|
|
justifyContent: layer.anchor !== "center" ? layer.anchor === "top" ? "flex-start" : "flex-end" : "center"
|
|
};
|
|
}
|
|
return {
|
|
...r1,
|
|
left: -overflowHorizontal
|
|
};
|
|
}, [layer.anchor, layer.type, layer.order, overflowTop, overflowBottom, overflowHorizontal]);
|
|
const r1 = layer.responsive === true && layer.type === "rail" && containerHeight2 != null && containerWidth2 / containerHeight2 >= PROFILE_FRAME_RESPONSIVE_RAIL_MIN_ASPECT_RATIO;
|
|
if (imageHeight !== 0 && assetUrl != null && !r1) {
|
|
if (layer.type === "border") {
|
|
if (containerHeight2 != null && containerHeight2 !== 0) {
|
|
return <View style={[styles.layer, memo]}>
|
|
{Array.from({
|
|
length: Math.ceil(containerHeight2 / imageHeight)
|
|
}, (a0, a1) => <FastImage key={a1} source={{
|
|
uri: assetUrl
|
|
}} resizeMode="cover" width={width} height={imageHeight} />)}
|
|
</View>;
|
|
}
|
|
return null;
|
|
}
|
|
return <View style={[styles.layer, memo]}>
|
|
<FastImage source={{
|
|
uri: assetUrl
|
|
}} resizeMode="cover" width={width} height={imageHeight} />
|
|
</View>;
|
|
}
|
|
return null;
|
|
};
|
|
LiveProfileFrame = function LiveProfileFrame(props) {
|
|
let overflowTop2, overflowBottom2, overflowHorizontal2;
|
|
const { frame, containerWidth, containerHeight, profileThemeType, frameOrder, filterLayer } = props;
|
|
overflowTop2 = void 0;
|
|
overflowBottom2 = void 0;
|
|
overflowHorizontal2 = void 0;
|
|
const styles = useStyles();
|
|
const memo = useMemo(() => frame.layers.filter((layer) => {
|
|
let r1 = frameOrder == null || frameOrder === layer.order;
|
|
if (r1) {
|
|
const r0 = filterLayer != null && !filterLayer(layer);
|
|
r1 = r0 ? !r0 : profileThemeType === UserProfileThemeTypes.PREVIEW || layer.anchor === "top" && layer.type === "staple";
|
|
}
|
|
return r1;
|
|
}), [frame.layers, frameOrder, profileThemeType, filterLayer]);
|
|
if (memo.length !== 0 && containerWidth !== 0) {
|
|
const r24 = scaleProfileFrame(frame, containerWidth);
|
|
overflowTop2 = r24.overflowTop;
|
|
overflowBottom2 = r24.overflowBottom;
|
|
overflowHorizontal2 = r24.overflowHorizontal;
|
|
return <View style={styles.container}>
|
|
{memo.map((item) => <ProfileFrameLayer key={item.id} skuId={frame.skuId} layer={item} overflowTop={overflowTop2} overflowBottom={overflowBottom2} overflowHorizontal={overflowHorizontal2} containerWidth={containerWidth} containerHeight={containerHeight} />)}
|
|
</View>;
|
|
}
|
|
return null;
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
...StyleSheet.absoluteFillObject,
|
|
pointerEvents: "none"
|
|
},
|
|
layer: {
|
|
...StyleSheet.absoluteFillObject,
|
|
alignItems: "center",
|
|
overflow: "hidden"
|
|
}
|
|
});
|
|
export default function ProfileFrame(props) {
|
|
const framePreviewOverrideStore = useFramePreviewOverrideStore((a0) => a0.override);
|
|
return framePreviewOverrideStore != null ? <FramePreviewOverrideFrame override={framePreviewOverrideStore} {...props} /> : <LiveProfileFrame {...props} />;
|
|
};
|