yeet

modules/phone/native/CodeField.tsx

@@ -0,0 +1,205 @@
+// Metro module 9261 (f9262).
+import _slicedToArray from "../../../_bundle/_slicedToArray";
+import { useState, useRef, useEffect } from "react";
+import { ScrollView, View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { TextInput } from "../../../design/void/native";
+import * as _TextInput_native from "../../../design/components/TextInput/native/TextInput.native";
+import { intl, t } from "../../../intl/index.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { Text } from "../../../design/components/Text/native/Text";
+import KeyboardAwareView from "../../keyboard/native/KeyboardAwareView";
+let c6092_9, useStyles, CodeFieldInner;
+const SingleCodeInput = function SingleCodeInput(props) {
+  const { loading = false, error, count = 6, codeType = c6092_9.NUMERIC } = props;
+  const NUMERIC = codeType;
+  const { onCodeEntered, disabled, code, setCode } = props;
+  const styles = useStyles();
+  return <View style={styles.singleInputWrapper}>
+    <_TextInput_native.TextInput errorMessage={error} value={code} autoCapitalize="characters" maxLength={count} accessibilityLabel={intl.string(t["ysthA+"])} textContentType="oneTimeCode" keyboardType={NUMERIC === c6092_9.NUMERIC ? "number-pad" : "default"} onChange={function handleChange(event) {
+      setCode(event.replace(NUMERIC === c6092_9.NUMERIC ? /\D/g : /[^A-Z0-9]/g, ""));
+    }} isDisabled={disabled} isClearable autoFocus />
+    <View style={styles.singleInputButton}>
+      <Button loading={loading} variant="primary" size="lg" text={intl.string(t["13ofGu"])} onPress={function handlePressSubmit() {
+        return onCodeEntered(code);
+      }} disabled={code.length !== count || disabled} />
+    </View>
+  </View>;
+};
+CodeFieldInner = function CodeFieldInner(props) {
+  const { title, description, error, onCodeEntered: onCodeEntered2, loading = false, count = 6, codeType = c6092_9.NUMERIC, actions, footer, backgroundStyle, disabled } = props;
+  const styles = useStyles();
+  const r33 = _slicedToArray(useState(""), 2);
+  return <ScrollView style={[styles.background, backgroundStyle]} contentContainerStyle={styles.backgroundFlex} keyboardShouldPersistTaps="handled" alwaysBounceVertical={false}>
+    <View style={styles.container}>
+      <Text style={styles.title} accessibilityRole="header" variant="heading-xl/extrabold" color="mobile-text-heading-primary">{title}</Text>
+      <Text style={styles.subtitle} variant="text-sm/medium" color="text-default">{description}</Text>
+      <View style={styles.inputContainer}>
+        <SingleCodeInput loading={loading} error={error} count={count} onCodeEntered={onCodeEntered2} codeType={codeType} disabled={disabled} code={r33[0]} setCode={r33[1]} />
+      </View>
+      {actions}
+    </View>
+    <KeyboardAwareView>{footer}</KeyboardAwareView>
+  </ScrollView>;
+};
+c6092_9 = {
+  NUMERIC: "numeric",
+  ALPHANUMERIC: "alphanumeric"
+};
+useStyles = createStyles({
+  viewWrapper: {
+    flex: 1
+  },
+  background: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    flex: 1
+  },
+  backgroundFlex: {
+    flex: 1,
+    justifyContent: "space-between"
+  },
+  container: {
+    padding: 16
+  },
+  title: {
+    textAlign: "center"
+  },
+  subtitle: {
+    marginTop: 8,
+    lineHeight: 18,
+    textAlign: "center"
+  },
+  inputContainer: {
+    marginTop: 20,
+    width: "100%",
+    alignItems: "center"
+  },
+  codeContainer: {
+    maxWidth: 336,
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "space-around"
+  },
+  spacer: {
+    width: 4
+  },
+  inputWrapper: {
+    borderWidth: 1,
+    borderRadius: 5,
+    alignItems: "center",
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
+    borderColor: Module712.colors.BACKGROUND_BASE_LOWEST
+  },
+  inputWrapperError: {
+    borderColor: Module712.unsafe_rawColors.RED_400
+  },
+  input: {
+    textAlign: "center"
+  },
+  singleInputWrapper: {
+    width: "100%"
+  },
+  singleInputButton: {
+    marginTop: 8,
+    justifyContent: "flex-end"
+  }
+});
+export default function CodeField(props) {
+  const styles = useStyles();
+  return props.disableKeyboardAvoidingView ? <CodeFieldInner {...props} /> : <KeyboardAwareView style={styles.viewWrapper}>
+    <CodeFieldInner {...props} />
+  </KeyboardAwareView>;
+};
+export { c6092_9 as CodeType };
+export function CodeBlocks(props) {
+  let env17100 = {};
+  const { hasError, onCodeEntered: onCodeEntered2 } = props;
+  env17100[0] = onCodeEntered2;
+  let count = props.count;
+  if (count === void 0) {
+    count = 6;
+  }
+  env17100[1] = count;
+  let codeType = props.codeType;
+  if (codeType === void 0) {
+    codeType = c6092_9.NUMERIC;
+  }
+  env17100[2] = void 0;
+  env17100[3] = void 0;
+  env17100[4] = void 0;
+  env17100[5] = void 0;
+  const styles = useStyles();
+  const r37 = _slicedToArray(useState(Array(count).fill("")), 2);
+  const r38 = r37[0];
+  env17100[2] = r38;
+  env17100[3] = r37[1];
+  env17100[4] = useRef(Array(count).fill(null));
+  env17100[5] = useRef(onCodeEntered2);
+  useEffect(() => {
+    env17100[5].current = env17100[0];
+  });
+  useEffect(() => {
+    const r5 = env17100[2];
+    if (r5.every((item) => item.trim() !== "")) {
+      env17100[5].current(r5.join(""));
+    }
+  }, [r38]);
+  const r55 = [];
+  const r9 = 0 < count;
+  let r1 = 0;
+  if (r9) {
+    do {
+      let c17101_0 = r1;
+      const r2 = count / 2;
+      const key = r1;
+      if (key === r2) {
+        r55.push(<View key="spacer" style={styles.spacer} />);
+      }
+      r55.push(<View key={key} style={[styles.inputWrapper, hasError ? styles.inputWrapperError : null]}>
+        <TextInput ref={(a0) => {
+          env17100[4].current[c17101_0] = a0;
+        }} style={[{
+          height: 42,
+          width: 252 / count
+        }, styles.input]} keyboardType={codeType === c6092_9.NUMERIC ? "phone-pad" : "default"} autoFocus={key === 0} value={r38[key]} onKeyPress={(event) => {
+          if (event.nativeEvent.key !== "Backspace") {
+            const r31 = env17100[4].current[c17101_0 + 1];
+            if (r31 != null) {
+              r31.focus();
+            }
+          } else {
+            const r8 = env17100[2];
+            if (r8[c17101_0] === "") {
+              const r6 = env17100[3];
+              const r17 = c17101_0 - 1;
+              const r18 = [...r8];
+              r18[r17] = "";
+              r6(r18);
+              const r22 = env17100[4].current[r17];
+              if (r22 != null) {
+                r22.focus();
+              }
+            }
+          }
+        }} onChangeText={(text) => {
+          const r8 = text[0];
+          const r5 = env17100[2];
+          const r22 = (r8 === r5[c17101_0] ? text.slice(1) : text).replace("-", "").trim().toUpperCase();
+          let r24 = r22.split("");
+          if (r22 === "") {
+            r24 = [""];
+          }
+          const r25 = [...r5];
+          r25.splice.apply(r25, [c17101_0, 1, ...r24]);
+          (0, env17100[3])(r25.slice(0, env17100[1]));
+        }} selection={{
+          start: r38[key].length,
+          end: r38[key].length
+        }} autoCapitalize="characters" autoCorrect={false} />
+      </View>);
+      r1 = key + 1;
+    } while (r1 < count);
+  }
+  return <View style={styles.codeContainer}>{r55}</View>;
+}

modules/phone/native/CountryCallingCodeSelect.tsx

@@ -0,0 +1,79 @@
+// Metro module 9238 (f9239).
+import { useState, useMemo, useCallback } from "react";
+import { View } from "react-native";
+import { getI18NCountryName } from "../../i18n/CountryCodeUtils";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import useWideAuthView from "../../auth/native/useWideAuthView";
+import Module3871 from "../../../_bundle/Module3871";
+import useScaledRowHeight from "../../main_tabs_v2/native/shared_components/user_list/useScaledRowHeight";
+import fuzzysearch from "../../../_bundle/fuzzysearch";
+import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
+import { Text } from "../../../design/components/Text/native/Text";
+import { SearchField } from "../../../design/components/TextField/native/SearchField.native";
+import ViewEmptyState from "../../../components_native/common/ViewEmptyState";
+import Module8299 from "../../../_bundle/Module8299";
+import { intl, t } from "../../../intl/index.native";
+import FastestList_android from "../../fastest_list/FastestList.android";
+const useStyles = createStyles((a0) => ({
+  container: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    paddingHorizontal: a0 ? Module712.space.PX_24 : Module712.space.PX_12,
+    paddingTop: Module712.space.PX_16,
+    paddingBottom: a0 ? Module712.space.PX_24 : Module712.space.PX_16,
+    flex: 1
+  },
+  searchFieldContainer: {
+    paddingBottom: Module712.space.PX_16
+  }
+}));
+export default function CountryCallingCodeSelect(props) {
+  let rows;
+  const { onCountrySelected, onClose } = props;
+  rows = void 0;
+  const styles = useStyles(useWideAuthView());
+  const [state, onChange] = useState("");
+  const memo = useMemo(() => Module3871.flatMap(({ alpha2, phoneCountryCodes, name }, c30070_2) => {
+    const i18NCountryName = getI18NCountryName(alpha2);
+    return phoneCountryCodes.map((phoneCountryCode) => ({
+      translatedName: i18NCountryName,
+      key: `${c30070_2}-${phoneCountryCode}`,
+      country: {
+        code: phoneCountryCode,
+        alpha2,
+        name
+      }
+    }));
+  }), []);
+  const scaledRowHeight = useScaledRowHeight();
+  const memo2 = useMemo(() => {
+    const rows2 = [];
+    for (const item of memo) {
+      if (state.length === 0 || item.country.code.replace(/\+|\s/g, "").startsWith(state.replace(/\+|\s/g, "")) || fuzzysearch(state.toLowerCase(), item.country.name.toLowerCase()) || fuzzysearch(state.toLowerCase(), item.translatedName.toLowerCase())) {
+        rows2.push(item);
+      }
+    }
+    return {
+      rows: rows2,
+      sections: [rows2.length]
+    };
+  }, [memo, state]);
+  rows = memo2.rows;
+  const sections = memo2.sections;
+  const callback = useCallback((a0, a1) => {
+    const r13 = rows[a1];
+    const { translatedName, country } = r13;
+    return <TableRow start={a1 === 0} end={a1 === rows.length - 1} label={translatedName} trailing={<Text variant="text-md/semibold">{country.code}</Text>} onPress={() => {
+      onCountrySelected(country);
+      if (onClose != null) {
+        onClose();
+      }
+    }} />;
+  }, [onClose, onCountrySelected, rows]);
+  return <View style={styles.container}>
+    <View style={styles.searchFieldContainer}>
+      <SearchField size="md" onChange={onChange} />
+    </View>
+    {state !== "" && rows.length === 0 ? <ViewEmptyState source={Module8299} text={intl.string(t.wEHnxW)} /> : <FastestList_android sections={sections} renderItem={callback} itemSize={scaledRowHeight} estimatedListSize="windowSize" keyboardShouldPersistTaps="always" />}
+  </View>;
+};

modules/phone/native/FormPhoneOrEmail.tsx

@@ -0,0 +1,101 @@
+// Metro module 9236 (f9237).
+import { forwardRef, useRef, useEffect } from "react";
+import { View } from "react-native";
+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 { Text } from "../../../design/components/Text/native/Text";
+import * as _PhoneOrEmailUtils from "../PhoneOrEmailUtils";
+import { PhoneOrEmailSelectorForceMode } from "../PhoneOrEmailUtils";
+import FreeFormLabel from "../../../design/void/Form/native/FreeFormLabel";
+import FreeFormTextInput from "../../../design/void/Form/native/FreeFormTextInput";
+import FreeFormErrorLabel from "../../../design/void/Form/native/FreeFormErrorLabel";
+let useStyles;
+const CountryCodeSelector = function CountryCodeSelector(props) {
+  const show = props.show;
+  let alpha22 = props.alpha2;
+  const { countryCode: countryCode2, onPress } = props;
+  const styles = useStyles();
+  if (alpha22 == null) {
+    alpha22 = "";
+  }
+  const accessibilityLabel = `${alpha22} ${countryCode2}`;
+  return show ? <View style={styles.selectorOuterContainer}>
+    <View style={styles.selectorContainer}>
+      <PressableOpacity onPress={onPress} style={styles.selectorPressable} androidRippleConfig={{
+        borderless: true
+      }} accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityHint={intl.string(t.GwAW3k)}>
+        <Text style={styles.selectorText} variant="text-md/medium" color="mobile-text-heading-primary">{accessibilityLabel}</Text>
+      </PressableOpacity>
+      <View style={styles.separator} />
+    </View>
+  </View> : null;
+};
+useStyles = createStyles({
+  label: {
+    marginBottom: 8
+  },
+  input: {
+    flexGrow: 1,
+    marginBottom: 8
+  },
+  error: {
+    marginBottom: 8
+  },
+  hint: {
+    marginBottom: 8
+  },
+  selectorOuterContainer: {
+    overflow: "hidden"
+  },
+  selectorContainer: {
+    flex: 1,
+    flexDirection: "row"
+  },
+  selectorPressable: {
+    justifyContent: "center"
+  },
+  selectorText: {
+    alignSelf: "center"
+  },
+  separator: {
+    borderLeftWidth: 1,
+    borderLeftColor: Module712.colors.INTERACTIVE_BACKGROUND_SELECTED,
+    marginHorizontal: 12,
+    marginVertical: -4
+  }
+});
+const r43 = forwardRef(function({ style, textInputStyle, label, error, value, hint, onChangeText, alpha2, countryCode, onPressCountrySelector, forceMode, ...props }, a1) {
+  let shouldShowCountryCodeSelector, current, ref;
+  shouldShowCountryCodeSelector = void 0;
+  current = void 0;
+  ref = void 0;
+  const handleChangeText = function handleChangeText(a0) {
+    const r12 = _PhoneOrEmailUtils.shouldShowCountryCodeSelector(forceMode, a0) ? countryCode : "";
+    if (onChangeText != null) {
+      onChangeText(a0, r12);
+    }
+  };
+  const styles = useStyles();
+  shouldShowCountryCodeSelector = _PhoneOrEmailUtils.shouldShowCountryCodeSelector(forceMode, value);
+  current = {
+    handleChangeText,
+    value
+  };
+  ref = useRef(current);
+  useEffect(() => {
+    ref.current = current;
+  });
+  useEffect(() => {
+    const current2 = ref.current;
+    (0, current2.handleChangeText)(current2.value);
+  }, [countryCode]);
+  return <View style={style}>
+    {label != null ? <FreeFormLabel style={styles.label}>{label}</FreeFormLabel> : null}
+    <FreeFormTextInput {...props} renderLeadingComponent={() => <CountryCodeSelector show={shouldShowCountryCodeSelector} alpha2={alpha2} countryCode={countryCode} onPress={onPressCountrySelector} />} error={error != null} ref={a1} value={value} style={[styles.input, textInputStyle]} onChangeText={handleChangeText} textContentType={forceMode === PhoneOrEmailSelectorForceMode.PHONE ? "telephoneNumber" : "emailAddress"} keyboardType={forceMode === PhoneOrEmailSelectorForceMode.PHONE ? "phone-pad" : "email-address"} accessibilityLabel={label} accessibilityHint={hint} />
+    {error != null ? <FreeFormErrorLabel style={styles.error}>{error}</FreeFormErrorLabel> : null}
+    {hint != null ? <Text style={styles.hint} variant="text-xs/medium" color="text-muted">{hint}</Text> : null}
+  </View>;
+});
+export default r43;

modules/phone/native/PhoneOrEmailInput.tsx

@@ -0,0 +1,99 @@
+// Metro module 9210 (f9211).
+import { forwardRef, useState, useRef, useImperativeHandle, useCallback, useEffect, useMemo } from "react";
+import * as _PhoneOrEmailUtils from "../PhoneOrEmailUtils";
+import useStableCallback from "../../../hooks/useStableCallback";
+import { intl, t } from "../../../intl/index.native";
+import { SplitTextInput } from "../../../design/components/SplitTextInput/native/SplitTextInput.native";
+const r22 = forwardRef(function(a0, a1) {
+  let c17072_6, c17072_7;
+  const { onChange, alpha2: _alpha2, countryCode, onPressCountrySelector, forceMode, ...props } = a0;
+  let alpha2 = a0.alpha2;
+  c17072_6 = void 0;
+  c17072_7 = void 0;
+  const [state, setState] = useState("");
+  const ref = useRef(null);
+  useImperativeHandle(a1, () => ({
+    blur: () => {
+      const current = ref.current;
+      return current == null ? void 0 : current.blur();
+    },
+    focus: () => {
+      const current = ref.current;
+      return current == null ? void 0 : current.focus();
+    },
+    isFocused: () => {
+      const current = ref.current;
+      let r6 = current == null ? void 0 : current.isFocused();
+      if (r6 == null) {
+        r6 = false;
+      }
+      return r6;
+    },
+    setText: (a0) => {
+      setState(a0);
+      const current = ref.current;
+      if (current != null) {
+        current.setText(a0);
+      }
+    },
+    getText: () => {
+      const current = ref.current;
+      let r6 = current == null ? void 0 : current.getText();
+      if (r6 == null) {
+        r6 = "";
+      }
+      return r6;
+    },
+    measure: (a0) => {
+      const current = ref.current;
+      return current == null ? void 0 : current.measure(a0);
+    },
+    measureInWindow: (a0) => {
+      const current = ref.current;
+      return current == null ? void 0 : current.measureInWindow(a0);
+    },
+    measureLayout: (a0, a1, a2) => {
+      const current = ref.current;
+      return current == null ? void 0 : current.measureLayout(a0, a1, a2);
+    }
+  }), []);
+  const shouldShowCountryCodeSelector = _PhoneOrEmailUtils.shouldShowCountryCodeSelector(forceMode, state);
+  const callback = useCallback((a0) => {
+    setState(a0);
+    const r14 = _PhoneOrEmailUtils.shouldShowCountryCodeSelector(forceMode, a0) ? countryCode : "";
+    if (onChange != null) {
+      onChange(a0, r14);
+    }
+  }, [countryCode, forceMode, onChange]);
+  const stableCallback = useStableCallback(callback);
+  c17072_6 = stableCallback;
+  useEffect(() => {
+    const current = ref.current;
+    let r8 = current == null ? void 0 : current.getText();
+    if (r8 == null) {
+      r8 = "";
+    }
+    c17072_6(r8);
+  }, [countryCode, stableCallback]);
+  let leadingText = void 0;
+  if (shouldShowCountryCodeSelector) {
+    if (alpha2 == null) {
+      alpha2 = "";
+    }
+    leadingText = `${alpha2} ${countryCode}`;
+  }
+  c17072_7 = leadingText;
+  return <SplitTextInput {...props} ref={ref} onChange={callback} leadingText={leadingText} leadingPressableProps={useMemo(() => {
+    let accessibilityLabel = c17072_7;
+    if (accessibilityLabel == null) {
+      accessibilityLabel = "";
+    }
+    return {
+      onPress: onPressCountrySelector,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityHint: intl.string(t.GwAW3k)
+    };
+  }, [leadingText, onPressCountrySelector])} />;
+});
+export default r22;