Repository: ant-design/ant-design-mobile
Pull request #6047 (2023-03-17 10:20:33)

feat(Avatar): add `onLoad`
component Avatar missing `onLoad` event

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6047.surge.sh
miracles1919: can you update the relevant document?
github-actions[bot]: Deploy PR preview failed.
codecov[bot]: ## [Codecov](https://codecov.io/gh/ant-design/ant-design-mobile/pull/6047?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Patch coverage has no change and project coverage change: **`+0.10`** :tada:
> Comparison is base [(`9ee39c7`)](https://codecov.io/gh/ant-design/ant-design-mobile/commit/9ee39c747674905f6b59c8de22d79f3c9931901d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 90.32% compared to head [(`7faa153`)](https://codecov.io/gh/ant-design/ant-design-mobile/pull/6047?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 90.42%.

<details><summary>Additional details and impacted files</summary>


```diff
@@             Coverage Diff             @@
##           feature    #6047      +/-   ##
===========================================
+ Coverage    90.32%   90.42%   +0.10%     
===========================================
  Files          300      300              
  Lines         6529     6537       +8     
  Branches      1620     1625       +5     
===========================================
+ Hits          5897     5911      +14     
+ Misses         581      575       -6     
  Partials        51       51              
```


| [Impacted Files](https://codecov.io/gh/ant-design/ant-design-mobile/pull/6047?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Coverage Δ | |
|---|---|---|
| [src/components/avatar/avatar.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/6047?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvYXZhdGFyL2F2YXRhci50c3g=) | `100.00% <ø> (ø)` | |

... and [3 files with indirect coverage changes](https://codecov.io/gh/ant-design/ant-design-mobile/pull/6047/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design)

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design)

</details>

[:umbrella: View full report in Codecov by Sentry](https://codecov.io/gh/ant-design/ant-design-mobile/pull/6047?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).


Patch:
diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
index f08f641f7..daaf10b0d 100644
--- a/src/components/avatar/avatar.tsx
+++ b/src/components/avatar/avatar.tsx
@@ -11,7 +11,7 @@ export type AvatarProps = {
   src: string
   fallback?: ReactNode
   fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
-} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError'> &
+} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError' | 'onLoad'> &
   NativeProps<'--size' | '--border-radius'>
 
 const defaultProps = {
@@ -33,6 +33,7 @@ export const Avatar: FC<AvatarProps> = p => {
       fit={props.fit}
       onClick={props.onClick}
       onError={props.onError}
+      onLoad={props.onLoad}
     />
   )
 }
diff --git a/src/components/avatar/index.en.md b/src/components/avatar/index.en.md
index b3b5393d6..5751e7292 100644
--- a/src/components/avatar/index.en.md
+++ b/src/components/avatar/index.en.md
@@ -20,7 +20,7 @@ It is necessary to show the characteristics of people or things more intuitively
 | fit | The fill mode of the image | `'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'` | `'cover'` |
 | src | The address of avatar. | `string` | - |
 
-In addition, the following props of [Image](/components/image) are also supported: `alt` `lazy` `onClick` `onError`.
+In addition, the following props of [Image](/components/image) are also supported: `alt` `lazy` `onClick` `onError` `onLoad`.
 
 ### CSS Variables
 
diff --git a/src/components/avatar/index.zh.md b/src/components/avatar/index.zh.md
index 07a9d5657..0f58584eb 100644
--- a/src/components/avatar/index.zh.md
+++ b/src/components/avatar/index.zh.md
@@ -20,7 +20,7 @@
 | fit | 图片填充模式 | `'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'` | `'cover'` |
 | src | 头像的图片地址 | `string` | - |
 
-此外，还支持 [Image](/zh/components/image) 组件的 `alt` `lazy` `onClick` `onError` 属性。
+此外，还支持 [Image](/zh/components/image) 组件的 `alt` `lazy` `onClick` `onError` `onLoad` 属性。
 
 ### CSS 变量
 
diff --git a/src/components/check-list/check-list-item.tsx b/src/components/check-list/check-list-item.tsx
index 4ed5d93e6..27a7600e6 100644
--- a/src/components/check-list/check-list-item.tsx
+++ b/src/components/check-list/check-list-item.tsx
@@ -32,12 +32,9 @@ export const CheckListItem: FC<CheckListItemProps> = props => {
   }
   const active = context.value.includes(props.value)
   const readOnly = props.readOnly || context.readOnly
-
-  const extra = (
-    <div className={`${classPrefix}-extra`}>
-      {active ? context.activeIcon : null}
-    </div>
-  )
+  const defaultExtra = active ? context.activeIcon : null
+  const renderExtra = context.extra ? context.extra(active) : defaultExtra
+  const extra = <div className={`${classPrefix}-extra`}>{renderExtra}</div>
 
   return withNativeProps(
     props,
diff --git a/src/components/check-list/check-list.tsx b/src/components/check-list/check-list.tsx
index 0ed5652ce..2ed6db1fe 100644
--- a/src/components/check-list/check-list.tsx
+++ b/src/components/check-list/check-list.tsx
@@ -14,6 +14,7 @@ export type CheckListProps = Pick<ListProps, 'mode' | 'style'> & {
   onChange?: (val: string[]) => void
   multiple?: boolean
   activeIcon?: ReactNode
+  extra?: (active: boolean) => ReactNode
   disabled?: boolean
   readOnly?: boolean
   children?: React.ReactNode
@@ -42,7 +43,7 @@ export const CheckList: FC<CheckListProps> = p => {
     setValue(value.filter(item => item !== val))
   }
 
-  const { activeIcon, disabled, readOnly } = props
+  const { activeIcon, extra, disabled, readOnly } = props
 
   return (
     <CheckListContext.Provider
@@ -51,6 +52,7 @@ export const CheckList: FC<CheckListProps> = p => {
         check,
         uncheck,
         activeIcon,
+        extra,
         disabled,
         readOnly,
       }}
diff --git a/src/components/check-list/context.tsx b/src/components/check-list/context.tsx
index 04a9eb772..2dd2e8909 100644
--- a/src/components/check-list/context.tsx
+++ b/src/components/check-list/context.tsx
@@ -5,6 +5,7 @@ export const CheckListContext = createContext<{
   check: (val: string) => void
   uncheck: (val: string) => void
   activeIcon?: ReactNode
+  extra?: (active: boolean) => ReactNode
   disabled?: boolean
   readOnly?: boolean
 } | null>(null)
diff --git a/src/components/check-list/demos/demo1.tsx b/src/components/check-list/demos/demo1.tsx
index bb132ddb8..1313d637b 100644
--- a/src/components/check-list/demos/demo1.tsx
+++ b/src/components/check-list/demos/demo1.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
 import { CheckList } from 'antd-mobile'
 import { DemoBlock } from 'demos'
-import { SmileOutline } from 'antd-mobile-icons'
+import {
+  CheckCircleFill,
+  CheckCircleOutline,
+  SmileOutline,
+} from 'antd-mobile-icons'
 
 export default () => {
   return (
@@ -35,6 +39,19 @@ export default () => {
         </CheckList>
       </DemoBlock>
 
+      <DemoBlock title='自定义列表右侧区域' padding='0'>
+        <CheckList
+          extra={active =>
+            active ? <CheckCircleFill /> : <CheckCircleOutline />
+          }
+          defaultValue={['B']}
+        >
+          <CheckList.Item value='A'>A</CheckList.Item>
+          <CheckList.Item value='B'>B</CheckList.Item>
+          <CheckList.Item value='C'>C</CheckList.Item>
+        </CheckList>
+      </DemoBlock>
+
       <DemoBlock title='整组只读' padding='0'>
         <CheckList defaultValue={['B']} readOnly>
           <CheckList.Item value='A'>A</CheckList.Item>
diff --git a/src/components/check-list/index.en.md b/src/components/check-list/index.en.md
index cd17abdd1..a1a414da4 100644
--- a/src/components/check-list/index.en.md
+++ b/src/components/check-list/index.en.md
@@ -21,6 +21,7 @@ The bottom layer of `CheckList` is implemented based on `List`, which is a list
 | Name | Description | Type | Default |
 | --- | --- | --- | --- |
 | activeIcon | The icon displayed when selected | `ReactNode` | `<CheckOutline />` |
+| extra | The right area of the list item | `(active: boolean) => ReactNode` | - |
 | defaultValue | The default items | `string[]` | `[]` |
 | disabled | Is the check list disabled | `boolean` | `false` |
 | multiple | Whether to allow multiple selection or not | `boolean` | `false` |
diff --git a/src/components/check-list/index.zh.md b/src/components/check-list/index.zh.md
index 86f668b42..a842d0e6a 100644
--- a/src/components/check-list/index.zh.md
+++ b/src/components/check-list/index.zh.md
@@ -21,6 +21,7 @@
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | activeIcon | 选中图标 | `ReactNode` | `<CheckOutline />` |
+| extra | 列表右侧区域 | `(active: boolean) => ReactNode` | - |
 | defaultValue | 默认项 | `string[]` | `[]` |
 | disabled | 是否禁用 | `boolean` | `false` |
 | multiple | 是否允许多选 | `boolean` | `false` |


Test patch:
diff --git a/src/components/check-list/tests/check-list.test.tsx b/src/components/check-list/tests/check-list.test.tsx
index 2f1b669c0..bbdd9bb5e 100644
--- a/src/components/check-list/tests/check-list.test.tsx
+++ b/src/components/check-list/tests/check-list.test.tsx
@@ -63,4 +63,15 @@ describe('CheckList', () => {
 
     expect(container).toMatchSnapshot()
   })
+
+  test('`extra` props', () => {
+    const { getByText } = render(
+      <CheckList extra={active => (active ? 'YES' : 'NO')} defaultValue={['A']}>
+        <CheckList.Item value='A'>A</CheckList.Item>
+        <CheckList.Item value='B'>B</CheckList.Item>
+      </CheckList>
+    )
+    expect(getByText('YES')).toBeVisible()
+    expect(getByText('NO')).toBeVisible()
+  })
 })