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