215 lines
8.9 KiB
TypeScript
215 lines
8.9 KiB
TypeScript
// Metro module 9671 (f9672).
|
|
import { useMemo, useCallback, useState } from "react";
|
|
import { Image as Image2, View } from "react-native";
|
|
import { DraftType } from "../../../stores/DraftStore";
|
|
import { ACTION_SHEET_MAX_WIDTH } from "../../action_sheet/native/ActionSheetConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import Module38 from "../../../_bundle/Module38";
|
|
import { UploadPlatform } from "../../../lib/uploader/Upload";
|
|
import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
|
|
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
|
|
import useMountEffect from "../../../hooks/useMountEffect";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import ImagePicker from "../../image/native/ImagePicker";
|
|
import { cropResultToUploadItem } from "../../media_keyboard/native/MediaKeyboardUtils";
|
|
import ToastActionCreators from "../../toast/native/ToastActionCreators";
|
|
import { CircleErrorIcon } from "../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
|
|
import { getCaptionLabel, getType } from "../../../utils/native/UploadUtils";
|
|
import useCanSetThumbnail from "../../media_channel/useCanSetThumbnail";
|
|
import useSetMediaPostThumbnail from "../../media_channel/native/useSetMediaPostThumbnail";
|
|
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
|
|
import { BottomSheetScrollView } from "../../../_bundle/Module5245";
|
|
import { Stack } from "../../../design/components/Stack/native/Stack.native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { isIOS } from "../../../utils/PlatformUtils";
|
|
import { VideoComponent } from "../../../components_native/common/Video";
|
|
import { Caption } from "../../media/native/Caption";
|
|
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
|
|
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
|
|
import { ImageFileIcon } from "../../../design/components/Icon/native/redesign/generated/ImageFileIcon";
|
|
import AddImageDescriptionModalActionCreators from "../../image_upload/native/AddImageDescriptionModalActionCreators";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { TableCheckboxRow } from "../../../design/components/TableRow/native/TableCheckboxRow.native";
|
|
import { SpoilerIcon } from "../../../design/components/Icon/native/redesign/generated/SpoilerIcon";
|
|
import UploadAttachmentActionCreators from "../../../actions/UploadAttachmentActionCreators";
|
|
import { ImageIcon } from "../../../design/components/Icon/native/redesign/generated/ImageIcon";
|
|
import { PencilSparkleIcon } from "../../../design/components/Icon/native/redesign/generated/PencilSparkleIcon";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import { TrashIcon } from "../../../design/components/Icon/native/redesign/generated/TrashIcon";
|
|
const useStyles = createStyles({
|
|
contentContainer: {
|
|
padding: 16
|
|
},
|
|
imageWrap: {
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
|
|
padding: Module712.space.PX_8,
|
|
borderRadius: Module712.radii.md,
|
|
width: "100%"
|
|
},
|
|
imageContainer: {
|
|
overflow: "hidden",
|
|
alignSelf: "center",
|
|
borderRadius: Module712.radii.md - Module712.space.PX_4
|
|
}
|
|
});
|
|
export default function UploadPreviewActionSheet(props) {
|
|
let r163;
|
|
let setState;
|
|
const { onAdd, onEdit, onRemove, channelId, onClose, disableAddDescription = false, disableSpoiler, upload } = props;
|
|
setState = void 0;
|
|
const styles = useStyles();
|
|
const { id, isVideo } = upload;
|
|
let isImage = upload.isImage;
|
|
const { isThumbnail: checked = false, item, spoiler } = upload;
|
|
Module38(item.platform === UploadPlatform.REACT_NATIVE, "Upload must be a React Native upload item.");
|
|
const width = useWindowDimensions_native().width;
|
|
const bottom = useSafeAreaInsets_native().bottom;
|
|
useMountEffect(() => () => {
|
|
if (onClose != null) {
|
|
onClose();
|
|
}
|
|
});
|
|
const memo2 = useMemo(() => {
|
|
const { height, width: width2 } = item;
|
|
const width3 = Math.min(width, ACTION_SHEET_MAX_WIDTH) - 2 * styles.contentContainer.padding - 2 * styles.imageWrap.padding;
|
|
if (height != null && width2 != null) {
|
|
if (height !== 0 && width2 !== 0) {
|
|
const r27 = width3 / Math.max(width2, height);
|
|
return {
|
|
width: width2 * r27,
|
|
height: height * r27
|
|
};
|
|
}
|
|
return {
|
|
width: 300,
|
|
height: 300
|
|
};
|
|
}
|
|
return {
|
|
width: width3,
|
|
height: width3
|
|
};
|
|
}, [width, item, styles]);
|
|
const callback2 = useCallback(() => {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
if (onRemove != null) {
|
|
onRemove(id);
|
|
}
|
|
}, [onRemove, id]);
|
|
const callback3 = useCallback(() => {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
if (onAdd != null) {
|
|
onAdd();
|
|
}
|
|
}, [onAdd]);
|
|
const callback = useCallback(() => {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
const { uri, width: width2, height } = item;
|
|
ImagePicker.launchCropper({
|
|
uri,
|
|
freeStyleCropEnabled: true,
|
|
width: width2 !== 0 ? width2 : void 0,
|
|
height: height !== 0 ? height : void 0
|
|
}).then((result) => {
|
|
if (onEdit != null) {
|
|
onEdit(cropResultToUploadItem(result));
|
|
}
|
|
}).catch((error) => {
|
|
if (error.code !== "E_PICKER_CANCELLED") {
|
|
ToastActionCreators.open({
|
|
key: "CROP_ERROR",
|
|
IconComponent: CircleErrorIcon,
|
|
content: error.message
|
|
});
|
|
}
|
|
});
|
|
}, [onEdit, item]);
|
|
const memo = useMemo(() => getCaptionLabel(getType(item.uri), isVideo, item), [isVideo, item]);
|
|
const r23 = isImage ? !disableAddDescription : isImage;
|
|
const r76 = checked ? !checked : !disableSpoiler;
|
|
let r24 = useCanSetThumbnail(channelId, upload);
|
|
const setMediaPostThumbnail = useSetMediaPostThumbnail(channelId, upload);
|
|
let state;
|
|
[state, setState] = useState(void 0);
|
|
const startHeight = state != null ? state + bottom + Module712.space.PX_32 + Module712.space.PX_16 : void 0;
|
|
if (isImage) {
|
|
isImage = onEdit != null;
|
|
}
|
|
const props2 = {
|
|
scrollable: true,
|
|
startHeight,
|
|
children: null
|
|
};
|
|
const props3 = {
|
|
contentContainerStyle: {
|
|
padding: Module712.space.PX_16,
|
|
paddingBottom: bottom
|
|
},
|
|
children: null
|
|
};
|
|
const props4 = {
|
|
spacing: 16,
|
|
onLayout: (a0) => {
|
|
setState(a0.nativeEvent.layout.height);
|
|
},
|
|
children: null
|
|
};
|
|
const children = [<Text variant="text-md/semibold">{item.filename}</Text>, , , ,];
|
|
const props5 = {
|
|
style: styles.imageWrap,
|
|
children: null
|
|
};
|
|
const props6 = {
|
|
style: [styles.imageContainer, {
|
|
width: memo2.width,
|
|
height: memo2.height
|
|
}],
|
|
children: null
|
|
};
|
|
const children2 = [isIOS() && (isVideo && item.uri.startsWith("file://")) ? <VideoComponent style={{
|
|
width: memo2.width,
|
|
height: memo2.height
|
|
}} source={{
|
|
uri: item.uri
|
|
}} muted paused preventsDisplaySleepDuringVideoPlayback={false} /> : <Image2 style={{
|
|
width: memo2.width,
|
|
height: memo2.height
|
|
}} source={item} />, ,];
|
|
const r155 = memo != null && memo !== "" && <Caption label={memo} />;
|
|
L34: {
|
|
children2[1] = r155;
|
|
props6.children = children2;
|
|
props5.children = <View {...props6} />;
|
|
children[1] = <View {...props5} />;
|
|
if (!r23 && !r76 && !r24) {
|
|
r163 = null;
|
|
if (!isImage) {
|
|
break L34;
|
|
}
|
|
}
|
|
const r187 = [r23 ? <TableRow icon={<ImageFileIcon />} onPress={() => AddImageDescriptionModalActionCreators.open({
|
|
source: item,
|
|
channelId,
|
|
id
|
|
})} label={intl.string(t["5S2AK+"])} arrow /> : null, r76 ? <TableCheckboxRow icon={<SpoilerIcon />} onPress={function onPress() {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
UploadAttachmentActionCreators.update(channelId, id, DraftType.ChannelMessage, {
|
|
spoiler: !spoiler
|
|
});
|
|
}} label={intl.string(t["gsI+xC"])} checked={spoiler} /> : null, , ,];
|
|
if (r24) {
|
|
r24 = <TableCheckboxRow icon={<ImageIcon />} label={intl.string(t.ews2pj)} onPress={setMediaPostThumbnail} checked={checked} />;
|
|
}
|
|
r187[2] = r24;
|
|
r187[3] = isImage ? <TableRow icon={<PencilSparkleIcon />} onPress={callback} label={intl.string(t.b0y3DL)} arrow /> : null;
|
|
r163 = <TableRowGroup hasIcons>{r187}</TableRowGroup>;
|
|
}
|
|
children[2] = r163;
|
|
children[3] = onRemove != null ? <Button icon={<TrashIcon size="sm" color="control-primary-text-default" />} text={intl.string(t["40jBO/"])} onPress={callback2} variant="destructive" /> : onAdd != null ? <Button icon={<ImageFileIcon size="sm" color="control-primary-text-default" />} text={intl.string(t.s7oPyG)} onPress={callback3} /> : null;
|
|
props4.children = children;
|
|
props3.children = <Stack {...props4} />;
|
|
props2.children = <BottomSheetScrollView {...props3} />;
|
|
return <BottomSheet {...props2} />;
|
|
};
|