ウィジェットのコア作成
This commit is contained in:
harukin-expo-dev-env
parent
59e2ea32d8
commit
f85c79ab2c
95
components/AndroidWidget/InfoWidget.jsx
Normal file
95
components/AndroidWidget/InfoWidget.jsx
Normal file
@ -0,0 +1,95 @@
|
||||
import React from "react";
|
||||
import {
|
||||
FlexWidget,
|
||||
TextWidget,
|
||||
ListWidget,
|
||||
} from "react-native-android-widget";
|
||||
|
||||
export function InfoWidget({ time, delayString }) {
|
||||
return (
|
||||
<FlexWidget
|
||||
style={{
|
||||
height: "match_parent",
|
||||
width: "match_parent",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#ffffff",
|
||||
borderRadius: 16,
|
||||
}}
|
||||
clickAction="WIDGET_CLICK"
|
||||
>
|
||||
<FlexWidget
|
||||
style={{
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#0099CC",
|
||||
width: "100%",
|
||||
flexDirection: "row",
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
}}
|
||||
>
|
||||
<TextWidget
|
||||
text={"列車運行情報"}
|
||||
style={{
|
||||
fontSize: 30,
|
||||
fontWeight: "bold",
|
||||
fontFamily: "Inter",
|
||||
color: "#fff",
|
||||
textAlign: "left",
|
||||
marginLeft: 10,
|
||||
}}
|
||||
/>
|
||||
<FlexWidget style={{ flex: 1 }} />
|
||||
<TextWidget
|
||||
text={time}
|
||||
style={{
|
||||
fontSize: 30,
|
||||
fontFamily: "Inter",
|
||||
color: "#fff",
|
||||
textAlign: "right",
|
||||
marginRight: 10,
|
||||
}}
|
||||
/>
|
||||
</FlexWidget>
|
||||
<ListWidget
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#fff",
|
||||
width: "match_parent",
|
||||
height: "match_parent",
|
||||
padding: 10,
|
||||
}}
|
||||
>
|
||||
{delayString ? (
|
||||
<FlexWidget
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
width: "match_parent",
|
||||
backgroundColor: "#ffffff",
|
||||
flex: 1,
|
||||
}}
|
||||
clickAction="WIDGET_CLICK"
|
||||
>
|
||||
<FlexText flex={3} text={delayString} />
|
||||
</FlexWidget>
|
||||
) : (
|
||||
<TextWidget
|
||||
style={{
|
||||
color: "#000000",
|
||||
fontSize: 20,
|
||||
}}
|
||||
clickAction="WIDGET_CLICK"
|
||||
text="通常運行中です。"
|
||||
/>
|
||||
)}
|
||||
</ListWidget>
|
||||
</FlexWidget>
|
||||
);
|
||||
}
|
||||
|
||||
const FlexText = ({ flex, text }) => (
|
||||
<FlexWidget style={{ flex }}>
|
||||
<TextWidget style={{ fontSize: 20, color: "#000000" }} text={text} />
|
||||
</FlexWidget>
|
||||
);
|
||||
@ -2,10 +2,30 @@ import React from "react";
|
||||
import { TraInfoEXWidget } from "./TraInfoEXWidget";
|
||||
import dayjs from "dayjs";
|
||||
import { ToastAndroid } from "react-native";
|
||||
import { InfoWidget } from "./InfoWidget";
|
||||
import { AS } from "../../storageControl";
|
||||
|
||||
export const nameToWidget = {
|
||||
// Hello will be the **name** with which we will reference our widget.
|
||||
JR_shikoku_train_info: TraInfoEXWidget,
|
||||
Info_Widget: InfoWidget,
|
||||
};
|
||||
|
||||
export const getInfoString = async () => {
|
||||
// Fetch data from the server
|
||||
const time = dayjs().format("HH:mm");
|
||||
const text = await fetch(
|
||||
"https://script.google.com/macros/s/AKfycbz80LcaEUrhnlEsLkJy0LG2IRO3DBVQhfNmN1d_0f_HvtsujNQpxM90SrV9yKWH_JG1Ww/exec"
|
||||
)
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
if (data !== "") {
|
||||
return data.split("^");
|
||||
}
|
||||
return null;
|
||||
});
|
||||
ToastAndroid.show(`${text}`, ToastAndroid.SHORT);
|
||||
return { time, text };
|
||||
};
|
||||
|
||||
export const getDelayData = async () => {
|
||||
@ -25,20 +45,29 @@ export const getDelayData = async () => {
|
||||
return { time, delayString };
|
||||
};
|
||||
export async function widgetTaskHandler(props) {
|
||||
const widgetInfo = props.widgetInfo;
|
||||
const Widget = nameToWidget[widgetInfo.widgetName];
|
||||
const WidgetName = await AS.getItem(
|
||||
`widgetType/${props.widgetInfo.widgetId}`
|
||||
).catch((e) => "JR_shikoku_train_info");
|
||||
ToastAndroid.show(
|
||||
`Widget Action: ${JSON.stringify(props.widgetInfo.widgetId)}`,
|
||||
ToastAndroid.SHORT
|
||||
);
|
||||
const { time, delayString } = await getDelayData();
|
||||
ToastAndroid.show(`Widget Name: ${WidgetName}`, ToastAndroid.SHORT);
|
||||
switch (props.widgetAction) {
|
||||
case "WIDGET_ADDED":
|
||||
case "WIDGET_UPDATE":
|
||||
case "WIDGET_CLICK":
|
||||
case "WIDGET_RESIZED":
|
||||
// Not needed for now
|
||||
props.renderWidget(<Widget time={time} delayString={delayString} />);
|
||||
if (WidgetName === "JR_shikoku_train_info") {
|
||||
const Widget = nameToWidget[WidgetName];
|
||||
const { time, delayString } = await getDelayData();
|
||||
props.renderWidget(<Widget time={time} delayString={delayString} />);
|
||||
} else if (WidgetName === "Info_Widget") {
|
||||
const Widget = nameToWidget[WidgetName];
|
||||
const { time, text } = await getInfoString();
|
||||
props.renderWidget(<Widget time={time} delayString={text} />);
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
|
||||
@ -5,13 +5,16 @@ import { CheckBox } from "react-native-elements";
|
||||
import { TripleSwitchArea } from "../atom/TripleSwitchArea";
|
||||
import { getWidgetInfo, WidgetPreview } from "react-native-android-widget";
|
||||
import { TraInfoEXWidget } from "../AndroidWidget/TraInfoEXWidget";
|
||||
import { AS } from "../../storageControl";
|
||||
import {
|
||||
getDelayData,
|
||||
nameToWidget,
|
||||
getInfoString,
|
||||
} from "../AndroidWidget/widget-task-handler";
|
||||
import { ListItem } from "native-base";
|
||||
|
||||
export const WidgetSettings = ({ navigate }) => {
|
||||
const { JR_shikoku_train_info, Info_Widget } = nameToWidget;
|
||||
const [widgetList, setWidgetList] = useState([]);
|
||||
useEffect(() => {
|
||||
const d = [];
|
||||
@ -28,14 +31,18 @@ export const WidgetSettings = ({ navigate }) => {
|
||||
});
|
||||
setWidgetList(d);
|
||||
}, []);
|
||||
|
||||
const [time, setTime] = useState(time);
|
||||
const [delayString, setDelayString] = useState(delayString);
|
||||
const [trainInfo, setTrainInfo] = useState();
|
||||
useEffect(() => {
|
||||
getDelayData().then(({ time, delayString }) => {
|
||||
setTime(time);
|
||||
setDelayString(delayString);
|
||||
});
|
||||
getInfoString().then(({ time, text }) => {
|
||||
setTime(time);
|
||||
setTrainInfo(text);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<View style={{ height: "100%", backgroundColor: "#0099CC" }}>
|
||||
@ -90,18 +97,31 @@ export const WidgetSettings = ({ navigate }) => {
|
||||
margin: 10,
|
||||
}}
|
||||
>
|
||||
{Object.keys(nameToWidget).map((Name) => {
|
||||
const Data = nameToWidget[Name];
|
||||
return (
|
||||
<WidgetPreview
|
||||
renderWidget={() => (
|
||||
<Data time={time} delayString={delayString} />
|
||||
)}
|
||||
width={400}
|
||||
height={250}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<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} delayString={trainInfo} />
|
||||
)}
|
||||
width={400}
|
||||
height={250}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<ListItem key={"default"}>
|
||||
@ -129,33 +149,48 @@ export const WidgetSettings = ({ navigate }) => {
|
||||
名前
|
||||
</Text>
|
||||
</ListItem>
|
||||
{widgetList.map((widget) => (
|
||||
<ListItem key={widget.widgetId}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
alignItems: "center",
|
||||
alignContent: "center",
|
||||
textAlign: "center",
|
||||
textAlignVertical: "center",
|
||||
marginRight: 10,
|
||||
{widgetList.map((widget) => {
|
||||
return (
|
||||
<ListItem
|
||||
key={widget.widgetId}
|
||||
onPress={() => {
|
||||
//widget.widgetNameで定義されてないもう一つのウィジェットを選択する
|
||||
if (widget.widgetName === "Info_Widget") {
|
||||
AS.setItem(
|
||||
`widgetType/${widget.widgetId}`,
|
||||
"JR_shikoku_train_info"
|
||||
);
|
||||
} else {
|
||||
AS.setItem(`widgetType/${widget.widgetId}`, "Info_Widget");
|
||||
}
|
||||
}}
|
||||
>
|
||||
{widget.widgetId}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
alignItems: "center",
|
||||
alignContent: "center",
|
||||
textAlign: "center",
|
||||
textAlignVertical: "center",
|
||||
}}
|
||||
>
|
||||
{widget.widgetName}
|
||||
</Text>
|
||||
</ListItem>
|
||||
))}
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
alignItems: "center",
|
||||
alignContent: "center",
|
||||
textAlign: "center",
|
||||
textAlignVertical: "center",
|
||||
marginRight: 10,
|
||||
}}
|
||||
>
|
||||
{widget.widgetId}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
alignItems: "center",
|
||||
alignContent: "center",
|
||||
textAlign: "center",
|
||||
textAlignVertical: "center",
|
||||
}}
|
||||
>
|
||||
{widget.widgetName}
|
||||
</Text>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
<Text
|
||||
style={{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user