Repository: ant-design/ant-design-mobile
Pull request #6335 (2023-08-24 09:02:58)

feat(CheckList): allow using number as value
At the moment, it is allowed to use only a string as a value in the CheckList, but it is also possible to use numbers.


Patch:
diff --git a/.dumi/plugin-gallery/gallery.less b/.dumi/plugin-gallery/gallery.less
index 3e3f98f03..d9f09f41a 100644
--- a/.dumi/plugin-gallery/gallery.less
+++ b/.dumi/plugin-gallery/gallery.less
@@ -18,7 +18,7 @@ body {
   min-height: 0;
   height: 0;
   overflow-y: scroll;
-  background: rgb(245, 247, 250);
+  background: var(--adm-color-background);
   &::-webkit-scrollbar {
     width: 4px;
   }
@@ -34,7 +34,6 @@ body {
 }
 
 .guide {
-  background: #ffffff;
   font-size: 15px;
   padding: 12px;
   border-bottom: solid 1px #eeeeee;
@@ -52,5 +51,4 @@ body {
 
 .search {
   padding: 12px;
-  background-color: #fff;
 }
diff --git a/docs/components/components/Main/index.local.less b/docs/components/components/Main/index.local.less
index 58410c58a..2c2415249 100644
--- a/docs/components/components/Main/index.local.less
+++ b/docs/components/components/Main/index.local.less
@@ -33,6 +33,7 @@
         margin-top: 32px;
 
         .productItemTitle {
+          color: rgba(0, 0, 0, 0.85);
           margin-top: 24px;
           font-family: PingFangSC-Medium;
           font-size: 16px;
diff --git a/docs/components/icon/demo-all.tsx b/docs/components/icon/demo-all.tsx
index 4fac02634..e22e566ef 100644
--- a/docs/components/icon/demo-all.tsx
+++ b/docs/components/icon/demo-all.tsx
@@ -152,7 +152,7 @@ export default () => {
           return (
             <React.Fragment key={iconType_}>
               {displayedItems[iconType_].length > 0 && (
-                <h3>{nameDic[iconType_]}</h3>
+                <h3 style={{ margin: '18px 0' }}>{nameDic[iconType_]}</h3>
               )}
               <Grid columns={gridColumns}>
                 {displayedItems[iconType_].map(item => (
diff --git a/package.json b/package.json
index 7195ebde5..dc19ecab0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.32.0",
+  "version": "5.32.1",
   "scripts": {
     "start": "dumi dev",
     "build": "gulp",
diff --git a/src/components/cascader-view/cascader-view.tsx b/src/components/cascader-view/cascader-view.tsx
index fdabd8254..1f05c3ef1 100644
--- a/src/components/cascader-view/cascader-view.tsx
+++ b/src/components/cascader-view/cascader-view.tsx
@@ -1,7 +1,7 @@
 import React, { FC, ReactNode, useState, useEffect, useMemo } from 'react'
 import classNames from 'classnames'
 import Tabs from '../tabs'
-import CheckList from '../check-list'
+import CheckList, { CheckListValue } from '../check-list'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import { usePropsValue } from '../../utils/use-props-value'
@@ -13,7 +13,7 @@ import { useUpdateEffect } from 'ahooks'
 
 const classPrefix = `adm-cascader-view`
 
-export type CascaderValue = string
+export type CascaderValue = CheckListValue
 
 export type CascaderOption = {
   label: string
diff --git a/src/components/check-list/check-list-item.tsx b/src/components/check-list/check-list-item.tsx
index 27a7600e6..4111cdba4 100644
--- a/src/components/check-list/check-list-item.tsx
+++ b/src/components/check-list/check-list-item.tsx
@@ -4,6 +4,7 @@ import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { CheckListContext } from './context'
 import { devWarning } from '../../utils/dev-log'
 import classNames from 'classnames'
+import { CheckListValue } from '.'
 
 const classPrefix = `adm-check-list-item`
 
@@ -17,7 +18,7 @@ export type CheckListItemProps = Pick<
   | 'onClick'
   | 'style'
 > & {
-  value: string
+  value: CheckListValue
   readOnly?: boolean
 } & NativeProps
 
diff --git a/src/components/check-list/check-list.tsx b/src/components/check-list/check-list.tsx
index 2ed6db1fe..af6087a7e 100644
--- a/src/components/check-list/check-list.tsx
+++ b/src/components/check-list/check-list.tsx
@@ -8,10 +8,12 @@ import { CheckOutline } from 'antd-mobile-icons'
 
 const classPrefix = 'adm-check-list'
 
+export type CheckListValue = string | number
+
 export type CheckListProps = Pick<ListProps, 'mode' | 'style'> & {
-  defaultValue?: string[]
-  value?: string[]
-  onChange?: (val: string[]) => void
+  defaultValue?: CheckListValue[]
+  value?: CheckListValue[]
+  onChange?: (val: CheckListValue[]) => void
   multiple?: boolean
   activeIcon?: ReactNode
   extra?: (active: boolean) => ReactNode
@@ -31,7 +33,7 @@ export const CheckList: FC<CheckListProps> = p => {
 
   const [value, setValue] = usePropsValue(props)
 
-  function check(val: string) {
+  function check(val: CheckListValue) {
     if (props.multiple) {
       setValue([...value, val])
     } else {
@@ -39,7 +41,7 @@ export const CheckList: FC<CheckListProps> = p => {
     }
   }
 
-  function uncheck(val: string) {
+  function uncheck(val: CheckListValue) {
     setValue(value.filter(item => item !== val))
   }
 
diff --git a/src/components/check-list/context.tsx b/src/components/check-list/context.tsx
index 2dd2e8909..ef1e0f9eb 100644
--- a/src/components/check-list/context.tsx
+++ b/src/components/check-list/context.tsx
@@ -1,9 +1,10 @@
 import { createContext, ReactNode } from 'react'
+import { CheckListValue } from '.'
 
 export const CheckListContext = createContext<{
-  value: string[]
-  check: (val: string) => void
-  uncheck: (val: string) => void
+  value: CheckListValue[]
+  check: (val: CheckListValue) => void
+  uncheck: (val: CheckListValue) => void
   activeIcon?: ReactNode
   extra?: (active: boolean) => ReactNode
   disabled?: boolean
diff --git a/src/components/check-list/index.tsx b/src/components/check-list/index.tsx
index 20f0f77fe..7f892a60c 100644
--- a/src/components/check-list/index.tsx
+++ b/src/components/check-list/index.tsx
@@ -3,7 +3,7 @@ import { CheckList } from './check-list'
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component'
 import { CheckListItem } from './check-list-item'
 
-export type { CheckListProps } from './check-list'
+export type { CheckListValue, CheckListProps } from './check-list'
 export type { CheckListItemProps } from './check-list-item'
 
 export default attachPropertiesToComponent(CheckList, {
diff --git a/src/components/ellipsis/ellipsis.tsx b/src/components/ellipsis/ellipsis.tsx
index d992fd63f..ed59b211e 100644
--- a/src/components/ellipsis/ellipsis.tsx
+++ b/src/components/ellipsis/ellipsis.tsx
@@ -74,7 +74,6 @@ export const Ellipsis: FC<EllipsisProps> = p => {
     container.style.minHeight = 'auto'
     container.style.maxHeight = 'auto'
     container.style.textOverflow = 'clip'
-    container.style.whiteSpace = 'normal'
     container.style.webkitLineClamp = 'unset'
     container.style.display = 'block'
 
diff --git a/src/components/water-mark/water-mark.tsx b/src/components/water-mark/water-mark.tsx
index 2733e8804..e97b5ba40 100644
--- a/src/components/water-mark/water-mark.tsx
+++ b/src/components/water-mark/water-mark.tsx
@@ -31,7 +31,7 @@ const defaultProps = {
 export const WaterMark: FC<WaterMarkProps> = p => {
   const props = mergeProps(defaultProps, p)
   const {
-    zIndex = 2000,
+    zIndex,
     gapX = 24,
     gapY = 48,
     width = 120,
diff --git a/src/global/global.less b/src/global/global.less
index dcfaa55e0..e90cd9bd5 100644
--- a/src/global/global.less
+++ b/src/global/global.less
@@ -9,6 +9,7 @@ body {
   color: var(--adm-color-text);
   font-size: var(--adm-font-size-main);
   font-family: var(--adm-font-family);
+  background-color: var(--adm-color-background);
 }
 
 a,


Test patch:
diff --git a/src/components/ellipsis/tests/ellipsis.test.tsx b/src/components/ellipsis/tests/ellipsis.test.tsx
index 763afca20..fdb89ed8b 100644
--- a/src/components/ellipsis/tests/ellipsis.test.tsx
+++ b/src/components/ellipsis/tests/ellipsis.test.tsx
@@ -151,4 +151,22 @@ describe('Ellipsis', () => {
     fireEvent.click(getByText('expand'))
     expect(getByText('collapse')).toBeInTheDocument()
   })
+
+  test('the `whiteSpace` style of the calc container should be the same as Ellipsis', () => {
+    let container: Element | null = null
+    Object.defineProperty(HTMLElement.prototype, 'removeChild', {
+      value: (child: Element) => {
+        container = child
+      },
+    })
+    render(
+      <Ellipsis
+        style={{
+          whiteSpace: 'pre-wrap',
+        }}
+        content={content}
+      />
+    )
+    expect(container).toHaveStyle('white-space: pre-wrap')
+  })
 })
diff --git a/src/components/water-mark/tests/__snapshots__/water-mark.test.tsx.snap b/src/components/water-mark/tests/__snapshots__/water-mark.test.tsx.snap
index cd70dd038..a1c1c27ed 100644
--- a/src/components/water-mark/tests/__snapshots__/water-mark.test.tsx.snap
+++ b/src/components/water-mark/tests/__snapshots__/water-mark.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`WaterMark content watermark 1`] = `
 <div>
   <div
     class="adm-water-mark adm-water-mark-full-page"
-    style="z-index: 2000; background-size: 144px; background-image: url(data:image/png;base64,00);"
+    style="background-size: 144px; background-image: url(data:image/png;base64,00);"
   />
 </div>
 `;
@@ -13,7 +13,7 @@ exports[`WaterMark image watermark 1`] = `
 <div>
   <div
     class="adm-water-mark adm-water-mark-full-page"
-    style="z-index: 2000; background-size: 144px; background-image: url(data:image/png;base64,00);"
+    style="background-size: 144px; background-image: url(data:image/png;base64,00);"
   />
 </div>
 `;
@@ -22,7 +22,7 @@ exports[`WaterMark more rows content watermark 1`] = `
 <div>
   <div
     class="adm-water-mark adm-water-mark-full-page"
-    style="z-index: 2000; background-size: 144px; background-image: url(data:image/png;base64,00);"
+    style="background-size: 144px; background-image: url(data:image/png;base64,00);"
   />
 </div>
 `;