ソースを参照

Added: ListItemView should react to `isEnabled` state changes.

Maciej Gołaszewski 7 年 前
コミット
539bdf6f9f

+ 2 - 1
packages/ckeditor5-ui/src/list/listitemview.js

@@ -49,7 +49,8 @@ export default class ListItemView extends View {
 					'ck',
 					'ck-list__item',
 					bind.to( 'class' ),
-					bind.if( 'isActive', 'ck-list__item_active' )
+					bind.if( 'isActive', 'ck-list__item_active' ),
+					bind.to( 'isEnabled', value => value ? 'ck-enabled' : 'ck-disabled' )
 				],
 				style: bind.to( 'style' ),
 				tabindex: bind.to( 'tabindex' )

+ 16 - 2
packages/ckeditor5-ui/tests/list/listitemview.js

@@ -75,7 +75,7 @@ describe( 'ListItemView', () => {
 	describe( 'DOM bindings', () => {
 		describe( '"class" attribute', () => {
 			it( 'reacts on view#class', () => {
-				expect( view.element.classList ).to.have.length( 2 );
+				expect( view.element.classList ).to.have.length( 3 );
 
 				view.set( 'class', 'foo' );
 
@@ -83,12 +83,26 @@ describe( 'ListItemView', () => {
 			} );
 
 			it( 'reacts on view#isActive', () => {
-				expect( view.element.classList ).to.have.length( 2 );
+				expect( view.element.classList ).to.have.length( 3 );
 
 				view.set( 'isActive', true );
 
 				expect( view.element.classList.contains( 'ck-list__item_active' ) ).to.be.true;
 			} );
+
+			it( 'reacts on view#isEnabled', () => {
+				expect( view.element.classList ).to.have.length( 3 );
+
+				view.set( 'isEnabled', true );
+
+				expect( view.element.classList.contains( 'ck-enabled' ) ).to.be.true;
+				expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.false;
+
+				view.set( 'isEnabled', false );
+
+				expect( view.element.classList.contains( 'ck-enabled' ) ).to.be.false;
+				expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.true;
+			} );
 		} );
 
 		describe( '"style" attribute', () => {