mirrors/Zipline-Android-App
1
0
Fork 0
mirror of https://github.com/Stef-00012/Zipline-Android-App.git synced 2025-05-11 18:35:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

[nobuild] continue building skeleton UI - unfinished

Browse source
This commit is contained in:
Stef-00012 2025-05-04 21:26:41 +02:00
parent 7e7b99754a
commit 7e23483dfb
No known key found for this signature in database
GPG key ID: 28BE9A9E4EF0E6BF
8 changed files with 461 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

48
components/Header.tsx
View file

@ -11,6 +11,8 @@ import Sidebar from "@/components/Sidebar";
import type React from "react";
import { useShareIntent } from "@/hooks/useShareIntent";
import { getRippleColor } from "@/functions/util";
import { Skeleton } from "moti/skeleton";
import { colors } from "@/constants/skeleton";
export default function Header({ children }: PropsWithChildren) {
const router = useRouter();
@ -25,13 +27,7 @@ export default function Header({ children }: PropsWithChildren) {
useEffect(() => {
if (!avatar || !user) {
(async () => {
const avatar = await getCurrentUserAvatar();
const user = await getCurrentUser();
setAvatar(avatar);
setUser(typeof user === "string" ? null : user);
})();
fetchUser()
}
}, [avatar, user]);
@ -103,7 +99,43 @@ export default function Header({ children }: PropsWithChildren) {
</View>
</View>
) : (
<View />
<View
style={{
marginBottom: 70,
}}
>
<Skeleton.Group show={!user}>
<View style={styles.header}>
<View style={styles.headerLeft}>
<IconButton
disabled
icon={() => (
<MaterialIcons name="menu" color={"#ffffff77"} size={40} />
)}
android_ripple={{
color: getRippleColor("#0c101c")
}}
onPress={() => {
setSidebarOpen((prev) => !prev);
}}
/>
</View>
<Stack>
<View>
<View
style={{
padding: 10,
borderRadius: 10
}}
>
<Skeleton colors={colors} height={36} width={80} />
</View>
</View>
</Stack>
</View>
</Skeleton.Group>
</View>
)}
<Sidebar
open={sidebarOpen}

102
components/skeleton/Table.tsx
View file

@ -2,42 +2,39 @@ import { Table as NativeTable, Row } from "react-native-reanimated-table";
import { styles } from "@/styles/components/table";
import { Skeleton } from "moti/skeleton";
import { colors } from "@/constants/skeleton";
import {
Pressable,
ScrollView,
Text,
View,
type DimensionValue,
} from "react-native";
import { ScrollView, Text, View, type DimensionValue } from "react-native";
import type { ReactNode } from "react";
interface Props {
headerRow: Array<string>;
rows: Array<Array<DimensionValue>>;
rowWidth: Array<number>;
headerRow: Array<ReactNode>;
rows: Array<Array<DimensionValue>>;
rowWidth: Array<number>;
rowHeight?: DimensionValue;
disableAnimations?: boolean;
}
export default function SkeletonTable({
headerRow,
rows,
rowWidth
headerRow,
rows,
rowWidth,
rowHeight,
disableAnimations,
}: Props) {
const updatedHeaderRow = headerRow.map((row) => {
return ["string", "number", "boolean"].includes(typeof row.row) ? (
<Text
style={{
...styles.rowText,
...styles.headerRow,
}}
>
{row.row}
</Text>
) : (
row.row
)
})
return (
<ScrollView showsHorizontalScrollIndicator={false} horizontal>
const updatedHeaderRow = headerRow.map((row, index) => (
<Text
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
key={index}
style={{
...styles.rowText,
...styles.headerRow,
}}
>
{row}
</Text>
));
return (
<ScrollView showsHorizontalScrollIndicator={false} horizontal>
<View>
<NativeTable>
<Row
@ -57,25 +54,52 @@ export default function SkeletonTable({
>
<NativeTable>
{rows.map((row, index) => {
let rowStyle = styles.row;
let rowStyle = {
...styles.row,
...(rowHeight && { height: rowHeight }),
};
if (index === 0)
rowStyle = {
...styles.row,
...styles.firstRow,
...(rowHeight && { height: rowHeight }),
};
if (index === rows.length - 1)
rowStyle = {
...styles.row,
...styles.lastRow,
...(rowHeight && { height: rowHeight }),
};
const rowData = row.map(data => {
return (
<Skeleton colors={colors} height={14} width={data} />
)
})
const rowData = row.map((data, index) => {
return (
<>
{disableAnimations ? (
<View
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
key={index}
style={{
backgroundColor: colors[1],
height: 14,
width: data,
borderRadius: 8
}}
/>
) : (
<Skeleton
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
key={index}
colors={colors}
height={14}
width={data}
/>
)}
</>
);
});
return (
<Row
@ -92,5 +116,5 @@ export default function SkeletonTable({
</ScrollView>
</View>
</ScrollView>
)
}
);
}