254 lines
9.9 KiB
TypeScript
254 lines
9.9 KiB
TypeScript
// Metro module 9650 (f9651).
|
|
import * as Module19 from "react";
|
|
import { useRef, useState, useMemo, useEffect, useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import StickersStore from "../StickersStore";
|
|
import { useStickerPickerStore } from "./StickerPickerStore";
|
|
import { STICKER_SCROLL_LOAD_DELAY_AFTER_HEIGHT_CHANGE_MS, STICKER_SCROLL_LOAD_DELAY_MS, STICKER_SIZE } from "./StickerPickerConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { Icon } from "../../../design/void/native";
|
|
import Module9651 from "../../../_bundle/Module9651";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { StickerFormat } from "../StickersTypes";
|
|
import { useIsPortalKeyboardInModal } from "../../keyboard/native/PortalKeyboardModalContext";
|
|
import useExpressionPickerListWidth_native from "../../expression_picker/native/useExpressionPickerListWidth.native";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import useStickerPickerListData, { StickerPickerSectionType } from "./useStickerPickerListData";
|
|
import StickerPickerListRow from "./StickerPickerListRow";
|
|
import Module12 from "../../../_bundle/Module12";
|
|
import { FastestListPropsPlaceholderType } from "../../fastest_list/props/FastestListPropsPlaceholder";
|
|
import StickerPickerListEmptyState from "./StickerPickerListEmptyState";
|
|
import FastestList_android from "../../fastest_list/FastestList.android";
|
|
import { getCustomKeyboardHeight } from "../../keyboard/native/useCustomKeyboardHeight";
|
|
let Component, Component2;
|
|
const useStyles = createStyles({
|
|
listPlaceholder: {
|
|
color: Module712.colors.BACKGROUND_MOD_MUTED
|
|
},
|
|
section: {
|
|
justifyContent: "center",
|
|
overflow: "hidden",
|
|
backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
|
|
},
|
|
sectionSticker: {
|
|
backgroundColor: Module712.colors.MOBILE_EXPRESSION_PICKER_BACKGROUND_DEFAULT
|
|
},
|
|
nsfwContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderRadius: Module712.radii.sm,
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL
|
|
},
|
|
nsfwText: {
|
|
marginLeft: 4,
|
|
textAlign: "center"
|
|
}
|
|
});
|
|
let Component3 = Module19.memo(function({ height }) {
|
|
const styles2 = useStyles();
|
|
return <View style={[styles2.nsfwContainer, {
|
|
height
|
|
}]}>
|
|
<Icon source={Module9651} size={Icon.Sizes.SMALL} />
|
|
<Text style={styles2.nsfwText} variant="text-sm/normal" color="interactive-text-active">
|
|
{intl.string(t.uy25Qz)}
|
|
</Text>
|
|
</View>;
|
|
});
|
|
Component = Module19.memo(function({ height, label, sectionStyle }) {
|
|
return <View style={[useStyles().section, sectionStyle, {
|
|
height
|
|
}]}>
|
|
<Text lineClamp={1} color="interactive-text-default" variant="heading-sm/semibold">{label}</Text>
|
|
</View>;
|
|
});
|
|
Component2 = Module19.memo(function(a0) {
|
|
return <View style={{
|
|
height: a0.height
|
|
}} />;
|
|
});
|
|
const r75 = Module19.memo(function(a0) {
|
|
let stickerPickerStore, memo, sectionHeights, sectionSize, sectionFooterSize, sectionLabels, rowsBySection, rowHeight, rowSize, packToScrollToIndex, setCategory;
|
|
const { bottomSheetRef, bottomSheetIndex, setCategoryIndex, searchResults, onPressSticker, onLongPressStickerDetail, insetBottom = 0, insetTop = 0, channel, inPortalKeyboard = false } = a0;
|
|
let c17373_6 = inPortalKeyboard;
|
|
let stickerFormats = a0.stickerFormats;
|
|
if (stickerFormats === void 0) {
|
|
stickerFormats = [StickerFormat.PNG, StickerFormat.APNG, StickerFormat.LOTTIE, StickerFormat.GIF];
|
|
}
|
|
stickerPickerStore = void 0;
|
|
memo = void 0;
|
|
sectionHeights = void 0;
|
|
sectionSize = void 0;
|
|
sectionFooterSize = void 0;
|
|
sectionLabels = void 0;
|
|
rowsBySection = void 0;
|
|
rowHeight = void 0;
|
|
rowSize = void 0;
|
|
packToScrollToIndex = void 0;
|
|
setCategory = void 0;
|
|
const ref = useRef(null);
|
|
const styles = useStyles();
|
|
const [state, setState] = useState(null);
|
|
const isPortalKeyboardInModal = useIsPortalKeyboardInModal();
|
|
const containerWidth = useExpressionPickerListWidth_native(inPortalKeyboard);
|
|
const stateFromStores = useStateFromStores([StickersStore], () => StickersStore.hasLoadedStickerPacks);
|
|
stickerPickerStore = useStickerPickerStore((a0) => a0.setPackToScrollTo);
|
|
memo = useMemo(() => {
|
|
let c26499_0;
|
|
const scrollToCancel2 = function scrollToCancel() {
|
|
return clearTimeout(c26499_0.scrollTo);
|
|
};
|
|
c26499_0 = {
|
|
scrollTo: -1
|
|
};
|
|
return {
|
|
scroll: function scroll({ index, delay, expand }) {
|
|
const r10 = clearTimeout;
|
|
r10(c26499_0.scrollTo);
|
|
if (expand) {
|
|
const current = bottomSheetRef.current;
|
|
if (current != null) {
|
|
current.expandActionSheet();
|
|
}
|
|
}
|
|
c26499_0.scrollTo = setTimeout(() => {
|
|
const current = ref.current;
|
|
if (current != null) {
|
|
current.scrollToLocation({
|
|
section: index,
|
|
item: 0,
|
|
animated: true
|
|
});
|
|
}
|
|
stickerPickerStore(null);
|
|
}, delay);
|
|
setCategoryIndex(index);
|
|
},
|
|
cancel: () => scrollToCancel2
|
|
};
|
|
}, [setCategoryIndex, stickerPickerStore, bottomSheetRef]);
|
|
const stickerPickerListData = useStickerPickerListData({
|
|
channel,
|
|
containerWidth,
|
|
searchResults,
|
|
stickerFormats
|
|
});
|
|
const sections = stickerPickerListData.sections;
|
|
sectionHeights = stickerPickerListData.sectionHeights;
|
|
sectionSize = stickerPickerListData.sectionSize;
|
|
sectionFooterSize = stickerPickerListData.sectionFooterSize;
|
|
sectionLabels = stickerPickerListData.sectionLabels;
|
|
rowsBySection = stickerPickerListData.rowsBySection;
|
|
rowHeight = stickerPickerListData.rowHeight;
|
|
rowSize = stickerPickerListData.rowSize;
|
|
packToScrollToIndex = stickerPickerListData.packToScrollToIndex;
|
|
useEffect(() => {
|
|
const r3 = packToScrollToIndex != null && stateFromStores;
|
|
L7: {
|
|
if (r3) {
|
|
if (c17373_6 && bottomSheetIndex.get() < 1) {
|
|
memo.scroll({
|
|
index: packToScrollToIndex,
|
|
delay: STICKER_SCROLL_LOAD_DELAY_AFTER_HEIGHT_CHANGE_MS,
|
|
expand: true
|
|
});
|
|
break L7;
|
|
}
|
|
memo.scroll({
|
|
index: packToScrollToIndex,
|
|
delay: STICKER_SCROLL_LOAD_DELAY_MS
|
|
});
|
|
}
|
|
}
|
|
return () => {
|
|
memo.cancel();
|
|
};
|
|
}, [inPortalKeyboard, bottomSheetIndex, stateFromStores, packToScrollToIndex, memo]);
|
|
const callback = useCallback((a0) => <Component label={sectionLabels[a0]} sectionStyle={styles.sectionSticker} height={sectionSize} />, [sectionLabels, sectionSize, styles.sectionSticker]);
|
|
const callback2 = useCallback(() => <Component2 height={sectionFooterSize} />, [sectionFooterSize]);
|
|
const callback3 = useCallback((a0, a1) => {
|
|
const r4 = rowsBySection[a0];
|
|
if (r4 == null) {
|
|
return null;
|
|
}
|
|
const type = r4.type;
|
|
if (StickerPickerSectionType.STICKERS === type) {
|
|
return <StickerPickerListRow containerWidth={containerWidth} stickers={r4.stickersByRow[a1]} rowSize={rowSize} onPressSticker={onPressSticker} onLongPressStickerDetail={onLongPressStickerDetail} focusedSticker={state} setFocusedSticker={setState} channel={channel} />;
|
|
}
|
|
if (StickerPickerSectionType.NSFW === type) {
|
|
return <Component3 height={rowHeight} />;
|
|
}
|
|
return null;
|
|
}, [channel, containerWidth, state, onLongPressStickerDetail, onPressSticker, rowHeight, rowSize, rowsBySection]);
|
|
const memo2 = useMemo(() => {
|
|
let c26500_0;
|
|
const setCategory2 = Module12.debounce((a0) => {
|
|
let r16;
|
|
const r6 = 0 < sectionHeights.length;
|
|
let r4 = 0;
|
|
if (r6) {
|
|
const r13 = a0 >= sectionHeights[0];
|
|
let r1 = 0;
|
|
let r0 = 0;
|
|
r4 = 0;
|
|
if (r13) {
|
|
do {
|
|
const r14 = r0 + 1;
|
|
const r3 = r1 + 1;
|
|
const length = sectionHeights.length;
|
|
r4 = r14;
|
|
if (!(r3 < length)) {
|
|
break;
|
|
}
|
|
r16 = sectionHeights[r3];
|
|
r1 = r3;
|
|
r0 = r14;
|
|
r4 = r0;
|
|
} while (a0 >= r16);
|
|
}
|
|
}
|
|
setCategoryIndex(r4);
|
|
}, 100);
|
|
c26500_0 = setCategory2;
|
|
return {
|
|
onScroll: function onScroll(a0) {
|
|
c26500_0(a0.nativeEvent.contentOffset.y);
|
|
a0.nativeEvent.layoutMeasurement.height;
|
|
a0.nativeEvent.contentOffset.y;
|
|
a0.nativeEvent.contentSize.height;
|
|
},
|
|
setCategory: setCategory2
|
|
};
|
|
}, [setCategoryIndex, sectionHeights]);
|
|
const onScroll2 = memo2.onScroll;
|
|
setCategory = memo2.setCategory;
|
|
const memo3 = useMemo(() => ({
|
|
sectionHeader: {
|
|
type: FastestListPropsPlaceholderType.SHAPE,
|
|
colorHex: styles.listPlaceholder.color,
|
|
shape: "rect",
|
|
borderRadius: Module712.radii.md,
|
|
paddingVertical: Module712.space.PX_4
|
|
},
|
|
sectionItem: {
|
|
type: FastestListPropsPlaceholderType.SHAPE,
|
|
colorHex: styles.listPlaceholder.color,
|
|
shape: "circle",
|
|
shapeCount: rowSize,
|
|
width: STICKER_SIZE,
|
|
height: STICKER_SIZE
|
|
}
|
|
}), [styles, rowSize]);
|
|
useEffect(() => () => setCategory.cancel(), [setCategory]);
|
|
useEffect(() => () => {
|
|
memo.cancel();
|
|
}, [memo]);
|
|
return searchResults?.length === 0 ? <StickerPickerListEmptyState inActionSheet insetTop={insetTop} insetBottom={insetBottom} /> : <FastestList_android accessibilityLabel={intl.string(t.nf1s3u)} estimatedListSize={getCustomKeyboardHeight()} inActionSheet preventNativeModalDismiss={isPortalKeyboardInModal} insetEnd={insetBottom} insetStart={insetTop} itemSize={rowHeight} keyboardShouldPersistTaps="always" listId="sticker-picker-list" onScroll={onScroll2} placeholderConfig={memo3} renderItem={callback3} renderSectionHeader={callback} renderSectionFooter={callback2} ref={ref} scrollReporting="callbacks" sections={sections} sectionHeaderSize={sectionSize} sectionFooterSize={sectionFooterSize} />;
|
|
});
|
|
export default r75;
|