Repository: ant-design/ant-design-mobile
Pull request #6067 (2023-03-24 07:40:32)

enhance(CheckList): add extra props
- add `extra` prop to extra CheckList.Item right area

codecov[bot]: ## [Codecov](https://codecov.io/gh/ant-design/ant-design-mobile/pull/6067?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Patch coverage: **`100.00`**% and no project coverage change.
> Comparison is base [(`dad620d`)](https://codecov.io/gh/ant-design/ant-design-mobile/commit/dad620d3901117b6ffdd42d1701ec070435fedb9?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 90.42% compared to head [(`40b67c6`)](https://codecov.io/gh/ant-design/ant-design-mobile/pull/6067?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           @@
##           master    #6067   +/-   ##
=======================================
  Coverage   90.42%   90.42%           
=======================================
  Files         300      300           
  Lines        6537     6538    +1     
  Branches     1625     1626    +1     
=======================================
+ Hits         5911     5912    +1     
  Misses        575      575           
  Partials       51       51           
```


| [Impacted Files](https://codecov.io/gh/ant-design/ant-design-mobile/pull/6067?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Coverage Δ | |
|---|---|---|
| [src/components/check-list/context.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/6067?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2hlY2stbGlzdC9jb250ZXh0LnRzeA==) | `100.00% <ø> (ø)` | |
| [src/components/check-list/check-list-item.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/6067?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2hlY2stbGlzdC9jaGVjay1saXN0LWl0ZW0udHN4) | `89.28% <100.00%> (+0.39%)` | :arrow_up: |
| [src/components/check-list/check-list.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/6067?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2hlY2stbGlzdC9jaGVjay1saXN0LnRzeA==) | `90.47% <100.00%> (ø)` | |

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/6067?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/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()
+  })
 })