opt-table
Version:
A Responsive and Customizable Rich Table
137 lines • 7.11 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const table_utils_1 = require("../table_utils");
const table_context_1 = require("../../../context/table_context");
function useTable({ props, ref }) {
var _a, _b;
const [order, setOrder] = react_1.default.useState("asc");
const [orderBy, setOrderBy] = react_1.default.useState(props.default_sort);
const { set_current_row, current_row, set_is_edited } = (0, react_1.useContext)(table_context_1.tableContext);
(0, react_1.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_1.default.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_1.default.useMemo(() => {
if (Array.isArray(props.data))
return (0, table_utils_1.stableSort)(props.data, (0, table_utils_1.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,
};
}
exports.default = useTable;
//# sourceMappingURL=useTable.js.map