瀏覽代碼

Implemented error support in the LabeledInputView.

Aleksander Nowodzinski 7 年之前
父節點
當前提交
3671f88b56

+ 10 - 1
packages/ckeditor5-ui/src/inputtext/inputtextview.js

@@ -55,6 +55,14 @@ export default class InputTextView extends View {
 		 */
 		this.set( 'isReadOnly', false );
 
+		/**
+		 * `true` when the field has some error.
+		 *
+		 * @observable
+		 * @member {Boolean} #error
+		 */
+		this.set( 'hasError', false );
+
 		const bind = this.bindTemplate;
 
 		this.setTemplate( {
@@ -64,7 +72,8 @@ export default class InputTextView extends View {
 				class: [
 					'ck',
 					'ck-input',
-					'ck-input-text'
+					'ck-input-text',
+					bind.if( 'hasError', 'ck-error' )
 				],
 				id: bind.to( 'id' ),
 				placeholder: bind.to( 'placeholder' ),

+ 26 - 2
packages/ckeditor5-ui/src/labeledinput/labeledinputview.js

@@ -9,8 +9,8 @@
 
 import View from '../view';
 import uid from '@ckeditor/ckeditor5-utils/src/uid';
-
 import LabelView from '../label/labelview';
+import '../../theme/components/labeledinput/labeledinput.css';
 
 /**
  * The labeled input view class.
@@ -30,6 +30,14 @@ export default class LabeledInputView extends View {
 		const id = `ck-input-${ uid() }`;
 
 		/**
+		 * The error associated with the field.
+		 *
+		 * @observable
+		 * @member {String} #error
+		 */
+		this.set( 'errorText', null );
+
+		/**
 		 * The text of the label.
 		 *
 		 * @observable
@@ -80,7 +88,22 @@ export default class LabeledInputView extends View {
 			},
 			children: [
 				this.labelView,
-				this.inputView
+				this.inputView,
+				{
+					tag: 'div',
+					attributes: {
+						class: [
+							'ck',
+							'ck-labeled-input__error',
+							bind.if( 'errorText', 'ck-hidden', value => !value )
+						]
+					},
+					children: [
+						{
+							text: bind.to( 'errorText' )
+						}
+					]
+				}
 			]
 		} );
 	}
@@ -115,6 +138,7 @@ export default class LabeledInputView extends View {
 		inputView.id = id;
 		inputView.bind( 'value' ).to( this );
 		inputView.bind( 'isReadOnly' ).to( this );
+		inputView.bind( 'hasError' ).to( this, 'errorText', value => !!value );
 
 		return inputView;
 	}

+ 10 - 0
packages/ckeditor5-ui/theme/components/labeledinput/labeledinput.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */