react-native-elements#Overlay TypeScript Examples

Loading = (): JSX.Element => {
  const isLoading = useSelector(selectors.loading.getVisibility);
  const isRenderable = useSelector(selectors.app.getRenderableState);

  return (
    <Overlay isVisible={isLoading && !isRenderable}>
      <ActivityIndicator size="large" color="black"/>
    </Overlay>
  );
}

ResponseErrorOverlay = ({
    error,
    visible,
    setVisible,
}: ResponseErrorOverlayProps) => {
    const hide = () => setVisible(false);

    return (
        <Overlay
            isVisible={visible}
            onBackdropPress={hide}
            overlayStyle={{ marginHorizontal: 20, marginVertical: 40 }}
            testID="response_error_overlay"
        >
            <>
                <Button title="Close" onPress={hide} />
                <Text h2 style={{ alignSelf: "center" }}>
                    Error
                </Text>
                <Text h4>Code</Text>
                <Text testID="response_error_overlay.error.code.text">
                    {error?.code}
                </Text>
                <Divider />
                <Text h4>Message</Text>
                <Text testID="response_error_overlay.error.message.text">
                    {error?.message}
                </Text>
                <Divider />
                <Text h4>Domain</Text>
                <Text testID="response_error_overlay.error.domain.text">
                    {error?.domain}
                </Text>
                <Divider />
                <Text h4>User Info</Text>
                <Text testID="response_error_overlay.error.user_info.text">
                    {JSON.stringify(error?.userInfo)}
                </Text>
                <Divider />
                <Text h4>Native Stack</Text>
                <ScrollView>
                    <Text testID="response_error_overlay.error.native_stack.text">
                        {JSON.stringify(
                            error?.nativeStackAndroid || error?.nativeStackIOS
                        )}
                    </Text>
                </ScrollView>
            </>
        </Overlay>
    );
}

ResponseSuccessOverlay = ({
    response,
    visible,
    setVisible,
}: ResponseSuccessOverlayProps) => {
    const hide = () => setVisible(false);

    return (
        <Overlay
            isVisible={visible}
            onBackdropPress={hide}
            overlayStyle={{ marginHorizontal: 20, marginVertical: 40 }}
            testID="response_success_overlay"
        >
            <>
                <Button title="Close" onPress={hide} />
                <Text h4>OK</Text>
                <Text testID="response_success_overlay.success.ok.text">
                    {response?.ok.toString()}
                </Text>
                <Divider />
                <Text h4>Code</Text>
                <Text testID="response_success_overlay.success.code.text">
                    {response?.code}
                </Text>
                <Divider />
                {Boolean(response?.redirectUrls?.length) && (
                    <>
                        <Text h4>Redirect URLs</Text>
                        <Text testID="response_success_overlay.success.redirect_urls.text">
                            {response!.redirectUrls!.join(", ")}
                        </Text>
                        <Divider />
                    </>
                )}
                <Text h4>Retries Exhausted?</Text>
                <Text testID="response_success_overlay.success.retries_exhausted.text">
                    {response?.hasOwnProperty("retriesExhausted")
                        ? response.retriesExhausted!.toString()
                        : "null"}
                </Text>
                <Divider />
                <Text h4>Headers</Text>
                <ScrollView>
                    <Text testID="response_success_overlay.success.headers.text">
                        {JSON.stringify(response?.headers, null, 2)}
                    </Text>
                </ScrollView>
                <Divider />
                <Text h4>Data</Text>
                <ScrollView>
                    <Text testID="response_success_overlay.success.data.text">
                        {JSON.stringify(response?.data, null, 2)}
                    </Text>
                </ScrollView>
            </>
        </Overlay>
    );
}

DevScreen: FC = () => {
  const [loading, setLoading] = useState(true);
  const { params } = useRoute<any>();
  const { id, modify } = params || {};
  const { data: draft, mutate } = useRequest(
    async () => {
      try {
        return await getDraft(id);
      } catch (error) {}
    },
    {
      ready: !!id,
    },
  );
  useUpdateEffect(() => {
    if (draft?.id) {
      updateUrl(draft.id, draft.url || '');
    }
  }, [draft?.url, draft?.id]);

  const navigation = useNavigation();
  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (loading ? <Text>加载中...</Text> : null),
      ...(draft?.name ? { title: draft.name } : null),
    });
  }, [navigation, loading, draft?.name]);
  const [modalVisible, setModalVisible] = useState(false);
  const { script } = useDebug();
  const webView = useRef<WebView>(null);

  const onMessage = (msg: string = '{}') => {
    try {
      const data = JSON.parse(msg);
      switch (data.type) {
        case 'save':
          updateJson(id, JSON.stringify(data.payload));
          break;
        case 'ready':
          webView.current?.injectJavaScript(`
            if (window.injectDraft) {
              window.injectDraft(decodeURIComponent("${encodeURIComponent(
                draft?.json || '{}',
              )}"));
            }
            true;
          `);
          break;
        case 'debug':
          setModalVisible(true);
          script.current = data.payload;
          break;
        default:
          break;
      }
    } catch (error) {}
  };

  const navigateToDebug = () => {
    navigation.navigate(
      'debug' as never,
      {
        url: draft?.url,
      } as never,
    );
    setModalVisible(false);
  };

  return (
    <>
      <Overlay
        transparent
        isVisible={modalVisible}
        onBackdropPress={() => setModalVisible(false)}
        overlayStyle={styles.overlay}
      >
        <Input
          label="输入窗口链接"
          value={draft?.url}
          onChangeText={(url) => mutate((old) => ({ ...old, url } as any))}
        />
        <Button title="确定" disabled={!draft?.url} onPress={navigateToDebug} />
      </Overlay>
      <WebView
        ref={webView}
        originWhitelist={['*']}
        source={{
          uri: `${BEXT_ORIGIN}${
            modify
              ? '/meta?from=dev&devPath=%2Fdev%2Fscript-m'
              : '/dev/script-m'
          }`,
        }}
        onLoad={() => setLoading(false)}
        onMessage={(e) => onMessage(e.nativeEvent.data)}
      />
    </>
  );
}

HomeScreen: FC = () => {
  const navigation = useNavigation();
  const [modalVisible, setModalVisible] = useState(false);
  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Icon name="add" onPress={() => setModalVisible(true)} />
      ),
    });
  }, [navigation]);
  const db = useDb();
  const { loading, data, run } = useRequest(getDrafts, {
    ready: db.ready,
  });
  const [name, setName] = useState('');
  useFocusEffect(useMemoizedFn(run));

  const onDelete = useMemoizedFn(async (id: number) => {
    await deleteDraft(id);
    run();
  });

  const onPress = useMemoizedFn((id: number) => {
    navigation.navigate(
      'dev' as never,
      {
        id,
      } as never,
    );
  });

  const createDraft = useMemoizedFn(async (empty: boolean) => {
    const id = await addDraft(name);
    setName('');
    run();
    setModalVisible(false);
    if (id) {
      navigation.navigate(
        'dev' as never,
        {
          id,
          modify: empty ? undefined : true,
        } as never,
      );
    }
  });

  return (
    <View style={{ flex: 1 }}>
      <Overlay
        transparent
        isVisible={modalVisible}
        onBackdropPress={() => setModalVisible(false)}
        overlayStyle={styles.overlay}
      >
        <Input
          label="输入草稿名称（不是脚本名称）"
          value={name}
          onChangeText={setName}
        />
        <View style={styles.buttons}>
          <Button
            title="创建空白草稿"
            disabled={!name.length}
            onPress={() => createDraft(true)}
            containerStyle={styles.button}
          />
          <View style={styles.space} />
          <Button
            title="从现有脚本创建"
            disabled={!name.length}
            onPress={() => createDraft(false)}
            containerStyle={styles.button}
          />
        </View>
      </Overlay>
      <FlatList
        data={data || []}
        keyExtractor={(item) => String(item.id)}
        renderItem={({ item }) => (
          <DraftItem
            draft={item}
            onDelete={() => onDelete(item.id)}
            onPress={() => onPress(item.id)}
          />
        )}
        onRefresh={run}
        refreshing={loading}
      />
    </View>
  );
}