Skip to content

Commit

Permalink
chore: remove any reference to internalColumnEditor (#1486)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding authored Apr 27, 2024
1 parent fae4c4a commit afe65b2
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 62 deletions.
7 changes: 0 additions & 7 deletions packages/common/src/interfaces/column.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,13 +205,6 @@ export interface Column<T = any> {
/** ID of the column, each column definition ID must be unique or else SlickGrid will throw an error. */
id: number | string;

/**
* @deprecated @use `editor` for the editor definition or use `editorClass` for the SlickGrid editor class.
* This is a RESERVED property and is used internally by the library to copy over the Column Editor Options.
* You can read this property if you wish, but DO NOT override it (unless you know what you're doing) since could cause serious problems with your editors.
*/
internalColumnEditor?: ColumnEditor;

/** Label key, for example this could be used as a property key for complex object label display (e.g. labelKey: 'name') */
labelKey?: string;

Expand Down
46 changes: 20 additions & 26 deletions packages/vanilla-bundle/src/components/__tests__/slick-vanilla-grid.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -508,7 +508,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
component.gridOptions = { autoAddCustomEditorFormatter: customEditableInputFormatter };
component.initialization(divContainer, slickEventHandler);

expect(autoAddEditorFormatterToColumnsWithEditor).toHaveBeenCalledWith([{ id: 'name', field: 'name', editor: undefined, internalColumnEditor: {} }], customEditableInputFormatter);
expect(autoAddEditorFormatterToColumnsWithEditor).toHaveBeenCalledWith([{ id: 'name', field: 'name', editor: undefined }], customEditableInputFormatter);
});
});

Expand All @@ -519,7 +519,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
const updateSpy = jest.spyOn(component, 'updateColumnDefinitionsList');
const eventSpy = jest.spyOn(eventPubSubService, 'publish');
const addPubSubSpy = jest.spyOn(component.translaterService as TranslaterService, 'addPubSubMessaging');
const mockColDefs = [{ id: 'name', field: 'name', editor: undefined, internalColumnEditor: {} }];
const mockColDefs = [{ id: 'name', field: 'name', editor: undefined }];

component.columnDefinitions = mockColDefs;
component.gridOptions = { enableTranslate: true };
Expand All @@ -540,7 +540,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
const renderSpy = jest.spyOn(extensionServiceStub, 'renderColumnHeaders');
const eventSpy = jest.spyOn(eventPubSubService, 'publish');
const addPubSubSpy = jest.spyOn(component.translaterService as TranslaterService, 'addPubSubMessaging');
const mockColDefs = [{ id: 'name', field: 'name', editor: undefined, internalColumnEditor: {} }];
const mockColDefs = [{ id: 'name', field: 'name', editor: undefined }];

component.gridOptions = { enableTranslate: false, autoAddCustomEditorFormatter: customEditableInputFormatter };
component.columnDefinitions = mockColDefs;
Expand All @@ -552,7 +552,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
expect(eventSpy).toHaveBeenCalledTimes(4);
expect(updateSpy).toHaveBeenCalledWith(mockColDefs);
expect(renderSpy).toHaveBeenCalledWith(mockColDefs, true);
expect(autoAddEditorFormatterToColumnsWithEditor).toHaveBeenCalledWith([{ id: 'name', field: 'name', editor: undefined, internalColumnEditor: {} }], customEditableInputFormatter);
expect(autoAddEditorFormatterToColumnsWithEditor).toHaveBeenCalledWith([{ id: 'name', field: 'name', editor: undefined }], customEditableInputFormatter);
});
});

Expand Down Expand Up @@ -739,10 +739,8 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
component.columnDefinitions = mockColDefs;

setTimeout(() => {
expect(component.columnDefinitions[0].editor).toBeTruthy();
expect(component.columnDefinitions[0].editor!.collection).toEqual(mockCollection);
expect(component.columnDefinitions[0].internalColumnEditor!.collection).toEqual(mockCollection);
expect(component.columnDefinitions[0].internalColumnEditor!.model).toEqual(Editors.text);
expect(component.columnDefinitions[0].editor!.model).toEqual(Editors.text);
done();
});
});
Expand All @@ -764,10 +762,8 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
component.columnDefinitions = mockColDefs;

