sccoreui
Version:
ui-sccore
596 lines (595 loc) • 48.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const constants_1 = require("./constants");
const helper_1 = require("./helper");
const react_1 = require("react");
const advanced_feature_1 = tslib_1.__importDefault(require("./advancedFeature/advanced-feature"));
const AgGrid_1 = tslib_1.__importDefault(require("./AgGrid"));
const grid_checkbox_1 = tslib_1.__importDefault(require("./grid-checkbox"));
const error_ui_1 = tslib_1.__importDefault(require("./error-ui"));
const loading_component_1 = tslib_1.__importDefault(require("./loading-component"));
const context_provider_1 = tslib_1.__importDefault(require("./context-provider"));
const group_checkbox_1 = tslib_1.__importDefault(require("./group-checkbox"));
const utilComponents_1 = require("./utilComponents");
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
const EMPTY_RESPONSE = {
totalRecords: 0,
rowData: [],
};
const INITIAL_CHECKBOX_DATA = {
allBoxChecked: false,
isIndeterminate: false,
includedRecords: [],
excludedRecords: [],
rowId: null,
headerCheckBoxStatus: constants_1.GRID_CHECKBOX_STATUS.NEUTRAL,
};
function ParentForGrid(props) {
var _a, _b, _c, _d, _e, _f, _g, _h;
const { gridProps = {}, gridViewTemplate, selectColumns = () => { }, enableCheckboxForGroupHeader = false, serverSideSelectRow, blockSize, renderSelectField, renderMultiSelectField, } = props;
const effectiveBlockSize = blockSize || constants_1.BLOCK_SIZE;
const [gridData, setGridData] = (0, react_1.useState)({
rowData: (props === null || props === void 0 ? void 0 : props.rowData) || [],
columnData: (0, helper_1.sortColumns)(props === null || props === void 0 ? void 0 : props.columnData),
});
const [gridViewData, setGridViewData] = (0, react_1.useState)({
rowData: [],
searchText: "",
});
const [gridView, setGridView] = (0, react_1.useState)(false);
const [isDataLoading, setIsDataLoading] = (0, react_1.useState)(false);
// const [style] = useState<Style>(props.style);
const [api, setApi] = (0, react_1.useState)(null);
const [totalRecords, setTotalRecords] = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.rowData) ? props === null || props === void 0 ? void 0 : props.rowData.length : 0);
const [gridReadyEvent, setGridReadyEvent] = (0, react_1.useState)();
const [intialColumns, setIntialColumns] = (0, react_1.useState)(null);
const [defaultFilters, setDefaultFilters] = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.defaultFilters) || []);
const [defaultSearchText, setDefaultSearchText] = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.defaultSearchText) || "");
const [defaultSort] = (0, react_1.useState)((props === null || props === void 0 ? void 0 : props.defaultSort) || null);
const [selectedGroup, setSelectedGroup] = (0, react_1.useState)([]);
const emptyResponse = EMPTY_RESPONSE;
const initialCheckBoxData = INITIAL_CHECKBOX_DATA;
const initialFeature = (0, react_1.useMemo)(() => ({
searchedText: "",
filterQueries: [],
sort: {
isSortable: false,
columnToSort: {},
orderToSort: {},
},
checkBoxSelection: initialCheckBoxData,
isRemoveClicked: false,
}), [initialCheckBoxData]);
const [featureDetails, setFeatureDetails] = (0, react_1.useState)({
searchedText: (props === null || props === void 0 ? void 0 : props.defaultSearchText) || "",
filterQueries: (props === null || props === void 0 ? void 0 : props.defaultFilters)
? (0, helper_1.applyDefaultFilters)(props === null || props === void 0 ? void 0 : props.defaultFilters)
: [],
sort: (props === null || props === void 0 ? void 0 : props.defaultSort)
? {
isSortable: true,
// Will be populated by context-provider from API format
columnToSort: {},
orderToSort: {},
}
: {
isSortable: false,
columnToSort: {},
orderToSort: {},
},
checkBoxSelection: initialCheckBoxData,
isRemoveClicked: false,
});
// const [columnToRender,setColumnToRender] = useState<ColumnDef[]>([])
const isInitialLoadRef = (0, react_1.useRef)(true);
const isRefetchingRef = (0, react_1.useRef)(false);
const gridRef = (0, react_1.useRef)(null);
const groupingColumns = (0, react_1.useMemo)(() => {
var _a, _b;
return (_b = (_a = gridData === null || gridData === void 0 ? void 0 : gridData.columnData) === null || _a === void 0 ? void 0 : _a.filter((colDef) => colDef === null || colDef === void 0 ? void 0 : colDef.rowGroup)) === null || _b === void 0 ? void 0 : _b.length;
}, [gridData === null || gridData === void 0 ? void 0 : gridData.columnData]);
// Default column specification
const defaultColDef = (0, react_1.useMemo)(() => {
return {
flex: 1,
minWidth: 40,
editable: false,
filter: false,
sortable: false,
};
}, []);
const emptyIncludedRecords = (objectData) => {
const obj = Object.assign(Object.assign({}, objectData), { checkBoxSelection: Object.assign(Object.assign({}, objectData.checkBoxSelection), { rowId: null, includedRecords: [] }) });
setFeatureDetails(obj);
};
const serverSideRowLeveSelection = (object) => {
if (serverSideSelectRow) {
serverSideSelectRow(object, (objectData) => emptyIncludedRecords(objectData));
}
};
// Function to handle header checkbox click event
const handleHeaderCheckbox = () => {
// get the group and subgroupids
const { firstGroupIds, secondGroupIds } = (0, helper_1.getGroupIds)(gridRef);
const { allBoxChecked } = featureDetails.checkBoxSelection;
const currentStatus = !allBoxChecked;
const checkboxData = Object.assign(Object.assign({}, featureDetails.checkBoxSelection), { allBoxChecked: currentStatus, isIndeterminate: false, includedRecords: [], excludedRecords: [], rowId: "grid-header-checkbox", headerCheckBoxStatus: currentStatus
? constants_1.GRID_CHECKBOX_STATUS.CHECKED
: constants_1.GRID_CHECKBOX_STATUS.UNCHECKED });
const updatedRows = [];
gridRef.current.api.forEachNode((node) => {
if (!node.data)
return;
node.data.isSelected = currentStatus;
updatedRows.push(Object.assign({}, node.data));
});
if (props.rowModelType === constants_1.ROWMODELTYPE.CLIENT_SIDE) {
gridRef.current.api.applyTransaction({ update: updatedRows });
}
else {
gridRef.current.api.refreshCells({ force: true });
}
if (currentStatus) {
// stroring all first and secodn group ids
setSelectedGroup([...firstGroupIds, ...secondGroupIds]);
}
else {
setSelectedGroup([]);
}
selectColumns &&
selectColumns(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: checkboxData }));
serverSideRowLeveSelection(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: checkboxData }));
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: checkboxData }));
};
// JSX for rendering checkbox in header
const headerCheckBoxRenderer = (headerDisplayName, HeaderComponent) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `flex align-items-center header-checkbox-class justify-content-between ${((_a = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _a === void 0 ? void 0 : _a.displayCheckboxOnRight)
? "w-full pd-r-2"
: ""}` }, { children: ((_b = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _b === void 0 ? void 0 : _b.displayCheckboxOnRight) ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-center justify-content-between w-full ` }, { children: [HeaderComponent ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " mr-auto" }, { children: [" ", (0, jsx_runtime_1.jsx)(HeaderComponent, {}), " "] }))) : ((0, jsx_runtime_1.jsx)("span", { children: headerDisplayName })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ml-1 animate-spin save-loader hidden header-check-box-loader" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "loading-02", size: 16 }) })), (0, jsx_runtime_1.jsx)(grid_checkbox_1.default, { id: "grid-header-checkbox", checked: featureDetails.checkBoxSelection.allBoxChecked, onChange: () => handleHeaderCheckbox(), isIndeterminate: featureDetails.checkBoxSelection.isIndeterminate &&
(((_d = (_c = featureDetails.checkBoxSelection) === null || _c === void 0 ? void 0 : _c.excludedRecords) === null || _d === void 0 ? void 0 : _d.length) > 0
? true
: false), shouldRenderOnRight: (_e = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _e === void 0 ? void 0 : _e.displayCheckboxOnRight })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ml-1 animate-spin save-loader hidden header-check-box-loader" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "loading-02", size: 16 }) })), (0, jsx_runtime_1.jsx)(grid_checkbox_1.default, { id: "grid-header-checkbox", checked: featureDetails.checkBoxSelection.allBoxChecked, onChange: () => handleHeaderCheckbox(), isIndeterminate: featureDetails.checkBoxSelection.isIndeterminate &&
(((_g = (_f = featureDetails.checkBoxSelection) === null || _f === void 0 ? void 0 : _f.excludedRecords) === null || _g === void 0 ? void 0 : _g.length) > 0
? true
: false), shouldRenderOnRight: (_h = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _h === void 0 ? void 0 : _h.displayCheckboxOnRight }), HeaderComponent ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "px-3" }, { children: [" ", (0, jsx_runtime_1.jsx)(HeaderComponent, {}), " "] }))) : ((0, jsx_runtime_1.jsx)("span", { children: headerDisplayName }))] })) })));
};
// JSX for rendering checkbox in cells
const cellCheckBoxRenderer = (params) => {
var _a, _b;
const { data } = params;
// const { allBoxChecked, excludedRecords, includedRecords } = featureDetails.checkBoxSelection;
const isChecked = (0, helper_1.getCheckedStatus)(data, featureDetails, constants_1.GRID_CHECKBOX_STATUS);
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "row-check-box flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ id: `check-box-loader-${params.data.id}`, className: "ml-1 hidden animate-spin save-loader check-box-loader" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "loading-02", size: 16 }) })), (0, jsx_runtime_1.jsx)(grid_checkbox_1.default, { id: `grid-checkbox-${params.data.id}`, checked: isChecked, disabled: ((_a = params === null || params === void 0 ? void 0 : params.data) === null || _a === void 0 ? void 0 : _a.tagged) || false, onChange: (e) => (0, helper_1.handleCheckboxClick)(e, params, featureDetails, gridData, setFeatureDetails, groupingColumns, setSelectedGroup, selectColumns, serverSideRowLeveSelection), isIndeterminate: false, shouldRenderOnRight: (_b = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _b === void 0 ? void 0 : _b.displayCheckboxOnRight })] })));
};
// Callback to products for getting data
const getData = (startRow, endRow, currentFeatures, params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
if (!(props === null || props === void 0 ? void 0 : props.getRowData)) {
return emptyResponse; // If callback function to get row data is not provided
}
setIsDataLoading(true);
try {
const response = yield (props === null || props === void 0 ? void 0 : props.getRowData(startRow, endRow, currentFeatures, params));
setGridData((prev) => (Object.assign(Object.assign({}, prev), { rowData: [] })));
// To identify when to stop the callBack
const actualEndRow = (response === null || response === void 0 ? void 0 : response.totalRecords) < constants_1.MAX_RECORDS_TO_LOAD
? response === null || response === void 0 ? void 0 : response.totalRecords
: constants_1.MAX_RECORDS_TO_LOAD;
if (response === null || response === void 0 ? void 0 : response.rowData) {
const result = {
rowData: response.rowData,
actualEndRow: actualEndRow,
totalRecords: response.totalRecords,
};
setTotalRecords(response === null || response === void 0 ? void 0 : response.totalRecords);
return result;
}
return emptyResponse;
}
finally {
setIsDataLoading(false);
}
});
// Gets call onLoad,scroll and whenever any featureDetails changed
const onGridReady = (params, updatedFeatures) => tslib_1.__awaiter(this, void 0, void 0, function* () {
var _j, _k, _l, _m, _o, _p;
params && setApi(params === null || params === void 0 ? void 0 : params.api);
setGridReadyEvent(params);
let currentFeatures = updatedFeatures;
if (!updatedFeatures) {
currentFeatures = featureDetails;
}
if ((props === null || props === void 0 ? void 0 : props.rowModelType) === (constants_1.ROWMODELTYPE === null || constants_1.ROWMODELTYPE === void 0 ? void 0 : constants_1.ROWMODELTYPE.CLIENT_SIDE)) {
if (gridView) {
const result = yield getData(0, 0, currentFeatures);
setGridViewData(Object.assign(Object.assign({}, gridViewData), { rowData: result.rowData }));
return;
}
(_k = (_j = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _j === void 0 ? void 0 : _j.api) === null || _k === void 0 ? void 0 : _k.showLoadingOverlay();
params && ((_l = params === null || params === void 0 ? void 0 : params.api) === null || _l === void 0 ? void 0 : _l.setGridOption("rowData", []));
const result = gridViewData.rowData.length > 0
? {
rowData: gridViewData.rowData,
totalRecords: gridViewData.rowData.length,
}
: yield getData(0, 0, currentFeatures);
if (((_m = result.rowData) === null || _m === void 0 ? void 0 : _m.length) > 0) {
gridViewData.rowData.length > 0 &&
setGridViewData({ rowData: [], searchText: "" });
setGridData((prev) => (Object.assign(Object.assign({}, prev), { rowData: result.rowData })));
gridRef.current && gridRef.current.api.hideOverlay();
params && ((_o = params === null || params === void 0 ? void 0 : params.api) === null || _o === void 0 ? void 0 : _o.applyTransaction({ add: result.rowData }));
}
else {
gridRef.current && gridRef.current.api.showNoRowsOverlay();
params && ((_p = params === null || params === void 0 ? void 0 : params.api) === null || _p === void 0 ? void 0 : _p.applyTransaction({ add: [] }));
}
}
else if (props.rowModelType === constants_1.ROWMODELTYPE.SERVER_SIDE) {
const dataSource = {
getRows: (params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
var _q, _r;
const startRow = params.request.startRow;
const endRow = params.request.endRow;
// Scroll should not exit MAX_RECORDS_TO_LOAD
// get data for request from our fake server
const response = yield getData(startRow, endRow, currentFeatures, params);
// simulating real server call with a 500ms delay
if (((_q = response.rowData) === null || _q === void 0 ? void 0 : _q.length) > 0) {
setGridData((prev) => (Object.assign(Object.assign({}, prev), { rowData: response.rowData })));
gridRef.current.api.hideOverlay();
// supply rows for requested block to grid
params &&
params.success({
rowData: response.rowData,
rowCount: response.actualEndRow,
});
return;
}
else {
// params.fail();
const gridRows = startRow >= effectiveBlockSize ? gridData.rowData : [];
if (!((_r = params === null || params === void 0 ? void 0 : params.parentNode) === null || _r === void 0 ? void 0 : _r.id))
gridRef.current && gridRef.current.api.showNoRowsOverlay();
params && params.success({ rowData: gridRows });
return;
}
}),
};
params && (params === null || params === void 0 ? void 0 : params.api.setGridOption("serverSideDatasource", dataSource));
}
});
// Specify unique id for every row for grid
const getRowId = (0, react_1.useCallback)((prams) => prams.data.id, []);
// Update cell from front end and give a call back to products
const wrapperToFillOpertation = (params) => {
(0, helper_1.fillOperation)(params, api, props === null || props === void 0 ? void 0 : props.editedRecords, props === null || props === void 0 ? void 0 : props.setEditedRecords);
};
// Operation on fill handle
const myOpertaion = (fillOperationParams) => {
var _a, _b, _c;
return (_b = (_a = fillOperationParams === null || fillOperationParams === void 0 ? void 0 : fillOperationParams.rowNode) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[(_c = fillOperationParams === null || fillOperationParams === void 0 ? void 0 : fillOperationParams.column) === null || _c === void 0 ? void 0 : _c.colId];
};
// Reference to get the data for tree grid
const getDataPath = (0, react_1.useCallback)((data) => {
return data.orgHierarchy;
}, []);
// Render group child conditionally with/without checkbox
const manageColumnGrouping = () => {
var _a, _b, _c;
// Custom component for specific group header/parent
const GroupHeaderRenderer = (params) => {
var _a, _b, _c, _d, _e, _f;
const Wrapper = () => {
return (0, jsx_runtime_1.jsx)(utilComponents_1.GroupHeader, { params: params });
};
// Main onChange handler function for group checkbox
const onChange = (e, params) => {
const isChecked = e.checked;
if (isChecked) {
(0, helper_1.handleCheckedState)(params, featureDetails, gridData, setFeatureDetails, setSelectedGroup, groupingColumns);
}
else {
(0, helper_1.handleUncheckedState)(params, featureDetails, gridData, setFeatureDetails, setSelectedGroup, groupingColumns);
}
};
const HeaderComponent = props === null || props === void 0 ? void 0 : props.rowGroupHeaderComponent;
// To display checkbox
if ((_a = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _a === void 0 ? void 0 : _a.displayCheckboxForGroups) {
// To display checkbox on right
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(group_checkbox_1.default, { checked: (selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.includes((_b = params === null || params === void 0 ? void 0 : params.node) === null || _b === void 0 ? void 0 : _b.id)) ||
(((_c = featureDetails === null || featureDetails === void 0 ? void 0 : featureDetails.checkBoxSelection) === null || _c === void 0 ? void 0 : _c.allBoxChecked) &&
!((_d = featureDetails === null || featureDetails === void 0 ? void 0 : featureDetails.checkBoxSelection) === null || _d === void 0 ? void 0 : _d.isIndeterminate)), onChange: (e) => onChange(e, params), isIndeterminate: false, shouldRenderOnRight: (_e = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _e === void 0 ? void 0 : _e.displayCheckboxOnRight }), props.rowGroupHeaderComponent ? ((0, jsx_runtime_1.jsx)(HeaderComponent, { params: params })) : ((_f = params === null || params === void 0 ? void 0 : params.node) === null || _f === void 0 ? void 0 : _f.field)] })));
}
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.rowGroupHeaderComponent ? ((0, jsx_runtime_1.jsx)(HeaderComponent, { params: params })) : ((0, jsx_runtime_1.jsx)(Wrapper, {})) }));
};
const GridHeaderComponent = () => {
if (props === null || props === void 0 ? void 0 : props.GroupHeaderComponent) {
const CustomComponent = props === null || props === void 0 ? void 0 : props.GroupHeaderComponent;
return (0, jsx_runtime_1.jsx)(CustomComponent, {});
}
return (0, jsx_runtime_1.jsx)("span", { children: "Group " });
};
// Cell renderer with checkbox
const cellRendererConditionally = (params) => {
var _a, _b, _c;
if ((_a = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _a === void 0 ? void 0 : _a.displayCheckboxForGroupChild) {
if (!(props === null || props === void 0 ? void 0 : props.ChildComponentForGroup)) {
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between" }, { children: [cellCheckBoxRenderer(params), (0, jsx_runtime_1.jsx)("p", { children: params === null || params === void 0 ? void 0 : params.data[props === null || props === void 0 ? void 0 : props.groupField] })] })));
}
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((_b = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _b === void 0 ? void 0 : _b.displayCheckboxOnRight) ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between" }, { children: [props === null || props === void 0 ? void 0 : props.ChildComponentForGroup(params), cellCheckBoxRenderer(params)] }))) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between" }, { children: [cellCheckBoxRenderer(params), props === null || props === void 0 ? void 0 : props.ChildComponentForGroup(params)] }))) }));
}
else {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(props === null || props === void 0 ? void 0 : props.ChildComponentForGroup) ? (props === null || props === void 0 ? void 0 : props.ChildComponentForGroup(params)) : ((0, jsx_runtime_1.jsx)("span", { children: params === null || params === void 0 ? void 0 : params.data[(_c = params === null || params === void 0 ? void 0 : params.colDef) === null || _c === void 0 ? void 0 : _c.field] })), " "] }));
}
};
// Group default values
if ((props === null || props === void 0 ? void 0 : props.ChildComponentForGroup) ||
((_a = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _a === void 0 ? void 0 : _a.displayCheckboxForGroupChild)) {
return (0, helper_1.autoGroupColumnDef)((props === null || props === void 0 ? void 0 : props.enableTree) ? true : false, // If tree enable
props === null || props === void 0 ? void 0 : props.treeHeaderName, // Tree header name
props === null || props === void 0 ? void 0 : props.groupField, // Group field
GridHeaderComponent, // Header component
headerCheckBoxRenderer, //
enableCheckboxForGroupHeader, ((_b = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _b === void 0 ? void 0 : _b.displayGroupCount) || false, parseInt(props === null || props === void 0 ? void 0 : props.rowGroupColumnWidth), // for grouped column width
cellRendererConditionally, GroupHeaderRenderer);
}
else {
return (0, helper_1.autoGroupColumnDef)((props === null || props === void 0 ? void 0 : props.enableTree) ? true : false, // If tree enable
props === null || props === void 0 ? void 0 : props.treeHeaderName, // Tree header name
props === null || props === void 0 ? void 0 : props.groupField, // Group field
GridHeaderComponent, // Header component
headerCheckBoxRenderer, //
enableCheckboxForGroupHeader, ((_c = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _c === void 0 ? void 0 : _c.displayGroupCount) || false, parseInt(props === null || props === void 0 ? void 0 : props.rowGroupColumnWidth), // for grouped column width
GroupHeaderRenderer);
}
};
(0, react_1.useEffect)(() => {
var _a, _b;
// Initialize `intialColumns` only if it hasn't been set yet
if (!intialColumns) {
// Perform a deep copy of the columns array using `JSON.parse(JSON.stringify())`
const deepCopyOfColumns = (0, helper_1.deepClone)(gridData === null || gridData === void 0 ? void 0 : gridData.columnData);
setIntialColumns(deepCopyOfColumns);
}
if (props === null || props === void 0 ? void 0 : props.rowData) {
setTotalRecords(props === null || props === void 0 ? void 0 : props.rowData.length);
setGridData((prev) => (Object.assign(Object.assign({}, prev), { rowData: props.rowData })));
}
if (props === null || props === void 0 ? void 0 : props.enableAdvancedFilter) {
(_b = (_a = props === null || props === void 0 ? void 0 : props.getGridRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.api.setGridOption("advancedFilterParent", document.getElementById("advancedFilterParent"));
}
}, [intialColumns, props === null || props === void 0 ? void 0 : props.rowData]);
(0, react_1.useEffect)(() => {
if (props === null || props === void 0 ? void 0 : props.getGridRef) {
props.getGridRef.current = gridRef.current;
}
}, [props === null || props === void 0 ? void 0 : props.getGridRef]);
const gridStyle = (0, react_1.useMemo)(() => {
var _a, _b, _c;
return (Object.assign({ width: (_a = props === null || props === void 0 ? void 0 : props.style) === null || _a === void 0 ? void 0 : _a.width }, (totalRecords > constants_1.AUTO_HEIGHT_ROWS ||
!((_b = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _b === void 0 ? void 0 : _b.isGridAutoHeight)
? { height: (_c = props === null || props === void 0 ? void 0 : props.style) === null || _c === void 0 ? void 0 : _c.height }
: null)));
}, [
(_a = props === null || props === void 0 ? void 0 : props.style) === null || _a === void 0 ? void 0 : _a.width,
(_b = props === null || props === void 0 ? void 0 : props.style) === null || _b === void 0 ? void 0 : _b.height,
totalRecords,
(_c = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _c === void 0 ? void 0 : _c.isGridAutoHeight,
]);
// Dont show hide overlay component when any row pinned
// useEffect(() => {
// if (!props?.pinnedTopRowData) return;
// const api = gridRef?.current?.api;
// // Check for pinned rows and regular row data
// const hasPinnedRows =
// api?.getPinnedTopRowCount() > 0 || api?.getPinnedBottomRowCount() > 0;
// const hasRowData = api?.getDisplayedRowCount() > 0;
// if (hasPinnedRows || hasRowData) {
// api?.hideOverlay(); // Hide the noRowsOverlayComponent if pinned rows or row data exists
// } else {
// api?.showNoRowsOverlay(); // Show the noRowsOverlayComponent only if no rows or pinned rows are present
// }
// }, [gridData.rowData, props?.pinnedTopRowData]);
const popupParent = (0, react_1.useMemo)(() => {
return document.getElementById("wrapper");
}, []);
const onGridPreDestroyed = () => {
const allData = [];
api === null || api === void 0 ? void 0 : api.forEachNode((node) => {
allData.push(node.data);
});
setGridViewData(Object.assign(Object.assign({}, gridViewData), { rowData: allData }));
};
// Options that grid should have
const gridOptions = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ columnDefs: (_d = gridData === null || gridData === void 0 ? void 0 : gridData.columnData) === null || _d === void 0 ? void 0 : _d.map((column) => {
var _a, _b;
if ((column === null || column === void 0 ? void 0 : column.enableChildCheckbox) && (column === null || column === void 0 ? void 0 : column.enableHeaderCheckbox)) {
return Object.assign(Object.assign({}, column), { headerComponent: (params) => headerCheckBoxRenderer(params === null || params === void 0 ? void 0 : params.displayName, (column === null || column === void 0 ? void 0 : column.headerComponent) && ""), cellRenderer: (params) => (0, utilComponents_1.dataCellRenderer)(params, column, props), cellRendererParams: {
initialRenderer: column === null || column === void 0 ? void 0 : column.body,
cellCheckBoxRenderer: cellCheckBoxRenderer,
}, headerName: (_a = column === null || column === void 0 ? void 0 : column.headerName) === null || _a === void 0 ? void 0 : _a.toUpperCase() });
}
else {
return Object.assign(Object.assign({}, column), { headerName: (_b = column === null || column === void 0 ? void 0 : column.headerName) === null || _b === void 0 ? void 0 : _b.toUpperCase() });
}
}), autoGroupColumnDef: (props === null || props === void 0 ? void 0 : props.autoGroupColumnDef)
? props === null || props === void 0 ? void 0 : props.autoGroupColumnDef
: manageColumnGrouping(), treeData: (props === null || props === void 0 ? void 0 : props.enableTree) ? props === null || props === void 0 ? void 0 : props.enableTree : false, getDataPath: (props === null || props === void 0 ? void 0 : props.enableTree) ? getDataPath : null, defaultColDef: defaultColDef, suppressMenuHide: false, suppressRowClickSelection: false, headerHeight: props === null || props === void 0 ? void 0 : props.columnHeaderHeight, rowHeight: constants_1.ROW_HEIGHT, rowModelType: props.rowModelType, pinnedTopRowData: props === null || props === void 0 ? void 0 : props.pinnedTopRowData }, (props.rowModelType === (constants_1.ROWMODELTYPE === null || constants_1.ROWMODELTYPE === void 0 ? void 0 : constants_1.ROWMODELTYPE.SERVER_SIDE) && {
cacheBlockSize: effectiveBlockSize,
})), { maxBlocksInCache: effectiveBlockSize, blockLoadDebounceMillis: constants_1.DEBOUNCE_INTERVAL, noRowsOverlayComponent: props === null || props === void 0 ? void 0 : props.noRowsOverlayComponent, loadingOverlayComponent: loading_component_1.default, suppressCellFocus: true, suppressPropertyNamesCheck: true, suppressServerSideFullWidthLoadingRow: true, enableRangeSelection: (_e = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _e === void 0 ? void 0 : _e.enableFillHandle, enableFillHandle: (_f = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _f === void 0 ? void 0 : _f.enableFillHandle, onFillEnd: wrapperToFillOpertation, fillOperation: myOpertaion, serverSideInitialRowCount: (props === null || props === void 0 ? void 0 : props.serverSideInitialRowCount) || 10, getRowId: getRowId, enableAdvancedFilter: (props === null || props === void 0 ? void 0 : props.enableAdvancedFilter) || false, fillHandleDirection: "y" }), ((props === null || props === void 0 ? void 0 : props.rowData) && { rowData: props === null || props === void 0 ? void 0 : props.rowData })), (totalRecords <= constants_1.AUTO_HEIGHT_ROWS &&
((_g = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _g === void 0 ? void 0 : _g.isGridAutoHeight)
? { domLayout: "autoHeight" }
: { domLayout: "normal" })), ((props === null || props === void 0 ? void 0 : props.dataTypeDefinitions) && {
dataTypeDefinitions: props === null || props === void 0 ? void 0 : props.dataTypeDefinitions,
})), { popupParent: popupParent }), ((props === null || props === void 0 ? void 0 : props.treeData) && { treeData: props === null || props === void 0 ? void 0 : props.treeData })), ((props === null || props === void 0 ? void 0 : props.groupDefaultExpanded) && {
groupDefaultExpanded: props === null || props === void 0 ? void 0 : props.groupDefaultExpanded, // to enable tree data
})), ((props === null || props === void 0 ? void 0 : props.onRowClicked) ? { onRowClicked: props === null || props === void 0 ? void 0 : props.onRowClicked } : {})), ((props === null || props === void 0 ? void 0 : props.quickSearch) ? { quickSearch: props.quickSearch } : {})), {
// ...(props?.getDataPath && { getDataPath: props?.getDataPath }), // for clint side tree data enable fetuare
onGridPreDestroyed: onGridPreDestroyed }), ((props === null || props === void 0 ? void 0 : props.rowDragManaged) ? { rowDragManaged: props === null || props === void 0 ? void 0 : props.rowDragManaged } : {})), gridProps);
// Fucntion to call the grid
const callGrid = (featureDetails) => {
// Reset checkbox selection on search/filter/sort changes for server-side selection
if (serverSideSelectRow) {
const resetFeatures = Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: initialCheckBoxData });
setFeatureDetails(resetFeatures);
setSelectedGroup([]);
onGridReady(gridReadyEvent, resetFeatures);
}
else {
onGridReady(gridReadyEvent, featureDetails);
}
};
// Call Grid if something is searched
(0, react_1.useEffect)(() => {
if (isInitialLoadRef.current)
return;
if (isRefetchingRef.current) {
isRefetchingRef.current = false;
return;
}
if (api && gridReadyEvent) {
!props.rowData && callGrid(featureDetails);
}
}, [featureDetails.searchedText]);
(0, react_1.useEffect)(() => {
var _a;
if (isInitialLoadRef.current) {
isInitialLoadRef.current = false;
return;
}
if (api && gridReadyEvent && (props === null || props === void 0 ? void 0 : props.shouldRefetch)) {
// Always sync filters from props — even when empty (e.g. "All" view)
// so stale filters from the previous view are cleared
const newFilterQueries = ((_a = props === null || props === void 0 ? void 0 : props.defaultFilters) === null || _a === void 0 ? void 0 : _a.length)
? (0, helper_1.applyDefaultFilters)(props.defaultFilters)
: [];
const newSearchText = (props === null || props === void 0 ? void 0 : props.defaultSearchText) || featureDetails.searchedText || "";
const currentFeature = Object.assign(Object.assign({}, featureDetails), { filterQueries: newFilterQueries, searchedText: newSearchText });
setDefaultFilters((props === null || props === void 0 ? void 0 : props.defaultFilters) || []);
setDefaultSearchText(newSearchText);
// Prevent the searchedText useEffect from triggering a duplicate callGrid
isRefetchingRef.current = true;
setFeatureDetails(currentFeature);
callGrid(currentFeature);
}
}, [props === null || props === void 0 ? void 0 : props.shouldRefetch]);
(0, react_1.useEffect)(() => {
if (props === null || props === void 0 ? void 0 : props.getCheckedRows) {
const callBackForCheckedRows = props === null || props === void 0 ? void 0 : props.getCheckedRows;
callBackForCheckedRows(featureDetails);
}
}, [featureDetails]);
(0, react_1.useEffect)(() => {
var _a, _b;
if ((_a = props === null || props === void 0 ? void 0 : props.updateRowData) === null || _a === void 0 ? void 0 : _a.shouldUpdate) {
(0, helper_1.updateCells)((_b = props === null || props === void 0 ? void 0 : props.updateRowData) === null || _b === void 0 ? void 0 : _b.rowData, props === null || props === void 0 ? void 0 : props.setUpdateRowData, api);
}
}, [props.updateRowData]);
(0, react_1.useEffect)(() => {
var _a, _b, _c;
const existingColumns = (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) && ((_a = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.api) === null || _a === void 0 ? void 0 : _a.getColumnDefs());
if (!(props === null || props === void 0 ? void 0 : props.columnData) || !existingColumns)
return;
const columnFromProps = (0, helper_1.sortColumns)(props === null || props === void 0 ? void 0 : props.columnData);
// Check if column IDs match — if not, this is a full column replacement (e.g. skeleton → real columns)
const existingIds = new Set(existingColumns.map((col) => col.id));
const propsIds = new Set(columnFromProps.map((col) => col.id));
const isStructuralChange = columnFromProps.some((col) => !existingIds.has(col.id)) ||
existingColumns.some((col) => !propsIds.has(col.id));
if (isStructuralChange) {
// Full column replacement — rebuild columnDefs with checkbox/header handling
const newColumnDefs = columnFromProps.map((column) => {
var _a, _b;
if ((column === null || column === void 0 ? void 0 : column.enableChildCheckbox) && (column === null || column === void 0 ? void 0 : column.enableHeaderCheckbox)) {
return Object.assign(Object.assign({}, column), { headerComponent: (params) => headerCheckBoxRenderer(params === null || params === void 0 ? void 0 : params.displayName, (column === null || column === void 0 ? void 0 : column.headerComponent) && ""), cellRenderer: (params) => (0, utilComponents_1.dataCellRenderer)(params, column, props), cellRendererParams: {
initialRenderer: column === null || column === void 0 ? void 0 : column.body,
cellCheckBoxRenderer: cellCheckBoxRenderer,
}, headerName: (_a = column === null || column === void 0 ? void 0 : column.headerName) === null || _a === void 0 ? void 0 : _a.toUpperCase() });
}
else {
return Object.assign(Object.assign({}, column), { headerName: (_b = column === null || column === void 0 ? void 0 : column.headerName) === null || _b === void 0 ? void 0 : _b.toUpperCase() });
}
});
setGridData((prev) => (Object.assign(Object.assign({}, prev), { columnData: columnFromProps })));
(_b = gridRef.current.api) === null || _b === void 0 ? void 0 : _b.setGridOption("columnDefs", newColumnDefs);
}
else {
// Same structure — just update hide/seq
const updatedColumnDefs = existingColumns.map((colDef) => {
columnFromProps.find((col) => {
if (col.id === colDef.id) {
colDef.hide = col.hide;
colDef.seq = col === null || col === void 0 ? void 0 : col.seq;
}
});
return colDef;
});
const reOrderedColumns = updatedColumnDefs.sort((a, b) => a.seq - b.seq);
(_c = gridRef.current.api) === null || _c === void 0 ? void 0 : _c.setGridOption("columnDefs", reOrderedColumns);
}
}, [props === null || props === void 0 ? void 0 : props.columnData]);
(0, react_1.useEffect)(() => {
if (props === null || props === void 0 ? void 0 : props.emptyCheckboxStatus) {
setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { checkBoxSelection: initialCheckBoxData }));
}
}, [props === null || props === void 0 ? void 0 : props.emptyCheckboxStatus]);
const gridViewFun = (0, react_1.useCallback)((data) => {
setGridView(data);
}, []);
const contextValue = (0, react_1.useMemo)(() => {
var _a, _b, _c, _d, _e;
return (Object.assign(Object.assign({ rowModelType: props.rowModelType, quickSearch: props === null || props === void 0 ? void 0 : props.quickSearch, featureDetails,
setFeatureDetails,
gridData,
callGrid,
totalRecords,
initialFeature,
defaultFilters,
defaultSearchText,
defaultSort, createView: props === null || props === void 0 ? void 0 : props.createView, enableViewCreate: (_a = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _a === void 0 ? void 0 : _a.enableViewCreate, filterModelText: (_b = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _b === void 0 ? void 0 : _b.filterModelText, sortModelText: (_c = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _c === void 0 ? void 0 : _c.sortModelText, recordDetailModelText: (_d = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _d === void 0 ? void 0 : _d.recordDetailModelText, sidePanelText: (_e = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _e === void 0 ? void 0 : _e.sidePanelText, sortOptions: (props === null || props === void 0 ? void 0 : props.sortOptions) ? props.sortOptions : constants_1.COLUMN_SORT_OPTIONS, filterConditions: props === null || props === void 0 ? void 0 : props.filterConditions, clearFilters: props === null || props === void 0 ? void 0 : props.clearFilters, onFiltersCleared: props === null || props === void 0 ? void 0 : props.onFiltersCleared, setGridData, gridApi: gridRef, updateColumnsForGrid: props === null || props === void 0 ? void 0 : props.updateColumnsForGrid, enableManageColumnsCallback: props.enableManageColumnsCallback, columnToRender: gridData.columnData, selectedGroup: selectedGroup, setSelectedGroup: setSelectedGroup, initialCheckBoxData: initialCheckBoxData, intialColumns,
setIntialColumns,
gridViewFun,
gridViewData,
setGridViewData,
gridView, enableAdvancedFilter: props === null || props === void 0 ? void 0 : props.enableAdvancedFilter }, ((props === null || props === void 0 ? void 0 : props.rowData) && { rowData: props === null || props === void 0 ? void 0 : props.rowData })), { conditionsToDisplay: props === null || props === void 0 ? void 0 : props.conditionsToDisplay, serverSideSelectRow: props.serverSideSelectRow, defaultViewName: props === null || props === void 0 ? void 0 : props.defaultViewName, isDataLoading, dynamicText: props === null || props === void 0 ? void 0 : props.dynamicText, renderSelectField,
renderMultiSelectField }));
}, [
props.rowModelType,
props === null || props === void 0 ? void 0 : props.quickSearch,
featureDetails,
gridData,
callGrid,
totalRecords,
initialFeature,
defaultFilters,
defaultSearchText,
defaultSort,
props === null || props === void 0 ? void 0 : props.createView,
props === null || props === void 0 ? void 0 : props.conditionsToDisplay,
props === null || props === void 0 ? void 0 : props.dynamicText,
props === null || props === void 0 ? void 0 : props.sortOptions,
props === null || props === void 0 ? void 0 : props.filterConditions,
props === null || props === void 0 ? void 0 : props.clearFilters,
props === null || props === void 0 ? void 0 : props.onFiltersCleared,
props === null || props === void 0 ? void 0 : props.updateColumnsForGrid,
props.enableManageColumnsCallback,
selectedGroup,
initialCheckBoxData,
intialColumns,
gridViewFun,
gridViewData,
gridView,
props === null || props === void 0 ? void 0 : props.enableAdvancedFilter,
props === null || props === void 0 ? void 0 : props.rowData,
props.serverSideSelectRow,
props === null || props === void 0 ? void 0 : props.defaultViewName,
isDataLoading,
renderSelectField,
renderMultiSelectField,
]);
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(error_ui_1.default, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "wrapper", style: { height: gridStyle === null || gridStyle === void 0 ? void 0 : gridStyle.height, width: gridStyle === null || gridStyle === void 0 ? void 0 : gridStyle.width }, className: `ag-grid-container ag-grid-parent-div ${(props === null || props === void 0 ? void 0 : props.enableAdvancedFilter) ? "hide-advance-filter" : ""}` }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(context_provider_1.default, Object.assign({ value: contextValue }, { children: ((_h = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _h === void 0 ? void 0 : _h.displayFeaturesHeader) && ((0, jsx_runtime_1.jsx)(advanced_feature_1.default, { props: props })) })), gridView ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: gridViewTemplate(gridViewData) })) : ((0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: gridStyle, gridOptions: gridOptions, onGridReady: (props === null || props === void 0 ? void 0 : props.rowData) ? undefined : onGridReady, gridRef: gridRef }))] }) })) }) }));
}
exports.default = ParentForGrid;