10030569058

Committed 21 Jul 2024 06:42PM UTC coverage: 93.314% (-1.0%) from 94.266%

Build # 10030569058

Build Type

push

github

Committed by

web-flow

Commit Message

#178 Create responsive table component (#206)

Run Details

818 of 956 branches covered (85.56%)

Branch coverage included in aggregate %.

175 of 312 new or added lines in 2 files covered. (56.09%)

2 existing lines in 1 file now uncovered.

9022 of 9589 relevant lines covered (94.09%)

52.62 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

88.07

/packages/ui/src/InputDetails/PageableContent.tsx

"use client";
import {
    ActionIcon,
    Box,
    Button,
    Group,
    LoadingOverlay,
    Skeleton,
    Stack,
    Text,
    VisuallyHidden,
    useMantineTheme,
} from "@mantine/core";
import { allPass, complement, isEmpty, isNotNil } from "ramda";
import { FC, FunctionComponent, useState } from "react";
import { TbChevronLeft, TbChevronRight } from "react-icons/tb";
import {
    ContentProps,
    ContentType,
    ContentTypeControl,
    DisplayContent,
} from "./Content";

export type ContentState = "LOADING" | "FAIL" | "FULFILLED";

export interface Paging {
    total: number;
    onNextPage: () => void;
    onPreviousPage: () => void;
}

export interface PageableContentProps extends ContentProps {
    isLoading?: boolean;
    isConnected?: boolean;
    onConnect?: () => void;
    paging?: Paging;
}

const isNotNilOrEmpty = allPass([complement(isEmpty), isNotNil]);

interface ConnectProps {
    onConnect: () => void;
}

const Connect: FC<ConnectProps> = ({ onConnect }) => {
    return (
        <Stack>
            <Group m={0} p={0}>
                <Skeleton animate={false} height={50} circle my="sm" />
                <Skeleton animate={false} height={50} circle my="sm" />
                <Skeleton animate={false} height={50} circle my="sm" />
            </Group>
            <Skeleton animate={false} height={8} radius="xl" />
            <Skeleton animate={false} height={8} mt={6} radius="xl" />
            <Skeleton
                animate={false}
                height={8}
                mt={6}
                width="70%"
                radius="xl"
            />
            <Group justify="center">
                <Button onClick={() => onConnect()}>Connect</Button>
            </Group>
        </Stack>
    );
};

export const PageableContent: FunctionComponent<PageableContentProps> = ({
    isConnected = true,
    onConnect = () => {
        throw new Error("OnConnect callback not defined");
    },
    isLoading,
    content,
    contentType,
    paging,
}) => {
    const theme = useMantineTheme();
    const [type, setContentType] = useState<ContentType>(contentType);
    const [pageNumber, setPageNumber] = useState<number>(1);
    const hasPaging = paging?.total && paging.total > 1;
    const hasContent = isNotNilOrEmpty(content);

    const nextPage = () => {
        if (paging?.total) {
            if (pageNumber < paging.total) {
                setPageNumber((c) => c + 1);
                paging?.onNextPage();
            }
        }
    };

    const prevPage = () => {
        if (paging?.total) {
            if (pageNumber > 1) {
                setPageNumber((c) => c - 1);
                paging?.onPreviousPage();
            }
        }
    };

    return (
        <Box pos="relative" h="100%">
            <LoadingOverlay
                data-testid={`loading-overlay-${PageableContent.displayName?.toLowerCase()}`}
                visible={isLoading}
                zIndex={1000}
                overlayProps={{ blur: 2 }}
                loaderProps={{ color: theme.primaryColor, type: "oval" }}
            />
            {!isConnected && <Connect onConnect={onConnect} />}

            {isConnected && (
                <Stack h="100%" justify="center">
                    {hasContent || isLoading ? (
                        <>
                            <Group gap={1} justify="space-between">
                                <ContentTypeControl
                                    type={type}
                                    onTypeChange={setContentType}
                                />
                                {hasPaging && (
                                    <Group gap={3} align="end">
                                        <ActionIcon
                                            variant="subtle"
                                            onClick={prevPage}
                                            disabled={pageNumber === 1}
                                            aria-label="Button to load the previous content"
                                        >
                                            <VisuallyHidden>
                                                Previous content
                                            </VisuallyHidden>
                                            <TbChevronLeft />
                                        </ActionIcon>
                                        <Text>
                                            {pageNumber} of {paging.total}
                                        </Text>
                                        <ActionIcon
                                            variant="subtle"
                                            onClick={nextPage}
                                            disabled={
                                                pageNumber === paging.total
                                            }
                                            aria-label="Button to load the next content"
                                        >
                                            <VisuallyHidden>
                                                Next content
                                            </VisuallyHidden>
                                            <TbChevronRight />
                                        </ActionIcon>
                                    </Group>
                                )}
                            </Group>
                            <DisplayContent type={type} content={content} />
                        </>
                    ) : (
                        <Group justify="center" align="center">
                            <Text c="dimmed">No content to be displayed</Text>
                        </Group>
                    )}
                </Stack>
            )}
        </Box>
    );
};