setTimeout(() => {
expect(component.columnDefinitions[0].editor).toBeTruthy();
expect(component.columnDefinitions[0].editor!.collection).toEqual(mockCollection);
expect(component.columnDefinitions[0].internalColumnEditor!.collection).toEqual(mockCollection);
expect(component.columnDefinitions[0].internalColumnEditor!.model).toEqual(Editors.text);
expect(component.columnDefinitions[0].editor!.model).toEqual(Editors.text);
expect(disableSpy).toHaveBeenCalledWith(false);
expect(destroySpy).toHaveBeenCalled();
expect(renderSpy).toHaveBeenCalledWith(mockCollection);
Expand All @@ -784,8 +780,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()

setTimeout(() => {
expect(component.columnDefinitions[0].editor!.collection).toEqual(mockCollection);
expect(component.columnDefinitions[0].internalColumnEditor!.collection).toEqual(mockCollection);
expect(component.columnDefinitions[0].internalColumnEditor!.model).toEqual(Editors.text);
expect(component.columnDefinitions[0].editor!.model).toEqual(Editors.text);
done();
});
});
Expand All @@ -804,8 +799,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()

setTimeout(() => {
expect(component.columnDefinitions[0].editor!.collection).toEqual(mockCollection);
expect(component.columnDefinitions[0].internalColumnEditor!.collection).toEqual(mockCollection);
expect(component.columnDefinitions[0].internalColumnEditor!.model).toEqual(Editors.text);
expect(component.columnDefinitions[0].editor!.model).toEqual(Editors.text);
done();
});
});
Expand All @@ -817,13 +811,13 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
const rxjsMock = new RxJsResourceStub();
component.gridOptions = { externalResources: [rxjsMock] } as unknown as GridOption;
component.registerExternalResources([rxjsMock], true);
component.initialization(divContainer, slickEventHandler);
component.columnDefinitions = mockColDefs;
component.initialization(divContainer, slickEventHandler);

