opt-table
Version:
A Responsive and Customizable Rich Table
88 lines • 5.39 kB
JavaScript
import React from "react";
import CollapseAddRow from "./collapse_add_row";
import { TableCell, TableRow, TextField } from "@mui/material";
import useAddRow from "./hook/useAddRow";
import { BootstrapTooltip } from "./error_tooltip";
const LocalAddNewRowComponent = ({ list_for_edit, options }, ref) => {
const { addNewRowHandler, is_create_new_row, clear_row_handler, newRow, add_loading, openShowError, show_error, set_add_loading, } = useAddRow({
ref: ref,
options: options,
});
return (React.createElement(TableRow, null,
React.createElement(CollapseAddRow, { is_disabled: add_loading, loading: add_loading, onCancel: () => {
var _a;
clear_row_handler();
/* @ts-ignore */
(_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.addNewRow(false);
}, onAccept: () => {
var _a, _b;
set_add_loading(true);
/* @ts-ignore */
(_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.newRowDataManager(newRow)) === null || _b === void 0 ? void 0 : _b.then((res) => {
if (res === true) {
clear_row_handler();
}
}).catch((err) => { }).finally(() => {
set_add_loading(false);
});
}, is_open: is_create_new_row, Comp: React.createElement(TableRow, { style: {} }, list_for_edit
.filter((item) => item.editable)
.map((table_row, index) => {
let first_to_focus = list_for_edit.findIndex((item) => item.editable === true);
return (React.createElement(TableCell, { key: index, align: table_row.align, width: table_row.width, style: Object.assign({ padding: "8px 8px 8px", minWidth: table_row.width,
// flex:1,
fontFamily: "inherit", position: "relative" }, table_row.row_style) },
React.createElement(BootstrapTooltip, { style: { fontFamily: "inherit" }, title: show_error.message, open: show_error.input_index === index },
React.createElement(TextField, Object.assign({ fullWidth: true,
// type={table_row.input_type}
disabled: add_loading || table_row.editable === false, key: `${add_loading}`, value: table_row.input_type === "price" &&
/* @ts-ignore */
!!(newRow === null || newRow === void 0 ? void 0 : newRow[table_row.table_key])
? Number(
/* @ts-ignore */
parseInt(newRow === null || newRow === void 0 ? void 0 : newRow[table_row.table_key])).toLocaleString()
: /* @ts-ignore */
(newRow === null || newRow === void 0 ? void 0 : newRow[table_row.table_key]) || "", variant: "standard", onChange: (e) => {
let value;
switch (table_row.input_type) {
case "price":
value =
parseInt(e.target.value.split(",").join("")) ||
"";
break;
case "number":
value = parseInt(e.target.value);
default:
value = e.target.value;
break;
}
addNewRowHandler({
key: table_row.table_key,
value,
});
}, size: "small", InputProps: { style: { fontFamily: "inherit" } }, label: table_row.title, autoFocus: index === first_to_focus, onKeyPress: (e) => {
check_input_type(e, openShowError, index,
/* @ts-ignore */
table_row.input_type);
e.stopPropagation();
} }, table_row.input_props)))));
})) })));
};
// export default AddNewRowComponent;
export const AddNewRowComponent = React.forwardRef(LocalAddNewRowComponent);
export const check_input_type = (event, openShowError, index, input_type) => {
const numbers = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57];
if (input_type === undefined)
return true;
if (input_type === "number" || input_type === "price") {
let check_is_number = numbers.indexOf(event.which);
if (check_is_number > -1) {
openShowError(null, "مقادیر عددی مجاز است");
return true;
}
openShowError(index, "مقادیر عددی مجاز است");
return event.preventDefault();
}
return true;
};
//# sourceMappingURL=add_new_row_component.js.map