chore: 删除未使用的 Subscription 和 Tables 组件 (第7批)
删除以下未被引用的组件： - SubscriptionModal.js - BasicTable.js / DashboardTableRow.js - SearchTable1.js / SearchTable2.js 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -1,43 +0,0 @@
|
||||
// src/components/Subscription/SubscriptionModal.js
|
||||
import React from 'react';
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
Icon,
|
||||
HStack,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import { Star } from 'lucide-react';
|
||||
import PropTypes from 'prop-types';
|
||||
import SubscriptionContent from './SubscriptionContent';
|
||||
import { GLASS_BLUR } from '@/constants/glassConfig';
|
||||
|
||||
export default function SubscriptionModal({ isOpen, onClose }) {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} size="4xl" isCentered scrollBehavior="inside">
|
||||
<ModalOverlay backdropFilter={GLASS_BLUR.xs} />
|
||||
<ModalContent maxH="90vh">
|
||||
<ModalHeader borderBottomWidth="1px" borderColor={useColorModeValue('gray.200', 'gray.600')}>
|
||||
<HStack>
|
||||
<Icon as={Star} color="blue.500" boxSize={5} />
|
||||
<Text>订阅管理</Text>
|
||||
</HStack>
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody py={6}>
|
||||
<SubscriptionContent />
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
SubscriptionModal.propTypes = {
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
@@ -1,283 +0,0 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Icon,
|
||||
NumberDecrementStepper,
|
||||
NumberIncrementStepper,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
Select,
|
||||
Stack,
|
||||
Table,
|
||||
Tbody,
|
||||
Td,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useMemo } from "react";
|
||||
import { ChevronRight, ChevronLeft, ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
|
||||
import { usePagination, useSortBy, useTable } from "react-table";
|
||||
|
||||
function BasicTable(props) {
|
||||
const { columnsData, tableData } = props;
|
||||
const columns = useMemo(() => columnsData, []);
|
||||
const data = useMemo(() => tableData, []);
|
||||
|
||||
const tableInstance = useTable(
|
||||
{
|
||||
columns,
|
||||
data,
|
||||
},
|
||||
useSortBy,
|
||||
usePagination
|
||||
);
|
||||
|
||||
const {
|
||||
getTableProps,
|
||||
getTableBodyProps,
|
||||
headerGroups,
|
||||
page,
|
||||
gotoPage,
|
||||
pageCount,
|
||||
prepareRow,
|
||||
nextPage,
|
||||
previousPage,
|
||||
canNextPage,
|
||||
canPreviousPage,
|
||||
setPageSize,
|
||||
|
||||
state,
|
||||
} = tableInstance;
|
||||
|
||||
const createPages = (count) => {
|
||||
let arrPageCount = [];
|
||||
|
||||
for (let i = 1; i <= count; i++) {
|
||||
arrPageCount.push(i);
|
||||
}
|
||||
|
||||
return arrPageCount;
|
||||
};
|
||||
|
||||
const { pageIndex, pageSize } = state;
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
direction="column"
|
||||
w="100%"
|
||||
overflowX={{ sm: "scroll", lg: "hidden" }}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing="12px"
|
||||
align="center"
|
||||
my="24px"
|
||||
px="22px"
|
||||
>
|
||||
<Select
|
||||
variant="main"
|
||||
value={pageSize}
|
||||
onChange={(e) => setPageSize(Number(e.target.value))}
|
||||
color="gray.500"
|
||||
size="sm"
|
||||
borderRadius="12px"
|
||||
maxW="75px"
|
||||
cursor="pointer"
|
||||
>
|
||||
<option>5</option>
|
||||
<option>10</option>
|
||||
<option>15</option>
|
||||
<option>20</option>
|
||||
<option>25</option>
|
||||
</Select>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="normal">
|
||||
entries per page
|
||||
</Text>
|
||||
</Stack>
|
||||
<Table {...getTableProps()} variant="simple" color="gray.500" mb="24px">
|
||||
<Thead>
|
||||
{headerGroups.map((headerGroup, index) => (
|
||||
<Tr {...headerGroup.getHeaderGroupProps()} key={index}>
|
||||
{headerGroup.headers.map((column, index) => (
|
||||
<Th key={index}
|
||||
{...column.getHeaderProps(column.getSortByToggleProps())}
|
||||
>
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
fontSize={{ sm: "10px", lg: "12px" }}
|
||||
color="gray.400"
|
||||
>
|
||||
{column.render("Header")}
|
||||
<Icon
|
||||
w={{ sm: "10px", md: "14px" }}
|
||||
h={{ sm: "10px", md: "14px" }}
|
||||
color={columns.isSorted ? "gray.500" : "gray.400"}
|
||||
float="right"
|
||||
as={
|
||||
column.isSorted
|
||||
? column.isSortedDesc
|
||||
? ChevronDown
|
||||
: ChevronUp
|
||||
: ChevronsUpDown
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
</Th>
|
||||
))}
|
||||
</Tr>
|
||||
))}
|
||||
</Thead>
|
||||
<Tbody {...getTableBodyProps()}>
|
||||
{page.map((row, index) => {
|
||||
prepareRow(row);
|
||||
return (
|
||||
<Tr {...row.getRowProps()} key={index}>
|
||||
{row.cells.map((cell, index) => {
|
||||
return (
|
||||
<Td
|
||||
{...cell.getCellProps()}
|
||||
fontSize={{ sm: "14px" }}
|
||||
key={index}
|
||||
>
|
||||
{cell.render("Cell")}
|
||||
</Td>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
</Tbody>
|
||||
</Table>
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
w="100%"
|
||||
justify="space-between"
|
||||
align="center"
|
||||
px={{ md: "22px" }}
|
||||
>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.500"
|
||||
fontWeight="normal"
|
||||
mb={{ sm: "24px", md: "0px" }}
|
||||
>
|
||||
Showing {pageSize * pageIndex + 1} to{" "}
|
||||
{pageSize * (pageIndex + 1) <= tableData.length
|
||||
? pageSize * (pageIndex + 1)
|
||||
: tableData.length}{" "}
|
||||
of {tableData.length} entries
|
||||
</Text>
|
||||
<Stack direction="row" alignSelf="flex-end" spacing="4px" ms="auto">
|
||||
<Button
|
||||
variant="no-effects"
|
||||
onClick={() => previousPage()}
|
||||
transition="all .5s ease"
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg="#fff"
|
||||
border="1px solid lightgray"
|
||||
display={
|
||||
pageSize === 5 ? "none" : canPreviousPage ? "flex" : "none"
|
||||
}
|
||||
_hover={{
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
>
|
||||
<Icon as={ChevronLeft} w="16px" h="16px" color="gray.400" />
|
||||
</Button>
|
||||
{pageSize === 5 ? (
|
||||
<NumberInput
|
||||
max={pageCount - 1}
|
||||
min={1}
|
||||
w="75px"
|
||||
mx="6px"
|
||||
defaultValue="1"
|
||||
onChange={(e) => gotoPage(e)}
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper onClick={() => nextPage()} />
|
||||
<NumberDecrementStepper onClick={() => previousPage()} />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
) : (
|
||||
createPages(pageCount).map((pageNumber, index) => {
|
||||
return (
|
||||
<Button
|
||||
variant="no-effects"
|
||||
transition="all .5s ease"
|
||||
onClick={() => gotoPage(pageNumber - 1)}
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg={pageNumber === pageIndex + 1 ? "blue.500" : "#fff"}
|
||||
border={
|
||||
pageNumber === pageIndex + 1
|
||||
? "none"
|
||||
: "1px solid lightgray"
|
||||
}
|
||||
_hover={{
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
key={index}
|
||||
>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={pageNumber === pageIndex + 1 ? "#fff" : "gray.600"}
|
||||
>
|
||||
{pageNumber}
|
||||
</Text>
|
||||
</Button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
<Button
|
||||
variant="no-effects"
|
||||
onClick={() => nextPage()}
|
||||
transition="all .5s ease"
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg="#fff"
|
||||
border="1px solid lightgray"
|
||||
display={pageSize === 5 ? "none" : canNextPage ? "flex" : "none"}
|
||||
_hover={{
|
||||
bg: "gray.200",
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
>
|
||||
<Icon as={ChevronRight} w="16px" h="16px" color="gray.400" />
|
||||
</Button>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default BasicTable;
|
||||
@@ -1,89 +0,0 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarGroup,
|
||||
Flex,
|
||||
Icon,
|
||||
Progress,
|
||||
Td,
|
||||
Text,
|
||||
Tr,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
|
||||
function DashboardTableRow(props) {
|
||||
const { logo, name, members, budget, progression } = props;
|
||||
const textColor = useColorModeValue("gray.700", "white");
|
||||
return (
|
||||
<Tr>
|
||||
<Td minWidth={{ sm: "250px" }} ps="0px">
|
||||
<Flex align="center" py=".8rem" minWidth="100%" flexWrap="nowrap">
|
||||
<Icon as={logo} h={"24px"} w={"24px"} pe="5px" />
|
||||
<Text
|
||||
fontSize="md"
|
||||
color={textColor}
|
||||
fontWeight="bold"
|
||||
minWidth="100%"
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Td>
|
||||
|
||||
<Td>
|
||||
<AvatarGroup size="sm">
|
||||
{members.map((member, index) => {
|
||||
return (
|
||||
<Avatar
|
||||
name="Ryan Florence"
|
||||
src={member}
|
||||
_hover={{ zIndex: "3", cursor: "pointer" }}
|
||||
key={index}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</AvatarGroup>
|
||||
</Td>
|
||||
<Td>
|
||||
<Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
|
||||
{budget}
|
||||
</Text>
|
||||
</Td>
|
||||
<Td>
|
||||
<Flex direction="column">
|
||||
<Text
|
||||
fontSize="md"
|
||||
color="teal.300"
|
||||
fontWeight="bold"
|
||||
pb=".2rem"
|
||||
>{`${progression}%`}</Text>
|
||||
<Progress
|
||||
colorScheme={progression === 100 ? "teal" : "cyan"}
|
||||
size="xs"
|
||||
value={progression}
|
||||
borderRadius="15px"
|
||||
/>
|
||||
</Flex>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardTableRow;
|
||||
@@ -1,307 +0,0 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
Icon,
|
||||
Input,
|
||||
NumberDecrementStepper,
|
||||
NumberIncrementStepper,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
Select,
|
||||
Stack,
|
||||
Table,
|
||||
Tbody,
|
||||
Td,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useMemo } from "react";
|
||||
import { ChevronRight, ChevronLeft, ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
|
||||
import {
|
||||
useGlobalFilter,
|
||||
usePagination,
|
||||
useSortBy,
|
||||
useTable,
|
||||
} from "react-table";
|
||||
|
||||
function SearchTable1(props) {
|
||||
const { columnsData, tableData } = props;
|
||||
|
||||
const columns = useMemo(() => columnsData, []);
|
||||
const data = useMemo(() => tableData, []);
|
||||
|
||||
const tableInstance = useTable(
|
||||
{
|
||||
columns,
|
||||
data,
|
||||
},
|
||||
useGlobalFilter,
|
||||
useSortBy,
|
||||
usePagination
|
||||
);
|
||||
|
||||
const {
|
||||
getTableProps,
|
||||
getTableBodyProps,
|
||||
headerGroups,
|
||||
page,
|
||||
gotoPage,
|
||||
pageCount,
|
||||
prepareRow,
|
||||
nextPage,
|
||||
previousPage,
|
||||
canNextPage,
|
||||
canPreviousPage,
|
||||
setPageSize,
|
||||
setGlobalFilter,
|
||||
state,
|
||||
} = tableInstance;
|
||||
|
||||
const createPages = (count) => {
|
||||
let arrPageCount = [];
|
||||
|
||||
for (let i = 1; i <= count; i++) {
|
||||
arrPageCount.push(i);
|
||||
}
|
||||
|
||||
return arrPageCount;
|
||||
};
|
||||
|
||||
const { pageIndex, pageSize, globalFilter } = state;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
direction="column"
|
||||
w="100%"
|
||||
overflowX={{ sm: "scroll", lg: "hidden" }}
|
||||
>
|
||||
<Flex justify="space-between" align="center" w="100%" px="22px">
|
||||
<Stack
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
spacing={{ sm: "4px", md: "12px" }}
|
||||
align="center"
|
||||
me="12px"
|
||||
my="24px"
|
||||
minW={{ sm: "100px", md: "200px" }}
|
||||
>
|
||||
<Select
|
||||
variant="main"
|
||||
value={pageSize}
|
||||
onChange={(e) => setPageSize(Number(e.target.value))}
|
||||
color="gray.500"
|
||||
size="sm"
|
||||
borderRadius="12px"
|
||||
maxW="75px"
|
||||
cursor="pointer"
|
||||
>
|
||||
<option>5</option>
|
||||
<option>10</option>
|
||||
<option>15</option>
|
||||
<option>20</option>
|
||||
<option>25</option>
|
||||
</Select>
|
||||
<Text fontSize="xs" color="gray.400" fontWeight="normal">
|
||||
entries per page
|
||||
</Text>
|
||||
</Stack>
|
||||
<Input
|
||||
variant="main"
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
minW="75px"
|
||||
maxW="175px"
|
||||
fontSize="sm"
|
||||
_focus={{ borderColor: "blue.500" }}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
</Flex>
|
||||
<Table {...getTableProps()} variant="simple" color="gray.500" mb="24px">
|
||||
<Thead>
|
||||
{headerGroups.map((headerGroup, index) => (
|
||||
<Tr {...headerGroup.getHeaderGroupProps()} key={index}>
|
||||
{headerGroup.headers.map((column, index) => (
|
||||
<Th key={index}
|
||||
{...column.getHeaderProps(column.getSortByToggleProps())}
|
||||
pe="0px"
|
||||
>
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
fontSize={{ sm: "10px", lg: "12px" }}
|
||||
color="gray.400"
|
||||
>
|
||||
{column.render("Header")}
|
||||
<Icon
|
||||
w={{ sm: "10px", md: "14px" }}
|
||||
h={{ sm: "10px", md: "14px" }}
|
||||
color={columns.isSorted ? "gray.500" : "gray.400"}
|
||||
float="right"
|
||||
as={
|
||||
column.isSorted
|
||||
? column.isSortedDesc
|
||||
? ChevronDown
|
||||
: ChevronUp
|
||||
: ChevronsUpDown
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
</Th>
|
||||
))}
|
||||
</Tr>
|
||||
))}
|
||||
</Thead>
|
||||
<Tbody {...getTableBodyProps()}>
|
||||
{page.map((row, index) => {
|
||||
prepareRow(row);
|
||||
return (
|
||||
<Tr {...row.getRowProps()} key={index}>
|
||||
{row.cells.map((cell, index) => {
|
||||
return (
|
||||
<Td
|
||||
{...cell.getCellProps()}
|
||||
fontSize={{ sm: "14px" }}
|
||||
key={index}
|
||||
>
|
||||
{cell.render("Cell")}
|
||||
</Td>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
</Tbody>
|
||||
</Table>
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
justify="space-between"
|
||||
align="center"
|
||||
w="100%"
|
||||
px={{ md: "22px" }}
|
||||
>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.500"
|
||||
fontWeight="normal"
|
||||
mb={{ sm: "24px", md: "0px" }}
|
||||
>
|
||||
Showing {pageSize * pageIndex + 1} to{" "}
|
||||
{pageSize * (pageIndex + 1) <= tableData.length
|
||||
? pageSize * (pageIndex + 1)
|
||||
: tableData.length}{" "}
|
||||
of {tableData.length} entries
|
||||
</Text>
|
||||
<Stack direction="row" alignSelf="flex-end" spacing="4px" ms="auto">
|
||||
<Button
|
||||
variant="no-effects"
|
||||
onClick={() => previousPage()}
|
||||
transition="all .5s ease"
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg="#fff"
|
||||
border="1px solid lightgray"
|
||||
display={
|
||||
pageSize === 5 ? "none" : canPreviousPage ? "flex" : "none"
|
||||
}
|
||||
_hover={{
|
||||
bg: "gray.200",
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
>
|
||||
<Icon as={ChevronLeft} w="16px" h="16px" color="gray.400" />
|
||||
</Button>
|
||||
{pageSize === 5 ? (
|
||||
<NumberInput
|
||||
max={pageCount - 1}
|
||||
min={1}
|
||||
w="75px"
|
||||
mx="6px"
|
||||
defaultValue="1"
|
||||
onChange={(e) => gotoPage(e)}
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper onClick={() => nextPage()} />
|
||||
<NumberDecrementStepper onClick={() => previousPage()} />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
) : (
|
||||
createPages(pageCount).map((pageNumber, index) => {
|
||||
return (
|
||||
<Button
|
||||
variant="no-effects"
|
||||
transition="all .5s ease"
|
||||
onClick={() => gotoPage(pageNumber - 1)}
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg={pageNumber === pageIndex + 1 ? "blue.500" : "#fff"}
|
||||
border={
|
||||
pageNumber === pageIndex + 1
|
||||
? "none"
|
||||
: "1px solid lightgray"
|
||||
}
|
||||
_hover={{
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
key={index}
|
||||
>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={pageNumber === pageIndex + 1 ? "#fff" : "gray.600"}
|
||||
>
|
||||
{pageNumber}
|
||||
</Text>
|
||||
</Button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
<Button
|
||||
variant="no-effects"
|
||||
onClick={() => nextPage()}
|
||||
transition="all .5s ease"
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg="#fff"
|
||||
border="1px solid lightgray"
|
||||
display={pageSize === 5 ? "none" : canNextPage ? "flex" : "none"}
|
||||
_hover={{
|
||||
bg: "gray.200",
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
>
|
||||
<Icon as={ChevronRight} w="16px" h="16px" color="gray.400" />
|
||||
</Button>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchTable1;
|
||||
@@ -1,352 +0,0 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Argon Dashboard Chakra PRO - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
||||
|
||||
* Designed and Coded by Simmmple & Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
Flex,
|
||||
Icon,
|
||||
Input,
|
||||
NumberDecrementStepper,
|
||||
NumberIncrementStepper,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
Stack,
|
||||
Table,
|
||||
Tbody,
|
||||
Td,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useMemo } from "react";
|
||||
import { SearchBar } from "components/Navbars/SearchBar/SearchBar";
|
||||
import { RotateCcw, Check, X, CheckCircle, XCircle, Undo2, ChevronRight, ChevronLeft, ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
|
||||
import {
|
||||
useGlobalFilter,
|
||||
usePagination,
|
||||
useSortBy,
|
||||
useTable,
|
||||
} from "react-table";
|
||||
|
||||
function SearchTable2(props) {
|
||||
const { columnsData, tableData } = props;
|
||||
|
||||
const columns = useMemo(() => columnsData, []);
|
||||
const data = useMemo(() => tableData, []);
|
||||
|
||||
const tableInstance = useTable(
|
||||
{
|
||||
columns,
|
||||
data,
|
||||
},
|
||||
useGlobalFilter,
|
||||
useSortBy,
|
||||
usePagination
|
||||
);
|
||||
|
||||
const {
|
||||
getTableProps,
|
||||
getTableBodyProps,
|
||||
headerGroups,
|
||||
page,
|
||||
gotoPage,
|
||||
pageCount,
|
||||
prepareRow,
|
||||
nextPage,
|
||||
previousPage,
|
||||
canNextPage,
|
||||
canPreviousPage,
|
||||
setPageSize,
|
||||
setGlobalFilter,
|
||||
state,
|
||||
} = tableInstance;
|
||||
|
||||
const createPages = (count) => {
|
||||
let arrPageCount = [];
|
||||
|
||||
for (let i = 1; i <= count; i++) {
|
||||
arrPageCount.push(i);
|
||||
}
|
||||
|
||||
return arrPageCount;
|
||||
};
|
||||
|
||||
const { pageIndex, pageSize, globalFilter } = state;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
direction="column"
|
||||
w="100%"
|
||||
overflowX={{ sm: "scroll", lg: "hidden" }}
|
||||
>
|
||||
<Flex
|
||||
align={{ sm: "flex-start", lg: "flex-end" }}
|
||||
justify={{ sm: "flex-start", lg: "flex-end" }}
|
||||
w="100%"
|
||||
px="22px"
|
||||
mb="36px"
|
||||
>
|
||||
<SearchBar
|
||||
border="1px solid "
|
||||
borderColor={useColorModeValue("gray.200", "gray.600")}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
</Flex>
|
||||
<Table {...getTableProps()} variant="simple" color="gray.500" mb="24px">
|
||||
<Thead>
|
||||
{headerGroups.map((headerGroup, index) => (
|
||||
<Tr {...headerGroup.getHeaderGroupProps()} key={index}>
|
||||
{headerGroup.headers.map((column, index) => (
|
||||
<Th key={index}
|
||||
{...column.getHeaderProps(column.getSortByToggleProps())}
|
||||
pe="0px"
|
||||
>
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
fontSize={{ sm: "10px", lg: "12px" }}
|
||||
color="gray.400"
|
||||
>
|
||||
{column.render("Header")}
|
||||
<Icon
|
||||
w={{ sm: "10px", md: "14px" }}
|
||||
h={{ sm: "10px", md: "14px" }}
|
||||
color={columns.isSorted ? "gray.500" : "gray.400"}
|
||||
float="right"
|
||||
as={
|
||||
column.isSorted
|
||||
? column.isSortedDesc
|
||||
? ChevronDown
|
||||
: ChevronUp
|
||||
: ChevronsUpDown
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
</Th>
|
||||
))}
|
||||
</Tr>
|
||||
))}
|
||||
</Thead>
|
||||
<Tbody {...getTableBodyProps()}>
|
||||
{page.map((row, index) => {
|
||||
prepareRow(row);
|
||||
return (
|
||||
<Tr {...row.getRowProps()} key={index}>
|
||||
{row.cells.map((cell, index) => {
|
||||
let data = "";
|
||||
if (cell.column.Header === "STATUS") {
|
||||
data = (
|
||||
<Flex align="center">
|
||||
<Flex
|
||||
justify="center"
|
||||
align="center"
|
||||
border="1px solid"
|
||||
borderColor={
|
||||
cell.value === "Paid"
|
||||
? "green.400"
|
||||
: cell.value === "Refunded"
|
||||
? "gray.400"
|
||||
: "red.400"
|
||||
}
|
||||
borderRadius="50%"
|
||||
width="24px"
|
||||
height="24px"
|
||||
me="6px"
|
||||
>
|
||||
<Icon
|
||||
as={
|
||||
cell.value === "Paid"
|
||||
? Check
|
||||
: cell.value === "Refunded"
|
||||
? RotateCcw
|
||||
: X
|
||||
}
|
||||
color={
|
||||
cell.value === "Paid"
|
||||
? "green.400"
|
||||
: cell.value === "Refunded"
|
||||
? "gray.400"
|
||||
: "red.400"
|
||||
}
|
||||
w="20px"
|
||||
h="20px"
|
||||
/>
|
||||
</Flex>
|
||||
<Text>{cell.value}</Text>
|
||||
</Flex>
|
||||
);
|
||||
} else if (cell.column.Header === "ID") {
|
||||
data = (
|
||||
<Flex align="center">
|
||||
<Checkbox size="lg" colorScheme="blue" me="8px" />
|
||||
<Text>{cell.value}</Text>
|
||||
</Flex>
|
||||
);
|
||||
} else if (cell.column.Header === "DATE") {
|
||||
data = <Text>{cell.value}</Text>;
|
||||
} else if (cell.column.Header === "CUSTOMER") {
|
||||
data = (
|
||||
<Flex align="center">
|
||||
<Avatar
|
||||
name={cell.value.split(" ").join()[0]}
|
||||
w="30px"
|
||||
h="30px"
|
||||
me="6px"
|
||||
/>
|
||||
<Text>{cell.value}</Text>
|
||||
</Flex>
|
||||
);
|
||||
} else if (cell.column.Header === "PRODUCT") {
|
||||
data = <Text>{cell.value}</Text>;
|
||||
} else if (cell.column.Header === "REVENUE") {
|
||||
data = <Text>{cell.value}</Text>;
|
||||
}
|
||||
return (
|
||||
<Td
|
||||
{...cell.getCellProps()}
|
||||
key={index}
|
||||
fontSize={{ sm: "14px" }}
|
||||
minW={{ sm: "150px", md: "200px", lg: "auto" }}
|
||||
>
|
||||
{data}
|
||||
</Td>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
</Tbody>
|
||||
</Table>
|
||||
<Flex
|
||||
direction={{ sm: "column", md: "row" }}
|
||||
justify="space-between"
|
||||
align="center"
|
||||
w="100%"
|
||||
px={{ md: "22px" }}
|
||||
>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color="gray.500"
|
||||
fontWeight="normal"
|
||||
mb={{ sm: "24px", md: "0px" }}
|
||||
>
|
||||
Showing {pageSize * pageIndex + 1} to{" "}
|
||||
{pageSize * (pageIndex + 1) <= tableData.length
|
||||
? pageSize * (pageIndex + 1)
|
||||
: tableData.length}{" "}
|
||||
of {tableData.length} entries
|
||||
</Text>
|
||||
<Stack direction="row" alignSelf="flex-end" spacing="4px" ms="auto">
|
||||
<Button
|
||||
variant="no-effects"
|
||||
onClick={() => previousPage()}
|
||||
transition="all .5s ease"
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg="#fff"
|
||||
border="1px solid lightgray"
|
||||
display={
|
||||
pageSize === 5 ? "none" : canPreviousPage ? "flex" : "none"
|
||||
}
|
||||
_hover={{
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
>
|
||||
<Icon as={ChevronLeft} w="16px" h="16px" color="gray.400" />
|
||||
</Button>
|
||||
{pageSize === 5 ? (
|
||||
<NumberInput
|
||||
max={pageCount - 1}
|
||||
min={1}
|
||||
w="75px"
|
||||
mx="6px"
|
||||
defaultValue="1"
|
||||
onChange={(e) => gotoPage(e)}
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper onClick={() => nextPage()} />
|
||||
<NumberDecrementStepper onClick={() => previousPage()} />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
) : (
|
||||
createPages(pageCount).map((pageNumber, index) => {
|
||||
return (
|
||||
<Button
|
||||
variant="no-effects"
|
||||
transition="all .5s ease"
|
||||
onClick={() => gotoPage(pageNumber - 1)}
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg={pageNumber === pageIndex + 1 ? "blue.500" : "#fff"}
|
||||
border={
|
||||
pageNumber === pageIndex + 1
|
||||
? "none"
|
||||
: "1px solid lightgray"
|
||||
}
|
||||
_hover={{
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
key={index}
|
||||
>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={pageNumber === pageIndex + 1 ? "#fff" : "gray.600"}
|
||||
>
|
||||
{pageNumber}
|
||||
</Text>
|
||||
</Button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
<Button
|
||||
variant="no-effects"
|
||||
onClick={() => nextPage()}
|
||||
transition="all .5s ease"
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius="8px"
|
||||
bg="#fff"
|
||||
border="1px solid lightgray"
|
||||
display={pageSize === 5 ? "none" : canNextPage ? "flex" : "none"}
|
||||
_hover={{
|
||||
bg: "gray.200",
|
||||
opacity: "0.7",
|
||||
borderColor: "gray.500",
|
||||
}}
|
||||
>
|
||||
<Icon as={ChevronRight} w="16px" h="16px" color="gray.400" />
|
||||
</Button>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchTable2;
|
||||
Reference in New Issue
Block a user