opt-table
Version:
A Responsive and Customizable Rich Table
112 lines • 5.88 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import React, { useContext, useImperativeHandle } from "react";
import { getComparator, stableSort } from "../table_utils";
import { tableContext } from "../../../context/table_context";
function useTable({ props, ref }) {
var _a, _b;
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState(props.default_sort);
const { set_current_row, current_row, set_is_edited } = useContext(tableContext);
useImperativeHandle(ref, () => (Object.assign(Object.assign({}, ref === null || ref === void 0 ? void 0 : ref.current), { changeDetailPanelState: ({ index, table_key, }) => {
if (index === (current_row === null || current_row === void 0 ? void 0 : current_row.index) && table_key === current_row.table_key)
return set_current_row === null || set_current_row === void 0 ? void 0 : set_current_row({ index: -1, table_key: "" });
return set_current_row === null || set_current_row === void 0 ? void 0 : set_current_row({ index, table_key });
}, setRowToEditMode: (value) => {
set_is_edited === null || set_is_edited === void 0 ? void 0 : set_is_edited(value);
}, editRowDataManager: (data) => {
var _a;
if ((_a = props.options) === null || _a === void 0 ? void 0 : _a.editDataHandler)
return new Promise((res, rej) => __awaiter(this, void 0, void 0, function* () {
var _b;
if (!!!((_b = props.options) === null || _b === void 0 ? void 0 : _b.editDataHandler))
return rej(`add EditDataHandler method to props.options`);
let { editDataHandler } = props.options;
editDataHandler(data)
.then((result) => {
res(result);
})
.catch((err) => {
res(false);
})
.finally(() => { });
}));
return new Promise((res, rej) => {
rej(`Provide the editDataHandler method on options property`);
});
}, newRowDataManager: (data) => {
var _a;
if ((_a = props.options) === null || _a === void 0 ? void 0 : _a.newDataHandler)
return new Promise((res, rej) => __awaiter(this, void 0, void 0, function* () {
var _b;
if (!!!((_b = props.options) === null || _b === void 0 ? void 0 : _b.newDataHandler))
return rej(`add newDataHandler method to props.options`);
let { newDataHandler } = props === null || props === void 0 ? void 0 : props.options;
newDataHandler(data)
.then((result) => {
// addNewRow((pre) => ({} as T));
res(result);
})
.catch((err) => {
res(err);
})
.finally(() => {
// set_add_loading(false);
});
}));
return new Promise((res, rej) => {
rej(`Provide the newDataHandler method on options property`);
});
} })), []);
const [pagination_props, set_pagination_props] = React.useState({
page: 0,
totalDocs: 0,
totalIncome: 0,
perPage: 10,
rowsPerPageOptions: [10, 25, 30],
});
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === "asc";
set_current_row === null || set_current_row === void 0 ? void 0 : set_current_row(null);
set_is_edited === null || set_is_edited === void 0 ? void 0 : set_is_edited(null);
// startTransition(() => {
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
// });
};
const visibleRows = React.useMemo(() => {
if (Array.isArray(props.data))
return stableSort(props.data, getComparator(order, orderBy || ""));
return [];
}, [
order,
orderBy,
props.data,
pagination_props.perPage,
pagination_props.page,
]);
let paginatedRow = (_a = paginate(visibleRows, pagination_props.page, pagination_props.perPage)) === null || _a === void 0 ? void 0 : _a.filter((item, i) => i <= pagination_props.perPage);
function paginate(data, currentPage, pageSize) {
const startIndex = currentPage * pageSize;
const endIndex = startIndex + pageSize;
return data === null || data === void 0 ? void 0 : data.slice(startIndex, endIndex);
}
return {
order,
handleRequestSort,
visibleRows: props.has_pagination ? paginatedRow : visibleRows,
orderBy,
pagination_props,
set_pagination_props,
total_data: (_b = props.data) === null || _b === void 0 ? void 0 : _b.length,
};
}
export default useTable;
//# sourceMappingURL=useTable.js.map