react-admin-component
Version:
react library
55 lines • 3.39 kB
JavaScript
import * as tslib_1 from "tslib";
import React, { useRef, useState, useImperativeHandle, useEffect, } from 'react';
import { PrototypeCheck } from '../utils';
import { TableBase } from '..';
import { usePrevious } from 'react-use';
var InputSearchTable = function (props, ref) {
var _a = useState(false), tableVisible = _a[0], setTableVisible = _a[1];
var _b = useState(), apiParam = _b[0], setApiParam = _b[1];
var tableRef = useRef();
var prevParam = usePrevious(apiParam);
var _c = props.tableConfig, fetchApi = _c.fetchApi, ExtraHeader = _c.ExtraHeader, ExtraFooter = _c.ExtraFooter, normalizeValue = _c.normalizeValue, searchKey = _c.searchKey, onRow = _c.onRow, normalizeApiParams = _c.normalizeApiParams, normalizeInputValue = _c.normalizeInputValue, rest = tslib_1.__rest(_c, ["fetchApi", "ExtraHeader", "ExtraFooter", "normalizeValue", "searchKey", "onRow", "normalizeApiParams", "normalizeInputValue"]);
var onRowCB = props.onRowCB, inputValue = props.inputValue, style = props.style;
var clickRowCb = function (record) {
setTableVisible(false);
onRowCB &&
onRowCB(normalizeValue, record, normalizeInputValue ? normalizeInputValue(record) : null);
};
var handleContainerClick = function (event) {
event.nativeEvent.stopImmediatePropagation();
};
var setRow = function (record) {
var _a;
return _a = {},
_a[onRow] = function () {
clickRowCb(record);
},
_a;
};
useImperativeHandle(ref, function () { return ({
setTableVisible: setTableVisible,
}); });
useEffect(function () {
function setUnVisible() {
setTableVisible(false);
}
document.addEventListener('click', setUnVisible);
return function () { return document.removeEventListener('click', setUnVisible); };
}, []);
useEffect(function () {
var _a;
tableVisible &&
setApiParam((_a = {},
_a[searchKey] = inputValue,
_a));
}, [searchKey, inputValue, tableVisible]);
return (React.createElement("div", { className: "inputsearch-table-container", style: tslib_1.__assign({ display: tableVisible ? 'block' : 'none' }, style), onClick: handleContainerClick },
React.createElement("div", { className: "inputsearch-table-header" }, PrototypeCheck.isFunction(ExtraHeader) ? (React.createElement(ExtraHeader, { tableRef: tableRef, setTableVisible: setTableVisible })) : ('')),
React.createElement("div", { className: "inputsearch-table" },
React.createElement(TableBase, tslib_1.__assign({ ref: tableRef, fetchApi: fetchApi, apiParams: normalizeApiParams ? normalizeApiParams(apiParam) : apiParam, onRow: function (record) { return setRow.call(null, record); }, onPageChange: function (pageNo, pageSize) {
return setApiParam(tslib_1.__assign({}, prevParam, apiParam, { pageNo: pageNo, pageSize: pageSize }));
} }, rest))),
React.createElement("div", { className: "inputsearch-table-footer" }, PrototypeCheck.isFunction(ExtraFooter) ? (React.createElement(ExtraFooter, { tableRef: tableRef, setTableVisible: setTableVisible })) : (''))));
};
export default React.forwardRef(InputSearchTable);
//# sourceMappingURL=index.js.map