Nejcraft/nej-react-components
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Dropdown errors and Pagination fixed

Browse Source
This commit is contained in:
honzapatCZ 2023-12-30 02:10:51 +01:00
parent 751e2c2042
commit ca09889f3b
4 changed files with 117 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
Parts/DropDown.js
View File

@ -40,11 +40,21 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
await update();
}
onValueChanged && onValueChanged(true);
try {
if (onValueChanged)
onValueChanged(true);
} catch (e) {
console.error(e);
}
};
const closeDropdownPopover = () => {
setDropdownPopoverShow(false);
onValueChanged && onValueChanged(false);
try {
if (onValueChanged)
onValueChanged(false);
} catch (e) {
console.error(e);
}
};
function handleOutsideClick(event) {

6
Parts/Modal.js
View File

@ -1,5 +1,5 @@
import React from "react"
import { Third } from "./Layout"
import { Half, Third } from "./Layout"
import tw, { styled } from "twin.macro"
import "styled-components/macro"
@ -7,9 +7,9 @@ import "styled-components/macro"
function Modal({ isOpen, onBackdropClick, ...props }) {
if (isOpen) {
return <div onClick={onBackdropClick} tw="fixed flex flex-col items-center inset-0 bg-gray-800 bg-opacity-75 z-50 overflow-y-auto lg:py-8">
<Third {...props} onClick={e => e.stopPropagation()}>
<Half {...props} onClick={e => e.stopPropagation()}>
{props.children}
</Third>
</Half>
</div>
}
return null;

132
Parts/Pagination.js
View File

@ -1,56 +1,116 @@
import Button from "./Button";
import tw, { styled } from "twin.macro"
import "styled-components/macro"
import tw, { styled } from "twin.macro";
import "styled-components/macro";
function CustomBtn({children, setPage, currentPage, page, css, ...props}){
console.log(css)
return <Button onClick={()=>setPage(Number(page??children))} css={[tw`rounded-none mx-0`, currentPage==children && tw`bg-accent`, css]} {...props}>{children}</Button>
const Btn = styled(Button)(({ active }) => [tw`rounded-none mx-0`, active && tw`bg-accent`]);
function CustomBtn({ children, setPage, currentPage, page, ...props }) {
return (
<Btn onClick={() => setPage(page)} active={page == currentPage} {...props}>
{children}
</Btn>
);
}
export default function Pagination({ currentPage, maxPages, setPage, ...props }) {
function RenderButtons() {
switch (maxPages) {
case 1:
return <CustomBtn tw="rounded-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>;
return (
<CustomBtn tw="rounded-xl" setPage={setPage} page={1} currentPage={currentPage}>
1
</CustomBtn>
);
case 2:
return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>2</CustomBtn>
return (
<>
<CustomBtn tw="rounded-l-xl" setPage={setPage} page={1} currentPage={currentPage}>
1
</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} page={2} currentPage={currentPage}>
2
</CustomBtn>
</>
);
case 3:
return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>3</CustomBtn>
return (
<>
<CustomBtn tw="rounded-l-xl" setPage={setPage} page={1} currentPage={currentPage}>
1
</CustomBtn>
<CustomBtn setPage={setPage} page={2} currentPage={currentPage}>
2
</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} page={3} currentPage={currentPage}>
3
</CustomBtn>
</>
);
case 4:
return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>4</CustomBtn>
return (
<>
<CustomBtn tw="rounded-l-xl" setPage={setPage} page={1} currentPage={currentPage}>
1
</CustomBtn>
<CustomBtn setPage={setPage} page={2} currentPage={currentPage}>
2
</CustomBtn>
<CustomBtn setPage={setPage} page={3} currentPage={currentPage}>
3
</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} page={4} currentPage={currentPage}>
4
</CustomBtn>
</>
);
case 5:
return <>
<CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>4</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>5</CustomBtn>
return (
<>
<CustomBtn tw="rounded-l-xl" setPage={setPage} page={1} currentPage={currentPage}>
1
</CustomBtn>
<CustomBtn setPage={setPage} page={2} currentPage={currentPage}>
2
</CustomBtn>
<CustomBtn setPage={setPage} page={3} currentPage={currentPage}>
3
</CustomBtn>
<CustomBtn setPage={setPage} page={4} currentPage={currentPage}>
4
</CustomBtn>
<CustomBtn tw="rounded-r-xl" setPage={setPage} page={5} currentPage={currentPage}>
5
</CustomBtn>
</>
);
default: {
return <>
{currentPage > 3 && <CustomBtn css={[tw`rounded-l-xl`]} page={1} setPage={setPage} currentPage={currentPage}>&lt;</CustomBtn>}
<CustomBtn css={[currentPage <= 3 &&tw`rounded-l-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)}</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+1}</CustomBtn>
<CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+2}</CustomBtn>
{(maxPages - currentPage) >= 1 && <CustomBtn css={[(Math.max(currentPage-2,1)+3)==maxPages && tw`rounded-r-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+3}</CustomBtn>}
{(maxPages - currentPage) >= 2 && <CustomBtn css={[(Math.max(currentPage-2,1)+4)==maxPages && tw`rounded-r-xl`]} tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+4}</CustomBtn>}
{(maxPages - currentPage) >= 3 && <CustomBtn css={[tw`rounded-r-xl`]} page={maxPages} setPage={setPage} currentPage={currentPage}>&gt;</CustomBtn>}
</>
}
let firstItem = Math.min(Math.max(currentPage - 2, 1), maxPages - 4);
let secondItem = Math.min(Math.max(currentPage - 1, 2), maxPages - 3);
let thirdItem = Math.min(Math.max(currentPage, 3), maxPages - 2);
let fourthItem = Math.min(Math.max(currentPage + 1, 4), maxPages - 1);
let fifthItem = Math.min(Math.max(currentPage + 2, 5), maxPages);
return (
<>
<CustomBtn css={[tw`rounded-l-xl`]} page={firstItem} setPage={setPage} currentPage={currentPage}>
{firstItem != 1 ? <>&lt;</> : firstItem}
</CustomBtn>
<CustomBtn setPage={setPage} page={secondItem} currentPage={currentPage}>
{secondItem}
</CustomBtn>
<CustomBtn setPage={setPage} page={thirdItem} currentPage={currentPage}>
{thirdItem}
</CustomBtn>
<CustomBtn setPage={setPage} page={fourthItem} currentPage={currentPage}>
{fourthItem}
</CustomBtn>
<CustomBtn css={[tw`rounded-r-xl`]} page={fifthItem} setPage={setPage} currentPage={currentPage}>
{fifthItem != maxPages ? <>&gt;</> : fifthItem}
</CustomBtn>
</>
);
}
}
}
@ -58,5 +118,5 @@ export default function Pagination({ currentPage, maxPages, setPage, ...props })
<div {...props}>
<RenderButtons />
</div>
)
);
}

2
globalStyle.js
View File

@ -68,7 +68,7 @@ body {
const GlobalStyles = () => {
return <>
<BaseStyles />
{/* <BaseStyles /> */}
<CustomStyles />
</>
}