opt-table
Version:
A Responsive and Customizable Rich Table
95 lines • 5.93 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.check_input_type = exports.AddNewRowComponent = void 0;
const react_1 = __importDefault(require("react"));
const collapse_add_row_1 = __importDefault(require("./collapse_add_row"));
const material_1 = require("@mui/material");
const useAddRow_1 = __importDefault(require("./hook/useAddRow"));
const error_tooltip_1 = require("./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, } = (0, useAddRow_1.default)({
ref: ref,
options: options,
});
return (react_1.default.createElement(material_1.TableRow, null,
react_1.default.createElement(collapse_add_row_1.default, { 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_1.default.createElement(material_1.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_1.default.createElement(material_1.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_1.default.createElement(error_tooltip_1.BootstrapTooltip, { style: { fontFamily: "inherit" }, title: show_error.message, open: show_error.input_index === index },
react_1.default.createElement(material_1.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) => {
(0, exports.check_input_type)(e, openShowError, index,
/* @ts-ignore */
table_row.input_type);
e.stopPropagation();
} }, table_row.input_props)))));
})) })));
};
// export default AddNewRowComponent;
exports.AddNewRowComponent = react_1.default.forwardRef(LocalAddNewRowComponent);
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;
};
exports.check_input_type = check_input_type;
//# sourceMappingURL=add_new_row_component.js.map