From 95270c3f98dc073eb6794ec20a5ec56578d63430 Mon Sep 17 00:00:00 2001 From: caoyugang_1 <34439652+Talljack@users.noreply.github.com> Date: Wed, 14 Jul 2021 23:46:47 +0800 Subject: [PATCH] feat(image, avatar): add onError and objectFit props (#485) * feat: add onError and object-fit * fix: change objectFit to fill * fix: onError add event and objectFit set default value * fix: change some error Co-authored-by: yugang.cao --- CHANGELOG.en-US.md | 4 ++++ CHANGELOG.zh-CN.md | 4 ++++ src/avatar/src/Avatar.tsx | 15 ++++++++++-- src/avatar/tests/Avatar.spec.tsx | 24 +++++++++++++++++++ .../tests/__snapshots__/Avatar.spec.tsx.snap | 2 +- src/image/src/Image.tsx | 11 ++++++++- src/image/src/styles/index.cssr.ts | 4 +++- src/image/tests/Image.spec.tsx | 24 +++++++++++++++++++ 8 files changed, 83 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index d68d82248..1e1173705 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -9,6 +9,10 @@ - `n-slider` add `format-tooltip` prop. - `n-upload` add `event` in `on-finish` callback params. - `n-rate` add `readonly` prop. +- `n-avatar` add `on-error` prop, closes [#394](https://github.com/TuSimple/naive-ui/issues/394). +- `n-image` add `on-error` prop, closes [#394](https://github.com/TuSimple/naive-ui/issues/394). +- `n-image` add `object-fit` prop, closes [#394](https://github.com/TuSimple/naive-ui/issues/394). +- `n-avatar` add `object-fit` prop, closes [#394](https://github.com/TuSimple/naive-ui/issues/394). ### Fixes diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index ae0feac4f..067ea84f5 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -10,6 +10,10 @@ - `n-upload` 在 `on-finish` 回调参数中新增 `event` - `n-slider` 新增 `format-tooltip` 属性 - `n-rate` 新增 `readonly` 属性 +- `n-avatar` 新增 `on-error` 属性，关闭[#394](https://github.com/TuSimple/naive-ui/issues/394) +- `n-image` 新增 `on-error` 属性，关闭[#394](https://github.com/TuSimple/naive-ui/issues/394) +- `n-image` 新增 `object-fit` 属性，关闭[#394](https://github.com/TuSimple/naive-ui/issues/394) +- `n-avatar` 新增 `object-fit` 属性，关闭[#394](https://github.com/TuSimple/naive-ui/issues/394) ### Fixes diff --git a/src/avatar/src/Avatar.tsx b/src/avatar/src/Avatar.tsx index 5de38333c..4956b1331 100644 --- a/src/avatar/src/Avatar.tsx +++ b/src/avatar/src/Avatar.tsx @@ -26,11 +26,18 @@ const avatarProps = { type: Boolean, default: false }, + color: String, + objectFit: { + type: String as PropType< + 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' + >, + default: 'fill' + }, round: { type: Boolean, default: false }, - color: String + onError: Function as PropType<(e: Event) => void> } as const export type AvatarProps = ExtractPublicPropTypes @@ -112,7 +119,11 @@ export default defineComponent({ style={this.cssVars as any} > {!$slots.default && src ? ( - + ) : ( { ) expect(wrapper.html()).toMatchSnapshot() }) + + it('image avatar error handle when load failed', async () => { + const onError = jest.fn() + const wrapper = mount(NAvatar, { + props: { + src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg', + onError + } + }) + await wrapper.find('img').trigger('error') + expect(onError).toHaveBeenCalled() + }) + + it('should work with `objectFit` prop', () => { + const wrapper = mount(NAvatar, { + props: { + src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg', + objectFit: 'contain' + } + }) + expect(wrapper.find('img').attributes('style')).toContain( + 'object-fit: contain;' + ) + }) }) diff --git a/src/avatar/tests/__snapshots__/Avatar.spec.tsx.snap b/src/avatar/tests/__snapshots__/Avatar.spec.tsx.snap index d0b7fd396..430ed0c40 100644 --- a/src/avatar/tests/__snapshots__/Avatar.spec.tsx.snap +++ b/src/avatar/tests/__snapshots__/Avatar.spec.tsx.snap @@ -6,7 +6,7 @@ exports[`n-avatar custom style 1`] = `""`; -exports[`n-avatar image avatar 1`] = `""`; +exports[`n-avatar image avatar 1`] = `""`; exports[`n-avatar round avatar 1`] = `""`; diff --git a/src/image/src/Image.tsx b/src/image/src/Image.tsx index 9dae88c27..c50a020a6 100644 --- a/src/image/src/Image.tsx +++ b/src/image/src/Image.tsx @@ -29,9 +29,16 @@ const imageProps = { alt: String, height: [String, Number] as PropType, imgProps: Object as PropType, + objectFit: { + type: String as PropType< + 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' + >, + default: 'fill' + }, width: [String, Number] as PropType, src: String, - showToolbar: { type: Boolean, default: true } + showToolbar: { type: Boolean, default: true }, + onError: Function as PropType<(e: Event) => void> } export type ImageProps = ExtractPublicPropTypes @@ -86,6 +93,8 @@ export default defineComponent({ alt={this.alt ? this.alt : imgProps.alt} aria-label={this.alt ? this.alt : imgProps.alt} onClick={this.handleClick} + onError={this.onError} + style={{ objectFit: this.objectFit }} /> ) diff --git a/src/image/src/styles/index.cssr.ts b/src/image/src/styles/index.cssr.ts index bf37a06b4..a205b5f11 100644 --- a/src/image/src/styles/index.cssr.ts +++ b/src/image/src/styles/index.cssr.ts @@ -73,6 +73,8 @@ export default c([ display: inline-flex; cursor: pointer; `, [ - c('img', 'border-radius: inherit;') + c('img', ` + border-radius: inherit; + `) ]) ]) diff --git a/src/image/tests/Image.spec.tsx b/src/image/tests/Image.spec.tsx index b494e6522..4087231b5 100644 --- a/src/image/tests/Image.spec.tsx +++ b/src/image/tests/Image.spec.tsx @@ -91,4 +91,28 @@ describe('n-image', () => { }) expect(wrapper.find('[data-cool]').exists()).toEqual(true) }) + + it('should work with `onError` prop', async () => { + const onError = jest.fn() + const wrapper = mount(NImage, { + props: { + src: 'https:// 07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg', + onError + } + }) + await wrapper.find('img').trigger('error') + expect(onError).toHaveBeenCalled() + }) + + it('should work with `objectFit` prop', () => { + const wrapper = mount(NImage, { + props: { + src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg', + objectFit: 'contain' + } + }) + expect(wrapper.find('img').attributes('style')).toContain( + 'object-fit: contain;' + ) + }) })