UNPKG

sccoreui

Version:

ui-sccore

450 lines (449 loc) 39.6 kB
"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"); function ParentForGrid(props) { var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q; const { gridProps = {}, gridViewTemplate, selectColumns = () => { } } = props; 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); let maxLength = 0; // 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 [selectedGroup, setSelectedGroup] = (0, react_1.useState)([]); const [emptyResponse] = (0, react_1.useState)({ totalRecords: 0, rowData: [], }); const [initialCheckBoxData] = (0, react_1.useState)({ allBoxChecked: false, isIndeterminate: false, includedRecords: [], excludedRecords: [], headerCheckBoxStatus: constants_1.GRID_CHECKBOX_STATUS.NEUTRAL, }); const initialFeature = { searchedText: "", filterQueries: [], sort: { isSortable: false, columnToSort: {}, orderToSort: {}, }, checkBoxSelection: initialCheckBoxData, isRemoveClicked: false, }; const [featureDetails, setFeatureDetails] = (0, react_1.useState)({ searchedText: "", filterQueries: (props === null || props === void 0 ? void 0 : props.defaultFilters) ? (0, helper_1.applyDefaultFilters)(props === null || props === void 0 ? void 0 : props.defaultFilters) : [], sort: { isSortable: false, columnToSort: {}, orderToSort: {}, }, checkBoxSelection: initialCheckBoxData, isRemoveClicked: false, }); // const [columnToRender,setColumnToRender] = useState<ColumnDef[]>([]) const gridRef = (0, react_1.useRef)(null); const groupingColumns = (_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; // Default column specification const defaultColDef = (0, react_1.useMemo)(() => { return { flex: 1, minWidth: 40, editable: false, filter: false, sortable: false, }; }, []); // 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: [], headerCheckBoxStatus: currentStatus ? constants_1.GRID_CHECKBOX_STATUS.CHECKED : constants_1.GRID_CHECKBOX_STATUS.UNCHECKED }); if (currentStatus) { // stroring all first and secodn group ids setSelectedGroup([...firstGroupIds, ...secondGroupIds]); } else { setSelectedGroup([]); } selectColumns(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 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)(grid_checkbox_1.default, { 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)(grid_checkbox_1.default, { 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, setFeatureDetails); return ((0, jsx_runtime_1.jsx)(grid_checkbox_1.default, { 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), 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* () { var _r, _s; if (!(props === null || props === void 0 ? void 0 : props.getRowData)) { return emptyResponse; // If callback function to get row data is not provided } if (props.rowModelType !== constants_1.ROWMODELTYPE.SERVER_SIDE) { (_s = (_r = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _r === void 0 ? void 0 : _r.api) === null || _s === void 0 ? void 0 : _s.showLoadingOverlay(); } const response = yield (props === null || props === void 0 ? void 0 : props.getRowData(startRow, endRow, currentFeatures, params)); setGridData(Object.assign(Object.assign({}, gridData), { 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; maxLength = actualEndRow; 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; }); // Gets call onLoad,scroll and whenever any featureDetails changed const onGridReady = (params, updatedFeatures) => tslib_1.__awaiter(this, void 0, void 0, function* () { var _t, _u, _v; 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; } params && ((_t = params === null || params === void 0 ? void 0 : params.api) === null || _t === void 0 ? void 0 : _t.setGridOption("rowData", [])); const result = gridViewData.rowData.length > 0 ? { rowData: gridViewData.rowData, totalRecords: gridViewData.rowData.length } : yield getData(0, 0, currentFeatures); if (result.rowData) { gridViewData.rowData.length > 0 && setGridViewData({ rowData: [], searchText: "" }); setGridData(Object.assign(Object.assign({}, gridData), { rowData: result.rowData })); gridRef.current && gridRef.current.api.hideOverlay(); params && ((_u = params === null || params === void 0 ? void 0 : params.api) === null || _u === void 0 ? void 0 : _u.applyTransaction({ add: result.rowData })); } else { params && ((_v = params === null || params === void 0 ? void 0 : params.api) === null || _v === void 0 ? void 0 : _v.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 _w, _x, _y; const startRow = params.request.startRow; const endRow = params.request.endRow; // Scroll should not exit MAX_RECORDS_TO_LOAD if (endRow > maxLength && maxLength > 0) { (_w = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current.api) === null || _w === void 0 ? void 0 : _w.hideOverlay(); // supply rows for requested block to grid params.success({ rowData: gridData.rowData, rowCount: maxLength, }); return; } // 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 (((_x = response.rowData) === null || _x === void 0 ? void 0 : _x.length) > 0) { setGridData(Object.assign(Object.assign({}, gridData), { rowData: response.rowData })); gridRef.current.api.hideOverlay(); // supply rows for requested block to grid params && params.success({ rowData: response.rowData }); return; } else { // params.fail(); const gridRows = startRow >= constants_1.BLOCK_SIZE ? gridData.rowData : []; if (!((_y = params === null || params === void 0 ? void 0 : params.parentNode) === null || _y === void 0 ? void 0 : _y.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 = (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; // 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, // props === null || props === void 0 ? void 0 : props.enableCheckboxForGroupHeader, props.conditionsToDisplay.displayGroupCount, parseInt(props === null || props === void 0 ? void 0 : props.rowGroupColumnWidth), // for grouped column width cellRendererConditionally, GroupHeaderRenderer // Custom component for group header ); } 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, // props === null || props === void 0 ? void 0 : props.enableCheckboxForGroupHeader, props.conditionsToDisplay.displayGroupCount, parseInt(props === null || props === void 0 ? void 0 : props.rowGroupColumnWidth), // for grouped column width GroupHeaderRenderer // Custom component for group header ); } }; (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(Object.assign(Object.assign({}, gridData), { 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 = Object.assign({ width: (_c = props === null || props === void 0 ? void 0 : props.style) === null || _c === void 0 ? void 0 : _c.width }, (totalRecords > constants_1.AUTO_HEIGHT_ROWS || !((_d = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _d === void 0 ? void 0 : _d.isGridAutoHeight) ? { height: (_e = props === null || props === void 0 ? void 0 : props.style) === null || _e === void 0 ? void 0 : _e.height } : null)); // Dont show hide overlay component when any row pinned (0, react_1.useEffect)(() => { var _a; if (!(props === null || props === void 0 ? void 0 : props.pinnedTopRowData)) return; const api = (_a = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _a === void 0 ? void 0 : _a.api; // Check for pinned rows and regular row data const hasPinnedRows = (api === null || api === void 0 ? void 0 : api.getPinnedTopRowCount()) > 0 || (api === null || api === void 0 ? void 0 : api.getPinnedBottomRowCount()) > 0; const hasRowData = (api === null || api === void 0 ? void 0 : api.getDisplayedRowCount()) > 0; if (hasPinnedRows || hasRowData) { api === null || api === void 0 ? void 0 : api.hideOverlay(); // Hide the noRowsOverlayComponent if pinned rows or row data exists } else { api === null || api === void 0 ? void 0 : api.showNoRowsOverlay(); // Show the noRowsOverlayComponent only if no rows or pinned rows are present } }, [gridData.rowData, props === null || props === void 0 ? void 0 : 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: (_f = gridData === null || gridData === void 0 ? void 0 : gridData.columnData) === null || _f === void 0 ? void 0 : _f.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: constants_1.BLOCK_SIZE })), { maxBlocksInCache: constants_1.MAX_BLOCKS, 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: (_g = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _g === void 0 ? void 0 : _g.enableFillHandle, enableFillHandle: (_h = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _h === void 0 ? void 0 : _h.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 && ((_j = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _j === void 0 ? void 0 : _j.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) => { onGridReady(gridReadyEvent, featureDetails); }; // Call Grid if something is searched (0, react_1.useEffect)(() => { if (api && gridReadyEvent) { !props.rowData && callGrid(featureDetails); } }, [featureDetails.searchedText]); (0, react_1.useEffect)(() => { var _a; if (api && gridReadyEvent && (props === null || props === void 0 ? void 0 : props.shouldRefetch)) { let currentFeature = featureDetails; if ((_a = props === null || props === void 0 ? void 0 : props.defaultFilters) === null || _a === void 0 ? void 0 : _a.length) { currentFeature.filterQueries = (0, helper_1.applyDefaultFilters)(props === null || props === void 0 ? void 0 : props.defaultFilters); setDefaultFilters(props.defaultFilters); setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { filterQueries: (0, helper_1.applyDefaultFilters)(props === null || props === void 0 ? void 0 : props.defaultFilters) })); } 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; 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); 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); (_b = gridRef.current.api) === null || _b === void 0 ? void 0 : _b.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 = (data) => { setGridView(data); }; 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: Object.assign(Object.assign({ rowModelType: props.rowModelType, quickSearch: props === null || props === void 0 ? void 0 : props.quickSearch, featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, createView: props === null || props === void 0 ? void 0 : props.createView, enableViewCreate: (_k = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _k === void 0 ? void 0 : _k.enableViewCreate, filterModelText: (_l = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _l === void 0 ? void 0 : _l.filterModelText, sortModelText: (_m = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _m === void 0 ? void 0 : _m.sortModelText, recordDetailModelText: (_o = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _o === void 0 ? void 0 : _o.recordDetailModelText, sidePanelText: (_p = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _p === void 0 ? void 0 : _p.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, 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 }) }, { children: ((_q = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _q === void 0 ? void 0 : _q.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;