add a clear button to text fields

green3g · Mar 20, 2018 · 43c6e5f · 43c6e5f
1 parent 90ba024
commit 43c6e5f
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 72 deletions.
diff --git a/sp-form/fields/sp-text-field/ViewModel.js b/sp-form/fields/sp-text-field/ViewModel.js
@@ -1,34 +1,45 @@
-import Field from 'spectre-canjs/util/field/Field';
-
-/**
- * A `<sp-text-field />` component's ViewModel
- * @class ViewModel
- * @extends Field
- * @memberof sp-text-field
- */
-export default Field.extend('TextField', {
-    /** @lends sp-text-field.ViewModel.prototype */
-    /**
-     * The type of input to create.
-     * The default is 'text'
-     * @example
-     * textType="number"
-     * @memberof sp-text-field.ViewModel.prototype
-     * @type {String}
-     */
-    textType: {default: 'text', type: 'string'},
-    /**
-     * Checks for the enter keypress and triggers a change event on the input
-     * The enter key press triggers a submit event on the form, but before the
-     * submit event, we need to trigger a change on the field value
-     * @param  {domElement} element The form input element
-     * @param  {KeyDownEvent} event The form submit event
-     * @return {Boolean}
-     */
-    beforeSubmit (element, event) {
-        if (event.keyCode === 13) {
-            element.dispatchEvent(new Event('change'));
-        }
-        return true;
-    }
+import Field from 'spectre-canjs/util/field/Field';
+
+/**
+ * A `<sp-text-field />` component's ViewModel
+ * @class ViewModel
+ * @extends Field
+ * @memberof sp-text-field
+ */
+export default Field.extend('TextField', {
+    /** @lends sp-text-field.ViewModel.prototype */
+    /**
+     * The type of input to create.
+     * The default is 'text'
+     * @example
+     * textType="number"
+     * @memberof sp-text-field.ViewModel.prototype
+     * @type {String}
+     */
+    textType: {default: 'text', type: 'string'},
+    /**
+     * Show or hide the clear input addon button 
+     * @example
+     * showClear="true"
+     * @memberof sp-text-field.ViewModel.prototype
+     * @type {Boolean}
+     */
+    showClear: {default: false, type: 'boolean'},
+    /**
+     * Checks for the enter keypress and triggers a change event on the input
+     * The enter key press triggers a submit event on the form, but before the
+     * submit event, we need to trigger a change on the field value
+     * @param  {domElement} element The form input element
+     * @param  {KeyDownEvent} event The form submit event
+     * @return {Boolean}
+     */
+    beforeSubmit (element, event) {
+        if (event.keyCode === 13) {
+            element.dispatchEvent(new Event('change'));
+        }
+        return true;
+    },
+    clearValue () {
+        this.value = '';
+    }
 });
diff --git a/sp-form/fields/sp-text-field/sp-text-field.stache b/sp-form/fields/sp-text-field/sp-text-field.stache
@@ -1,25 +1,37 @@
-
-<div class="form-group {{#if error}}has-error{{/if}}">
-    {{#unless(inline)}}
-        <label class="form-label" for="{{name}}">{{alias}}</label>
-    {{/unless}}
-    {{#if(textarea)}}
-        <textarea on:keydown="beforeSubmit(scope.element,scope.event)" 
-            {{#if placeholder}}placeholder="{{placeholder}}"{{/if}} 
-            class="form-control form-input" 
-            name:from="name" 
-            value:bind="value"
-            {{#if(onInsert)}}on:inserted="onInsert(scope.element)"{{/if}}
-            {{attributes}}></textarea> 
-    {{else}}
-        <input on:keydown="beforeSubmit(scope.element,scope.event)" 
-            {{#if placeholder}}placeholder="{{placeholder}}"{{/if}} 
-            type="{{textType}}" 
-            class="form-control form-input" 
-            name:from="name" 
-            value:bind="value"
-            {{#if(onInsert)}}on:inserted="onInsert(scope.element)"{{/if}}
-            {{attributes}} />
-    {{/if}}
-    {{#if(error)}}<span class="form-input-hint">{{error}}</span>{{/if}}
-</div>
+{{<input}}
+<input on:keydown="beforeSubmit(scope.element,scope.event)" 
+    {{#if placeholder}}placeholder="{{placeholder}}"{{/if}} 
+    type="{{textType}}" 
+    class="form-control form-input" 
+    name:from="name" 
+    value:bind="value"
+    {{#if(onInsert)}}on:inserted="onInsert(scope.element)"{{/if}}
+    {{attributes}} />
+{{/input}}
+
+<div class="form-group {{#if error}}has-error{{/if}}">
+    {{#unless(inline)}}
+        <label class="form-label" for="{{name}}">{{alias}}</label>
+    {{/unless}}
+    {{#if(textarea)}}
+        <textarea on:keydown="beforeSubmit(scope.element,scope.event)" 
+            {{#if placeholder}}placeholder="{{placeholder}}"{{/if}} 
+            class="form-control form-input" 
+            name:from="name" 
+            value:bind="value"
+            {{#if(onInsert)}}on:inserted="onInsert(scope.element)"{{/if}}
+            {{attributes}}></textarea> 
+    {{else}}
+        {{#if(showClear)}}
+            <div class="input-group">
+                {{>input}}
+                <button class="btn input-group-btn btn-primary tooltip" {{#unless(value)}}disabled{{/unless}}
+                    on:click="clearValue()" data-tooltip="Clear Search"><i class="fa fa-times-circle-o"></i>
+                </button>
+            </div>
+        {{else}}
+            {{>input}}
+        {{/if}}
+    {{/if}}
+    {{#if(error)}}<span class="form-input-hint">{{error}}</span>{{/if}}
+</div>
diff --git a/sp-form/fields/sp-text-field/sp-text-field.test.js b/sp-form/fields/sp-text-field/sp-text-field.test.js
@@ -1,14 +1,20 @@
-import ViewModel from './ViewModel';
-
-let vm;
-
-beforeEach(() => {
-    vm = new ViewModel();
-});
-afterEach(() => {
-    vm = null;
-});
-
-test('sp-text-field', () => {
-    expect(vm).toBeTruthy();
-});
+import ViewModel from './ViewModel';
+
+let vm;
+
+beforeEach(() => {
+    vm = new ViewModel();
+});
+afterEach(() => {
+    vm = null;
+});
+
+test('sp-text-field', () => {
+    expect(vm).toBeTruthy();
+});
+
+test('clearValue()', () => {
+    vm.value = 'hello';
+    vm.clearValue();
+    expect(vm.value).toBeFalsy();
+});