109 lines
4.3 KiB
TypeScript
109 lines
4.3 KiB
TypeScript
// Metro module 9847 (f9848).
|
|
import { useState, useRef, useEffect } from "react";
|
|
import { Image as Image2, ScrollView, View } from "react-native";
|
|
import { DraftType } from "../../../stores/DraftStore";
|
|
import UploadAttachmentStore from "../../../stores/UploadAttachmentStore";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
|
|
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
|
|
import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
|
|
import useSafeAreaAvoidingInputs_native from "../../safe_area/useSafeAreaAvoidingInputs.native";
|
|
import { getRenderHeaderTextButton } from "../../main_tabs_v2/native/shared_components/HeaderShared";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import UploadAttachmentActionCreators from "../../../actions/UploadAttachmentActionCreators";
|
|
import AddImageDescriptionModalActionCreators from "./AddImageDescriptionModalActionCreators";
|
|
import { TextArea } from "../../../design/components/TextInput/native/TextArea.native";
|
|
import ModalStackNavigator from "../../main_tabs_v2/native/utils/ModalStackNavigator";
|
|
let useStyles;
|
|
const AddDescription = function AddDescription(props) {
|
|
let state, ref, navigation;
|
|
const { source: source2, channelId, id } = props;
|
|
state = void 0;
|
|
ref = void 0;
|
|
navigation = void 0;
|
|
const styles = useStyles();
|
|
const stateFromStores = useStateFromStores([UploadAttachmentStore], () => UploadAttachmentStore.getUpload(channelId, id, DraftType.ChannelMessage));
|
|
const windowDimensions_native = useWindowDimensions_native({
|
|
ignoreKeyboard: true
|
|
});
|
|
const { width, height } = source2;
|
|
const aspectRatio = width != null ? height != null ? width !== 0 ? height !== 0 ? width / height : 1 : 1 : 1 : 1;
|
|
let r40 = stateFromStores?.description;
|
|
if (r40 == null) {
|
|
r40 = "";
|
|
}
|
|
let onChange;
|
|
[state, onChange] = useState(r40);
|
|
ref = useRef(state);
|
|
const ref2 = useRef(null);
|
|
const ref3 = useRef(null);
|
|
navigation = useNavigation();
|
|
const insets = useSafeAreaInsetsKeyboardAware_native({
|
|
includeKeyboardHeight: true
|
|
}).insets;
|
|
useSafeAreaAvoidingInputs_native({
|
|
insets,
|
|
inputs: [{
|
|
ref: ref2,
|
|
offset: {
|
|
type: "toBottom"
|
|
}
|
|
}],
|
|
scrollViewRef: ref3
|
|
});
|
|
useEffect(() => {
|
|
ref.current = state;
|
|
}, [state]);
|
|
useEffect(() => {
|
|
navigation.setOptions({
|
|
headerRight: (a0) => getRenderHeaderTextButton(intl.string(t["R3BPH+"]), () => {
|
|
UploadAttachmentActionCreators.update(channelId, id, DraftType.ChannelMessage, {
|
|
...stateFromStores,
|
|
description: ref.current
|
|
});
|
|
AddImageDescriptionModalActionCreators.close();
|
|
})({
|
|
...a0
|
|
})
|
|
});
|
|
}, [channelId, id, stateFromStores, navigation]);
|
|
return <ScrollView ref={ref3} style={styles.contentContainer} contentContainerStyle={{
|
|
padding: Module712.space.PX_16,
|
|
paddingBottom: insets.bottom + Module712.space.PX_16
|
|
}}>
|
|
<View style={styles.imageContainer}>
|
|
<Image2 style={[styles.image, {
|
|
aspectRatio,
|
|
maxHeight: windowDimensions_native.height / 2
|
|
}]} source={source2} />
|
|
</View>
|
|
<TextArea ref={ref2} containerStyle={{
|
|
paddingTop: Module712.space.PX_16
|
|
}} label={intl.string(t.eOB2eR)} placeholder={intl.string(t.RNH1jn)} value={state} onChange={onChange} placeholderTextColor={styles.placeholderText.color} maxLength={1000} autoFocus />
|
|
</ScrollView>;
|
|
};
|
|
useStyles = createStyles({
|
|
contentContainer: {
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
|
|
},
|
|
imageContainer: {
|
|
alignItems: "center",
|
|
borderRadius: Module712.radii.sm
|
|
},
|
|
image: {
|
|
width: "100%",
|
|
resizeMode: "contain",
|
|
height: void 0,
|
|
borderRadius: Module712.radii.sm
|
|
},
|
|
placeholderText: {
|
|
color: Module712.colors.TEXT_MUTED
|
|
}
|
|
});
|
|
export default function AddImageDescriptionModal(props) {
|
|
const { source, channelId: channelId2, id: id2 } = props;
|
|
return <ModalStackNavigator screenKey="addImageDescriptionModal" title={intl.string(t["5S2AK+"])} render={() => <AddDescription source={source} channelId={channelId2} id={id2} />} />;
|
|
};
|