8
0
Просмотр исходного кода

Code refactoring: Flattened the `MentionsView` by removing an unnecessary wrapper.

Aleksander Nowodzinski 6 лет назад
Родитель
Сommit
b4775891c3

+ 1 - 1
packages/ckeditor5-mention/src/mentionui.js

@@ -180,7 +180,7 @@ export default class MentionUI extends Plugin {
 
 		this.panelView.content.add( mentionsView );
 
-		mentionsView.listView.items.bindTo( this._items ).using( data => {
+		mentionsView.items.bindTo( this._items ).using( data => {
 			const { item, marker } = data;
 
 			const listItemView = new MentionListItemView( locale );

+ 9 - 21
packages/ckeditor5-mention/src/ui/mentionsview.js

@@ -7,7 +7,6 @@
  * @module mention/ui/mentionsview
  */
 
-import View from '@ckeditor/ckeditor5-ui/src/view';
 import ListView from '@ckeditor/ckeditor5-ui/src/list/listview';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 
@@ -16,32 +15,23 @@ import '../../theme/mentionui.css';
 /**
  * The mention ui view.
  *
- * @extends module:ui/view~View
+ * @extends module:ui/list/listview~ListView
  */
-export default class MentionsView extends View {
+export default class MentionsView extends ListView {
 	/**
 	 * @inheritDoc
 	 */
 	constructor( locale ) {
 		super( locale );
 
-		this.listView = new ListView( locale );
-
-		this.setTemplate( {
-			tag: 'div',
-
+		this.extendTemplate( {
 			attributes: {
 				class: [
-					'ck',
 					'ck-mentions'
 				],
 
 				tabindex: '-1'
-			},
-
-			children: [
-				this.listView
-			]
+			}
 		} );
 	}
 
@@ -59,8 +49,7 @@ export default class MentionsView extends View {
 	 */
 	selectNext() {
 		const item = this.selected;
-
-		const index = this.listView.items.getIndex( item );
+		const index = this.items.getIndex( item );
 
 		this.select( index + 1 );
 	}
@@ -72,8 +61,7 @@ export default class MentionsView extends View {
 	 */
 	selectPrevious() {
 		const item = this.selected;
-
-		const index = this.listView.items.getIndex( item );
+		const index = this.items.getIndex( item );
 
 		this.select( index - 1 );
 	}
@@ -90,13 +78,13 @@ export default class MentionsView extends View {
 	select( index ) {
 		let indexToGet = 0;
 
-		if ( index > 0 && index < this.listView.items.length ) {
+		if ( index > 0 && index < this.items.length ) {
 			indexToGet = index;
 		} else if ( index < 0 ) {
-			indexToGet = this.listView.items.length - 1;
+			indexToGet = this.items.length - 1;
 		}
 
-		const item = this.listView.items.get( indexToGet );
+		const item = this.items.get( indexToGet );
 		item.highlight();
 
 		// Scroll the mentions view to the selected element.

+ 19 - 20
packages/ckeditor5-mention/tests/mentionui.js

@@ -22,7 +22,7 @@ import MentionsView from '../src/ui/mentionsview';
 import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
 describe( 'MentionUI', () => {
-	let editor, model, doc, editingView, mentionUI, editorElement, mentionsView, panelView, listView;
+	let editor, model, doc, editingView, mentionUI, editorElement, mentionsView, panelView;
 
 	const staticConfig = {
 		feeds: [
@@ -297,7 +297,7 @@ describe( 'MentionUI', () => {
 				.then( () => {
 					expect( panelView.isVisible ).to.be.true;
 					expect( editor.model.markers.has( 'mention' ) ).to.be.true;
-					expect( listView.items ).to.have.length( 1 );
+					expect( mentionsView.items ).to.have.length( 1 );
 
 					model.change( writer => {
 						writer.insertText( 'r', doc.selection.getFirstPosition() );
@@ -307,7 +307,7 @@ describe( 'MentionUI', () => {
 				.then( () => {
 					expect( panelView.isVisible ).to.be.true;
 					expect( editor.model.markers.has( 'mention' ) ).to.be.true;
-					expect( listView.items ).to.have.length( 1 );
+					expect( mentionsView.items ).to.have.length( 1 );
 				} );
 		} );
 
@@ -333,7 +333,7 @@ describe( 'MentionUI', () => {
 				return waitForDebounce()
 					.then( () => {
 						expect( panelView.isVisible ).to.be.true;
-						expect( listView.items ).to.have.length( 10 );
+						expect( mentionsView.items ).to.have.length( 10 );
 					} );
 			} );
 
@@ -398,7 +398,7 @@ describe( 'MentionUI', () => {
 					.then( () => {
 						expect( panelView.isVisible ).to.be.true;
 						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
-						expect( listView.items ).to.have.length( 5 );
+						expect( mentionsView.items ).to.have.length( 5 );
 					} );
 			} );
 
@@ -413,7 +413,7 @@ describe( 'MentionUI', () => {
 					.then( () => {
 						expect( panelView.isVisible ).to.be.true;
 						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
-						expect( listView.items ).to.have.length( 5 );
+						expect( mentionsView.items ).to.have.length( 5 );
 					} );
 			} );
 
@@ -556,7 +556,7 @@ describe( 'MentionUI', () => {
 					.then( () => {
 						expect( panelView.isVisible ).to.be.true;
 						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
-						expect( listView.items ).to.have.length( 1 );
+						expect( mentionsView.items ).to.have.length( 1 );
 					} );
 			} );
 
@@ -569,7 +569,7 @@ describe( 'MentionUI', () => {
 
 				return waitForDebounce()
 					.then( () => {
-						const button = listView.items.get( 0 ).children.get( 0 );
+						const button = mentionsView.items.get( 0 ).children.get( 0 );
 
 						expect( button.isOn ).to.be.true;
 					} );
@@ -593,7 +593,7 @@ describe( 'MentionUI', () => {
 					.then( () => {
 						expect( panelView.isVisible ).to.be.false;
 						expect( editor.model.markers.has( 'mention' ) ).to.be.false;
-						expect( listView.items ).to.have.length( 0 );
+						expect( mentionsView.items ).to.have.length( 0 );
 					} );
 			} );
 
@@ -650,7 +650,7 @@ describe( 'MentionUI', () => {
 					.then( () => {
 						expect( panelView.isVisible ).to.be.true;
 						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
-						expect( listView.items ).to.have.length( 4 );
+						expect( mentionsView.items ).to.have.length( 4 );
 					} );
 			} );
 
@@ -669,7 +669,7 @@ describe( 'MentionUI', () => {
 					.then( () => {
 						expect( panelView.isVisible ).to.be.true;
 						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
-						expect( listView.items ).to.have.length( 1 );
+						expect( mentionsView.items ).to.have.length( 1 );
 					} );
 			} );
 
@@ -691,7 +691,7 @@ describe( 'MentionUI', () => {
 					.then( () => {
 						expect( panelView.isVisible ).to.be.false;
 						expect( editor.model.markers.has( 'mention' ) ).to.be.false;
-						expect( listView.items ).to.have.length( 0 );
+						expect( mentionsView.items ).to.have.length( 0 );
 					} );
 			} );
 
@@ -939,7 +939,7 @@ describe( 'MentionUI', () => {
 					.then( () => {
 						expect( panelView.isVisible ).to.be.true;
 						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
-						expect( listView.items ).to.have.length( 5 );
+						expect( mentionsView.items ).to.have.length( 5 );
 					} );
 			} );
 		} );
@@ -976,7 +976,7 @@ describe( 'MentionUI', () => {
 					.then( () => {
 						expect( panelView.isVisible ).to.be.true;
 						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
-						expect( listView.items ).to.have.length( 5 );
+						expect( mentionsView.items ).to.have.length( 5 );
 					} );
 			} );
 
@@ -1101,7 +1101,7 @@ describe( 'MentionUI', () => {
 					.then( () => {
 						expect( panelView.isVisible ).to.be.true;
 						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
-						expect( listView.items ).to.have.length( 5 );
+						expect( mentionsView.items ).to.have.length( 5 );
 					} );
 			} );
 
@@ -1316,7 +1316,7 @@ describe( 'MentionUI', () => {
 
 			return waitForDebounce()
 				.then( () => {
-					listView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
+					mentionsView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
 
 					sinon.assert.calledOnce( spy );
 
@@ -1340,7 +1340,7 @@ describe( 'MentionUI', () => {
 
 			return waitForDebounce()
 				.then( () => {
-					listView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
+					mentionsView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
 
 					expect( panelView.isVisible ).to.be.false;
 					expect( editor.model.markers.has( 'mention' ) ).to.be.false;
@@ -1358,7 +1358,7 @@ describe( 'MentionUI', () => {
 
 			return waitForDebounce()
 				.then( () => {
-					listView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
+					mentionsView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
 
 					sinon.assert.calledOnce( focusSpy );
 				} );
@@ -1379,7 +1379,6 @@ describe( 'MentionUI', () => {
 				mentionUI = editor.plugins.get( MentionUI );
 				panelView = mentionUI.panelView;
 				mentionsView = mentionUI._mentionsView;
-				listView = mentionsView.listView;
 
 				editingView.attachDomRoot( editorElement );
 
@@ -1424,7 +1423,7 @@ describe( 'MentionUI', () => {
 	}
 
 	function expectChildViewsIsOnState( expectedState ) {
-		const childViews = [ ...listView.items ].map( listView => listView.children.get( 0 ) );
+		const childViews = [ ...mentionsView.items ].map( item => item.children.get( 0 ) );
 
 		expect( childViews.map( child => child.isOn ) ).to.deep.equal( expectedState );
 	}