316 lines
12 KiB
TypeScript
316 lines
12 KiB
TypeScript
// Metro module 11971 (f11972).
|
|
import { useRef, useEffect, useState, useCallback, useMemo, useLayoutEffect } from "react";
|
|
import { ScrollView, View } from "react-native";
|
|
import UserStore from "../../../stores/UserStore";
|
|
import { STATUS_MAX_LENGTH } from "../Constants";
|
|
import { AnalyticEvents, AnalyticsSections, NOOP, Fonts } from "../../../Constants";
|
|
import { EmojiIntention } from "../../emojis/EmojiConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { Icon } from "../../../design/void/native";
|
|
import Module8998 from "../../../_bundle/Module8998";
|
|
import getRandomCustomStatusPrompt from "../utils/getRandomCustomStatusPrompt";
|
|
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
|
|
import { useCustomStatusActivity } from "../utils/userSettingToActivity";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import computeInitialClearAfter from "../utils/computeInitialClearAfter";
|
|
import setCustomStatus from "../setCustomStatus";
|
|
import { AccessibilityAnnouncer } from "../../../design/shared";
|
|
import removeCustomStatus from "../utils/removeCustomStatus";
|
|
import { setAccessibilityFocus } from "../../a11y/native/setAccessibilityFocus.android";
|
|
import { openEmojiPickerActionSheet } from "../../emoji_picker/native/openEmojiPickerActionSheet";
|
|
import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
|
|
import useSafeAreaAvoidingInputs_native from "../../safe_area/useSafeAreaAvoidingInputs.native";
|
|
import maybeShowDiscardChangesAlert from "../../user_settings/profiles/native/maybeShowDiscardChangesAlert";
|
|
import { dismissKeyboard } from "../../../utils/native/ChatInputUtils";
|
|
import CustomStatusPreview from "./CustomStatusPreview";
|
|
import { HeaderTextButton, GenericHeaderTitle } from "../../main_tabs_v2/native/shared_components/HeaderShared";
|
|
import { getHeaderCloseButton } from "../../../design/components/Navigator/native/NavigatorHeader.native";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import ActivityEmoji from "../../activity_status/native/ActivityEmoji";
|
|
import FormInput from "../../../design/void/Form/native/FormInput";
|
|
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
|
|
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import formatClearAfterValue from "../utils/formatClearAfterValue";
|
|
import { TrashIcon } from "../../../design/components/Icon/native/redesign/generated/TrashIcon";
|
|
import { isAndroid } from "../../../_bundle/Module501";
|
|
import { KeyboardAwareScrollView } from "../../../_bundle/Module1595";
|
|
import ModalActionCreators from "../../../actions/ModalActionCreators";
|
|
import { Navigator } from "../../../design/components/Navigator/native/Navigator.native";
|
|
let useStyles, EditCustomStatusWithPreview;
|
|
const ClearInputButton = function ClearInputButton(props) {
|
|
const onPress2 = props.onPress;
|
|
const styles = useStyles();
|
|
return <PressableOpacity style={{
|
|
borderRadius: 10,
|
|
paddingLeft: 8
|
|
}} accessibilityRole="button" accessibilityLabel={intl.string(t.VkKicb)} onPress={onPress2} hitSlop={{
|
|
top: 8,
|
|
bottom: 8,
|
|
right: 8
|
|
}}>
|
|
<Icon source={Module8998} style={styles.closeIcon} size={Icon.Sizes.SMALL} />
|
|
</PressableOpacity>;
|
|
};
|
|
EditCustomStatusWithPreview = function EditCustomStatusWithPreview(props) {
|
|
let stateFromStores, state, setState, state2, setState2, state3, setState3, placeholderText, callback, ref2, callback2, callback3, ref3, ref4, memo, callback4;
|
|
const { navigation, onClose, analyticsLocations } = props;
|
|
let prompt3 = props.prompt;
|
|
stateFromStores = void 0;
|
|
state = void 0;
|
|
setState = void 0;
|
|
state2 = void 0;
|
|
setState2 = void 0;
|
|
state3 = void 0;
|
|
setState3 = void 0;
|
|
placeholderText = void 0;
|
|
callback = void 0;
|
|
ref2 = void 0;
|
|
callback2 = void 0;
|
|
callback3 = void 0;
|
|
ref3 = void 0;
|
|
ref4 = void 0;
|
|
memo = void 0;
|
|
callback4 = void 0;
|
|
if (prompt3 == null) {
|
|
prompt3 = getRandomCustomStatusPrompt();
|
|
}
|
|
const ref = useRef(prompt3);
|
|
useEffect(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.OPEN_MODAL, {
|
|
type: AnalyticsSections.EDIT_CUSTOM_STATUS_MODAL_WITH_PREVIEW,
|
|
location_stack: analyticsLocations
|
|
});
|
|
}, [analyticsLocations]);
|
|
const styles = useStyles();
|
|
const customStatusActivity = useCustomStatusActivity();
|
|
stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
|
|
const r16 = computeInitialClearAfter();
|
|
let r59 = customStatusActivity?.state;
|
|
if (r59 == null) {
|
|
r59 = "";
|
|
}
|
|
[state, setState] = useState(r59);
|
|
let r65 = customStatusActivity?.emoji;
|
|
if (r65 == null) {
|
|
r65 = null;
|
|
}
|
|
[state2, setState2] = useState(r65);
|
|
[state3, setState3] = useState(r16);
|
|
placeholderText = ref.current != null ? ref.current.label() : intl.string(t.xod367);
|
|
callback = useCallback(() => {
|
|
let current = ref.current;
|
|
if (current == null) {
|
|
current = void 0;
|
|
}
|
|
setCustomStatus({
|
|
text: state,
|
|
emojiInfo: state2,
|
|
clearAfter: state3,
|
|
analyticsLocations,
|
|
prompt: current
|
|
});
|
|
AccessibilityAnnouncer.announce(intl.string(t.Og40Yn));
|
|
onClose();
|
|
}, [state, state2, state3, onClose, analyticsLocations]);
|
|
const callback5 = useCallback(() => {
|
|
removeCustomStatus();
|
|
AccessibilityAnnouncer.announce(intl.string(t.YdUwBS));
|
|
onClose();
|
|
}, [onClose]);
|
|
ref2 = useRef(null);
|
|
callback2 = useCallback(() => {
|
|
setAccessibilityFocus({
|
|
ref: ref2,
|
|
delay: 500
|
|
});
|
|
}, []);
|
|
callback3 = useCallback((a0) => {
|
|
let surrogates;
|
|
if (a0.id == null && (a0.surrogates != null && a0.surrogates !== "")) {
|
|
surrogates = a0.surrogates;
|
|
} else {
|
|
surrogates = a0.name;
|
|
if (surrogates == null) {
|
|
surrogates = "";
|
|
}
|
|
}
|
|
setState2({
|
|
id: a0.id,
|
|
name: surrogates,
|
|
animated: a0.animated
|
|
});
|
|
callback2();
|
|
}, [callback2]);
|
|
const callback7 = useCallback(() => {
|
|
openEmojiPickerActionSheet({
|
|
onPressEmoji: callback3,
|
|
onClose: callback2,
|
|
pickerIntention: EmojiIntention.STATUS
|
|
});
|
|
}, [callback3, callback2]);
|
|
const callback6 = useCallback(() => {
|
|
setState2(null);
|
|
setState("");
|
|
}, [setState2, setState]);
|
|
ref3 = useRef(null);
|
|
const ref5 = useRef(null);
|
|
const insets = useSafeAreaInsetsKeyboardAware_native({
|
|
includeKeyboardHeight: true,
|
|
isKeyboardAwareOnIOS: false
|
|
}).insets;
|
|
const onFocus = useSafeAreaAvoidingInputs_native({
|
|
insets,
|
|
inputs: [{
|
|
ref: ref3
|
|
}],
|
|
scrollViewRef: ref5
|
|
}).onFocus;
|
|
const callback8 = useCallback(() => {
|
|
const current = ref3.current;
|
|
if (current != null) {
|
|
current.blur();
|
|
}
|
|
}, []);
|
|
ref4 = useRef({
|
|
statusText: state,
|
|
statusEmoji: state2,
|
|
clearAfter: state3
|
|
});
|
|
memo = useMemo(() => state !== ref4.current.statusText || state2 !== ref4.current.statusEmoji || state3 !== ref4.current.clearAfter, [state, state2, state3]);
|
|
callback4 = useCallback(() => {
|
|
maybeShowDiscardChangesAlert({
|
|
hasEdits: memo,
|
|
onHasEdits: dismissKeyboard,
|
|
resetPending: NOOP,
|
|
onConfirm: onClose
|
|
});
|
|
}, [memo, onClose]);
|
|
const memo2 = useMemo(() => stateFromStores != null ? <CustomStatusPreview user={stateFromStores} pendingStatusText={state} pendingStatusEmoji={state2} placeholderText={placeholderText} /> : null, [stateFromStores, state, state2, placeholderText]);
|
|
useLayoutEffect(() => {
|
|
navigation.setOptions({
|
|
headerRight: () => <HeaderTextButton label={intl.string(t["R3BPH+"])} onPress={callback} disabled={!memo} />,
|
|
headerLeft: getHeaderCloseButton(callback4)
|
|
});
|
|
}, [navigation, callback, memo, callback4]);
|
|
if (stateFromStores == null) {
|
|
return null;
|
|
}
|
|
const r274 = <View style={styles.container}>
|
|
<View style={styles.previewContainer}>{memo2}</View>
|
|
<View style={styles.statusSection}>
|
|
<View style={styles.statusSectionHeader}>
|
|
<Text accessibilityRole="header" variant="text-sm/semibold" color="text-default">
|
|
{intl.string(t.zOdg0A)}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.statusInput}>
|
|
<View style={styles.statusInputRow}>
|
|
<PressableOpacity ref={ref2} accessibilityLabel={intl.string(t.WkfRZP)} accessibilityValue={{
|
|
text: state2?.name
|
|
}} accessibilityRole="button" onPress={callback7}>
|
|
<ActivityEmoji emoji={state2} size={20} style={styles.emoji} withPlaceholder />
|
|
</PressableOpacity>
|
|
<FormInput ref={ref3} maxLength={STATUS_MAX_LENGTH} placeholder={placeholderText} placeholderTextColor={styles.inputPlaceholder.color} accessibilityLabel={intl.string(t.xalUlT)} onSubmitEditing={callback8} onFocus={onFocus} style={styles.status} value={state} onChange={setState} autoCorrect={false} showBorder={false} showTopContainer={false} autoCapitalize="none" inputTextStyle={styles.statusText} multiline submitBehavior="blurAndSubmit" returnKeyType="done" autoFocus />
|
|
{(state2 != null || state !== "") && <ClearInputButton onPress={callback6} />}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<TableRowGroup hasIcons={false}>
|
|
<TableRow label={intl.string(t["+14vvU"])} arrow onPress={function onPress() {
|
|
dismissKeyboard();
|
|
ActionSheetActionCreators.openLazy(import("./ClearAfterOptionsActionSheet"), "ClearAfterOptionsActionSheet", {
|
|
initialValue: state3,
|
|
onChange: setState3
|
|
});
|
|
}} trailing={<Text variant="text-sm/medium">
|
|
{formatClearAfterValue(state3)}
|
|
</Text>} />
|
|
</TableRowGroup>
|
|
{customStatusActivity != null && <TableRowGroup hasIcons>
|
|
<TableRow icon={<TrashIcon color={Module712.colors.TEXT_FEEDBACK_CRITICAL} />} label={intl.string(t.wO53tu)} onPress={callback5} variant="danger" />
|
|
</TableRowGroup>}
|
|
</View>;
|
|
return isAndroid() ? <ScrollView ref={ref5} keyboardShouldPersistTaps="always" contentContainerStyle={{
|
|
paddingBottom: insets.bottom
|
|
}}>{r274}</ScrollView> : <KeyboardAwareScrollView keyboardShouldPersistTaps="always">{r274}</KeyboardAwareScrollView>;
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
flexGrow: 1,
|
|
padding: 16,
|
|
rowGap: 24
|
|
},
|
|
statusSection: {
|
|
rowGap: 8
|
|
},
|
|
statusInput: {
|
|
flexDirection: "column",
|
|
rowGap: 4,
|
|
backgroundColor: Module712.colors.INPUT_BACKGROUND_DEFAULT,
|
|
borderRadius: Module712.radii.lg,
|
|
padding: 12
|
|
},
|
|
statusInputRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
emoji: {
|
|
marginRight: 8
|
|
},
|
|
status: {
|
|
color: Module712.colors.TEXT_STRONG,
|
|
lineHeight: 16,
|
|
flexGrow: 1,
|
|
alignSelf: "flex-start",
|
|
paddingVertical: 0,
|
|
paddingHorizontal: 0
|
|
},
|
|
statusText: {
|
|
fontSize: 16,
|
|
lineHeight: 20,
|
|
fontFamily: Fonts.PRIMARY_MEDIUM,
|
|
color: Module712.colors.TEXT_STRONG,
|
|
flexGrow: 1,
|
|
height: "auto",
|
|
textAlignVertical: "center"
|
|
},
|
|
inputPlaceholder: {
|
|
color: Module712.colors.TEXT_MUTED
|
|
},
|
|
previewContainer: {
|
|
alignItems: "center",
|
|
...Module712.shadows.SHADOW_LOW
|
|
},
|
|
closeIcon: {
|
|
tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT,
|
|
flexShrink: 0
|
|
},
|
|
statusSectionHeader: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between"
|
|
}
|
|
});
|
|
export default function EditCustomStatusWithPreviewModal(props) {
|
|
const { analyticsLocations: analyticsLocations2, prompt } = props;
|
|
return <Navigator initialRouteName="root" screens={useMemo(() => {
|
|
const analyticsLocations3 = analyticsLocations2;
|
|
const prompt2 = prompt;
|
|
return {
|
|
root: {
|
|
title: intl.string(t.Iuzg8R),
|
|
headerTitle: () => <GenericHeaderTitle title={intl.string(t.Iuzg8R)} />,
|
|
headerLeft: getHeaderCloseButton(ModalActionCreators.pop),
|
|
ignoreKeyboard: true,
|
|
render: (a0, a1) => <EditCustomStatusWithPreview navigation={a1} onClose={ModalActionCreators.pop} analyticsLocations={analyticsLocations3} prompt={prompt2} />
|
|
}
|
|
};
|
|
}, [analyticsLocations2, prompt])} headerStatusBarHeight={isAndroid() ? void 0 : 12} headerStyle={isAndroid() ? void 0 : {
|
|
height: 56
|
|
}} />;
|
|
};
|