336 lines
14 KiB
TypeScript
336 lines
14 KiB
TypeScript
// Metro module 14952 (f14953).
|
|
import { useMemo, useCallback, useContext, useRef, useEffect } from "react";
|
|
import { IOS_POINTER_STYLE } from "../../../design/components/Styles/native/styleConstants";
|
|
import { GUILD_ITEM_HIT_SLOP, useGuildWrapperSize } from "./GuildsBarConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useToken } from "../../../design/tokens/native/useToken";
|
|
import * as _TransitionGroup from "../../../design/components/TransitionGroup/TransitionGroup";
|
|
import { TransitionItem } from "../../../design/components/TransitionGroup/TransitionGroup";
|
|
import * as _spring from "../../../design/animation/reanimated/spring/spring";
|
|
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
|
|
import { useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
|
|
import ReanimatedNativeView from "../../core/native/ReanimatedNativeView";
|
|
import usePressability from "../../core/native/usePressability";
|
|
import { HomeDrawerStateContext } from "../../home_drawer/native/useHomeDrawerGesture";
|
|
import { MobileHomeDrawerExperiment } from "../../home_drawer/native/HomeDrawerExperiment";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { AccessibilityAnnouncer } from "../../../_bundle/Module3902";
|
|
import NativeView from "../../core/native/NativeView";
|
|
import { ClipViewAnimated } from "../../../design/components/Icon/native/ClipView";
|
|
let CORNER_SPRING_PHYSICS, BAR_SPRING_PHYSICS, useStyles, useStyles2, __initData, __initData2, renderUnreadIndicator, __initData3;
|
|
const UnreadIndicator = function UnreadIndicator(props) {
|
|
const { selected: selected2, sharedId, id, transitionState = _TransitionGroup.TransitionStates.MOUNTED } = props;
|
|
const MOUNTED = transitionState;
|
|
const cleanUp = props.cleanUp;
|
|
const token = useToken(Module712.modules.mobile.GUILD_BAR_ITEM_SIZE);
|
|
const styles = useStyles(useGuildWrapperSize());
|
|
const disableEntering = MOUNTED === _TransitionGroup.TransitionStates.MOUNTED;
|
|
let c21485_6 = disableEntering;
|
|
const height = selected2 ? MOUNTED !== _TransitionGroup.TransitionStates.YEETED ? 40 : 8 : 8;
|
|
const memo = useMemo(() => [styles.unreadIndicator, {
|
|
height,
|
|
marginTop: height / 2 * -1,
|
|
marginLeft: MOUNTED === _TransitionGroup.TransitionStates.YEETED ? -4 : 0
|
|
}], [height, MOUNTED, styles.unreadIndicator]);
|
|
const h = function h(a0) {
|
|
let r31;
|
|
L5: {
|
|
L4: {
|
|
if (!c21485_6) {
|
|
if (sharedId != null && sharedId.get() !== id) {
|
|
break L4;
|
|
}
|
|
r31 = {
|
|
animations: {
|
|
originY: _spring.withSpring(a0.targetOriginY, BAR_SPRING_PHYSICS, "animate-always"),
|
|
originX: _spring.withSpring(a0.targetOriginX, BAR_SPRING_PHYSICS, "animate-always"),
|
|
height: _spring.withSpring(a0.targetHeight, BAR_SPRING_PHYSICS, "animate-always")
|
|
},
|
|
initialValues: {
|
|
height: 8,
|
|
originY: token / 2,
|
|
originX: -12
|
|
}
|
|
};
|
|
break L5;
|
|
}
|
|
}
|
|
r31 = {
|
|
animations: {},
|
|
initialValues: {}
|
|
};
|
|
}
|
|
return r31;
|
|
};
|
|
h.__closure = {
|
|
disableEntering,
|
|
sharedId,
|
|
id,
|
|
withSpring: _spring.withSpring,
|
|
BAR_SPRING_PHYSICS,
|
|
guildItemSize: token
|
|
};
|
|
h.__workletHash = 404454683979;
|
|
h.__initData = __initData;
|
|
const callback2 = useCallback(h, [disableEntering, sharedId, id, token]);
|
|
const _ = function _(a0) {
|
|
return {
|
|
animations: {
|
|
originY: _spring.withSpring(a0.targetOriginY, BAR_SPRING_PHYSICS, "animate-always"),
|
|
originX: _spring.withSpring(a0.targetOriginX, BAR_SPRING_PHYSICS, "animate-always"),
|
|
height: _spring.withSpring(a0.targetHeight, BAR_SPRING_PHYSICS, "animate-always")
|
|
},
|
|
initialValues: {
|
|
height: a0.currentHeight,
|
|
originY: a0.currentOriginY,
|
|
originX: a0.currentOriginX
|
|
},
|
|
callback: (a0) => {
|
|
if (MOUNTED === _TransitionGroup.TransitionStates.YEETED && a0 && cleanUp != null) {
|
|
_ReanimatedRexport.runOnJS(cleanUp)();
|
|
}
|
|
}
|
|
};
|
|
};
|
|
_.__closure = {
|
|
withSpring: _spring.withSpring,
|
|
BAR_SPRING_PHYSICS,
|
|
transitionState: MOUNTED,
|
|
TransitionStates: _TransitionGroup.TransitionStates,
|
|
cleanUp,
|
|
runOnJS: _ReanimatedRexport.runOnJS
|
|
};
|
|
_.__workletHash = 10632665703864;
|
|
_.__initData = __initData2;
|
|
return <ReanimatedNativeView collapsable={false} entering={callback2} layout={useCallback(_, [MOUNTED, cleanUp])} style={memo} pointerEvents="none" />;
|
|
};
|
|
renderUnreadIndicator = function renderUnreadIndicator(a0, a1, a2, a3) {
|
|
return <UnreadIndicator key={a0} sharedId={a1.sharedId} id={a1.id} selected={a1.selected} transitionState={a2} cleanUp={a3} />;
|
|
};
|
|
CORNER_SPRING_PHYSICS = {
|
|
mass: 0.8,
|
|
damping: 100,
|
|
stiffness: 150
|
|
};
|
|
BAR_SPRING_PHYSICS = {
|
|
mass: 0.25,
|
|
damping: 100,
|
|
stiffness: 200
|
|
};
|
|
useStyles = createStyles(function(height2 = 56) {
|
|
return {
|
|
draggedElement: {
|
|
opacity: 0
|
|
},
|
|
selectedBackgroundOverlay: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0
|
|
},
|
|
container: {
|
|
position: "relative",
|
|
overflow: "visible"
|
|
},
|
|
unreadIndicator: {
|
|
position: "absolute",
|
|
top: height2 / 2,
|
|
left: -4,
|
|
height: 8,
|
|
width: 8,
|
|
borderRadius: Module712.radii.xs,
|
|
backgroundColor: Module712.colors.TEXT_STRONG
|
|
},
|
|
expandedChildrenWrapper: {
|
|
position: "absolute",
|
|
left: height2 + 16,
|
|
top: 0,
|
|
right: 8,
|
|
height: height2,
|
|
transformOrigin: "0% 50%",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
}
|
|
};
|
|
});
|
|
useStyles2 = createStyles((a0, a1, a2, a3) => {
|
|
let backgroundColor;
|
|
let r25 = "transparent";
|
|
if (a0) {
|
|
if (!a1) {
|
|
r25 = Module712.colors.BACKGROUND_SURFACE_HIGH;
|
|
}
|
|
backgroundColor = r25;
|
|
} else {
|
|
backgroundColor = Module712.colors.BACKGROUND_BRAND;
|
|
}
|
|
return {
|
|
pressableWrapper: {
|
|
position: "relative",
|
|
paddingTop: Module712.modules.mobile.GUILD_BAR_ITEM_MARGIN,
|
|
paddingBottom: Module712.modules.mobile.GUILD_BAR_ITEM_MARGIN,
|
|
paddingLeft: 12,
|
|
height: a3,
|
|
width: a2 + GUILD_ITEM_HIT_SLOP.left + GUILD_ITEM_HIT_SLOP.right
|
|
},
|
|
itemShape: {
|
|
position: "relative",
|
|
width: a2,
|
|
height: a2,
|
|
overflow: "hidden",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: a1 ? "transparent" : Module712.colors.MOBILE_GUILDBAR_ICON_BACKGROUND_DEFAULT
|
|
},
|
|
itemShapeSelected: {
|
|
backgroundColor
|
|
}
|
|
};
|
|
});
|
|
__initData = {
|
|
code: "function GuildsBarAnimatedItemWrapperTsx1(values){const{disableEntering,sharedId,id,withSpring,BAR_SPRING_PHYSICS,guildItemSize}=this.__closure;if(disableEntering||sharedId!=null&&sharedId.get()!==id){return{animations:{},initialValues:{}};}return{animations:{originY:withSpring(values.targetOriginY,BAR_SPRING_PHYSICS,'animate-always'),originX:withSpring(values.targetOriginX,BAR_SPRING_PHYSICS,'animate-always'),height:withSpring(values.targetHeight,BAR_SPRING_PHYSICS,'animate-always')},initialValues:{height:8,originY:guildItemSize/2,originX:-12}};}"
|
|
};
|
|
__initData2 = {
|
|
code: "function GuildsBarAnimatedItemWrapperTsx2(values){const{withSpring,BAR_SPRING_PHYSICS,transitionState,TransitionStates,cleanUp,runOnJS}=this.__closure;return{animations:{originY:withSpring(values.targetOriginY,BAR_SPRING_PHYSICS,'animate-always'),originX:withSpring(values.targetOriginX,BAR_SPRING_PHYSICS,'animate-always'),height:withSpring(values.targetHeight,BAR_SPRING_PHYSICS,'animate-always')},initialValues:{height:values.currentHeight,originY:values.currentOriginY,originX:values.currentOriginX},callback:function(finished){if(transitionState===TransitionStates.YEETED&&finished&&cleanUp!=null){runOnJS(cleanUp)();}}};}"
|
|
};
|
|
__initData3 = {
|
|
code: "function GuildsBarAnimatedItemWrapperTsx3(){const{withSpring,circle,guildItemSelectedBorderRadius,guildItemSize,CORNER_SPRING_PHYSICS}=this.__closure;return{borderRadius:withSpring(!circle?guildItemSelectedBorderRadius:guildItemSize/2,CORNER_SPRING_PHYSICS,'animate-always')};}"
|
|
};
|
|
export default function GuildsBarAnimatedItemWrapper(props) {
|
|
let c21486_17, ref, c21486_19;
|
|
const { id: id2, selected, unread, circle, children, externalChildren, expandedChildren, config, label, hint, draggable = false } = props;
|
|
let c21486_4 = draggable;
|
|
const { cutouts, isDragTarget = false } = props;
|
|
let c21486_5 = isDragTarget;
|
|
const { dragState, isDragPreview = false, draggedItemSize = 0 } = props;
|
|
const top = draggedItemSize;
|
|
const { overState, styles: styles2, accessibilityActions, onAccessibilityAction, preventClipping = false, expanded, entering, exiting, layout, zIndex: zIndex2 = 0 } = props;
|
|
const zIndex = zIndex2;
|
|
const sharedId2 = props.sharedId;
|
|
c21486_17 = void 0;
|
|
ref = void 0;
|
|
c21486_19 = void 0;
|
|
const guildWrapperSize = useGuildWrapperSize();
|
|
const token2 = useToken(Module712.modules.mobile.GUILD_BAR_ITEM_SIZE);
|
|
const styles3 = useStyles(guildWrapperSize);
|
|
const pressability = usePressability(config);
|
|
const token3 = useToken(Module712.modules.mobile.GUILD_ITEM_SELECTED_BORDER_RADIUS);
|
|
const W = () => ({
|
|
borderRadius: _spring.withSpring(circle ? token2 / 2 : token3, CORNER_SPRING_PHYSICS, "animate-always")
|
|
});
|
|
W.__closure = {
|
|
withSpring: _spring.withSpring,
|
|
circle,
|
|
guildItemSelectedBorderRadius: token3,
|
|
guildItemSize: token2,
|
|
CORNER_SPRING_PHYSICS
|
|
};
|
|
W.__workletHash = 15930523896348;
|
|
W.__initData = __initData3;
|
|
const animatedStyle = useAnimatedStyle(W);
|
|
const context = useContext(HomeDrawerStateContext);
|
|
const { guildsBarLabelDrawerStyle, guildsBarIconDrawerStyle, guildsBarUnreadDrawerStyle } = context;
|
|
const memo = useMemo(() => {
|
|
let r20, top2;
|
|
const r7 = c21486_5 && dragState === "dragging" ? overState === "self" ? overState != null && overState !== "self" ? dragState !== "dragging" ? "none" : "drag-target" : "none" : "hide" : overState != null && overState !== "self" ? dragState !== "dragging" ? "none" : "drag-target" : "none";
|
|
const height2 = r7 === "drag-target" ? guildWrapperSize + top : r7 !== "hide" ? guildWrapperSize : 0;
|
|
L17: {
|
|
r20 = {
|
|
height: height2,
|
|
top: null,
|
|
zIndex: null
|
|
};
|
|
top2 = 0;
|
|
if (r7 === "drag-target") {
|
|
if (overState !== "before") {
|
|
top2 = 0;
|
|
if (overState !== "convert-before") {
|
|
break L17;
|
|
}
|
|
}
|
|
top2 = top;
|
|
}
|
|
}
|
|
r20.top = top2;
|
|
r20.zIndex = zIndex;
|
|
return r20;
|
|
}, [isDragTarget, dragState, top, overState, zIndex, guildWrapperSize]);
|
|
const memo2 = useMemo(() => [styles2.pressableWrapper, c21486_5 ? styles3.draggedElement : void 0, IOS_POINTER_STYLE], [styles2.pressableWrapper, isDragTarget, styles3.draggedElement]);
|
|
const r94 = (unread ? !unread : !selected) || isDragTarget || isDragPreview;
|
|
c21486_17 = r94;
|
|
const memo3 = useMemo(() => {
|
|
if (c21486_17) {
|
|
return void 0;
|
|
}
|
|
return {
|
|
selected,
|
|
sharedId: sharedId2,
|
|
id: id2
|
|
};
|
|
}, [r94, selected, sharedId2, id2]);
|
|
const enableHome = MobileHomeDrawerExperiment.useConfig({
|
|
location: "guilds_bar"
|
|
}).enableHome;
|
|
ref = useRef(void 0);
|
|
useEffect(() => {
|
|
if (ref.current !== void 0) {
|
|
if (ref.current !== expanded) {
|
|
AccessibilityAnnouncer.announce(intl.string(expanded ? t.CUnsOR : t.jsudFd));
|
|
ref.current = expanded;
|
|
}
|
|
} else {
|
|
ref.current = expanded;
|
|
}
|
|
}, [expanded]);
|
|
const r2 = accessibilityActions != null && accessibilityActions.length > 0;
|
|
c21486_19 = r2;
|
|
const memo4 = useMemo(() => {
|
|
const r10 = hint != null && hint.length > 0;
|
|
const r5 = [];
|
|
if (r10) {
|
|
r5.push(hint);
|
|
}
|
|
if (c21486_4) {
|
|
r5.push(intl.string(t.BGMUFB));
|
|
}
|
|
if (c21486_19) {
|
|
r5.push(intl.string(t.X2x0MF));
|
|
}
|
|
return r5.join(". ");
|
|
}, [hint, draggable, r2]);
|
|
const r122 = enableHome ? styles3.container : null;
|
|
return <ReanimatedNativeView style={[r122, memo]} layout={layout} entering={entering} exiting={exiting} preventClipping={preventClipping} collapsable={false}>
|
|
<ReanimatedNativeView style={enableHome ? guildsBarIconDrawerStyle : null}>
|
|
<NativeView {...pressability} style={memo2} accessibilityLabel={label} accessible accessibilityRole="button" accessibilityState={{
|
|
selected,
|
|
expanded
|
|
}} hitSlop={GUILD_ITEM_HIT_SLOP} accessibilityHint={memo4.length > 0 ? memo4 : void 0} collapsable={false} accessibilityActions={accessibilityActions} onAccessibilityAction={onAccessibilityAction}>
|
|
{externalChildren}
|
|
<ReanimatedNativeView pointerEvents="none" style={[{
|
|
position: "absolute",
|
|
width: guildWrapperSize,
|
|
height: guildWrapperSize
|
|
}, enableHome ? guildsBarUnreadDrawerStyle : null]}>
|
|
<TransitionItem item={memo3} renderItem={renderUnreadIndicator} />
|
|
</ReanimatedNativeView>
|
|
<ClipViewAnimated style={[styles2.itemShape, animatedStyle]} cutouts={cutouts}>
|
|
<NativeView pointerEvents="none" style={[styles3.selectedBackgroundOverlay, selected ? styles2.itemShapeSelected : null]} />
|
|
{isDragTarget ? !isDragTarget : children}
|
|
</ClipViewAnimated>
|
|
</NativeView>
|
|
</ReanimatedNativeView>
|
|
{enableHome ? <ReanimatedNativeView {...pressability} style={[styles3.expandedChildrenWrapper, guildsBarLabelDrawerStyle]}>
|
|
{isDragTarget ? !isDragTarget : expandedChildren}
|
|
</ReanimatedNativeView> : null}
|
|
</ReanimatedNativeView>;
|
|
};
|
|
export function useGuildsBarAnimatedWrapperStyles(r2 = {}) {
|
|
const { disableSelectedColor = false, disableBGColor = false } = r2;
|
|
return useStyles2(disableSelectedColor, disableBGColor, useToken(Module712.modules.mobile.GUILD_BAR_ITEM_SIZE), useGuildWrapperSize());
|
|
}
|
|
export { UnreadIndicator };
|
|
export { renderUnreadIndicator };
|