267 lines
13 KiB
TypeScript
267 lines
13 KiB
TypeScript
// Metro module 11372 (f11373).
|
|
import { forwardRef, useEffect, useRef, useCallback } from "react";
|
|
import { ScrollView, TouchableOpacity, View } from "react-native";
|
|
import { MAX_POLL_QUESTION_LENGTH, POLL_CREATION_DURATION_ACTION_SHEET_KEY } from "../PollsConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { isAndroid } from "../../../utils/PlatformUtils";
|
|
import { AlertModal, AlertActionButton } from "../../../design/components/AlertModal/native/AlertModal.native";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { TextInput } from "../../../design/components/TextInput/native/TextInput.native";
|
|
import { Icon } from "../../../design/void/native";
|
|
import Module11373 from "../../../_bundle/Module11373";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import usePollDurationOptions from "../usePollDurationOptions";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
|
|
import { dismissKeyboard } from "../../../utils/native/ChatInputUtils";
|
|
import useTrackImpression from "../../app_analytics/useTrackImpression";
|
|
import { ImpressionTypes, ImpressionNames } from "../../../_bundle/Module503";
|
|
import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
|
|
import { closeCreatePollModal } from "./PollCreationModalActionCreators";
|
|
import ToastActionCreators from "../../toast/native/ToastActionCreators";
|
|
import { PollsIcon } from "../../../design/components/Icon/native/redesign/generated/PollsIcon";
|
|
import { AccessibilityAnnouncer } from "../../../_bundle/Module3902";
|
|
import useCreatePollFormData from "../useCreatePollFormData";
|
|
import { useTrackPollCreationEvents } from "../useTrackPollEvents";
|
|
import { useNavigatorBackPressHandler } from "../../../design/components/Navigator/native/useNavigatorBackPressHandler.native";
|
|
import { isPollCreationEmpty } from "../PollsUtils";
|
|
import { openAlert } from "../../../design/components/AlertModal/native/useAlertStore.native";
|
|
import useFocusHelper from "./useFocusHelper";
|
|
import { HeaderActionButton } from "../../../design/components/Navigator/native/HeaderActionButton.native";
|
|
import Module5176 from "../../../_bundle/Module5176";
|
|
import ErrorBlock from "../../guild_role_subscriptions/native/components/ErrorBlock";
|
|
import { FormLabel } from "../../../design/void/Form/native/index";
|
|
import PollAnswerInput from "./PollAnswerInput";
|
|
import { TableCheckboxRow } from "../../../design/components/TableRow/native/TableCheckboxRow.native";
|
|
let useStyles, Component, AddAnswerButton, PollDurationSelectionRow;
|
|
const UnsavedChangesAlertModal = function UnsavedChangesAlertModal(props) {
|
|
const onConfirm = props.onConfirm;
|
|
return <AlertModal title={intl.string(t.HMrgcp)} content={intl.string(t["Wxa/j8"])} actions={<>
|
|
<AlertActionButton key="confirm" text={intl.string(t.TzJA4g)} onPress={onConfirm} />
|
|
<AlertActionButton key="back" variant="secondary" text={intl.string(t["2BR5R2"])} />
|
|
</>} />;
|
|
};
|
|
AddAnswerButton = function AddAnswerButton(props) {
|
|
const onPress2 = props.onPress;
|
|
const styles = useStyles();
|
|
const addAnswerButtonDefault = styles.addAnswerButtonDefault;
|
|
const r24 = <Icon source={Module11373} size={Icon.Sizes.LARGE} color={styles.addAnswerIcon.color} />;
|
|
return <TouchableOpacity onPress={onPress2} style={addAnswerButtonDefault} accessibilityRole="button" accessibilityLabel={intl.string(t.B2Uvme)}>
|
|
{r24}
|
|
<Text variant="text-md/medium" color="text-muted">
|
|
{intl.string(t.B2Uvme)}
|
|
</Text>
|
|
</TouchableOpacity>;
|
|
};
|
|
PollDurationSelectionRow = function PollDurationSelectionRow(props) {
|
|
const { selectedDuration, onChange } = props;
|
|
const r6 = usePollDurationOptions()[selectedDuration];
|
|
return <TableRow label={intl.string(t.bGHzxb)} accessibilityLabel={`${intl.string(t.bGHzxb)} ${r6}`} accessibilityHint={intl.string(t.A4PJ1o)} onPress={function onPress() {
|
|
dismissKeyboard();
|
|
ActionSheetActionCreators.openLazy(import("./PollDurationActionSheet"), POLL_CREATION_DURATION_ACTION_SHEET_KEY, {
|
|
selectedDuration,
|
|
onChange
|
|
});
|
|
}} trailing={<Text variant="text-md/normal" color="text-muted">{r6}</Text>} arrow />;
|
|
};
|
|
useStyles = createStyles({
|
|
viewPadding: {
|
|
paddingHorizontal: 18
|
|
},
|
|
scrollContainer: {
|
|
paddingVertical: 20,
|
|
gap: 16
|
|
},
|
|
safeAreaContainer: {
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
flex: 1
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
paddingHorizontal: 18,
|
|
paddingVertical: 10
|
|
},
|
|
actionButton: {
|
|
flex: 0,
|
|
justifyContent: "flex-start",
|
|
minWidth: 48,
|
|
paddingHorizontal: 0,
|
|
marginHorizontal: 0
|
|
},
|
|
postButton: {
|
|
justifyContent: "flex-end"
|
|
},
|
|
title: {
|
|
textAlign: "center",
|
|
flexGrow: 1
|
|
},
|
|
label: {
|
|
fontSize: 14
|
|
},
|
|
answerInputsContainer: {
|
|
marginVertical: 20,
|
|
rowGap: 16
|
|
},
|
|
addAnswerButtonDefault: {
|
|
paddingVertical: isAndroid() ? 10 : 8,
|
|
paddingLeft: 14,
|
|
marginRight: 30,
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: 16,
|
|
alignItems: "center",
|
|
justifyContent: "flex-start",
|
|
backgroundColor: Module712.colors.MESSAGE_BACKGROUND_HOVER,
|
|
borderRadius: Module712.radii.lg
|
|
},
|
|
addAnswerIcon: {
|
|
color: Module712.colors.TEXT_MUTED
|
|
},
|
|
pollConfigSection: {
|
|
borderTopWidth: 1,
|
|
borderColor: Module712.colors.INTERACTIVE_BACKGROUND_HOVER
|
|
}
|
|
});
|
|
Component = forwardRef(function({ onChange: onChange2, onSubmitEditing, error }, a1) {
|
|
const r2 = error != null && error.length > 0;
|
|
return <TextInput ref={a1} textAlignVertical="center" label={intl.string(t.WBiKnI)} accessibilityLabel={intl.string(t.WBiKnI)} accessibilityHint={r2 ? intl.formatToPlainString(t.jnq5Ho, {
|
|
errorMessage: error
|
|
}) : void 0} placeholder={intl.string(t["/uQqJW"])} onChange={onChange2} isClearable status={r2 ? "error" : "default"} errorMessage={error} maxLength={MAX_POLL_QUESTION_LENGTH} returnKeyType="next" blurOnSubmit={false} onSubmitEditing={onSubmitEditing} textContentType="none" autoFocus autoCorrect />;
|
|
});
|
|
export default function PollCreation(props) {
|
|
let ref, answers, question, allowMultiSelect, setAllowMultiSelect, canRemoveMoreAnswers, handleAnswerTextChange, handleEmojiSelect, handleAddAnswer, handleRemoveAnswer, handleRemoveAnswerImage, fieldErrors, shouldFocusOnInvalidField, setShouldFocusOnInvalidField, trackPollCreationCancelled, c18787_18;
|
|
const { channel, onCancel } = props;
|
|
ref = void 0;
|
|
answers = void 0;
|
|
question = void 0;
|
|
allowMultiSelect = void 0;
|
|
setAllowMultiSelect = void 0;
|
|
canRemoveMoreAnswers = void 0;
|
|
handleAnswerTextChange = void 0;
|
|
handleEmojiSelect = void 0;
|
|
handleAddAnswer = void 0;
|
|
handleRemoveAnswer = void 0;
|
|
handleRemoveAnswerImage = void 0;
|
|
fieldErrors = void 0;
|
|
shouldFocusOnInvalidField = void 0;
|
|
setShouldFocusOnInvalidField = void 0;
|
|
trackPollCreationCancelled = void 0;
|
|
c18787_18 = void 0;
|
|
const handleCancelClose2 = function handleCancelClose() {
|
|
trackPollCreationCancelled();
|
|
closeCreatePollModal();
|
|
AccessibilityAnnouncer.announce(intl.string(t["+G3oRq"]));
|
|
};
|
|
useTrackImpression({
|
|
type: ImpressionTypes.VIEW,
|
|
name: ImpressionNames.POLL_EDITOR_VIEWED
|
|
});
|
|
useEffect(() => () => {
|
|
if (!ref.current && onCancel != null) {
|
|
onCancel();
|
|
}
|
|
}, [onCancel]);
|
|
const styles = useStyles();
|
|
const insets = useSafeAreaInsetsKeyboardAware_native({
|
|
includeKeyboardHeight: true
|
|
}).insets;
|
|
ref = useRef(false);
|
|
const createPollFormData = useCreatePollFormData(channel, useCallback(() => {
|
|
ref.current = true;
|
|
closeCreatePollModal();
|
|
ToastActionCreators.open({
|
|
key: "POLL_CREATED_SUCCESS",
|
|
IconComponent: PollsIcon,
|
|
content: intl.string(t.OPsckI)
|
|
});
|
|
}, []), useCallback((a0) => {
|
|
AccessibilityAnnouncer.announce(intl.formatToPlainString(t.BByGU4, {
|
|
number: a0.indexToRemove + 1
|
|
}));
|
|
}, []));
|
|
answers = createPollFormData.answers;
|
|
question = createPollFormData.question;
|
|
allowMultiSelect = createPollFormData.allowMultiSelect;
|
|
setAllowMultiSelect = createPollFormData.setAllowMultiSelect;
|
|
let canAddMoreAnswers = createPollFormData.canAddMoreAnswers;
|
|
canRemoveMoreAnswers = createPollFormData.canRemoveMoreAnswers;
|
|
const handleQuestionChange = createPollFormData.handleQuestionChange;
|
|
handleAnswerTextChange = createPollFormData.handleAnswerTextChange;
|
|
handleEmojiSelect = createPollFormData.handleEmojiSelect;
|
|
handleAddAnswer = createPollFormData.handleAddAnswer;
|
|
handleRemoveAnswer = createPollFormData.handleRemoveAnswer;
|
|
handleRemoveAnswerImage = createPollFormData.handleRemoveAnswerImage;
|
|
const handleSubmitPoll = createPollFormData.handleSubmitPoll;
|
|
fieldErrors = createPollFormData.fieldErrors;
|
|
const { duration, setDuration, createPollError, submitting } = createPollFormData;
|
|
shouldFocusOnInvalidField = createPollFormData.shouldFocusOnInvalidField;
|
|
setShouldFocusOnInvalidField = createPollFormData.setShouldFocusOnInvalidField;
|
|
trackPollCreationCancelled = useTrackPollCreationEvents(answers, allowMultiSelect).trackPollCreationCancelled;
|
|
useNavigatorBackPressHandler(() => {
|
|
let r0;
|
|
if (isPollCreationEmpty(question, answers)) {
|
|
trackPollCreationCancelled();
|
|
AccessibilityAnnouncer.announce(intl.string(t["+G3oRq"]));
|
|
r0 = false;
|
|
} else {
|
|
openAlert("poll-creation-unsaved-changes", <UnsavedChangesAlertModal onConfirm={handleCancelClose2} />);
|
|
r0 = true;
|
|
}
|
|
return r0;
|
|
});
|
|
const focusHelper = useFocusHelper({
|
|
onAddAnswer: () => {
|
|
handleAddAnswer();
|
|
}
|
|
});
|
|
c18787_18 = focusHelper;
|
|
useEffect(() => {
|
|
const r13 = Object.keys(fieldErrors);
|
|
if (r13.length > 0) {
|
|
AccessibilityAnnouncer.announce(intl.formatToPlainString(t.w8e4qF, {
|
|
numOfErrors: r13.length
|
|
}));
|
|
if (shouldFocusOnInvalidField) {
|
|
c18787_18.focus(r13[0]);
|
|
setShouldFocusOnInvalidField(false);
|
|
}
|
|
}
|
|
}, [fieldErrors, focusHelper, setShouldFocusOnInvalidField, shouldFocusOnInvalidField]);
|
|
const r152 = [<View style={styles.header}>
|
|
<HeaderActionButton accessibilityLabel={intl.string(t["ETE/oC"])} onPress={function onPress() {
|
|
if (isPollCreationEmpty(question, answers)) {
|
|
trackPollCreationCancelled();
|
|
closeCreatePollModal();
|
|
AccessibilityAnnouncer.announce(intl.string(t["+G3oRq"]));
|
|
} else {
|
|
openAlert("poll-creation-unsaved-changes", <UnsavedChangesAlertModal onConfirm={handleCancelClose2} />);
|
|
}
|
|
}} source={Module5176} style={styles.actionButton} />
|
|
<Text accessibilityRole="header" variant="redesign/heading-18/bold" color="mobile-text-heading-primary" style={styles.title}>
|
|
{intl.string(t.Flr51u)}
|
|
</Text>
|
|
<HeaderActionButton text={intl.string(t.JOj8Zk)} style={[styles.actionButton, styles.postButton]} disabled={submitting} onPress={handleSubmitPoll} />
|
|
</View>, , ,];
|
|
const r164 = [createPollError != null && <ErrorBlock>
|
|
{createPollError == null ? void 0 : createPollError.getAnyErrorMessage()}
|
|
</ErrorBlock>, <Component ref={focusHelper.refWithKey("question")} onChange={handleQuestionChange} onSubmitEditing={focusHelper.focusNext} error={fieldErrors?.question} />, ,];
|
|
const r191 = [<FormLabel text={intl.string(t.oMBfeS)} color="text-subtle" style={styles.label} />, answers.map((a0, a1) => <PollAnswerInput key={a0.localCreationAnswerId} inputRef={c18787_18.refWithKey(`answer-${a0.localCreationAnswerId}`)} answer={a0} index={a1} channelId={channel.id} onSubmitEditing={c18787_18.focusNext} onAnswerTextChange={handleAnswerTextChange} onAnswerEmojiSelect={handleEmojiSelect} onRemoveAnswer={handleRemoveAnswer} onRemoveAnswerImage={handleRemoveAnswerImage} canRemoveAnswer={canRemoveMoreAnswers} error={fieldErrors == null ? void 0 : fieldErrors[`answer-${a0.localCreationAnswerId}`]} />), ,];
|
|
if (canAddMoreAnswers) {
|
|
canAddMoreAnswers = <AddAnswerButton onPress={handleAddAnswer} />;
|
|
}
|
|
r191[2] = canAddMoreAnswers;
|
|
r164[2] = <View style={styles.answerInputsContainer}>{r191}</View>;
|
|
r152[1] = <ScrollView style={styles.viewPadding} contentContainerStyle={styles.scrollContainer} keyboardShouldPersistTaps="handled">{r164}</ScrollView>;
|
|
r152[2] = <View style={styles.pollConfigSection}>
|
|
<PollDurationSelectionRow selectedDuration={duration} onChange={setDuration} />
|
|
<TableCheckboxRow label={intl.string(t["Ux+iQU"])} checked={allowMultiSelect} onPress={() => setAllowMultiSelect(!allowMultiSelect)} />
|
|
</View>;
|
|
return <View style={[styles.safeAreaContainer, {
|
|
paddingTop: insets.top,
|
|
paddingBottom: insets.bottom
|
|
}]}>
|
|
<>{r152}</>
|
|
</View>;
|
|
};
|