diff --git a/packages/number-keyboard/Key.js b/packages/number-keyboard/Key.js index cd2f03a50..e9299f050 100644 --- a/packages/number-keyboard/Key.js +++ b/packages/number-keyboard/Key.js @@ -4,7 +4,8 @@ const [sfc, bem] = use('key'); export default sfc({ props: { - type: Array, + type: String, + theme: Array, text: [String, Number] }, @@ -16,9 +17,17 @@ export default sfc({ computed: { className() { - const types = this.type.slice(0); - this.active && types.push('active'); - return bem(types); + const classNames = this.theme.slice(0); + + if (this.active) { + classNames.push('active'); + } + + if (this.type) { + classNames.push(this.type); + } + + return bem(classNames); } }, @@ -32,7 +41,7 @@ export default sfc({ }, onClick() { - this.$emit('press', this.text); + this.$emit('press', this.text, this.type); } }, @@ -49,7 +58,7 @@ export default sfc({ onTouchend={onBlur} onTouchcancel={onBlur} > - {this.text} + {this.slots('default') || this.text} ); } diff --git a/packages/number-keyboard/en-US.md b/packages/number-keyboard/en-US.md index b2532fb55..7c9354cf0 100644 --- a/packages/number-keyboard/en-US.md +++ b/packages/number-keyboard/en-US.md @@ -92,4 +92,5 @@ export default { | Name | Description | |------|------| +| delete | Custom delete button content | | title-left | Custom title left content | diff --git a/packages/number-keyboard/index.js b/packages/number-keyboard/index.js index 2c0b71cba..179c6e087 100644 --- a/packages/number-keyboard/index.js +++ b/packages/number-keyboard/index.js @@ -4,8 +4,8 @@ import { BindEventMixin } from '../mixins/bind-event'; import Key from './Key'; const [sfc, bem, t] = use('number-keyboard'); -const CLOSE_KEY_TYPE = ['blue', 'big']; -const DELETE_KEY_TYPE = ['delete', 'big', 'gray']; +const CLOSE_KEY_THEME = ['blue', 'big']; +const DELETE_KEY_THEME = ['delete', 'big', 'gray']; export default sfc({ mixins: [ @@ -66,13 +66,13 @@ export default sfc({ switch (this.theme) { case 'default': keys.push( - { text: this.extraKey, type: ['gray'] }, + { text: this.extraKey, theme: ['gray'] }, { text: 0 }, - { text: this.deleteText, type: ['gray', 'delete'] } + { text: this.deleteText, theme: ['gray'], type: 'delete' } ); break; case 'custom': - keys.push({ text: 0, type: ['middle'] }, { text: this.extraKey }); + keys.push({ text: 0, theme: ['middle'] }, { text: this.extraKey }); break; } @@ -98,14 +98,14 @@ export default sfc({ this.$emit(this.show ? 'show' : 'hide'); }, - onPress(text) { + onPress(text, type) { if (text === '') { return; } - if (text === this.deleteText) { + if (type === 'delete') { this.$emit('delete'); - } else if (text === this.closeButtonText) { + } else if (type === 'close') { this.onClose(); } else { this.$emit('input', text); @@ -132,6 +132,37 @@ export default sfc({ ); + const Keys = this.keys.map(key => ( + + {key.type === 'delete' && this.slots('delete')} + + )); + + const Sidebar = theme === 'custom' && ( +
+ + {this.slots('delete')} + + +
+ ); + return (
{Title} -
- {this.keys.map(key => ( - - ))} -
- {theme === 'custom' && ( -
- - -
- )} +
{Keys}
+ {Sidebar}
); diff --git a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap index 6b618f786..f5b0b4715 100644 --- a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap +++ b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap @@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = ` diff --git a/packages/number-keyboard/test/__snapshots__/index.spec.js.snap b/packages/number-keyboard/test/__snapshots__/index.spec.js.snap index d67bc5f99..d48cb04a8 100644 --- a/packages/number-keyboard/test/__snapshots__/index.spec.js.snap +++ b/packages/number-keyboard/test/__snapshots__/index.spec.js.snap @@ -1,7 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`focus on key 1`] = ` + +`; + +exports[`focus on key 2`] = ` + +`; + +exports[`render title 1`] = ` + +`; + exports[`title-left slot 1`] = ` -
+ diff --git a/packages/number-keyboard/test/index.spec.js b/packages/number-keyboard/test/index.spec.js index bc2865172..6abb4018b 100644 --- a/packages/number-keyboard/test/index.spec.js +++ b/packages/number-keyboard/test/index.spec.js @@ -1,5 +1,5 @@ import NumberKeyboard from '..'; -import { mount } from '../../../test/utils'; +import { mount, trigger } from '../../../test/utils'; test('click number key', () => { const wrapper = mount(NumberKeyboard, { @@ -9,7 +9,10 @@ test('click number key', () => { } }); - wrapper.findAll('.van-key').at(0).trigger('click'); + wrapper + .findAll('.van-key') + .at(0) + .trigger('click'); expect(wrapper.emitted('input')[0][0]).toEqual(1); wrapper.destroy(); @@ -17,10 +20,22 @@ test('click number key', () => { it('click delete key', () => { const wrapper = mount(NumberKeyboard); - wrapper.findAll('.van-key').at(11).trigger('click'); + wrapper + .findAll('.van-key') + .at(11) + .trigger('click'); expect(wrapper.emitted('delete')).toBeTruthy(); }); +it('click empty key', () => { + const wrapper = mount(NumberKeyboard); + wrapper + .findAll('.van-key') + .at(9) + .trigger('click'); + expect(wrapper.emitted('input')).toBeFalsy(); +}); + test('click close button', () => { const wrapper = mount(NumberKeyboard, { propsData: { @@ -29,31 +44,13 @@ test('click close button', () => { } }); - wrapper.findAll('.van-key').at(12).trigger('click'); + wrapper + .findAll('.van-key') + .at(12) + .trigger('click'); expect(wrapper.emitted('close')).toBeTruthy(); }); -test('keey-alive live cycle', () => { - const wrapper = mount({ - template: ` - - - - `, - props: ['show'], - components: { NumberKeyboard } - }, { - attachToDocument: true, - propsData: { - show: true - } - }); - - expect(wrapper.vm.$el).toBeTruthy(); - wrapper.vm.show = false; - expect(wrapper.vm.el).toBeFalsy(); -}); - test('listen to show/hide event when has transtion', () => { const wrapper = mount(NumberKeyboard); wrapper.vm.show = true; @@ -76,18 +73,56 @@ test('listen to show event when no transtion', () => { expect(wrapper.emitted('hide')).toBeTruthy(); }); -test('title-left slot', () => { - const wrapper = mount({ - template: ` - - - - ` - }, { - components: { - NumberKeyboard +test('render title', () => { + const wrapper = mount(NumberKeyboard, { + propsData: { + title: 'Title', + closeButtonText: 'Close' } }); expect(wrapper).toMatchSnapshot(); }); + +test('title-left slot', () => { + const wrapper = mount(NumberKeyboard, { + scopedSlots: { + 'title-left': () => 'Custom Title Left' + } + }); + + expect(wrapper).toMatchSnapshot(); +}); + +test('hideOnClickOutside', () => { + const wrapper = mount(NumberKeyboard, { + propsData: { + show: true + } + }); + + trigger(document.body, 'touchstart'); + expect(wrapper.emitted('blur')).toBeTruthy(); +}); + +test('disable hideOnClickOutside', () => { + const wrapper = mount(NumberKeyboard, { + propsData: { + show: true, + hideOnClickOutside: false + } + }); + + trigger(document.body, 'touchstart'); + expect(wrapper.emitted('blur')).toBeFalsy(); +}); + +test('focus on key', () => { + const wrapper = mount(NumberKeyboard); + + const key = wrapper.find('.van-key'); + trigger(key, 'touchstart'); + expect(wrapper).toMatchSnapshot(); + trigger(key, 'touchend'); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/packages/number-keyboard/zh-CN.md b/packages/number-keyboard/zh-CN.md index 0ebebcdfb..48b2f74ca 100644 --- a/packages/number-keyboard/zh-CN.md +++ b/packages/number-keyboard/zh-CN.md @@ -93,4 +93,5 @@ export default { | 名称 | 说明 | |------|------| +| delete | 自定义删除按钮内容 | | title-left | 自定义标题栏左侧内容 |