Przeglądaj źródła

Allowed the SwitchButtonView in the addListToDropdown helper.

Aleksander Nowodzinski 7 lat temu
rodzic
commit
7007606e00

+ 15 - 3
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -15,6 +15,7 @@ import ListView from '../list/listview';
 import ListItemView from '../list/listitemview';
 import ListSeparatorView from '../list/listseparatorview';
 import ButtonView from '../button/buttonview';
+import SwitchButtonView from '../button/switchbuttonview';
 
 import clickOutsideHandler from '../bindings/clickoutsidehandler';
 
@@ -175,9 +176,15 @@ export function addListToDropdown( dropdownView, items ) {
 	listView.items.bindTo( items ).using( ( { type, model } ) => {
 		if ( type === 'separator' ) {
 			return new ListSeparatorView( locale );
-		} else if ( type === 'button' ) {
+		} else if ( type === 'button' || type === 'switchbutton' ) {
 			const listItemView = new ListItemView( locale );
-			const buttonView = new ButtonView( locale );
+			let buttonView;
+
+			if ( type === 'button' ) {
+				buttonView = new ButtonView( locale );
+			} else {
+				buttonView = new SwitchButtonView( locale );
+			}
 
 			// Bind all model properties to the button view.
 			buttonView.bind( ...Object.keys( model ) ).to( model );
@@ -224,7 +231,12 @@ function closeDropdownOnBlur( dropdownView ) {
 // @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView
 function closeDropdownOnExecute( dropdownView ) {
 	// Close the dropdown when one of the list items has been executed.
-	dropdownView.on( 'execute', () => {
+	dropdownView.on( 'execute', evt => {
+		// Toggling a switch button view should not close the dropdown.
+		if ( evt.source instanceof SwitchButtonView ) {
+			return;
+		}
+
 		dropdownView.isOpen = false;
 	} );
 }

+ 54 - 0
packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -12,6 +12,7 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Model from '../../src/model';
 
 import ButtonView from '../../src/button/buttonview';
+import SwitchButtonView from '../../src/button/switchbuttonview';
 import DropdownView from '../../src/dropdown/dropdownview';
 import DropdownPanelView from '../../src/dropdown/dropdownpanelview';
 import SplitButtonView from '../../src/dropdown/button/splitbuttonview';
@@ -378,6 +379,59 @@ describe( 'utils', () => {
 				} );
 			} );
 
+			describe( 'with SwitchButtonView', () => {
+				it( 'is populated using item definitions', () => {
+					definitions.add( {
+						type: 'switchbutton',
+						model: new Model( { label: 'a', style: 'b' } )
+					} );
+
+					expect( listItems ).to.have.length( 1 );
+					expect( listItems.first ).to.be.instanceOf( ListItemView );
+					expect( listItems.first.children.first ).to.be.instanceOf( SwitchButtonView );
+
+					expect( listItems ).to.have.length( 1 );
+					expect( listItems.first.children.first.label ).to.equal( 'a' );
+					expect( listItems.first.children.first.style ).to.equal( 'b' );
+				} );
+
+				it( 'binds all button properties', () => {
+					const def = {
+						type: 'switchbutton',
+						model: new Model( { label: 'a', style: 'b', foo: 'bar', baz: 'qux' } )
+					};
+
+					definitions.add( def );
+
+					const button = listItems.first.children.first;
+
+					expect( button.foo ).to.equal( 'bar' );
+					expect( button.baz ).to.equal( 'qux' );
+
+					def.model.baz = 'foo?';
+					expect( button.baz ).to.equal( 'foo?' );
+				} );
+
+				it( 'delegates SwitchButtonView#execute to the ListItemView', done => {
+					definitions.add( {
+						type: 'switchbutton',
+						model: new Model( { label: 'a', style: 'b' } )
+					} );
+
+					const listItem = listItems.first;
+					const button = listItem.children.first;
+
+					dropdownView.on( 'execute', evt => {
+						expect( evt.source ).to.equal( button );
+						expect( evt.path ).to.deep.equal( [ button, listItem, dropdownView ] );
+
+						done();
+					} );
+
+					button.fire( 'execute' );
+				} );
+			} );
+
 			describe( 'with ListSeparatorView', () => {
 				it( 'creates a separator from the definition', () => {
 					definitions.add( { type: 'separator' } );