Kaynağa Gözat

Aligned the TableUI to the latest addListToDropdown helper API.

Aleksander Nowodzinski 7 yıl önce
ebeveyn
işleme
7e73b70a9b

+ 19 - 18
packages/ckeditor5-table/src/tableui.js

@@ -74,7 +74,7 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'tableColumn', locale => {
 			const options = [
-				{ commandName: 'setTableColumnHeader', label: t( 'Header column' ), bindIsActive: true },
+				{ commandName: 'setTableColumnHeader', label: t( 'Header column' ), bindIsOn: true },
 				'|',
 				{ commandName: 'insertTableColumnBefore', label: t( 'Insert column before' ) },
 				{ commandName: 'insertTableColumnAfter', label: t( 'Insert column after' ) },
@@ -86,7 +86,7 @@ export default class TableUI extends Plugin {
 
 		editor.ui.componentFactory.add( 'tableRow', locale => {
 			const options = [
-				{ commandName: 'setTableRowHeader', label: t( 'Header row' ), bindIsActive: true },
+				{ commandName: 'setTableRowHeader', label: t( 'Header row' ), bindIsOn: true },
 				'|',
 				{ commandName: 'insertTableRowBelow', label: t( 'Insert row below' ) },
 				{ commandName: 'insertTableRowAbove', label: t( 'Insert row above' ) },
@@ -128,13 +128,13 @@ export default class TableUI extends Plugin {
 		const commands = [];
 
 		// Prepare dropdown list items for list dropdown.
-		const dropdownItems = new Collection();
+		const itemDefinitions = new Collection();
 
 		for ( const option of options ) {
-			addListOption( option, editor, commands, dropdownItems );
+			addListOption( option, editor, commands, itemDefinitions );
 		}
 
-		addListToDropdown( dropdownView, dropdownItems );
+		addListToDropdown( dropdownView, itemDefinitions );
 
 		// Decorate dropdown's button.
 		dropdownView.buttonView.set( {
@@ -162,34 +162,35 @@ export default class TableUI extends Plugin {
 // @param {module:table/tableui~DropdownOption} option Configuration option.
 // @param {module:core/editor/editor~Editor} editor
 // @param {Array.<module:core/command~Command>} commands List of commands to update.
-// @param {module:utils/collection~Collection} dropdownItems Collection of dropdown items to update with given option.
-function addListOption( option, editor, commands, dropdownItems ) {
-	const itemModel = new Model();
-
-	if ( option === '|' ) {
-		itemModel.set( {
-			isSeparator: true
-		} );
-	} else {
+// @param {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>} itemDefinitions
+// Collection of dropdown items to update with given option.
+function addListOption( option, editor, commands, itemDefinitions ) {
+	const isSeparator = option === '|';
+	const def = {
+		type: isSeparator ? 'separator' : 'button',
+	};
+
+	if ( !isSeparator ) {
+		const model = def.model = new Model();
 		const { commandName, label, bindIsOn } = option;
 		const command = editor.commands.get( commandName );
 
 		commands.push( command );
 
-		itemModel.set( {
+		model.set( {
 			commandName,
 			label,
 			withText: true
 		} );
 
-		itemModel.bind( 'isEnabled' ).to( command );
+		model.bind( 'isEnabled' ).to( command );
 
 		if ( bindIsOn ) {
-			itemModel.bind( 'isOn' ).to( command, 'value' );
+			model.bind( 'isOn' ).to( command, 'value' );
 		}
 	}
 
-	dropdownItems.add( itemModel );
+	itemDefinitions.add( def );
 }
 
 /**

+ 43 - 43
packages/ckeditor5-table/tests/tableui.js

@@ -74,7 +74,7 @@ describe( 'TableUI', () => {
 		it( 'should execute insertTable command on button execute event', () => {
 			const executeSpy = testUtils.sinon.spy( editor, 'execute' );
 
-			const tableSizeView = insertTable.panelView.children.get( 0 );
+			const tableSizeView = insertTable.panelView.children.first;
 
 			tableSizeView.rows = 2;
 			tableSizeView.columns = 7;
@@ -86,7 +86,7 @@ describe( 'TableUI', () => {
 		} );
 
 		it( 'should reset rows & columns on dropdown open', () => {
-			const tableSizeView = insertTable.panelView.children.get( 0 );
+			const tableSizeView = insertTable.panelView.children.first;
 
 			expect( tableSizeView.rows ).to.equal( 0 );
 			expect( tableSizeView.columns ).to.equal( 0 );
@@ -122,7 +122,7 @@ describe( 'TableUI', () => {
 		it( 'should have proper items in panel', () => {
 			const listView = dropdown.listView;
 
-			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.label );
+			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.children.first.label );
 
 			expect( labels ).to.deep.equal( [ 'Header row', '|', 'Insert row below', 'Insert row above', 'Delete row' ] );
 		} );
@@ -140,36 +140,36 @@ describe( 'TableUI', () => {
 			insertRowAboveCommand.isEnabled = true;
 			removeRowCommand.isEnabled = true;
 
-			expect( items.get( 0 ).isEnabled ).to.be.true;
-			expect( items.get( 2 ).isEnabled ).to.be.true;
-			expect( items.get( 3 ).isEnabled ).to.be.true;
-			expect( items.get( 4 ).isEnabled ).to.be.true;
+			expect( items.first.children.first.isEnabled ).to.be.true;
+			expect( items.get( 2 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 3 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 4 ).children.first.isEnabled ).to.be.true;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			setRowHeaderCommand.isEnabled = false;
 
-			expect( items.get( 0 ).isEnabled ).to.be.false;
+			expect( items.first.children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			insertRowBelowCommand.isEnabled = false;
 
-			expect( items.get( 2 ).isEnabled ).to.be.false;
+			expect( items.get( 2 ).children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			insertRowAboveCommand.isEnabled = false;
-			expect( items.get( 3 ).isEnabled ).to.be.false;
+			expect( items.get( 3 ).children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			removeRowCommand.isEnabled = false;
 
-			expect( items.get( 4 ).isEnabled ).to.be.false;
+			expect( items.get( 4 ).children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.false;
 		} );
 
 		it( 'should focus view after command execution', () => {
 			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
 
-			dropdown.listView.items.get( 0 ).fire( 'execute' );
+			dropdown.listView.items.first.children.first.fire( 'execute' );
 
 			sinon.assert.calledOnce( focusSpy );
 		} );
@@ -177,7 +177,7 @@ describe( 'TableUI', () => {
 		it( 'executes command when it\'s executed', () => {
 			const spy = sinon.stub( editor, 'execute' );
 
-			dropdown.listView.items.get( 0 ).fire( 'execute' );
+			dropdown.listView.items.first.children.first.fire( 'execute' );
 
 			expect( spy.calledOnce ).to.be.true;
 			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setTableRowHeader' );
@@ -189,10 +189,10 @@ describe( 'TableUI', () => {
 			const setRowHeaderCommand = editor.commands.get( 'setTableRowHeader' );
 
 			setRowHeaderCommand.value = false;
-			expect( items.get( 0 ).isActive ).to.be.false;
+			expect( items.first.children.first.isOn ).to.be.false;
 
 			setRowHeaderCommand.value = true;
-			expect( items.get( 0 ).isActive ).to.be.true;
+			expect( items.first.children.first.isOn ).to.be.true;
 		} );
 	} );
 
@@ -217,7 +217,7 @@ describe( 'TableUI', () => {
 		it( 'should have proper items in panel', () => {
 			const listView = dropdown.listView;
 
-			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.label );
+			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.children.first.label );
 
 			expect( labels ).to.deep.equal( [ 'Header column', '|', 'Insert column before', 'Insert column after', 'Delete column' ] );
 		} );
@@ -235,34 +235,34 @@ describe( 'TableUI', () => {
 			insertColumnAfterCommand.isEnabled = true;
 			removeColumnCommand.isEnabled = true;
 
-			expect( items.get( 0 ).isEnabled ).to.be.true;
-			expect( items.get( 2 ).isEnabled ).to.be.true;
-			expect( items.get( 3 ).isEnabled ).to.be.true;
-			expect( items.get( 4 ).isEnabled ).to.be.true;
+			expect( items.first.children.first.isEnabled ).to.be.true;
+			expect( items.get( 2 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 3 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 4 ).children.first.isEnabled ).to.be.true;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			setColumnHeaderCommand.isEnabled = false;
 
-			expect( items.get( 0 ).isEnabled ).to.be.false;
+			expect( items.first.children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			insertColumnBeforeCommand.isEnabled = false;
 
-			expect( items.get( 2 ).isEnabled ).to.be.false;
+			expect( items.get( 2 ).children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			insertColumnAfterCommand.isEnabled = false;
-			expect( items.get( 3 ).isEnabled ).to.be.false;
+			expect( items.get( 3 ).children.first.isEnabled ).to.be.false;
 
 			removeColumnCommand.isEnabled = false;
-			expect( items.get( 4 ).isEnabled ).to.be.false;
+			expect( items.get( 4 ).children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.false;
 		} );
 
 		it( 'should focus view after command execution', () => {
 			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
 
-			dropdown.listView.items.get( 0 ).fire( 'execute' );
+			dropdown.listView.items.first.children.first.fire( 'execute' );
 
 			sinon.assert.calledOnce( focusSpy );
 		} );
@@ -270,7 +270,7 @@ describe( 'TableUI', () => {
 		it( 'executes command when it\'s executed', () => {
 			const spy = sinon.stub( editor, 'execute' );
 
-			dropdown.listView.items.get( 0 ).fire( 'execute' );
+			dropdown.listView.items.first.children.first.fire( 'execute' );
 
 			expect( spy.calledOnce ).to.be.true;
 			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'setTableColumnHeader' );
@@ -282,10 +282,10 @@ describe( 'TableUI', () => {
 			const setColumnHeaderCommand = editor.commands.get( 'setTableColumnHeader' );
 
 			setColumnHeaderCommand.value = false;
-			expect( items.get( 0 ).isActive ).to.be.false;
+			expect( items.first.children.first.isOn ).to.be.false;
 
 			setColumnHeaderCommand.value = true;
-			expect( items.get( 0 ).isActive ).to.be.true;
+			expect( items.first.children.first.isOn ).to.be.true;
 		} );
 	} );
 
@@ -310,7 +310,7 @@ describe( 'TableUI', () => {
 		it( 'should have proper items in panel', () => {
 			const listView = dropdown.listView;
 
-			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.label );
+			const labels = listView.items.map( item => item instanceof ListSeparatorView ? '|' : item.children.first.label );
 
 			expect( labels ).to.deep.equal( [
 				'Merge cell up',
@@ -340,35 +340,35 @@ describe( 'TableUI', () => {
 			splitCellVerticallyCommand.isEnabled = true;
 			splitCellHorizontallyCommand.isEnabled = true;
 
-			expect( items.get( 0 ).isEnabled ).to.be.true;
-			expect( items.get( 1 ).isEnabled ).to.be.true;
-			expect( items.get( 2 ).isEnabled ).to.be.true;
-			expect( items.get( 3 ).isEnabled ).to.be.true;
-			expect( items.get( 5 ).isEnabled ).to.be.true;
-			expect( items.get( 6 ).isEnabled ).to.be.true;
+			expect( items.first.children.first.isEnabled ).to.be.true;
+			expect( items.get( 1 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 2 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 3 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 5 ).children.first.isEnabled ).to.be.true;
+			expect( items.get( 6 ).children.first.isEnabled ).to.be.true;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			mergeCellUpCommand.isEnabled = false;
 
-			expect( items.get( 0 ).isEnabled ).to.be.false;
+			expect( items.first.children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			mergeCellRightCommand.isEnabled = false;
 
-			expect( items.get( 1 ).isEnabled ).to.be.false;
+			expect( items.get( 1 ).children.first.isEnabled ).to.be.false;
 			expect( dropdown.buttonView.isEnabled ).to.be.true;
 
 			mergeCellDownCommand.isEnabled = false;
-			expect( items.get( 2 ).isEnabled ).to.be.false;
+			expect( items.get( 2 ).children.first.isEnabled ).to.be.false;
 
 			mergeCellLeftCommand.isEnabled = false;
-			expect( items.get( 3 ).isEnabled ).to.be.false;
+			expect( items.get( 3 ).children.first.isEnabled ).to.be.false;
 
 			splitCellVerticallyCommand.isEnabled = false;
-			expect( items.get( 5 ).isEnabled ).to.be.false;
+			expect( items.get( 5 ).children.first.isEnabled ).to.be.false;
 
 			splitCellHorizontallyCommand.isEnabled = false;
-			expect( items.get( 6 ).isEnabled ).to.be.false;
+			expect( items.get( 6 ).children.first.isEnabled ).to.be.false;
 
 			expect( dropdown.buttonView.isEnabled ).to.be.false;
 		} );
@@ -376,7 +376,7 @@ describe( 'TableUI', () => {
 		it( 'should focus view after command execution', () => {
 			const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
 
-			dropdown.listView.items.get( 0 ).fire( 'execute' );
+			dropdown.listView.items.first.children.first.fire( 'execute' );
 
 			sinon.assert.calledOnce( focusSpy );
 		} );
@@ -384,7 +384,7 @@ describe( 'TableUI', () => {
 		it( 'executes command when it\'s executed', () => {
 			const spy = sinon.stub( editor, 'execute' );
 
-			dropdown.listView.items.get( 0 ).fire( 'execute' );
+			dropdown.listView.items.first.children.first.fire( 'execute' );
 
 			expect( spy.calledOnce ).to.be.true;
 			expect( spy.args[ 0 ][ 0 ] ).to.equal( 'mergeTableCellUp' );