[5d6f37a] | 1 | import { useState, useCallback } from 'react';
|
---|
| 2 | //
|
---|
| 3 | import { TableProps } from './types';
|
---|
| 4 |
|
---|
| 5 | // ----------------------------------------------------------------------
|
---|
| 6 |
|
---|
| 7 | type ReturnType = TableProps;
|
---|
| 8 |
|
---|
| 9 | export type UseTableProps = {
|
---|
| 10 | defaultDense?: boolean;
|
---|
| 11 | defaultOrder?: 'asc' | 'desc';
|
---|
| 12 | defaultOrderBy?: string;
|
---|
| 13 | defaultSelected?: string[];
|
---|
| 14 | defaultRowsPerPage?: number;
|
---|
| 15 | defaultCurrentPage?: number;
|
---|
| 16 | };
|
---|
| 17 |
|
---|
| 18 | export default function useTable(props?: UseTableProps): ReturnType {
|
---|
| 19 | const [dense, setDense] = useState(!!props?.defaultDense);
|
---|
| 20 |
|
---|
| 21 | const [page, setPage] = useState(props?.defaultCurrentPage || 0);
|
---|
| 22 |
|
---|
| 23 | const [orderBy, setOrderBy] = useState(props?.defaultOrderBy || 'name');
|
---|
| 24 |
|
---|
| 25 | const [rowsPerPage, setRowsPerPage] = useState(props?.defaultRowsPerPage || 5);
|
---|
| 26 |
|
---|
| 27 | const [order, setOrder] = useState<'asc' | 'desc'>(props?.defaultOrder || 'asc');
|
---|
| 28 |
|
---|
| 29 | const [selected, setSelected] = useState<string[]>(props?.defaultSelected || []);
|
---|
| 30 |
|
---|
| 31 | const onSort = useCallback(
|
---|
| 32 | (id: string) => {
|
---|
| 33 | const isAsc = orderBy === id && order === 'asc';
|
---|
| 34 | if (id !== '') {
|
---|
| 35 | setOrder(isAsc ? 'desc' : 'asc');
|
---|
| 36 | setOrderBy(id);
|
---|
| 37 | }
|
---|
| 38 | },
|
---|
| 39 | [order, orderBy]
|
---|
| 40 | );
|
---|
| 41 |
|
---|
| 42 | const onSelectRow = useCallback(
|
---|
| 43 | (inputValue: string) => {
|
---|
| 44 | const newSelected = selected.includes(inputValue)
|
---|
| 45 | ? selected.filter((value) => value !== inputValue)
|
---|
| 46 | : [...selected, inputValue];
|
---|
| 47 |
|
---|
| 48 | setSelected(newSelected);
|
---|
| 49 | },
|
---|
| 50 | [selected]
|
---|
| 51 | );
|
---|
| 52 |
|
---|
| 53 | const onChangeRowsPerPage = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
---|
| 54 | setPage(0);
|
---|
| 55 | setRowsPerPage(parseInt(event.target.value, 10));
|
---|
| 56 | }, []);
|
---|
| 57 |
|
---|
| 58 | const onChangeDense = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
---|
| 59 | setDense(event.target.checked);
|
---|
| 60 | }, []);
|
---|
| 61 |
|
---|
| 62 | const onSelectAllRows = useCallback((checked: boolean, inputValue: string[]) => {
|
---|
| 63 | if (checked) {
|
---|
| 64 | setSelected(inputValue);
|
---|
| 65 | return;
|
---|
| 66 | }
|
---|
| 67 | setSelected([]);
|
---|
| 68 | }, []);
|
---|
| 69 |
|
---|
| 70 | const onChangePage = useCallback((event: unknown, newPage: number) => {
|
---|
| 71 | setPage(newPage);
|
---|
| 72 | }, []);
|
---|
| 73 |
|
---|
| 74 | const onResetPage = useCallback(() => {
|
---|
| 75 | setPage(0);
|
---|
| 76 | }, []);
|
---|
| 77 |
|
---|
| 78 | const onUpdatePageDeleteRow = useCallback(
|
---|
| 79 | (totalRowsInPage: number) => {
|
---|
| 80 | setSelected([]);
|
---|
| 81 | if (page) {
|
---|
| 82 | if (totalRowsInPage < 2) {
|
---|
| 83 | setPage(page - 1);
|
---|
| 84 | }
|
---|
| 85 | }
|
---|
| 86 | },
|
---|
| 87 | [page]
|
---|
| 88 | );
|
---|
| 89 |
|
---|
| 90 | const onUpdatePageDeleteRows = useCallback(
|
---|
| 91 | ({
|
---|
| 92 | totalRows,
|
---|
| 93 | totalRowsInPage,
|
---|
| 94 | totalRowsFiltered,
|
---|
| 95 | }: {
|
---|
| 96 | totalRows: number;
|
---|
| 97 | totalRowsInPage: number;
|
---|
| 98 | totalRowsFiltered: number;
|
---|
| 99 | }) => {
|
---|
| 100 | const totalSelected = selected.length;
|
---|
| 101 |
|
---|
| 102 | setSelected([]);
|
---|
| 103 |
|
---|
| 104 | if (page) {
|
---|
| 105 | if (totalSelected === totalRowsInPage) {
|
---|
| 106 | setPage(page - 1);
|
---|
| 107 | } else if (totalSelected === totalRowsFiltered) {
|
---|
| 108 | setPage(0);
|
---|
| 109 | } else if (totalSelected > totalRowsInPage) {
|
---|
| 110 | const newPage = Math.ceil((totalRows - totalSelected) / rowsPerPage) - 1;
|
---|
| 111 | setPage(newPage);
|
---|
| 112 | }
|
---|
| 113 | }
|
---|
| 114 | },
|
---|
| 115 | [page, rowsPerPage, selected.length]
|
---|
| 116 | );
|
---|
| 117 |
|
---|
| 118 | return {
|
---|
| 119 | dense,
|
---|
| 120 | order,
|
---|
| 121 | page,
|
---|
| 122 | orderBy,
|
---|
| 123 | rowsPerPage,
|
---|
| 124 | //
|
---|
| 125 | selected,
|
---|
| 126 | onSelectRow,
|
---|
| 127 | onSelectAllRows,
|
---|
| 128 | //
|
---|
| 129 | onSort,
|
---|
| 130 | onChangePage,
|
---|
| 131 | onChangeDense,
|
---|
| 132 | onResetPage,
|
---|
| 133 | onChangeRowsPerPage,
|
---|
| 134 | onUpdatePageDeleteRow,
|
---|
| 135 | onUpdatePageDeleteRows,
|
---|
| 136 | //
|
---|
| 137 | setPage,
|
---|
| 138 | setDense,
|
---|
| 139 | setOrder,
|
---|
| 140 | setOrderBy,
|
---|
| 141 | setSelected,
|
---|
| 142 | setRowsPerPage,
|
---|
| 143 | };
|
---|
| 144 | }
|
---|