update

2025-07-31 21:25:33 +08:00
parent 5cfbc81e3a
commit 84fc719a10
307 changed files with 46470 additions and 0 deletions
@@ -0,0 +1,127 @@
+import React, { useState } from "reactn";
+import { Image, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Motion } from "@legendapp/motion";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+
+import { responsiveHeight } from "../actions/responsiveSizes.js";
+
+import { Fonts, gutters } from "../styles";
+
+import BaseHeader from "../components/BaseHeader";
+import NavigateHeader from "../components/NavigateHeader";
+
+import { isDesktop, isWeb } from "../hooks/useLayoutType.js";
+import { useUserData } from "../providers/UserDataProvider.js";
+import { background } from "../assets/index.js";
+
+export default ({
+  children,
+
+  topStickyContent = null,
+  bottomStickyContent = null,
+
+  title = "",
+  rightComponent = null,
+
+  containerType = "SAFE_AREA_VIEW",
+  headerType = "BASE",
+
+  containerStyle = {},
+  headerStyle = {},
+  contentContainerStyle = {},
+
+  scrollEnabled = false,
+
+  onBackPressed = null,
+  backgroundImg = background.writingBG,
+}) => {
+  const { currentUID } = useUserData();
+
+  const [scrollPosition, setScrollPosition] = useState(0);
+
+  const PageContainer =
+    containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;
+
+  const ContentContainer = scrollEnabled ? KeyboardAwareScrollView : View;
+
+  const handleScroll = (event) => {
+    const position = event.nativeEvent.contentOffset.y;
+    setScrollPosition(position);
+  };
+
+  return (
+    <>
+      <Image
+        source={backgroundImg}
+        style={{ width: "100%", height: "100%", position: "absolute" }}
+      />
+      <PageContainer
+        {...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}
+        style={{
+          height: "100%",
+          paddingTop: isWeb ? gutters / 2 : 0,
+          padding: gutters,
+          paddingBottom: 0,
+          ...(isWeb ? { maxHeight: "100vh" } : {}),
+          ...(!currentUID && isDesktop
+            ? { maxWidth: 500, alignSelf: "center" }
+            : {}),
+          ...containerStyle,
+        }}
+      >
+        {headerType !== "NONE" ? (
+          headerType === "BASE" ? (
+            <BaseHeader containerStyle={{ ...headerStyle }} />
+          ) : (
+            <NavigateHeader
+              containerStyle={{ ...headerStyle }}
+              title={
+                typeof title === "function"
+                  ? title
+                  : scrollPosition > 50
+                  ? title
+                  : ""
+              }
+              rightComponent={rightComponent}
+              onBackPressed={onBackPressed}
+            />
+          )
+        ) : null}
+
+        {topStickyContent?.()}
+
+        <ContentContainer
+          style={{ flex: 1, ...contentContainerStyle }}
+          {...(scrollEnabled
+            ? {
+                onScroll: handleScroll,
+                scrollEventThrottle: 80,
+                showsVerticalScrollIndicator: false,
+                contentContainerStyle: { paddingBottom: responsiveHeight(55) },
+                keyboardDismissMode: "on-drag",
+              }
+            : {})}
+        >
+          {scrollEnabled && typeof title === "string" && title.length > 0 && (
+            <Motion.Text
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              style={[
+                Fonts({
+                  type: "title",
+                }),
+                { marginBottom: 2 * gutters },
+              ]}
+            >
+              {title}
+            </Motion.Text>
+          )}
+          {children}
+        </ContentContainer>
+      </PageContainer>
+
+      {bottomStickyContent?.()}
+    </>
+  );
+};