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

Merge pull request #281 from ckeditor/i/6109

Other: Replaced custom `FormHeaderView` with the new reusable `FormHeaderView` UI. See ckeditor/ckeditor5#6109.
Maciej 5 лет назад
Родитель
Сommit
7615891424

+ 2 - 1
packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -28,7 +28,8 @@ import {
 	getLabeledColorInputCreator
 } from '../../ui/utils';
 import FormRowView from '../../ui/formrowview';
-import FormHeaderView from '../../ui/formheaderview';
+
+import FormHeaderView from '@ckeditor/ckeditor5-ui/src/formheader/formheaderview';
 
 import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';

+ 2 - 1
packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js

@@ -28,7 +28,8 @@ import {
 	getLabeledColorInputCreator
 } from '../../ui/utils';
 import FormRowView from '../../ui/formrowview';
-import FormHeaderView from '../../ui/formheaderview';
+
+import FormHeaderView from '@ckeditor/ckeditor5-ui/src/formheader/formheaderview';
 
 import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';

+ 0 - 90
packages/ckeditor5-table/src/ui/formheaderview.js

@@ -1,90 +0,0 @@
-/**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module table/ui/formheaderview
- */
-
-import View from '@ckeditor/ckeditor5-ui/src/view';
-
-import '../../theme/formheader.css';
-
-/**
- * The class representing a header in a complex form.
- *
- * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table),
- * it will become a component in ckeditor5-ui.
- *
- * @private
- * @extends module:ui/view~View
- */
-export default class FormHeaderView extends View {
-	/**
-	 * Creates an instance of the form header view class.
-	 *
-	 * @param {module:utils/locale~Locale} locale The locale instance.
-	 * @param {Object} [options]
-	 * @param {String} [options.class] When passed, the class will be set on the header element.
-	 * @param {String} [options.label] When passed, the label will be used for the header.
-	 */
-	constructor( locale, options = {} ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * A collection of header items.
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.children = this.createCollection();
-
-		/**
-		 * An additional CSS class added to the {@link #element}.
-		 *
-		 * @observable
-		 * @member {String} #class
-		 */
-		this.set( 'class', options.class || null );
-
-		/**
-		 * The label of the header.
-		 *
-		 * @readonly
-		 * @member {String} #label
-		 */
-		this.set( 'label', options.label || '' );
-
-		const label = new View( locale );
-
-		label.setTemplate( {
-			tag: 'span',
-			attributes: {
-				class: [
-					'ck',
-					'ck-form__header__label'
-				]
-			},
-			children: [
-				{ text: bind.to( 'label' ) }
-			]
-		} );
-
-		this.children.add( label );
-
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-form__header',
-					bind.to( 'class' )
-				]
-			},
-			children: this.children
-		} );
-	}
-}

+ 0 - 98
packages/ckeditor5-table/tests/ui/formheaderview.js

@@ -1,98 +0,0 @@
-/**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-import View from '@ckeditor/ckeditor5-ui/src/view';
-import FormHeaderView from '../../src/ui/formheaderview';
-import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
-
-describe( 'FormHeaderView', () => {
-	let view, locale;
-
-	beforeEach( () => {
-		locale = { t: val => val };
-		view = new FormHeaderView( locale );
-		view.render();
-	} );
-
-	afterEach( () => {
-		view.element.remove();
-	} );
-
-	describe( 'constructor()', () => {
-		it( 'should set view#locale', () => {
-			expect( view.locale ).to.equal( locale );
-		} );
-
-		it( 'should create view#children collection', () => {
-			expect( view.children ).to.be.instanceOf( ViewCollection );
-			expect( view.children ).to.have.length( 1 );
-		} );
-
-		it( 'should set view#label', () => {
-			expect( view.label ).to.equal( '' );
-		} );
-
-		it( 'should set view#class', () => {
-			expect( view.class ).to.be.null;
-		} );
-
-		it( 'should set the template', () => {
-			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
-			expect( view.element.classList.contains( 'ck-form__header' ) ).to.be.true;
-		} );
-
-		describe( 'options', () => {
-			it( 'should set view#class when class was passed', () => {
-				const view = new FormHeaderView( locale, {
-					class: 'foo'
-				} );
-
-				expect( view.class ).to.equal( 'foo' );
-
-				view.destroy();
-			} );
-
-			it( 'should use a label text when passed', () => {
-				const view = new FormHeaderView( locale, {
-					label: 'foo'
-				} );
-
-				view.render();
-
-				expect( view.element.firstChild.classList.contains( 'ck' ) ).to.be.true;
-				expect( view.element.firstChild.classList.contains( 'ck-form__header__label' ) ).to.be.true;
-				expect( view.element.firstChild.textContent ).to.equal( 'foo' );
-
-				view.destroy();
-			} );
-		} );
-
-		describe( 'template bindings', () => {
-			it( 'should bind #class to the template', () => {
-				view.class = 'foo';
-				expect( view.element.classList.contains( 'foo' ) ).to.be.true;
-			} );
-
-			it( 'should bind #label to the template', () => {
-				view.label = 'bar';
-				expect( view.element.firstChild.textContent ).to.equal( 'bar' );
-
-				view.label = 'baz';
-				expect( view.element.firstChild.textContent ).to.equal( 'baz' );
-			} );
-
-			it( 'should bind #children to the template', () => {
-				const child = new View();
-				child.setTemplate( { tag: 'div' } );
-
-				view.children.add( child );
-
-				expect( view.element.childNodes[ 1 ] ).to.equal( child.element );
-
-				view.destroy();
-			} );
-		} );
-	} );
-} );