setTimeout(() => {
expect(component.columnDefinitions[0].editor!.collection).toEqual(mockCollection);
expect(component.columnDefinitions[0].internalColumnEditor!.collection).toEqual(mockCollection);
expect(component.columnDefinitions[0].internalColumnEditor!.model).toEqual(Editors.text);
expect(component.columnDefinitions[0].editor!.model).toEqual(Editors.text);
expect(component.columnDefinitions[0].editorClass).toEqual(Editors.text);
done();
});
});
Expand Down Expand Up @@ -1473,7 +1467,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
it('should reflect columns with an extra checkbox selection column in the grid when "enableCheckboxSelector" is set', () => {
const mockColsPresets = [{ columnId: 'firstName', width: 100 }];
const mockCol = { id: 'firstName', field: 'firstName' };
const mockCols = [{ id: '_checkbox_selector', field: '_checkbox_selector', editor: undefined, internalColumnEditor: {} }, mockCol];
const mockCols = [{ id: '_checkbox_selector', field: '_checkbox_selector', editor: undefined }, mockCol];
const getAssocColSpy = jest.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
const setColSpy = jest.spyOn(mockGrid, 'setColumns');

Expand All @@ -1488,7 +1482,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
it('should reflect columns with an extra row detail column in the grid when "enableRowDetailView" is set', () => {
const mockColsPresets = [{ columnId: 'firstName', width: 100 }];
const mockCol = { id: 'firstName', field: 'firstName' };
const mockCols = [{ id: '_detail_selector', field: '_detail_selector', editor: undefined, internalColumnEditor: {} }, mockCol];
const mockCols = [{ id: '_detail_selector', field: '_detail_selector', editor: undefined }, mockCol];
const getAssocColSpy = jest.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
const setColSpy = jest.spyOn(mockGrid, 'setColumns');

Expand All @@ -1503,7 +1497,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
it('should reflect columns with an extra row move column in the grid when "enableRowMoveManager" is set', () => {
const mockColsPresets = [{ columnId: 'firstName', width: 100 }];
const mockCol = { id: 'firstName', field: 'firstName' };
const mockCols = [{ id: '_move', field: '_move', editor: undefined, internalColumnEditor: {} }, mockCol];
const mockCols = [{ id: '_move', field: '_move', editor: undefined }, mockCol];
const getAssocColSpy = jest.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
const setColSpy = jest.spyOn(mockGrid, 'setColumns');

Expand All @@ -1519,9 +1513,9 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
const mockColsPresets = [{ columnId: 'firstName', width: 100 }];
const mockCol = { id: 'firstName', field: 'firstName' };
const mockCols = [
{ id: '_move', field: '_move', editor: undefined, internalColumnEditor: {} },
{ id: '_checkbox_selector', field: '_checkbox_selector', editor: undefined, internalColumnEditor: {} },
{ id: '_detail_selector', field: '_detail_selector', editor: undefined, internalColumnEditor: {} },
{ id: '_move', field: '_move', editor: undefined },
{ id: '_checkbox_selector', field: '_checkbox_selector', editor: undefined },
{ id: '_detail_selector', field: '_detail_selector', editor: undefined },
mockCol
];
const getAssocColSpy = jest.spyOn(gridStateServiceStub, 'getAssociatedGridColumns').mockReturnValue([mockCol]);
Expand Down Expand Up @@ -1804,7 +1798,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()

describe('Empty Warning Message', () => {
it('should display an Empty Warning Message when "enableEmptyDataWarningMessage" is enabled and the dataset is empty', (done) => {
const mockColDefs = [{ id: 'name', field: 'name', editor: undefined, internalColumnEditor: {} }];
const mockColDefs = [{ id: 'name', field: 'name', editor: undefined }];
const mockGridOptions = { enableTranslate: true, enableEmptyDataWarningMessage: true, };
jest.spyOn(mockGrid, 'getOptions').mockReturnValue(mockGridOptions);
jest.spyOn(mockGrid, 'getGridPosition').mockReturnValue({ top: 10, left: 20 } as any);
Expand Down Expand Up @@ -1852,7 +1846,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()

describe('Custom Footer', () => {
it('should have a Custom Footer when "showCustomFooter" is enabled and there are no Pagination used', (done) => {
const mockColDefs = [{ id: 'name', field: 'name', editor: undefined, internalColumnEditor: {} }];
const mockColDefs = [{ id: 'name', field: 'name', editor: undefined }];
const mockGridOptions = { enableTranslate: true, showCustomFooter: true, customFooterOptions: { hideRowSelectionCount: false, } } as GridOption;
jest.spyOn(mockGrid, 'getOptions').mockReturnValue(mockGridOptions);

Expand Down Expand Up @@ -1887,7 +1881,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
});

it('should NOT have a Custom Footer when "showCustomFooter" is enabled WITH Pagination in use', (done) => {
const mockColDefs = [{ id: 'name', field: 'name', editor: undefined, internalColumnEditor: {} }];
const mockColDefs = [{ id: 'name', field: 'name', editor: undefined }];

component.gridOptions.enablePagination = true;
component.gridOptions.showCustomFooter = true;
Expand Down
37 changes: 8 additions & 29 deletions packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -517,11 +517,8 @@ export class SlickVanillaGridBundle<TData = any> {
// RxJS Resource is in this lot because it has to be registered before anything else and doesn't require SlickGrid to be initialized
this.preRegisterResources();

// for convenience to the user, we provide the property "editor" as an Slickgrid-Universal editor complex object
// however "editor" is used internally by SlickGrid for it's own Editor Factory
// so in our lib we will swap "editor" and copy it into a new property called "internalColumnEditor"
// then take back "editor.model" and make it the new "editor" so that SlickGrid Editor Factory still works
this._columnDefinitions = this.swapInternalEditorToSlickGridFactoryEditor(this._columnDefinitions || []);
// prepare and load all SlickGrid editors, if an async editor is found then we'll also execute it.
this._columnDefinitions = this.loadSlickGridEditors(this._columnDefinitions || []);

// if the user wants to automatically add a Custom Editor Formatter, we need to call the auto add function again
if (this._gridOptions?.autoAddCustomEditorFormatter) {
Expand Down Expand Up @@ -1050,8 +1047,8 @@ export class SlickVanillaGridBundle<TData = any> {
*/
updateColumnDefinitionsList(newColumnDefinitions: Column<TData>[]) {
if (this.slickGrid && this._gridOptions && Array.isArray(newColumnDefinitions)) {
// map/swap the internal library Editor to the SlickGrid Editor factory
newColumnDefinitions = this.swapInternalEditorToSlickGridFactoryEditor(newColumnDefinitions);
// map the Editor model to editorClass and load editor collectionAsync
newColumnDefinitions = this.loadSlickGridEditors(newColumnDefinitions);

// if the user wants to automatically add a Custom Editor Formatter, we need to call the auto add function again
if (this._gridOptions.autoAddCustomEditorFormatter) {
Expand Down Expand Up @@ -1452,13 +1449,8 @@ export class SlickVanillaGridBundle<TData = any> {
return flatDatasetOutput;
}

/**
* For convenience to the user, we provide the property "editor" as an Slickgrid-Universal editor complex object
* however "editor" is used internally by SlickGrid for it's own Editor Factory
* so in our lib we will swap "editor" and copy it into a new property called "internalColumnEditor"
* then take back "editor.model" and make it the new "editor" so that SlickGrid Editor Factory still works
*/
protected swapInternalEditorToSlickGridFactoryEditor(columnDefinitions: Column<TData>[]): Column<TData>[] {
/** Prepare and load all SlickGrid editors, if an async editor is found then we'll also execute it. */
protected loadSlickGridEditors(columnDefinitions: Column<TData>[]): Column<TData>[] {
const columns = Array.isArray(columnDefinitions) ? columnDefinitions : [];

if (columns.some(col => `${col.id}`.includes('.'))) {
Expand All @@ -1470,32 +1462,19 @@ export class SlickVanillaGridBundle<TData = any> {
if (column.editor?.collectionAsync) {
this.loadEditorCollectionAsync(column);
}

// @deprecated `internalColumnEditor`, if there's already an internalColumnEditor we'll use it, else it would be inside the editor
const columnEditor = column.internalColumnEditor || column.editor;

return { ...column, editorClass: columnEditor?.model, internalColumnEditor: { ...columnEditor } };
return { ...column, editorClass: column.editor?.model };
});
}

/**
* Update the "internalColumnEditor.collection" property.
* When the Editor(s) has a "editor.collection" property, we'll load the async collection.
* Since this is called after the async call resolves, the pointer will not be the same as the "column" argument passed.
* Once we found the new pointer, we will reassign the "editor" and "collection" to the "internalColumnEditor" so it has newest collection
*/
protected updateEditorCollection<U extends TData = any>(column: Column<U>, newCollection: U[]) {
if (this.slickGrid && column.editor) {
column.editor.collection = newCollection;
column.editor.disabled = false;

// find the new column reference pointer & re-assign the new editor to the internalColumnEditor
if (Array.isArray(this.columnDefinitions)) {
const columnRef = this.columnDefinitions.find((col: Column) => col.id === column.id);
if (columnRef) {
columnRef.internalColumnEditor = column.editor;
}
}

// get current Editor, remove it from the DOm then re-enable it and re-render it with the new collection.
const currentEditor = this.slickGrid.getCellEditor() as AutocompleterEditor | SelectEditor;
if (currentEditor?.disable && currentEditor?.renderDomElement) {
Expand Down

0 comments on commit afe65b2

Please sign in to comment.