yeet

modules/avatar/native/components/RedesignAddAvatarModal.tsx

@@ -0,0 +1,140 @@
+// Metro module 16276 (f16277).
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import UserProfileSettingsStore from "../../../user_profile/UserProfileSettingsStore";
+import { UPLOAD_MEDIUM_SIZE } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { createPendingImage, generateAvatarDescription } from "../../../recent_avatars/RecentAvatarUtils";
+import PresetAvatarSelect, { DEFAULT_AVATARS } from "./PresetAvatarSelect";
+import { memoizedImageSource } from "../../../calls/native/VideoBackground";
+import { openImagePicker, base64GIFRegex } from "../../../../utils/native/UploadUtils";
+import { setPendingChanges } from "../../../user_profile/UserProfileSettingsActionCreators";
+import { announcePendingAvatarChange } from "../../../profile_customization/ProfileCustomizationUtils";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import TouchableUploadAvatar from "./TouchableUploadAvatar";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { handlePressNext } from "../AddAvatarModalActionCreators";
+const useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  contentContainer: {
+    flexGrow: 2,
+    alignItems: "center"
+  },
+  growContainer: {
+    flexGrow: 2,
+    minHeight: Module712.space.PX_24
+  },
+  headerContainer: {
+    display: "flex",
+    alignItems: "center"
+  },
+  buttonContainer: {
+    width: "100%"
+  },
+  title: {
+    marginBottom: Module712.space.PX_8,
+    textAlign: "center"
+  },
+  subtitle: {
+    textAlign: "center"
+  },
+  errorContainer: {
+    alignSelf: "center",
+    paddingTop: Module712.space.PX_24
+  }
+});
+export default function RedesignAddAvatarModal(props) {
+  let setState, state, setState2, stateFromStores;
+  const onComplete = props.route.params.onComplete;
+  setState = void 0;
+  state = void 0;
+  setState2 = void 0;
+  stateFromStores = void 0;
+  let _handleSelectAvatar2 = function _handleSelectAvatar() {
+    const r9 = async () => {
+      let c31013_1;
+      let c31807_0, c31807_1;
+      L13: {
+        c31013_1 = void 0;
+        c31807_0 = void 0;
+        c31807_1 = void 0;
+        setState(false);
+        c31807_0 = (await openImagePicker({
+          size: UPLOAD_MEDIUM_SIZE
+        })).base64;
+        if (c31807_0 != null) {
+          if (c31807_0.match(base64GIFRegex) != null) {
+            (0, setState)(true);
+            break L13;
+          }
+        }
+        c31807_1 = c31807_0 != null ? createPendingImage({
+          imageUri: c31807_0,
+          description: generateAvatarDescription()
+        }) : void 0;
+        setPendingChanges({
+          avatar: c31807_1
+        });
+        announcePendingAvatarChange(c31807_1 == null ? "remove" : "set");
+        (0, setState2)(void 0);
+      }
+    };
+    _handleSelectAvatar2 = r9;
+    return r9.apply(this, arguments);
+  };
+  const styles = useStyles();
+  let state2;
+  [state2, setState] = useState(false);
+  [state, setState2] = useState();
+  const bottom = useSafeAreaInsets_native().bottom;
+  const stateFromStores2 = useStateFromStores([UserProfileSettingsStore], () => UserProfileSettingsStore.getPendingChanges().pendingAvatar);
+  let r13 = state != null ? createPendingImage({
+    imageUri: DEFAULT_AVATARS[state],
+    description: generateAvatarDescription()
+  }) : void 0;
+  if (r13 == null) {
+    r13 = stateFromStores2;
+  }
+  stateFromStores = r13;
+  const avatarSource = memoizedImageSource(stateFromStores?.imageUri);
+  const r112 = [<View>
+    <Text style={styles.title} accessibilityRole="header" variant="heading-xl/extrabold" color="mobile-text-heading-primary">
+      {intl.string(t.XQRWvR)}
+    </Text>
+    <Text style={styles.subtitle} variant="text-sm/medium" color="text-default">
+      {intl.string(t.fH9TLT)}
+    </Text>
+  </View>, <TouchableUploadAvatar avatarSource={avatarSource} showPendingAvatar={stateFromStores != null} onSelectAvatar={function handleSelectAvatar() {
+    return _handleSelectAvatar2.apply(this, arguments);
+  }} />, ,];
+  if (state2) {
+    state2 = <Text variant="text-sm/medium" color="text-feedback-critical">
+      {intl.string(t.XyLlVm)}
+    </Text>;
+  }
+  r112[2] = <View style={styles.errorContainer}>{state2}</View>;
+  return <ScrollView style={styles.container} alwaysBounceVertical={false} contentContainerStyle={[styles.contentContainer, {
+    paddingBottom: bottom + Module712.space.PX_16,
+    paddingHorizontal: Module712.space.PX_16
+  }]}>
+    <View style={styles.headerContainer}>{r112}</View>
+    <PresetAvatarSelect onAvatarSelect={setState2} selectedAvatar={state} />
+    <View style={styles.growContainer} />
+    <View style={styles.buttonContainer}>
+      <Button variant="primary" size="lg" text={intl.string(t.PDTjLN)} onPress={() => {
+        let r11 = onComplete;
+        if (onComplete == null) {
+          r11 = () => {};
+        }
+        return handlePressNext(stateFromStores, state, r11);
+      }} disabled={stateFromStores == null} />
+    </View>
+  </ScrollView>;
+};