@wasto/cms-components 1.5.10 → 1.5.11

package/src/components/article/ArticleExcerpts.tsx

@@ -1,80 +1,80 @@
-import { useState, type ReactNode } from "react";
-import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
-import { useTheme } from "../../contexts/ThemeContext";
-import { useBlogPosts } from "../../hooks/useBlogPosts";
-import type { BlogPost } from "../../helpers/blogPost";
-import { ArticleCard } from "./ArticleCard";
-import { ArticleReaderModal } from "./ArticleReaderModal";
-
-export type ArticlePropsExcerpts = {
-    displayMode: "excerpts";
-    excerptLength: number;
-};
-
-export function ArticleExcerpts({
-    excerptLength,
-}: ArticlePropsExcerpts): ReactNode {
-    const { theme } = useTheme();
-    const { posts, isLoading, error } = useBlogPosts();
-    const [selected, setSelected] = useState<BlogPost | null>(null);
-
-    if (isLoading && posts.length === 0) {
-        return (
-            <View style={styles.state}>
-                <ActivityIndicator color={theme.colors.primary} />
-                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
-                    Chargement des articles…
-                </Text>
-            </View>
-        );
-    }
-
-    if (error) {
-        return (
-            <View style={styles.state}>
-                <Text style={{ color: theme.colors.error, textAlign: "center" }}>{error}</Text>
-            </View>
-        );
-    }
-
-    if (posts.length === 0) {
-        return (
-            <View style={styles.state}>
-                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
-                    Aucun article pour le moment.
-                </Text>
-            </View>
-        );
-    }
-
-    return (
-        <View style={styles.list}>
-            {posts.map((post) => (
-                <ArticleCard
-                    key={post.id}
-                    post={post}
-                    excerptLength={excerptLength || 120}
-                    onRead={() => setSelected(post)}
-                />
-            ))}
-            <ArticleReaderModal
-                visible={!!selected}
-                post={selected}
-                onClose={() => setSelected(null)}
-            />
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    list: {
-        gap: 12,
-    },
-    state: {
-        minHeight: 80,
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 8,
-        padding: 16,
-    },
-});
+import { useState, type ReactNode } from "react";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useBlogPosts } from "../../hooks/useBlogPosts";
+import type { BlogPost } from "../../helpers/blogPost";
+import { ArticleCard } from "./ArticleCard";
+import { ArticleReaderModal } from "./ArticleReaderModal";
+
+export type ArticlePropsExcerpts = {
+    displayMode: "excerpts";
+    excerptLength: number;
+};
+
+export function ArticleExcerpts({
+    excerptLength,
+}: ArticlePropsExcerpts): ReactNode {
+    const { theme } = useTheme();
+    const { posts, isLoading, error } = useBlogPosts();
+    const [selected, setSelected] = useState<BlogPost | null>(null);
+
+    if (isLoading && posts.length === 0) {
+        return (
+            <View style={styles.state}>
+                <ActivityIndicator color={theme.colors.primary} />
+                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
+                    Chargement des articles…
+                </Text>
+            </View>
+        );
+    }
+
+    if (error) {
+        return (
+            <View style={styles.state}>
+                <Text style={{ color: theme.colors.error, textAlign: "center" }}>{error}</Text>
+            </View>
+        );
+    }
+
+    if (posts.length === 0) {
+        return (
+            <View style={styles.state}>
+                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
+                    Aucun article pour le moment.
+                </Text>
+            </View>
+        );
+    }
+
+    return (
+        <View style={styles.list}>
+            {posts.map((post) => (
+                <ArticleCard
+                    key={post.id}
+                    post={post}
+                    excerptLength={excerptLength || 120}
+                    onRead={() => setSelected(post)}
+                />
+            ))}
+            <ArticleReaderModal
+                visible={!!selected}
+                post={selected}
+                onClose={() => setSelected(null)}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    list: {
+        gap: 12,
+    },
+    state: {
+        minHeight: 80,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        padding: 16,
+    },
+});

package/src/components/article/ArticleList.tsx

@@ -1,114 +1,114 @@
-import { useState, type ReactNode } from "react";
-import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
-import { useTheme } from "../../contexts/ThemeContext";
-import { Button } from "../button/Button";
-import { useBlogPosts } from "../../hooks/useBlogPosts";
-import type { BlogPost } from "../../helpers/blogPost";
-import { ArticleCard } from "./ArticleCard";
-import { ArticleReaderModal } from "./ArticleReaderModal";
-
-export type ArticlePropsList = {
-    displayMode: "list";
-    itemsPerPage?: number;
-    showPagination?: boolean;
-};
-
-export function ArticleList({
-    itemsPerPage = 10,
-    showPagination = false,
-}: ArticlePropsList): ReactNode {
-    const { theme } = useTheme();
-    const { posts, isLoading, error } = useBlogPosts();
-    const [page, setPage] = useState(0);
-    const [selected, setSelected] = useState<BlogPost | null>(null);
-
-    const size = Math.max(1, itemsPerPage);
-    const pageCount = Math.max(1, Math.ceil(posts.length / size));
-    const safePage = Math.min(page, pageCount - 1);
-    const slice = showPagination
-        ? posts.slice(safePage * size, safePage * size + size)
-        : posts.slice(0, size);
-
-    if (isLoading && posts.length === 0) {
-        return (
-            <View style={styles.state}>
-                <ActivityIndicator color={theme.colors.primary} />
-                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
-                    Chargement des articles…
-                </Text>
-            </View>
-        );
-    }
-
-    if (error) {
-        return (
-            <View style={styles.state}>
-                <Text style={{ color: theme.colors.error, textAlign: "center" }}>{error}</Text>
-            </View>
-        );
-    }
-
-    if (posts.length === 0) {
-        return (
-            <View style={styles.state}>
-                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
-                    Aucun article pour le moment.
-                </Text>
-            </View>
-        );
-    }
-
-    return (
-        <View style={styles.list}>
-            {slice.map((post) => (
-                <ArticleCard key={post.id} post={post} onRead={() => setSelected(post)} />
-            ))}
-            {showPagination && pageCount > 1 ? (
-                <View style={styles.pagination}>
-                    <Button
-                        variant="ghost"
-                        disabled={safePage === 0}
-                        onPress={() => setPage((p) => Math.max(0, p - 1))}
-                    >
-                        Précédent
-                    </Button>
-                    <Text style={{ color: theme.colors.onBackground, opacity: 0.6 }}>
-                        Page {safePage + 1} / {pageCount}
-                    </Text>
-                    <Button
-                        variant="ghost"
-                        disabled={safePage >= pageCount - 1}
-                        onPress={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
-                    >
-                        Suivant
-                    </Button>
-                </View>
-            ) : null}
-            <ArticleReaderModal
-                visible={!!selected}
-                post={selected}
-                onClose={() => setSelected(null)}
-            />
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    list: {
-        gap: 12,
-    },
-    pagination: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 8,
-        paddingTop: 4,
-    },
-    state: {
-        minHeight: 80,
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 8,
-        padding: 16,
-    },
-});
+import { useState, type ReactNode } from "react";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Button } from "../button/Button";
+import { useBlogPosts } from "../../hooks/useBlogPosts";
+import type { BlogPost } from "../../helpers/blogPost";
+import { ArticleCard } from "./ArticleCard";
+import { ArticleReaderModal } from "./ArticleReaderModal";
+
+export type ArticlePropsList = {
+    displayMode: "list";
+    itemsPerPage?: number;
+    showPagination?: boolean;
+};
+
+export function ArticleList({
+    itemsPerPage = 10,
+    showPagination = false,
+}: ArticlePropsList): ReactNode {
+    const { theme } = useTheme();
+    const { posts, isLoading, error } = useBlogPosts();
+    const [page, setPage] = useState(0);
+    const [selected, setSelected] = useState<BlogPost | null>(null);
+
+    const size = Math.max(1, itemsPerPage);
+    const pageCount = Math.max(1, Math.ceil(posts.length / size));
+    const safePage = Math.min(page, pageCount - 1);
+    const slice = showPagination
+        ? posts.slice(safePage * size, safePage * size + size)
+        : posts.slice(0, size);
+
+    if (isLoading && posts.length === 0) {
+        return (
+            <View style={styles.state}>
+                <ActivityIndicator color={theme.colors.primary} />
+                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
+                    Chargement des articles…
+                </Text>
+            </View>
+        );
+    }
+
+    if (error) {
+        return (
+            <View style={styles.state}>
+                <Text style={{ color: theme.colors.error, textAlign: "center" }}>{error}</Text>
+            </View>
+        );
+    }
+
+    if (posts.length === 0) {
+        return (
+            <View style={styles.state}>
+                <Text style={{ color: theme.colors.onBackground, opacity: 0.7 }}>
+                    Aucun article pour le moment.
+                </Text>
+            </View>
+        );
+    }
+
+    return (
+        <View style={styles.list}>
+            {slice.map((post) => (
+                <ArticleCard key={post.id} post={post} onRead={() => setSelected(post)} />
+            ))}
+            {showPagination && pageCount > 1 ? (
+                <View style={styles.pagination}>
+                    <Button
+                        variant="ghost"
+                        disabled={safePage === 0}
+                        onPress={() => setPage((p) => Math.max(0, p - 1))}
+                    >
+                        Précédent
+                    </Button>
+                    <Text style={{ color: theme.colors.onBackground, opacity: 0.6 }}>
+                        Page {safePage + 1} / {pageCount}
+                    </Text>
+                    <Button
+                        variant="ghost"
+                        disabled={safePage >= pageCount - 1}
+                        onPress={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
+                    >
+                        Suivant
+                    </Button>
+                </View>
+            ) : null}
+            <ArticleReaderModal
+                visible={!!selected}
+                post={selected}
+                onClose={() => setSelected(null)}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    list: {
+        gap: 12,
+    },
+    pagination: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        paddingTop: 4,
+    },
+    state: {
+        minHeight: 80,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        padding: 16,
+    },
+});