feat(avatar): support image fill mode in taro avatar component (#3405)

* feat(avatar): support image fill mode in taro avatar component

* fix(avatar): deprecate fit prop in taro avatar component rather than remove

Author: mingquan5830

src/packages/avatar/avatar.taro.tsx

@@ -23,6 +23,7 @@ const defaultProps = {
   background: '#eee',
   color: '#666',
   fit: 'cover',
+  mode: 'scaleToFill',
   src: '',
   alt: '',
   avatarIndex: 0,
@@ -40,6 +41,7 @@ export const Avatar: FunctionComponent<Partial<TaroAvatarProps>> & {
     color,
     src,
     icon,
+    mode,
     fit,
     avatarIndex,
     className,
@@ -130,6 +132,7 @@ export const Avatar: FunctionComponent<Partial<TaroAvatarProps>> & {
                   className={`nut-avatar-img nut-avatar-${groupSize || size || 'normal'}-img`}
                   src={src}
                   style={{ objectFit: fit }}
+                  mode={mode}
                   onError={errorEvent}
                 />
               )}

src/packages/avatar/demo.taro.tsx

@@ -13,6 +13,7 @@ import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
 import Demo9 from './demos/taro/demo9'
+import Demo10 from './demos/taro/demo10'
 
 const AvatarDemo = () => {
   const [translated] = useTranslate({
@@ -26,6 +27,7 @@ const AvatarDemo = () => {
       f645fc65: '组合头像可控制层级方向',
       '43f00872': '点击头像触发事件',
       f645fc66: '列表展示',
+      imageMode: '图片填充模式',
     },
     'zh-TW': {
       '67f78db5': '支持三種尺寸：small、normal、large',
@@ -37,6 +39,7 @@ const AvatarDemo = () => {
       f645fc65: '組合頭像可控制層級方向',
       '43f00872': '點擊頭像觸發事件',
       f645fc66: '列表展示',
+      imageMode: '圖片填充模式',
     },
     'en-US': {
       '67f78db5': 'Support three sizes: small, normal, large',
@@ -49,6 +52,7 @@ const AvatarDemo = () => {
       f645fc65: 'Combining avatars to control hierarchy direction',
       '43f00872': 'Click on the avatar to trigger the event',
       f645fc66: 'list',
+      imageMode: 'Image fill mode',
     },
   })
 
@@ -76,6 +80,8 @@ const AvatarDemo = () => {
         <Demo8 />
         <View className="h2">{translated.f645fc66}</View>
         <Demo9 />
+        <View className="h2">{translated.imageMode}</View>
+        <Demo10 />
       </ScrollView>
     </>
   )

src/packages/avatar/demos/taro/demo10.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Avatar, Cell } from '@nutui/nutui-react-taro'
+
+const Demo10 = () => {
+  const src =
+    'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png'
+  return (
+    <Cell>
+      <Avatar src={src} mode="scaleToFill" style={{ marginRight: 10 }} />
+      <Avatar src={src} mode="aspectFit" style={{ marginRight: 10 }} />
+      <Avatar src={src} mode="aspectFill" style={{ marginRight: 10 }} />
+      <Avatar src={src} mode="widthFix" />
+    </Cell>
+  )
+}
+export default Demo10

src/packages/avatar/doc.taro.md

@@ -90,6 +90,14 @@ Icon 和字符型可以自定义图标颜色及背景色
 
 :::
 
+### 图片填充模式
+
+:::demo
+
+<CodeBlock src='taro/demo10.tsx'></CodeBlock>
+
+:::
+
 ## Avatar
 
 ### Props
@@ -101,8 +109,9 @@ Icon 和字符型可以自定义图标颜色及背景色
 | background | 设置 Icon、字符类型头像的背景色 | `string` | `#eee` |
 | color | 设置 Icon、字符类型头像的颜色 | `string` | `#666` |
 | src | 设置图片类型头像的地址 | `string` | `-` |
+| mode | 图片裁剪、缩放模式，同 Taro Image 的 mode 属性 | `scaleToFill` \| `aspectFit` \| `aspectFill` \| `widthFix` \| `heightFix` \| `top` \| `bottom` \| `center` \| `left` \| `right` \| `top left` \| `top right` \| `bottom left` \| `bottom right` | `scaleToFill` |
 | icon | 设置 Icon 类型头像图标 | `ReactNode` | `-` |
-| onClick | 点击头像触发事件 | `(e: MouseEvent<HTMLDivElement>) => void` | `-` |
+| onClick | 点击头像触发事件 | `(e: ITouchEvent) => void` | `-` |
 | onError | 图片加载失败的事件 | `() => void` | `-` |
 
 ## Avatar.Group

src/types/spec/avatar/taro.ts

@@ -1,8 +1,14 @@
-import { ITouchEvent } from '@tarojs/components'
+import { ITouchEvent, ImageProps } from '@tarojs/components'
 import { BaseAvatar, BaseAvatarGroup } from './base'
 
 export interface TaroAvatarProps extends Omit<BaseAvatar, 'onClick'> {
   avatarIndex: number
+  /** 图片裁剪、缩放的模式，同 Taro Image 的 mode 属性 */
+  mode: keyof ImageProps.Mode
+  /**
+   * @deprecated 请使用 mode 属性代替
+   */
+  fit: BaseAvatar['fit']
   onClick: (e: ITouchEvent) => void
 }