diff --git a/src/number-keyboard/CollapseIcon.tsx b/src/number-keyboard/CollapseIcon.tsx new file mode 100644 index 000000000..aad833d9c --- /dev/null +++ b/src/number-keyboard/CollapseIcon.tsx @@ -0,0 +1,12 @@ +export default { + render() { + return ( + + + + ); + }, +}; diff --git a/src/number-keyboard/Key.js b/src/number-keyboard/Key.js index 42872ecd4..571ee0485 100644 --- a/src/number-keyboard/Key.js +++ b/src/number-keyboard/Key.js @@ -1,6 +1,7 @@ import { createNamespace } from '../utils'; import { TouchMixin } from '../mixins/touch'; import DeleteIcon from './DeleteIcon'; +import CollapseIcon from './CollapseIcon'; const [createComponent, bem] = createNamespace('key'); @@ -50,6 +51,7 @@ export default createComponent({ }, genContent() { + const isExtra = this.type === 'extra'; const isDelete = this.type === 'delete'; const text = this.slots('default') || this.text; @@ -57,6 +59,10 @@ export default createComponent({ return text || ; } + if (isExtra) { + return text || ; + } + return text; }, }, diff --git a/src/number-keyboard/index.js b/src/number-keyboard/index.js index 55cbc8bc9..759313499 100644 --- a/src/number-keyboard/index.js +++ b/src/number-keyboard/index.js @@ -76,12 +76,11 @@ export default createComponent({ switch (this.theme) { case 'default': keys.push( - { text: this.extraKey, type: 'extra', color: 'gray' }, + { text: this.extraKey, type: 'extra' }, { text: 0 }, { text: this.showDeleteKey ? this.deleteButtonText : '', type: this.showDeleteKey ? 'delete' : '', - color: 'gray', } ); break; @@ -113,6 +112,9 @@ export default createComponent({ onPress(text, type) { if (text === '') { + if (type === 'extra') { + this.onBlur(); + } return; } @@ -182,7 +184,6 @@ export default createComponent({ large text={this.deleteButtonText} type="delete" - color="gray" onPress={this.onPress} > {this.slots('delete')} diff --git a/src/number-keyboard/index.less b/src/number-keyboard/index.less index aff942b18..b3893eb25 100644 --- a/src/number-keyboard/index.less +++ b/src/number-keyboard/index.less @@ -86,18 +86,10 @@ font-size: @number-keyboard-delete-font-size; } - &--gray { - background-color: @number-keyboard-key-background; - } - &--active { background-color: @number-keyboard-key-active-color; } - &--gray&--active { - background-color: @gray-3; - } - &--blue { color: @number-keyboard-button-text-color; background-color: @number-keyboard-button-background-color; @@ -122,4 +114,9 @@ width: 32px; height: 22px; } + + &__collapse-icon { + width: 30px; + height: 24px; + } } diff --git a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap index dfb60ac58..97340ad96 100644 --- a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap +++ b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap @@ -63,13 +63,15 @@ exports[`renders demo correctly 1`] = `
9
-
+
+ +
0
-
+
@@ -115,7 +117,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -157,13 +159,13 @@ exports[`renders demo correctly 1`] = `
9
-
X
+
X
0
-
+
@@ -202,13 +204,13 @@ exports[`renders demo correctly 1`] = `
9
-
.
+
.
0
-
+
@@ -246,13 +248,15 @@ exports[`renders demo correctly 1`] = `
9
-
+
+ +
0
-
+
diff --git a/src/number-keyboard/test/__snapshots__/index.spec.js.snap b/src/number-keyboard/test/__snapshots__/index.spec.js.snap index 85d6a3fed..e453326ef 100644 --- a/src/number-keyboard/test/__snapshots__/index.spec.js.snap +++ b/src/number-keyboard/test/__snapshots__/index.spec.js.snap @@ -32,13 +32,13 @@ exports[`extra-key slot 1`] = `
9
-
Custom Extra Key
+
Custom Extra Key
0
-
+
@@ -79,13 +79,15 @@ exports[`focus on key 1`] = `
9
-
+
+ +
0
-
+
@@ -126,13 +128,15 @@ exports[`focus on key 2`] = `
9
-
+
+ +
0
-
+
@@ -173,13 +177,15 @@ exports[`move and blur key 1`] = `
9
-
+
+ +
0
-
+
@@ -220,13 +226,15 @@ exports[`move and blur key 2`] = `
9
-
+
+ +
0
-
+
@@ -267,13 +275,15 @@ exports[`move and blur key 3`] = `
9
-
+
+ +
0
-
+
@@ -315,13 +325,15 @@ exports[`render title 1`] = `
9
-
+
+ +
0
-
+
@@ -363,13 +375,15 @@ exports[`title-left slot 1`] = `
9
-
+
+ +
0
-
+
diff --git a/src/number-keyboard/test/index.spec.js b/src/number-keyboard/test/index.spec.js index 0d364e697..b9eb9bf77 100644 --- a/src/number-keyboard/test/index.spec.js +++ b/src/number-keyboard/test/index.spec.js @@ -27,10 +27,15 @@ test('click delete key', () => { expect(wrapper.emitted('delete')).toBeTruthy(); }); -test('click empty key', () => { +test('click collapse key', () => { const wrapper = mount(NumberKeyboard); clickKey(wrapper.findAll('.van-key').at(9)); expect(wrapper.emitted('input')).toBeFalsy(); + expect(wrapper.emitted('blur')).toBeFalsy(); + + wrapper.setProps({ show: true }); + clickKey(wrapper.findAll('.van-key').at(9)); + expect(wrapper.emitted('blur')).toBeTruthy(); }); test('click close button', () => { diff --git a/src/password-input/test/__snapshots__/demo.spec.js.snap b/src/password-input/test/__snapshots__/demo.spec.js.snap index a201c44c3..fc9201cb6 100644 --- a/src/password-input/test/__snapshots__/demo.spec.js.snap +++ b/src/password-input/test/__snapshots__/demo.spec.js.snap @@ -47,13 +47,15 @@ exports[`renders demo correctly 1`] = `
9
-
+
+ +
0
-
+
diff --git a/src/style/var.less b/src/style/var.less index 83d776779..003e63200 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -479,11 +479,10 @@ @notify-warning-background-color: @orange; // NumberKeyboard -@number-keyboard-background-color: @background-color; +@number-keyboard-background-color: @gray-2; @number-keyboard-key-height: 56px; -@number-keyboard-key-background: @gray-2; @number-keyboard-key-font-size: 28px; -@number-keyboard-key-active-color: @gray-2; +@number-keyboard-key-active-color: @gray-3; @number-keyboard-delete-font-size: @font-size-lg; @number-keyboard-title-color: @gray-7; @number-keyboard-title-height: 30px;