// Module ID: 10287 // Function ID: 10288 // Name: ImageCarousel // Dependencies: [19, 17, 5384, 5383, 10288, 21, 4845, 576, 4595, 4846, 1177, 5464, 38, 5626, 504, 10289, 1115, 11024, 7873, 4841, 7904, 6575, 5621, 9850, 6545, 1479, 8799, 10291, 2] // Exports: useTileEntranceAnimatedStyle // Module 10287 (ImageCarousel) import nativeDefault from "native" /* 576 */; import util from "util" /* 1115 */; import native from "native" /* 1177 */; import useWindowDimensions from "useWindowDimensions" /* 1479 */; import ReanimatedRexportDefault from "ReanimatedRexport" /* 4595 */; import timing from "timing" /* 4846 */; import spring from "spring" /* 5464 */; import Upload from "Upload" /* 5626 */; import _modDef6545 from "module_6545" /* 6545 */; import UploadAttachmentActionCreatorsDefault from "UploadAttachmentActionCreators" /* 8799 */; import AttachmentPreviewDefault from "AttachmentPreview" /* 9850 */; import showUploadPreviewActionSheetDefault from "showUploadPreviewActionSheet" /* 10289 */; import MediaKeyboardUtils from "MediaKeyboardUtils" /* 10291 */; import noop from "module_19" /* 19 */; import UploadAttachmentStore from "UploadAttachmentStore" /* 5383 */; require = fn; function Tile(onEdit) { onEdit = onEdit.onEdit; const onRemove = onEdit.onRemove; const channelId = onEdit.channelId; let flag = onEdit.highlightThumbnails; if (flag === undefined) { flag = false; } let upload = onEdit.upload; id = undefined; const tmp = closure_13(); ({ description, id } = upload); ({ item, isVideo, isImage, isThumbnail } = upload); onRemove(channelId[12])(item.platform === onEdit(channelId[13]).UploadPlatform.REACT_NATIVE, "Upload must be a React Native upload item."); const tmp4 = onRemove(channelId[12]); const items = [UploadAttachmentStore]; const stateFromStores = onEdit(channelId[14]).useStateFromStores(items, () => { upload = UploadAttachmentStore.getUpload(channelId, id, DraftType.ChannelMessage); let flag; if (upload != null) { flag = upload.spoiler; } if (flag == null) { flag = false; } return flag; }); const items1 = [onRemove, id]; const items2 = [channelId, onRemove, onEdit, upload, id]; const callback = upload.useCallback(() => { let tmpResult; if (onRemove != null) { tmpResult = tmp(id); } return tmpResult; }, items1); let uri = item.id; const callback1 = upload.useCallback(() => { showUploadPreviewActionSheetDefault({ channelId, onRemove, onEdit(arg0) { let tmpResult; if (onEdit != null) { tmpResult = tmp(id, arg0); } return tmpResult; }, upload }); }, items2); if (uri == null) { uri = item.uri; } const obj2 = { itemKey: uri, uri: item.uri, fileName: item.filename, isImage, isVideo, isHighlighted: null, accessibilityLabel: null, accessibilityHint: null, removeAccessibilityLabel: null, onPress: null, onRemove: null, children: null }; if (flag) { flag = true === isThumbnail; } obj2.isHighlighted = flag; const intl = tmp5(tmp3[16]).intl; let str = item.filename; if (str == null) { str = ""; } obj2.accessibilityLabel = intl.formatToPlainString(onEdit(channelId[16]).t.MJHFt9, { name: str }); const intl2 = tmp5(tmp3[16]).intl; obj2.accessibilityHint = intl2.string(onEdit(channelId[16]).t.QtJ1c5); const intl3 = tmp5(tmp3[16]).intl; let str2 = item.filename; if (str2 == null) { str2 = ""; } obj2.removeAccessibilityLabel = intl3.formatToPlainString(onEdit(channelId[16]).t.FxKgb3, { name: str2 }); if (isImage) { const tmp12 = callback1; } obj2.onPress = tmp12; obj2.onRemove = callback; let tmp13 = null; if (isThumbnail) { const obj3 = { style: tmp.footerRightContainer, children: null }; const obj4 = { source: tmp2(tmp3[17]), size: tmp5(tmp3[10]).Icon.Sizes.SMALL_14 }; obj3.children = closure_11(tmp5(tmp3[10]).Icon, obj4); tmp13 = closure_11(id, obj3); } const items3 = [tmp13, ]; const obj5 = { style: tmp.decorationsContainer, children: null }; let tmp17 = null; if (stateFromStores) { const obj6 = { style: tmp.spoilerOverlay }; tmp17 = closure_11(tmp2(tmp3[18]), obj6); } const items4 = [tmp17, , ]; let tmp19 = null; if (null != description) { let length; if (description != null) { length = description.length; } tmp19 = null; if (length > 0) { const obj7 = { variant: "text-xs/medium", color: "text-overlay-light", allowFontScaling: false, style: tmp.altTagText, children: null }; const intl4 = tmp5(tmp3[16]).intl; obj7.children = intl4.string(tmp5(tmp3[16]).t.QEW81z); tmp19 = closure_11(tmp5(tmp3[19]).Text, obj7); } } const items5 = [tmp19, ]; let tmp22 = null; if (isVideo) { const obj8 = { style: tmp.iconContainer, children: closure_11(tmp5(tmp3[20]).PlayIcon, { size: "xxs", color: "white" }) }; tmp22 = closure_11(tmp16, obj8); } items5[1] = tmp22; items4[1] = closure_12(id, { children: items5 }); let tmp24 = null; if (stateFromStores) { const obj9 = { style: tmp.iconContainer, children: closure_11(tmp5(tmp3[21]).EyeIcon, { size: "xxs", color: "white" }) }; tmp24 = closure_11(tmp16, obj9); } items4[2] = tmp24; obj5.children = items4; items3[1] = closure_12(id, obj5); obj2.children = items3; return closure_12(ImageCarouselTile, obj2); } class ImageCarouselTile { constructor(arg0) { ({ isImage, isVideo, isHighlighted } = global); ({ itemKey, uri, fileName } = global); if (isHighlighted === undefined) { isHighlighted = false; } ({ onPress, onRemove } = global); closure_0 = onRemove; ({ accessibilityLabel, accessibilityHint, removeAccessibilityLabel, children } = global); tmp = closure_13(); tmp2 = isImage; if (!isImage) { tmp2 = isVideo; } tmp3 = closure_10; if (isHighlighted) { num = 4; diff = tmp3 - 4; tmp4 = tmp3; } else { tmp4 = tmp3; diff = tmp3; } tmp6 = undefined; if (tmp2) { tmp6 = tmp4; } num2 = 192; items = []; items[0] = onRemove; closure_0 = undefined; tmp8 = closure_0; tmp9 = closure_2; callback = closure_3.useCallback((nativeEvent) => { if ("remove" === nativeEvent.nativeEvent.actionName) { sharedValue(); } }, items); obj = closure_0(closure_2[8]); sharedValue = obj.useSharedValue(0); closure_0 = sharedValue; items1 = [, ]; items1[0] = sharedValue; items1[1] = itemKey; effect = closure_3.useEffect(() => { const result = sharedValue.set(1); }, items1); obj2 = closure_0(closure_2[8]); fn = function l() { const obj = { opacity: null, transform: null }; const obj3 = { duration: 300, easing: null }; value = sharedValue.get(); obj3.easing = native.STANDARD_EASING; obj.opacity = timing.withTiming(value, obj3, "respect-motion-settings"); const obj4 = { scale: null }; obj4.scale = spring.withSpring(sharedValue.get(), { stiffness: 80, damping: 6, mass: 0.3 }, "respect-motion-settings"); const items = [obj4]; obj.transform = items; return obj; }; obj1 = { withTiming: closure_0(closure_2[9]).withTiming, animatedStylePropValue: sharedValue, STANDARD_EASING: closure_0(closure_2[10]).STANDARD_EASING, withSpring: closure_0(closure_2[11]).withSpring }; fn.__closure = obj1; fn.__workletHash = 14458898683767; fn.__initData = closure_14; animatedStyle = obj2.useAnimatedStyle(fn); obj12 = { name: "remove", label: null }; intl = closure_0(closure_2[16]).intl; obj12.label = intl.string(closure_0(closure_2[16]).t.kFwAsa); items2 = []; items2[0] = obj12; tmp13 = jsxs; tmp15 = jsx; tmp14 = View; obj13 = { accessibilityRole: "button", accessibilityLabel, accessibilityHint, accessibilityActions: items2, onAccessibilityAction: callback, disabled: null == onPress, onPress, style: null, children: null }; items3 = [, ]; items3[0] = tmp.pressableContainer; if (isHighlighted) { isHighlighted = tmp.highlightedTileContainer; } obj14 = { children: null }; items3[1] = isHighlighted; obj13.style = items3; obj15 = { style: null, children: null }; items4 = [, , ]; items4[0] = tmp.tileContainer; items4[1] = { width: tmp6, height: diff }; items4[2] = animatedStyle; obj15.style = items4; size = { uri, isImage, isVideo, width: tmp6, height: diff, maxFileWidth: num2, fileName, borderRadius: null }; tmp16 = closure_1(tmp9[23]); size.borderRadius = closure_1(tmp9[7]).radii.md; items5 = [, ]; items5[0] = tmp15(tmp16, size); items5[1] = children; obj15.children = items5; obj13.children = tmp13(closure_1(tmp9[8]).View, obj15); items6 = [, ]; items6[0] = tmp15(closure_0(closure_2[22]).PressableOpacity, obj13); obj16 = { accessibilityRole: "button", accessibilityLabel: removeAccessibilityLabel, style: tmp.closeButton, onPress: onRemove, hitSlop: { top: 4, bottom: 4, left: 4, right: 4 }, children: null }; obj17 = { style: null, children: null }; items7 = [, ]; items7[0] = tmp.closeContainer; items7[1] = animatedStyle; obj17.style = items7; obj18 = { source: closure_1(tmp9[24]), size: tmp8(tmp9[10]).Icon.Sizes.MEDIUM, color: closure_1(tmp9[7]).unsafe_rawColors.PRIMARY_500, style: tmp.closeButtonIcon }; obj17.children = tmp15(tmp8(tmp9[10]).Icon, obj18); obj16.children = tmp15(closure_1(tmp9[8]).View, obj17); items6[1] = tmp15(tmp8(tmp9[22]).PressableOpacity, obj16); obj14.children = items6; return tmp13(tmp14, obj14); } } function CustomScrollView(arg0) { noop.useRef(0); noop.useRef(0); const ref = noop.useRef(null); const callback = noop.useCallback((current) => { const tmp = ref; if (tmp2) { current = ref.current; if (current != null) { current.scrollToEnd(); } } tmp.current = current; }, []); let obj = {}; const callback1 = noop.useCallback((nativeEvent) => { closure_1.current = nativeEvent.nativeEvent.contentOffset.x; }, []); const merged = Object.assign(arg0); obj.ref = ref; obj.onContentSizeChange = callback; obj.onScroll = callback1; obj.scrollEventThrottle = 16; obj.contentContainerStyle = closure_13().scrollview; return closure_11(closure_5, obj); } class ImageCarouselRow { constructor(arg0) { visible = global.visible; ({ style, children } = global); tmp = jsx; items = [, , ]; items[0] = closure_13().container; num = 0; tmp2 = View; if (visible) { tmp3 = closure_10; tmp4 = closure_9; num = closure_10 + closure_9; } obj = { height: num, marginTop: null, marginBottom: null }; num2 = 0; if (visible) { tmp5 = closure_9; tmp6 = closure_8; num3 = -1; num2 = -1 * (closure_9 - closure_8); } obj.marginTop = num2; num4 = 0; if (visible) { tmp7 = closure_8; num5 = 2; num4 = 2 * closure_8; } obj1 = { style: items, children: null }; obj.marginBottom = num4; items[1] = obj; items[2] = style; obj4 = { horizontal: true, keyboardShouldPersistTaps: "always", showsHorizontalScrollIndicator: false, accessibilityRole: "list", accessibilityLabel: null, children: null }; intl = closure_0(closure_2[16]).intl; obj4.accessibilityLabel = intl.string(closure_0(closure_2[16]).t.RhtzFe); obj4.children = children; obj1.children = tmp(CustomScrollView, obj4); return tmp(tmp2, obj1); } } get_ActivityIndicator = fn(17); ({ View: closure_4, StyleSheet, ScrollView: hasOwnProperty } = get_ActivityIndicator); const DraftType = fn(5384).DraftType; const ImageCarouselConstants = fn(10288); const IMAGE_CAROUSEL_EXPERIMENT_TILE_MARGIN = ImageCarouselConstants.IMAGE_CAROUSEL_EXPERIMENT_TILE_MARGIN; const IMAGE_CAROUSEL_TILE_CLOSE_BUTTON_PADDING = ImageCarouselConstants.IMAGE_CAROUSEL_TILE_CLOSE_BUTTON_PADDING; let closure_10 = ImageCarouselConstants.IMAGE_CAROUSEL_TILE_HEIGHT; const jsxProd = fn(21); ({ jsx: closure_11, jsxs: closure_12 } = jsxProd); const createStyles = fn(4845); let obj = { container: { width: "100%" }, pressableContainer: { marginHorizontal: 4 }, tileContainer: { position: "relative", minWidth: 60, backgroundColor: nativeDefault.colors.BACKGROUND_SURFACE_HIGH, overflow: "hidden", borderRadius: nativeDefault.radii.md - 1 }, decorationsContainer: null, highlightedTileContainer: null, closeButton: null, scrollview: null, closeContainer: null, closeButtonIcon: null, altTagText: null, iconContainer: null, spoilerOverlay: null, footerRightContainer: null }; let obj4 = {}; let merged = Object.assign(StyleSheet.absoluteFillObject); obj4.flex = 1; obj4.flexDirection = "row"; obj4.justifyContent = "space-between"; obj4.alignItems = "flex-end"; obj4.padding = 4; obj.decorationsContainer = obj4; let obj3 = { position: "relative", minWidth: 60, backgroundColor: nativeDefault.colors.BACKGROUND_SURFACE_HIGH, overflow: "hidden", borderRadius: nativeDefault.radii.md - 1 }; obj.highlightedTileContainer = { borderColor: nativeDefault.colors.INTERACTIVE_TEXT_ACTIVE, borderStyle: "solid", borderWidth: 2, borderRadius: 10 }; const rect = { position: "absolute", top: -1 * IMAGE_CAROUSEL_EXPERIMENT_TILE_MARGIN, right: 2 }; obj.closeButton = rect; obj.scrollview = { paddingTop: IMAGE_CAROUSEL_TILE_CLOSE_BUTTON_PADDING }; let size = { height: 20, width: 20, borderRadius: 20, alignItems: "center", justifyContent: "center", backgroundColor: nativeDefault.colors.BACKGROUND_SCRIM_LIGHTBOX }; obj.closeContainer = size; let obj5 = { borderColor: nativeDefault.colors.INTERACTIVE_TEXT_ACTIVE, borderStyle: "solid", borderWidth: 2, borderRadius: 10 }; obj.closeButtonIcon = { borderRadius: nativeDefault.radii.lg, backgroundColor: nativeDefault.colors.BACKGROUND_BASE_LOWER, tintColor: nativeDefault.colors.INTERACTIVE_TEXT_DEFAULT }; let obj6 = { borderRadius: nativeDefault.radii.lg, backgroundColor: nativeDefault.colors.BACKGROUND_BASE_LOWER, tintColor: nativeDefault.colors.INTERACTIVE_TEXT_DEFAULT }; obj.altTagText = { paddingHorizontal: nativeDefault.space.PX_4, lineHeight: 20, backgroundColor: nativeDefault.colors.BACKGROUND_SCRIM_LIGHTBOX, borderRadius: nativeDefault.radii.xs, textTransform: "uppercase" }; let obj7 = { paddingHorizontal: nativeDefault.space.PX_4, lineHeight: 20, backgroundColor: nativeDefault.colors.BACKGROUND_SCRIM_LIGHTBOX, borderRadius: nativeDefault.radii.xs, textTransform: "uppercase" }; obj.iconContainer = { backgroundColor: nativeDefault.colors.BACKGROUND_SCRIM_LIGHTBOX, borderRadius: nativeDefault.radii.sm, padding: nativeDefault.space.PX_4 }; const merged1 = Object.assign(StyleSheet.absoluteFillObject); obj.spoilerOverlay = {}; const rect1 = { position: "absolute", bottom: 4, right: 4, alignItems: "center", justifyContent: "center", alignContent: "center", backgroundColor: nativeDefault.colors.BACKGROUND_SURFACE_HIGH, padding: 4, borderRadius: 20, opacity: 0.85 }; obj.footerRightContainer = rect1; createStyles.createStyles(obj); const __initData = { code: "function ImageCarouselTsx1(){const{withTiming,animatedStylePropValue,STANDARD_EASING,withSpring}=this.__closure;return{opacity:withTiming(animatedStylePropValue.get(),{duration:300,easing:STANDARD_EASING},'respect-motion-settings'),transform:[{scale:withSpring(animatedStylePropValue.get(),{stiffness:80,damping:6,mass:0.3},'respect-motion-settings')}]};}" }; let obj8 = { backgroundColor: nativeDefault.colors.BACKGROUND_SCRIM_LIGHTBOX, borderRadius: nativeDefault.radii.sm, padding: nativeDefault.space.PX_4 }; let obj9 = {}; size = fn(2); let result = size.fileFinishedImporting("components_native/chat/ImageCarousel.tsx"); export default noop.memo((arg0) => { ({ attachments, channelId } = arg0); ({ headerElement, highlightThumbnails } = arg0); if (highlightThumbnails === undefined) { highlightThumbnails = false; } let onRemove; noop = undefined; let tmp = null != attachments; if (tmp) { tmp = attachments.length > 0; } let items = [channelId]; onRemove = noop.useCallback((arg0) => { UploadAttachmentActionCreatorsDefault.remove(channelId, arg0, DraftType.ChannelMessage); }, items); const items1 = [channelId, onRemove]; noop = noop.useCallback((arg0, arg1) => { if (callback != null) { tmp(arg0); } const items = [arg1]; MediaKeyboardUtils.addImagesFromPicker(channelId, items, Upload.UploadOrigin.IMAGE_EDITOR); }, items1); if (!tmp) { tmp = null != headerElement; } const obj = { visible: tmp, children: null }; const items2 = [headerElement, ]; let mapped = null; if (null != attachments) { const _Object = Object; const values = Object.values(attachments); mapped = values.map((upload) => closure_2_11(Tile, { channelId, highlightThumbnails, onEdit, onRemove, upload }, upload.uniqueId)); } items2[1] = mapped; obj.children = items2; return closure_12(ImageCarouselRow, obj); }); export const useTileEntranceAnimatedStyle = function useTileEntranceAnimatedStyle(arg0) { sharedValue = sharedValue(4595).useSharedValue(0); const items = [sharedValue, arg0]; const effect = noop.useEffect(() => { const result = sharedValue.set(1); }, items); const obj = sharedValue(4595); const fn = function l() { const obj = { opacity: null, transform: null }; const obj3 = { duration: 300, easing: null }; value = sharedValue.get(); obj3.easing = native.STANDARD_EASING; obj.opacity = timing.withTiming(value, obj3, "respect-motion-settings"); const obj4 = { scale: null }; obj4.scale = spring.withSpring(sharedValue.get(), { stiffness: 80, damping: 6, mass: 0.3 }, "respect-motion-settings"); const items = [obj4]; obj.transform = items; return obj; }; const obj2 = sharedValue(4595); fn.__closure = { withTiming: sharedValue(4846).withTiming, animatedStylePropValue: sharedValue, STANDARD_EASING: sharedValue(1177).STANDARD_EASING, withSpring: sharedValue(5464).withSpring }; fn.__workletHash = 14458898683767; fn.__initData = __initData; return obj2.useAnimatedStyle(fn); }; export { ImageCarouselTile }; export { ImageCarouselRow };