瀏覽代碼

Other: Add defaultIcon and staticIcon to buttonDropdown configuration.

Maciej Gołaszewski 8 年之前
父節點
當前提交
0d14441fc9

+ 21 - 13
packages/ckeditor5-ui/src/dropdown/button/createbuttondropdown.js

@@ -54,19 +54,27 @@ export default function createButtonDropdown( model, buttonViews, locale ) {
 		( ...areEnabled ) => areEnabled.some( isEnabled => isEnabled )
 	);
 
-	// Make dropdown icon as any active button.
-	model.bind( 'icon' ).to(
-		// Bind to #isOn of each button...
-		...getBindingTargets( buttonViews, 'isOn' ),
-		// ...and chose the title of the first one which #isOn is true.
-		( ...areActive ) => {
-			const index = areActive.findIndex( value => value );
-
-			// If none of the commands is active, display first icon.
-			// TODO: make this configurable (defaultIcon)
-			return buttonViews[ index < 0 ? 0 : index ].icon;
-		}
-	);
+	// If defined `staticIcon` use the `defautlIcon` without binding it to active buttonView
+	if ( model.staticIcon ) {
+		model.bind( 'icon' ).to( model, 'defaultIcon' );
+	} else {
+		// Make dropdown icon as any active button.
+		model.bind( 'icon' ).to(
+			// Bind to #isOn of each button...
+			...getBindingTargets( buttonViews, 'isOn' ),
+			// ...and chose the title of the first one which #isOn is true.
+			( ...areActive ) => {
+				const index = areActive.findIndex( value => value );
+
+				// If none of the commands is active, display either defaultIcon or first button icon.
+				if ( index < 0 && model.defaultIcon ) {
+					return model.defaultIcon;
+				}
+
+				return buttonViews[ index < 0 ? 0 : index ].icon;
+			}
+		);
+	}
 
 	const dropdownView = createDropdown( model, locale );
 

+ 23 - 4
packages/ckeditor5-ui/tests/dropdown/button/createbuttondropdown.js

@@ -25,9 +25,7 @@ describe( 'createButtonDropdown', () => {
 			return button;
 		} );
 
-		model = new Model( {
-			label: 'foo'
-		} );
+		model = new Model( { isVertical: true } );
 
 		view = createButtonDropdown( model, buttonViews, locale );
 		view.render();
@@ -156,7 +154,7 @@ describe( 'createButtonDropdown', () => {
 		} );
 
 		describe( 'icon', () => {
-			it( 'should be set to first button', () => {
+			it( 'should be set to first button\'s icon if no defaultIcon defined', () => {
 				expect( view.buttonView.icon ).to.equal( view.buttonGroupView.items.get( 0 ).icon );
 			} );
 
@@ -170,6 +168,27 @@ describe( 'createButtonDropdown', () => {
 
 				expect( view.buttonView.icon ).to.equal( view.buttonGroupView.items.get( 0 ).icon );
 			} );
+
+			it( 'should be set to defaultIcon if defined and on button is on', () => {
+				const model = new Model( { defaultIcon: 'baz' } );
+
+				view = createButtonDropdown( model, buttonViews, locale );
+				view.render();
+
+				expect( view.buttonView.icon ).to.equal( 'baz' );
+			} );
+
+			it( 'should not bind icons if staticIcon is set', () => {
+				const model = new Model( { defaultIcon: 'baz', staticIcon: true } );
+
+				view = createButtonDropdown( model, buttonViews, locale );
+				view.render();
+
+				expect( view.buttonView.icon ).to.equal( 'baz' );
+				view.buttonGroupView.items.get( 1 ).isOn = true;
+
+				expect( view.buttonView.icon ).to.equal( 'baz' );
+			} );
 		} );
 	} );
 } );