From 7c4908a2e377533d757a125e78e26d011af98b0a Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 21 Mar 2019 17:20:06 +0800 Subject: [PATCH] [improvement] Search: tsx (#3028) --- .prettierrc | 2 +- packages/search/index.js | 95 -------------- packages/search/index.tsx | 117 ++++++++++++++++++ .../test/__snapshots__/demo.spec.js.snap | 6 +- .../test/__snapshots__/index.spec.js.snap | 16 +++ packages/search/test/index.spec.js | 55 ++++++-- tsconfig.json | 1 + 7 files changed, 186 insertions(+), 106 deletions(-) delete mode 100644 packages/search/index.js create mode 100644 packages/search/index.tsx create mode 100644 packages/search/test/__snapshots__/index.spec.js.snap diff --git a/.prettierrc b/.prettierrc index 276a47a73..3c409a1a8 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "printWidth": 80, + "printWidth": 90, "singleQuote": true, "trailingComma": "none" } diff --git a/packages/search/index.js b/packages/search/index.js deleted file mode 100644 index e332cc98b..000000000 --- a/packages/search/index.js +++ /dev/null @@ -1,95 +0,0 @@ -import { use } from '../utils'; -import Field from '../field'; - -const [sfc, bem, t] = use('search'); - -export default sfc({ - inheritAttrs: false, - - props: { - value: String, - label: String, - showAction: Boolean, - shape: { - type: String, - default: 'square' - }, - background: { - type: String, - default: '#ffffff' - } - }, - - computed: { - listeners() { - return { - ...this.$listeners, - input: this.onInput, - keypress: this.onKeypress - }; - } - }, - - methods: { - onInput(value) { - this.$emit('input', value); - }, - - onKeypress(event) { - // press enter - if (event.keyCode === 13) { - event.preventDefault(); - this.$emit('search', this.value); - } - this.$emit('keypress', event); - }, - - onBack() { - this.$emit('input', ''); - this.$emit('cancel'); - }, - - renderLabel() { - return this.slots('label') - ? this.slots('label') - : this.label && (
{this.label}
); - } - }, - - render(h) { - const { showAction } = this; - - const props = { - attrs: this.$attrs, - on: this.listeners - }; - - const scopedSlots = {}; - if (this.slots('left-icon')) { - scopedSlots['left-icon'] = () => this.slots('left-icon'); - } - - return ( -
-
- {this.renderLabel()} - - -
- {showAction && ( -
- {this.slots('action') ||
{t('cancel')}
} -
- )} -
- ); - } -}); diff --git a/packages/search/index.tsx b/packages/search/index.tsx new file mode 100644 index 000000000..ed4fe885d --- /dev/null +++ b/packages/search/index.tsx @@ -0,0 +1,117 @@ +import { use } from '../utils'; +import { emit } from '../utils/functional'; +import Field from '../field'; + +// Types +import { CreateElement, RenderContext } from 'vue/types'; +import { DefaultSlots, ScopedSlot } from '../utils/use/sfc'; + +const [sfc, bem, t] = use('search'); + +export type SearchProps = { + shape: string; + value?: string; + label?: string; + background: string; + showAction?: boolean; +}; + +export type SearchSlots = DefaultSlots & { + label?: ScopedSlot; + action?: ScopedSlot; + 'left-icon'?: ScopedSlot; +}; + +export type SearchEvents = { + onCancel?(): void; + onInput?(value: string): void; + onSearch?(value: string): void; + onKeypress?(event: KeyboardEvent): void; +}; + +function Search( + h: CreateElement, + props: SearchProps, + slots: SearchSlots, + ctx: RenderContext +) { + const Label = () => { + if (!slots.label && !props.label) { + return null; + } + + return
{slots.label ? slots.label() : props.label}
; + }; + + const Action = () => { + if (!props.showAction) { + return null; + } + + const onCancel = () => { + emit(ctx, 'input', ''); + emit(ctx, 'cancel'); + }; + + return ( +
+ {slots.action ? slots.action() :
{t('cancel')}
} +
+ ); + }; + + const fieldData = { + attrs: ctx.data.attrs, + on: { + ...ctx.listeners, + input(value: string) { + emit(ctx, 'input', value); + }, + keypress(event: KeyboardEvent) { + // press enter + if (event.keyCode === 13) { + event.preventDefault(); + emit(ctx, 'search', props.value); + } + emit(ctx, 'keypress', event); + } + } + }; + + return ( +
+
+ {Label()} + +
+ {Action()} +
+ ); +} + +Search.props = { + value: String, + label: String, + showAction: Boolean, + shape: { + type: String, + default: 'square' + }, + background: { + type: String, + default: '#fff' + } +}; + +export default sfc(Search); diff --git a/packages/search/test/__snapshots__/demo.spec.js.snap b/packages/search/test/__snapshots__/demo.spec.js.snap index 06e399545..2f4a2bd18 100644 --- a/packages/search/test/__snapshots__/demo.spec.js.snap +++ b/packages/search/test/__snapshots__/demo.spec.js.snap @@ -3,7 +3,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -34,7 +34,7 @@ exports[`renders demo correctly 1`] = `
-
+
地址
diff --git a/packages/search/test/__snapshots__/index.spec.js.snap b/packages/search/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..c0e18f310 --- /dev/null +++ b/packages/search/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`render label slot 1`] = ` +
+
+
Custom Label
+
+
+
+
+
+
+
+
+
+`; diff --git a/packages/search/test/index.spec.js b/packages/search/test/index.spec.js index 08c9a577c..c9ffcf998 100644 --- a/packages/search/test/index.spec.js +++ b/packages/search/test/index.spec.js @@ -2,34 +2,75 @@ import Search from '..'; import { mount } from '../../../test/utils'; test('listen input event', () => { - const wrapper = mount(Search); + const onInput = jest.fn(); + const wrapper = mount(Search, { + context: { + on: { + input: onInput + } + } + }); + const input = wrapper.find('input'); input.element.value = '1'; input.trigger('input'); - expect(wrapper.emitted('input')[0][0]).toEqual('1'); + expect(onInput).toBeCalledWith('1'); }); test('cancel search', () => { + const onInput = jest.fn(); + const onCancel = jest.fn(); + const wrapper = mount(Search, { propsData: { value: 'test', showAction: true + }, + context: { + on: { + input: onInput, + cancel: onCancel + } } }); const cancel = wrapper.find('.van-search__action div'); cancel.trigger('click'); - expect(wrapper.emitted('input')[0][0]).toEqual(''); - expect(wrapper.emitted('cancel')).toBeTruthy(); + + expect(onInput).toBeCalledWith(''); + expect(onCancel).toBeCalled(); }); test('emit a search event', () => { - const wrapper = mount(Search); + const onSearch = jest.fn(); + const onKeypress = jest.fn(); + + const wrapper = mount(Search, { + context: { + on: { + search: onSearch, + keypress: onKeypress + } + } + }); + const input = wrapper.find('input'); input.trigger('keypress.enter'); input.trigger('keypress.a'); - expect(wrapper.emitted('search')).toBeTruthy(); - expect(wrapper.emitted('keypress')).toBeTruthy(); + expect(onSearch).toBeCalled(); + expect(onKeypress).toBeCalled(); +}); + +test('render label slot', () => { + const wrapper = mount(Search, { + scopedSlots: { + label() { + return 'Custom Label'; + } + } + }); + + expect(wrapper).toMatchSnapshot(); }); diff --git a/tsconfig.json b/tsconfig.json index 07906de23..0a97f354b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,6 +6,7 @@ "module": "esnext", "strict": true, "allowJs": true, + "noEmit": true, "noImplicitThis": true, "esModuleInterop": true, "moduleResolution": "node"