jrshikoku/components/Settings/WidgetSettings.js

import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import { useNavigation } from "@react-navigation/native";
import { CheckBox } from "react-native-elements";
import { getWidgetInfo, WidgetPreview } from "react-native-android-widget";
import { getDelayData } from "../AndroidWidget/TraInfoEXWidget";
import { getInfoString } from "../AndroidWidget/InfoWidget";
import { AS } from "../../storageControl";
import { nameToWidget } from "../AndroidWidget/widget-task-handler";
import { ListItem } from "native-base";
import { SheetHeaderItem } from "../atom/SheetHeaderItem";

export const WidgetSettings = ({ navigate }) => {
  const { JR_shikoku_train_info, Info_Widget } = nameToWidget;
  const { goBack } = useNavigation();
  const [time, setTime] = useState();
  const [delayString, setDelayString] = useState();
  const [trainInfo, setTrainInfo] = useState();
  const [widgetList, setWidgetList] = useState([]);
  const reload = async () => {
    const d = [];
    const data = await getWidgetInfo("JR_shikoku_train_info");
    data.forEach((elem) => {
      d.push(elem.widgetId);
    });
    setWidgetList(d);
  };

  useEffect(() => {
    reload();
  }, []);

  useEffect(() => {
    getDelayData().then(({ time, delayString }) => {
      setTime(time);
      setDelayString(delayString);
    });
    getInfoString().then(({ time, text }) => {
      setTime(time);
      setTrainInfo(text.toString());
    });
  }, []);
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <SheetHeaderItem
        title="ウィジェット設定"
        LeftItem={{ title: "＜ 設定", onPress: goBack }}
      />
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
        <View style={{ alignContent: "center", alignItems: "center" }}>
          <View
            style={{
              borderRadius: 15,
              borderColor: "black",
              borderWidth: 5,
              borderStyle: "solid",
              overflow: "hidden",
              margin: 10,
            }}
          >
            <WidgetPreview
              renderWidget={() => (
                <JR_shikoku_train_info time={time} delayString={delayString} />
              )}
              width={400}
              height={250}
            />
          </View>
          <View
            style={{
              borderRadius: 15,
              borderColor: "black",
              borderWidth: 5,
              borderStyle: "solid",
              overflow: "hidden",
              margin: 10,
            }}
          >
            <WidgetPreview
              renderWidget={() => <Info_Widget time={time} text={trainInfo} />}
              width={400}
              height={250}
            />
          </View>
        </View>
        <ListItem key={"default"}>
          <Text
            style={{
              fontSize: 20,
              alignItems: "center",
              alignContent: "center",
              textAlign: "center",
              textAlignVertical: "center",
              marginRight: 10,
            }}
          >
            ID
          </Text>
          <Text
            style={{
              fontSize: 20,
              alignItems: "center",
              alignContent: "center",
              textAlign: "center",
              textAlignVertical: "center",
            }}
          >
            名前
          </Text>
        </ListItem>
        {widgetList.map((id) => (
          <WidgetList id={id} key={id} />
        ))}
      </ScrollView>
      <Text
        style={{
          backgroundColor: "white",
          borderWidth: 1,
          borderStyle: "solid",
        }}
      >
        ホーム画面に追加したウィジェットをリストアップします。現状は数を表示するだけですが、ここに各種設定を追加していく予定です。
      </Text>
    </View>
  );
};

const SimpleSwitch = ({ bool, setBool, str }) => (
  <View style={{ flexDirection: "row" }}>
    <CheckBox
      checked={bool == "true" ? true : false}
      checkedColor="red"
      onPress={() => setBool(bool == "true" ? "false" : "true")}
      containerStyle={{
        flex: 1,
        backgroundColor: "#00000000",
        borderColor: "white",
        alignContent: "center",
      }}
      textStyle={{ fontSize: 20, fontWeight: "normal" }}
      title={str}
    />
  </View>
);
const WidgetList = ({ id }) => {
  const [widgetConfig, setWidgetConfig] = useState("");
  const reload = () => {
    AS.getItem(`widgetType/${id}`)
      .then((widgetType) => {
        setWidgetConfig(widgetType);
      })
      .catch((e) => {
        setWidgetConfig("JR_shikoku_train_info");
      });
  };
  useEffect(reload, [id]);
  return (
    <ListItem
      key={id}
      onPress={() => {
        //widget.widgetNameで定義されてないもう一つのウィジェットを選択する
        if (widgetConfig === "Info_Widget") {
          AS.setItem(`widgetType/${id}`, "JR_shikoku_train_info");
        } else {
          AS.setItem(`widgetType/${id}`, "Info_Widget");
        }
        reload();
      }}
    >
      <Text
        style={{
          fontSize: 20,
          alignItems: "center",
          alignContent: "center",
          textAlign: "center",
          textAlignVertical: "center",
          marginRight: 10,
        }}
      >
        {id}
      </Text>
      <Text
        style={{
          fontSize: 20,
          alignItems: "center",
          alignContent: "center",
          textAlign: "center",
          textAlignVertical: "center",
        }}
      >
        {widgetConfig}
      </Text>
    </ListItem>
  );
};