@secondstaxorg/sscomp 1.8.27 → 1.8.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +17 -1
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +56 -17
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +17 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -578,6 +578,22 @@ const PaginationContainer = styled.div`
|
|
|
578
578
|
display: flex;
|
|
579
579
|
gap: 8px;
|
|
580
580
|
justify-content: end;
|
|
581
|
+
align-items: center;
|
|
582
|
+
input.jump-to{
|
|
583
|
+
width: 40px;
|
|
584
|
+
padding: 8px;
|
|
585
|
+
border: 1px solid ${theme.colors["neutral-400"]};
|
|
586
|
+
border-radius: 4px;
|
|
587
|
+
}
|
|
588
|
+
input.jump-to:focus-visible {
|
|
589
|
+
outline: none;
|
|
590
|
+
}
|
|
591
|
+
input.success{
|
|
592
|
+
border-color: ${theme.colors["success-500"]};
|
|
593
|
+
}
|
|
594
|
+
input.error{
|
|
595
|
+
border-color: ${theme.colors["error-500"]};
|
|
596
|
+
}
|
|
581
597
|
`;
|
|
582
598
|
|
|
583
599
|
const _jsxFileName$19 = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\Pagination\\index.tsx";
|
|
@@ -588,6 +604,8 @@ const _jsxFileName$19 = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compo
|
|
|
588
604
|
const Pagination = (props) => {
|
|
589
605
|
const {itemsPerPage,returnedPageNum,items,paginatedItems} = props;
|
|
590
606
|
const [pageNum,setPageNum] = React$1.useState(1);
|
|
607
|
+
const [startFrom,setStartFrom] = React$1.useState(1);
|
|
608
|
+
const [validation,setValidation] = React$1.useState('');
|
|
591
609
|
|
|
592
610
|
const pageNumbers = [];
|
|
593
611
|
|
|
@@ -616,43 +634,64 @@ const Pagination = (props) => {
|
|
|
616
634
|
return (
|
|
617
635
|
React$1.createElement(React$1.Fragment, null
|
|
618
636
|
, pageNumbers.length > 1 &&
|
|
619
|
-
React$1.createElement(PaginationContainer, {__self: undefined, __source: {fileName: _jsxFileName$19, lineNumber:
|
|
637
|
+
React$1.createElement(PaginationContainer, {__self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 41}}
|
|
620
638
|
, React$1.createElement(NumberButton, { onClick: ()=>{
|
|
621
639
|
setPageNum(pageNum - 1);
|
|
640
|
+
if (startFrom > 1) setStartFrom(startFrom - 1);
|
|
622
641
|
if (returnedPageNum) returnedPageNum(pageNum - 1);
|
|
623
|
-
}, disabled: pageNum === 1, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber:
|
|
642
|
+
}, disabled: pageNum === 1, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 42}}
|
|
624
643
|
, pageNum === 1 &&
|
|
625
|
-
React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber:
|
|
626
|
-
, React$1.createElement('path', { d: "M3.2908 6.00019L6.8308 2.46019C7.01705 2.27283 7.12159 2.01938 7.12159 1.75519C7.12159 1.49101 7.01705 1.23756 6.8308 1.05019C6.73784 0.956464 6.62723 0.88207 6.50537 0.831301C6.38352 0.780533 6.25281 0.754395 6.1208 0.754395C5.98879 0.754395 5.85808 0.780533 5.73622 0.831301C5.61436 0.88207 5.50376 0.956464 5.4108 1.05019L1.1708 5.29019C1.07707 5.38316 1.00268 5.49376 0.951907 5.61562C0.901138 5.73748 0.875 5.86818 0.875 6.00019C0.875 6.1322 0.901138 6.26291 0.951907 6.38477C1.00268 6.50663 1.07707 6.61723 1.1708 6.71019L5.4108 11.0002C5.50424 11.0929 5.61505 11.1662 5.73689 11.216C5.85873 11.2657 5.98919 11.291 6.1208 11.2902C6.2524 11.291 6.38287 11.2657 6.5047 11.216C6.62654 11.1662 6.73736 11.0929 6.8308 11.0002C7.01705 10.8128 7.12159 10.5594 7.12159 10.2952C7.12159 10.031 7.01705 9.77756 6.8308 9.59019L3.2908 6.00019Z" , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber:
|
|
644
|
+
React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 48}}
|
|
645
|
+
, React$1.createElement('path', { d: "M3.2908 6.00019L6.8308 2.46019C7.01705 2.27283 7.12159 2.01938 7.12159 1.75519C7.12159 1.49101 7.01705 1.23756 6.8308 1.05019C6.73784 0.956464 6.62723 0.88207 6.50537 0.831301C6.38352 0.780533 6.25281 0.754395 6.1208 0.754395C5.98879 0.754395 5.85808 0.780533 5.73622 0.831301C5.61436 0.88207 5.50376 0.956464 5.4108 1.05019L1.1708 5.29019C1.07707 5.38316 1.00268 5.49376 0.951907 5.61562C0.901138 5.73748 0.875 5.86818 0.875 6.00019C0.875 6.1322 0.901138 6.26291 0.951907 6.38477C1.00268 6.50663 1.07707 6.61723 1.1708 6.71019L5.4108 11.0002C5.50424 11.0929 5.61505 11.1662 5.73689 11.216C5.85873 11.2657 5.98919 11.291 6.1208 11.2902C6.2524 11.291 6.38287 11.2657 6.5047 11.216C6.62654 11.1662 6.73736 11.0929 6.8308 11.0002C7.01705 10.8128 7.12159 10.5594 7.12159 10.2952C7.12159 10.031 7.01705 9.77756 6.8308 9.59019L3.2908 6.00019Z" , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 49}})
|
|
627
646
|
)
|
|
628
647
|
|
|
629
648
|
, pageNum > 1 &&
|
|
630
|
-
React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber:
|
|
631
|
-
, React$1.createElement('path', { d: "M3.2908 6.00019L6.8308 2.46019C7.01705 2.27283 7.12159 2.01938 7.12159 1.75519C7.12159 1.49101 7.01705 1.23756 6.8308 1.05019C6.73784 0.956464 6.62723 0.88207 6.50537 0.831301C6.38352 0.780533 6.25281 0.754395 6.1208 0.754395C5.98879 0.754395 5.85808 0.780533 5.73622 0.831301C5.61436 0.88207 5.50376 0.956464 5.4108 1.05019L1.1708 5.29019C1.07707 5.38316 1.00268 5.49376 0.951907 5.61562C0.901138 5.73748 0.875 5.86818 0.875 6.00019C0.875 6.1322 0.901138 6.26291 0.951907 6.38477C1.00268 6.50663 1.07707 6.61723 1.1708 6.71019L5.4108 11.0002C5.50424 11.0929 5.61505 11.1662 5.73689 11.216C5.85873 11.2657 5.98919 11.291 6.1208 11.2902C6.2524 11.291 6.38287 11.2657 6.5047 11.216C6.62654 11.1662 6.73736 11.0929 6.8308 11.0002C7.01705 10.8128 7.12159 10.5594 7.12159 10.2952C7.12159 10.031 7.01705 9.77756 6.8308 9.59019L3.2908 6.00019Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber:
|
|
649
|
+
React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 53}}
|
|
650
|
+
, React$1.createElement('path', { d: "M3.2908 6.00019L6.8308 2.46019C7.01705 2.27283 7.12159 2.01938 7.12159 1.75519C7.12159 1.49101 7.01705 1.23756 6.8308 1.05019C6.73784 0.956464 6.62723 0.88207 6.50537 0.831301C6.38352 0.780533 6.25281 0.754395 6.1208 0.754395C5.98879 0.754395 5.85808 0.780533 5.73622 0.831301C5.61436 0.88207 5.50376 0.956464 5.4108 1.05019L1.1708 5.29019C1.07707 5.38316 1.00268 5.49376 0.951907 5.61562C0.901138 5.73748 0.875 5.86818 0.875 6.00019C0.875 6.1322 0.901138 6.26291 0.951907 6.38477C1.00268 6.50663 1.07707 6.61723 1.1708 6.71019L5.4108 11.0002C5.50424 11.0929 5.61505 11.1662 5.73689 11.216C5.85873 11.2657 5.98919 11.291 6.1208 11.2902C6.2524 11.291 6.38287 11.2657 6.5047 11.216C6.62654 11.1662 6.73736 11.0929 6.8308 11.0002C7.01705 10.8128 7.12159 10.5594 7.12159 10.2952C7.12159 10.031 7.01705 9.77756 6.8308 9.59019L3.2908 6.00019Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 54}})
|
|
632
651
|
)
|
|
633
652
|
|
|
634
653
|
)
|
|
635
|
-
, pageNumbers.map((number) =>
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
654
|
+
, pageNumbers.map((number) => {
|
|
655
|
+
if (number >= startFrom && number <= startFrom + 10) return (
|
|
656
|
+
React$1.createElement(NumberButton, { className: `${number === pageNum ? 'active' : ''}`, key: number,
|
|
657
|
+
onClick: () => {
|
|
658
|
+
if (returnedPageNum) returnedPageNum(number);
|
|
659
|
+
setPageNum(number);
|
|
660
|
+
}, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 60}}, number)
|
|
661
|
+
)
|
|
662
|
+
})
|
|
641
663
|
, React$1.createElement(NumberButton, { onClick: ()=>{
|
|
642
664
|
setPageNum(pageNum + 1);
|
|
665
|
+
if (startFrom + 10 < pageNumbers.length) setStartFrom(startFrom + 1);
|
|
643
666
|
if (returnedPageNum) returnedPageNum(pageNum + 1);
|
|
644
|
-
}, disabled: pageNum === pageNumbers.length, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber:
|
|
667
|
+
}, disabled: pageNum === pageNumbers.length, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 67}}
|
|
645
668
|
, pageNum !== pageNumbers.length &&
|
|
646
|
-
React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber:
|
|
647
|
-
, React$1.createElement('path', { d: "M6.8336 5.29019L2.59361 1.05019C2.50064 0.956464 2.39004 0.88207 2.26818 0.831301C2.14632 0.780533 2.01562 0.754395 1.88361 0.754395C1.75159 0.754395 1.62089 0.780533 1.49903 0.831301C1.37717 0.88207 1.26657 0.956464 1.1736 1.05019C0.987354 1.23756 0.882812 1.49101 0.882812 1.75519C0.882812 2.01938 0.987354 2.27283 1.1736 2.46019L4.7136 6.00019L1.1736 9.54019C0.987354 9.72756 0.882812 9.98101 0.882812 10.2452C0.882813 10.5094 0.987354 10.7628 1.1736 10.9502C1.26705 11.0429 1.37786 11.1162 1.4997 11.166C1.62154 11.2157 1.752 11.241 1.88361 11.2402C2.01521 11.241 2.14567 11.2157 2.26751 11.166C2.38935 11.1162 2.50016 11.0429 2.59361 10.9502L6.8336 6.71019C6.92733 6.61723 7.00173 6.50663 7.0525 6.38477C7.10326 6.26291 7.1294 6.1322 7.1294 6.00019C7.1294 5.86818 7.10326 5.73748 7.0525 5.61562C7.00173 5.49376 6.92733 5.38316 6.8336 5.29019Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber:
|
|
669
|
+
React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 73}}
|
|
670
|
+
, React$1.createElement('path', { d: "M6.8336 5.29019L2.59361 1.05019C2.50064 0.956464 2.39004 0.88207 2.26818 0.831301C2.14632 0.780533 2.01562 0.754395 1.88361 0.754395C1.75159 0.754395 1.62089 0.780533 1.49903 0.831301C1.37717 0.88207 1.26657 0.956464 1.1736 1.05019C0.987354 1.23756 0.882812 1.49101 0.882812 1.75519C0.882812 2.01938 0.987354 2.27283 1.1736 2.46019L4.7136 6.00019L1.1736 9.54019C0.987354 9.72756 0.882812 9.98101 0.882812 10.2452C0.882813 10.5094 0.987354 10.7628 1.1736 10.9502C1.26705 11.0429 1.37786 11.1162 1.4997 11.166C1.62154 11.2157 1.752 11.241 1.88361 11.2402C2.01521 11.241 2.14567 11.2157 2.26751 11.166C2.38935 11.1162 2.50016 11.0429 2.59361 10.9502L6.8336 6.71019C6.92733 6.61723 7.00173 6.50663 7.0525 6.38477C7.10326 6.26291 7.1294 6.1322 7.1294 6.00019C7.1294 5.86818 7.10326 5.73748 7.0525 5.61562C7.00173 5.49376 6.92733 5.38316 6.8336 5.29019Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 74}})
|
|
648
671
|
)
|
|
649
672
|
|
|
650
673
|
, pageNum === pageNumbers.length &&
|
|
651
|
-
React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber:
|
|
652
|
-
, React$1.createElement('path', { d: "M6.8336 5.29019L2.59361 1.05019C2.50064 0.956464 2.39004 0.88207 2.26818 0.831301C2.14632 0.780533 2.01562 0.754395 1.88361 0.754395C1.75159 0.754395 1.62089 0.780533 1.49903 0.831301C1.37717 0.88207 1.26657 0.956464 1.1736 1.05019C0.987354 1.23756 0.882812 1.49101 0.882812 1.75519C0.882812 2.01938 0.987354 2.27283 1.1736 2.46019L4.7136 6.00019L1.1736 9.54019C0.987354 9.72756 0.882812 9.98101 0.882812 10.2452C0.882813 10.5094 0.987354 10.7628 1.1736 10.9502C1.26705 11.0429 1.37786 11.1162 1.4997 11.166C1.62154 11.2157 1.752 11.241 1.88361 11.2402C2.01521 11.241 2.14567 11.2157 2.26751 11.166C2.38935 11.1162 2.50016 11.0429 2.59361 10.9502L6.8336 6.71019C6.92733 6.61723 7.00173 6.50663 7.0525 6.38477C7.10326 6.26291 7.1294 6.1322 7.1294 6.00019C7.1294 5.86818 7.10326 5.73748 7.0525 5.61562C7.00173 5.49376 6.92733 5.38316 6.8336 5.29019Z" , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber:
|
|
674
|
+
React$1.createElement('svg', { width: "8", height: "12", viewBox: "0 0 8 12" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 78}}
|
|
675
|
+
, React$1.createElement('path', { d: "M6.8336 5.29019L2.59361 1.05019C2.50064 0.956464 2.39004 0.88207 2.26818 0.831301C2.14632 0.780533 2.01562 0.754395 1.88361 0.754395C1.75159 0.754395 1.62089 0.780533 1.49903 0.831301C1.37717 0.88207 1.26657 0.956464 1.1736 1.05019C0.987354 1.23756 0.882812 1.49101 0.882812 1.75519C0.882812 2.01938 0.987354 2.27283 1.1736 2.46019L4.7136 6.00019L1.1736 9.54019C0.987354 9.72756 0.882812 9.98101 0.882812 10.2452C0.882813 10.5094 0.987354 10.7628 1.1736 10.9502C1.26705 11.0429 1.37786 11.1162 1.4997 11.166C1.62154 11.2157 1.752 11.241 1.88361 11.2402C2.01521 11.241 2.14567 11.2157 2.26751 11.166C2.38935 11.1162 2.50016 11.0429 2.59361 10.9502L6.8336 6.71019C6.92733 6.61723 7.00173 6.50663 7.0525 6.38477C7.10326 6.26291 7.1294 6.1322 7.1294 6.00019C7.1294 5.86818 7.10326 5.73748 7.0525 5.61562C7.00173 5.49376 6.92733 5.38316 6.8336 5.29019Z" , fill: "#E8EEF7", __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 79}})
|
|
653
676
|
)
|
|
654
677
|
|
|
655
678
|
)
|
|
679
|
+
, pageNumbers.length > 10 && React$1.createElement(React$1.Fragment, null, React$1.createElement('input', { type: "text", className: `jump-to ${validation}`, placeholder: "Go to" , onChange: (e)=>{
|
|
680
|
+
if (!e.target.value) {
|
|
681
|
+
setValidation('');
|
|
682
|
+
return
|
|
683
|
+
}
|
|
684
|
+
if (isNaN(Number(e.target.value)) || e.target.value == '0' || Number(e.target.value) == 0 || Number(e.target.value) > pageNumbers.length){
|
|
685
|
+
setPageNum(1);
|
|
686
|
+
setValidation('error');
|
|
687
|
+
return
|
|
688
|
+
}
|
|
689
|
+
setPageNum(Number(e.target.value));
|
|
690
|
+
if (Number(e.target.value) > 10) setStartFrom(Number(e.target.value) - 10);
|
|
691
|
+
if (Number(e.target.value) < 10) setStartFrom(Number(e.target.value));
|
|
692
|
+
setValidation('success');
|
|
693
|
+
}, __self: undefined, __source: {fileName: _jsxFileName$19, lineNumber: 83}}), " of " , pageNumbers.length)
|
|
694
|
+
|
|
656
695
|
)
|
|
657
696
|
|
|
658
697
|
)
|