1	"use client";	1✔
2	import {	1✔
3	ActionIcon,	1✔
4	Box,	1✔
5	Button,	1✔
6	Group,	1✔
7	LoadingOverlay,	1✔
8	Skeleton,	1✔
9	Stack,	1✔
10	Text,	1✔
11	VisuallyHidden,	1✔
12	useMantineTheme,	1✔
13	} from "@mantine/core";	1✔
14	import { allPass, complement, isEmpty, isNotNil } from "ramda";	1✔
15	import { FC, FunctionComponent, useState } from "react";	1✔
16	import { TbChevronLeft, TbChevronRight } from "react-icons/tb";	1✔
17	import {	1✔
18	ContentProps,	1✔
19	ContentType,	1✔
20	ContentTypeControl,	1✔
21	DisplayContent,	1✔
22	} from "./Content";	1✔
23		1✔
24	export type ContentState = "LOADING" \| "FAIL" \| "FULFILLED";	1✔
25		1✔
26	export interface Paging {	1✔
27	total: number;	1✔
28	onNextPage: () => void;	1✔
29	onPreviousPage: () => void;	1✔
30	}	1✔
31		1✔
32	export interface PageableContentProps extends ContentProps {	1✔
33	isLoading?: boolean;	1✔
34	isConnected?: boolean;	1✔
35	onConnect?: () => void;	1✔
36	paging?: Paging;	1✔
37	}	1✔
38		1✔
39	const isNotNilOrEmpty = allPass([complement(isEmpty), isNotNil]);	1✔
40		1✔
41	interface ConnectProps {	1✔
42	onConnect: () => void;	1✔
43	}	1✔
44		1✔
45	const Connect: FC<ConnectProps> = ({ onConnect }) => {	1✔
46	return (	1✔
47	<Stack>	1✔
48	<Group m={0} p={0}>	1✔
49	<Skeleton animate={false} height={50} circle my="sm" />	1✔
50	<Skeleton animate={false} height={50} circle my="sm" />	1✔
51	<Skeleton animate={false} height={50} circle my="sm" />	1✔
52	</Group>	1✔
53	<Skeleton animate={false} height={8} radius="xl" />	1✔
54	<Skeleton animate={false} height={8} mt={6} radius="xl" />	1✔
55	<Skeleton	1✔
56	animate={false}	1✔
57	height={8}	1✔
58	mt={6}	1✔
59	width="70%"	1✔
60	radius="xl"	1✔
61	/>	1✔
62	<Group justify="center">	1✔
63	<Button onClick={() => onConnect()}>Connect</Button>	1✔
64	</Group>	1✔
65	</Stack>	1✔
66	);	1✔
67	};	1✔
68		1✔
69	export const PageableContent: FunctionComponent<PageableContentProps> = ({	1✔
70	isConnected = true,	8✔
71	onConnect = () => {	8✔
72	throw new Error("OnConnect callback not defined");	×
73	},	×
74	isLoading,	8✔
75	content,	8✔
76	contentType,	8✔
77	paging,	8✔
78	}) => {	8✔
79	const theme = useMantineTheme();	8✔
80	const [type, setContentType] = useState<ContentType>(contentType);	8✔
81	const [pageNumber, setPageNumber] = useState<number>(1);	8✔
82	const hasPaging = paging?.total && paging.total > 1;	8✔
83	const hasContent = isNotNilOrEmpty(content);	8✔
84		8✔
85	const nextPage = () => {	8✔
86	if (paging?.total) {	×
87	if (pageNumber < paging.total) {	×
88	setPageNumber((c) => c + 1);	×
89	paging?.onNextPage();	×
90	}	×
91	}	×
92	};	×
93		8✔
94	const prevPage = () => {	8✔
95	if (paging?.total) {	×
96	if (pageNumber > 1) {	×
97	setPageNumber((c) => c - 1);	×
98	paging?.onPreviousPage();	×
99	}	×
100	}	×
101	};	×
102		8✔
103	return (	8✔
104	<Box pos="relative" h="100%">	8✔
105	<LoadingOverlay	8✔
106	data-testid={`loading-overlay-${PageableContent.displayName?.toLowerCase()}`}	8✔
107	visible={isLoading}	8✔
108	zIndex={1000}	8✔
109	overlayProps={{ blur: 2 }}	8✔
110	loaderProps={{ color: theme.primaryColor, type: "oval" }}	8✔
111	/>	8✔
112	{!isConnected && <Connect onConnect={onConnect} />}	8✔
113		8✔
114	{isConnected && (	8✔
115	<Stack h="100%" justify="center">	7✔
116	{hasContent \|\| isLoading ? (	7✔
117	<>	7✔
118	<Group gap={1} justify="space-between">	7✔
119	<ContentTypeControl	7✔
120	type={type}	7✔
121	onTypeChange={setContentType}	7✔
122	/>	7✔
123	{hasPaging && (	7✔
124	<Group gap={3} align="end">	1✔
125	<ActionIcon	1✔
126	variant="subtle"	1✔
127	onClick={prevPage}	1✔
128	disabled={pageNumber === 1}	1✔
129	aria-label="Button to load the previous content"	1✔
130	>	1✔
131	<VisuallyHidden>	1✔
132	Previous content	1✔
133	</VisuallyHidden>	1✔
134	<TbChevronLeft />	1✔
135	</ActionIcon>	1✔
136	<Text>	1✔
137	{pageNumber} of {paging.total}	1✔
138	</Text>	1✔
139	<ActionIcon	1✔
140	variant="subtle"	1✔
141	onClick={nextPage}	1✔
142	disabled={	1✔
143	pageNumber === paging.total	1✔
144	}	1✔
145	aria-label="Button to load the next content"	1✔
146	>	1✔
147	<VisuallyHidden>	1✔
148	Next content	1✔
149	</VisuallyHidden>	1✔
150	<TbChevronRight />	1✔
151	</ActionIcon>	1✔
152	</Group>	1✔
153	)}	7✔
154	</Group>	7✔
155	<DisplayContent type={type} content={content} />	7✔
156	</>	7!
157	) : (	×
158	<Group justify="center" align="center">	×
159	<Text c="dimmed">No content to be displayed</Text>	×
160	</Group>	×
161	)}	7✔
162	</Stack>	7✔
163	)}	8✔
164	</Box>	8✔
165	);	8✔
166	};	8✔

cartesi / rollups-explorer / 10030569058

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous