feat: support for incoming ref to image-uploader

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.31.1",
+  "version": "5.32.0",
   "scripts": {
     "start": "dumi dev",
     "build": "gulp",

src/components/calendar/calendar.tsx

@@ -15,6 +15,7 @@ import { useConfig } from '../config-provider'
 import isoWeek from 'dayjs/plugin/isoWeek'
 import { useUpdateEffect } from 'ahooks'
 import { usePropsValue } from '../../utils/use-props-value'
+import { replaceMessage } from '../../utils/replace-message'
 import {
   convertValueToRange,
   convertPageToDayjs,
@@ -171,10 +172,10 @@ export const Calendar = forwardRef<CalendarRef, CalendarProps>((p, ref) => {
         {props.prevMonthButton}
       </a>
       <div className={`${classPrefix}-title`}>
-        {locale.Calendar.renderYearAndMonth(
-          current.year(),
-          current.month() + 1
-        )}
+        {replaceMessage(locale.Calendar.yearAndMonth, {
+          year: current.year().toString(),
+          month: (current.month() + 1).toString(),
+        })}
       </div>
       <a
         className={classNames(

src/components/checkbox/index.en.md

@@ -28,7 +28,7 @@ type CheckboxValue = string | number
 | block | Whether to render as a block-level element | `boolean` | `false` |
 | checked | To specify whether selected or not currently | `boolean` | `false` |
 | defaultChecked | Selected or not initially | `boolean` | `false` |
-| disabled | Failure state | `boolean` | `false` |
+| disabled | Disabled state | `boolean` | `false` |
 | icon | The customized `icon` | `(checked: boolean, indeterminate: boolean) => React.ReactNode` | - |
 | id | The id of the input element, often used in conjunction with the label | `string` | - |
 | indeterminate | To set the `indeterminate` state, only responsible for style control | `boolean` | `false` |

src/components/checkbox/index.zh.md

@@ -28,7 +28,7 @@ type CheckboxValue = string | number
 | block | 是否渲染为块级元素 | `boolean` | `false` |
 | checked | 指定当前是否选中 | `boolean` | `false` |
 | defaultChecked | 初始是否选中 | `boolean` | `false` |
-| disabled | 失效状态 | `boolean` | `false` |
+| disabled | 禁用状态 | `boolean` | `false` |
 | icon | 自定义 `icon` 图标 | `(checked: boolean, indeterminate: boolean) => React.ReactNode` | - |
 | id | `input` 元素的 `id`，常用来配合 `label` 使用 | `string` | - |
 | indeterminate | 设置 `indeterminate` 状态，只负责样式控制 | `boolean` | `false` |

src/components/collapse/collapse.tsx

@@ -129,30 +129,44 @@ export const Collapse: FC<CollapseProps> = props => {
     panels.push(child)
   })
 
-  const [activeKey, setActiveKey] = usePropsValue<string[]>(
-    props.accordion
-      ? {
-          value:
-            props.activeKey === undefined
-              ? undefined
-              : props.activeKey === null
-              ? []
-              : [props.activeKey],
-          defaultValue:
-            props.defaultActiveKey === undefined ||
-            props.defaultActiveKey === null
-              ? []
-              : [props.defaultActiveKey],
-          onChange: v => {
-            props.onChange?.(v[0] ?? null)
-          },
-        }
-      : {
-          value: props.activeKey,
-          defaultValue: props.defaultActiveKey ?? [],
-          onChange: props.onChange,
-        }
-  )
+  const handlePropsValue = () => {
+    if (!props.accordion) {
+      return {
+        value: props.activeKey,
+        defaultValue: props.defaultActiveKey ?? [],
+        onChange: props.onChange,
+      }
+    }
+
+    const initValue: {
+      value?: string[]
+      defaultValue: string[]
+      onChange: (v: string[]) => void
+    } = {
+      value: [],
+      defaultValue: [],
+      onChange: v => {
+        props.onChange?.(v[0] ?? null)
+      },
+    }
+
+    if (props.activeKey === undefined) {
+      initValue.value = undefined
+    } else if (props.activeKey !== null) {
+      initValue.value = [props.activeKey]
+    }
+
+    if (
+      ![null, undefined].includes(props.defaultActiveKey as null | undefined)
+    ) {
+      initValue.defaultValue = [props.defaultActiveKey as string]
+    }
+
+    return initValue
+  }
+
+  const [activeKey, setActiveKey] = usePropsValue<string[]>(handlePropsValue())
+
   const activeKeyList =
     activeKey === null ? [] : Array.isArray(activeKey) ? activeKey : [activeKey]
 

src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap

@@ -8618,7 +8618,7 @@ exports[`ConfigProvider should display the text as ja-JP 1`] = `
       <div
         class="adm-calendar-title"
       >
-         2022年3月
+        2022年3月
       </div>
       <a
         class="adm-calendar-arrow-button adm-calendar-arrow-button-right adm-calendar-arrow-button-right-month"

src/components/ellipsis/ellipsis.tsx

@@ -194,34 +194,32 @@ export const Ellipsis: FC<EllipsisProps> = p => {
   ])
 
   const expandActionElement =
-    exceeded && props.expandText
-      ? withStopPropagation(
-          props.stopPropagationForActionButtons,
-          <a
-            ref={expandElRef}
-            onClick={() => {
-              setExpanded(true)
-            }}
-          >
-            {props.expandText}
-          </a>
-        )
-      : null
+    !!props.expandText &&
+    withStopPropagation(
+      props.stopPropagationForActionButtons,
+      <a
+        ref={expandElRef}
+        onClick={() => {
+          setExpanded(true)
+        }}
+      >
+        {props.expandText}
+      </a>
+    )
 
   const collapseActionElement =
-    exceeded && props.collapseText
-      ? withStopPropagation(
-          props.stopPropagationForActionButtons,
-          <a
-            ref={collapseElRef}
-            onClick={() => {
-              setExpanded(false)
-            }}
-          >
-            {props.collapseText}
-          </a>
-        )
-      : null
+    !!props.collapseText &&
+    withStopPropagation(
+      props.stopPropagationForActionButtons,
+      <a
+        ref={collapseElRef}
+        onClick={() => {
+          setExpanded(false)
+        }}
+      >
+        {props.collapseText}
+      </a>
+    )
 
   const renderContent = () => {
     if (!exceeded) return props.content

src/components/error-block/create-error-block.tsx

@@ -30,9 +30,10 @@ export function createErrorBlock(imageRecord: ImageRecord) {
     const props = mergeProps(defaultProps, p)
     const { locale } = useConfig()
     const contentPack = locale.ErrorBlock[props.status]
-    const des =
+    const desc =
       'description' in props ? props.description : contentPack.description
     const title = 'title' in props ? props.title : contentPack.title
+
     const image: ReactNode = props.image ?? imageRecord[props.status]
     const imageNode =
       typeof image === 'string' ? (
@@ -50,11 +51,12 @@ export function createErrorBlock(imageRecord: ImageRecord) {
       >
         <div className={`${classPrefix}-image`}>{imageNode}</div>
         <div className={`${classPrefix}-description`}>
-          {title && (
+          {![undefined, null].includes(title as null) && (
             <div className={`${classPrefix}-description-title`}>{title}</div>
           )}
-          {des && (
-            <div className={`${classPrefix}-description-subtitle`}>{des}</div>
+
+          {![undefined, null].includes(desc as null) && (
+            <div className={`${classPrefix}-description-subtitle`}>{desc}</div>
           )}
         </div>
 

src/components/error-block/tests/error-block.test.tsx

@@ -60,4 +60,24 @@ describe('ErrorBlock', () => {
 
     expect(container).toMatchSnapshot()
   })
+  test('renders when description and title', async () => {
+    const title = 0
+    const description = 0
+
+    const { container } = render(
+      <ErrorBlock title={title} description={description} />
+    )
+
+    const titleElement = container.querySelector(
+      `.${classPrefix}-description-title`
+    )
+    expect(titleElement).toBeInTheDocument()
+    expect(titleElement?.textContent).toBe(title + '')
+
+    const descElement = container.querySelector(
+      `.${classPrefix}-description-subtitle`
+    )
+    expect(descElement).toBeInTheDocument()
+    expect(descElement?.textContent).toBe(description + '')
+  })
 })

src/components/floating-panel/floating-panel.tsx

@@ -14,6 +14,8 @@ import { mergeProps } from '../../utils/with-default-props'
 import { useLockScroll } from '../../utils/use-lock-scroll'
 import { useMemoizedFn } from 'ahooks'
 
+const classPrefix = 'adm-floating-panel'
+
 export type FloatingPanelRef = {
   setHeight: (
     height: number,
@@ -88,7 +90,7 @@ export const FloatingPanel = forwardRef<FloatingPanelRef, FloatingPanelProps>(
         setPulling(pullingRef.current)
         if (!pullingRef.current) return
         const { event } = state
-        if (event.cancelable) {
+        if (event.cancelable && supportsPassive) {
           event.preventDefault()
         }
         event.stopPropagation()
@@ -109,9 +111,7 @@ export const FloatingPanel = forwardRef<FloatingPanelRef, FloatingPanelProps>(
         from: () => [0, y.get()],
         pointer: { touch: true },
         target: elementRef,
-        eventOptions: supportsPassive
-          ? { passive: false }
-          : (false as unknown as AddEventListenerOptions),
+        eventOptions: supportsPassive ? { passive: false } : undefined,
       }
     )
 
@@ -139,22 +139,22 @@ export const FloatingPanel = forwardRef<FloatingPanelRef, FloatingPanelProps>(
       props,
       <animated.div
         ref={elementRef}
-        className='adm-floating-panel'
+        className={classPrefix}
         style={{
           height: Math.round(maxHeight),
           translateY: y.to(y => `calc(100% + (${Math.round(y)}px))`),
         }}
       >
         <div
-          className='adm-floating-panel-mask'
+          className={`${classPrefix}-mask`}
           style={{
             display: pulling ? 'block' : 'none',
           }}
         />
-        <div className='adm-floating-panel-header' ref={headerRef}>
-          <div className='adm-floating-panel-bar' />
+        <div className={`${classPrefix}-header`} ref={headerRef}>
+          <div className={`${classPrefix}-bar`} />
         </div>
-        <div className='adm-floating-panel-content' ref={contentRef}>
+        <div className={`${classPrefix}-content`} ref={contentRef}>
           {props.children}
         </div>
       </animated.div>

src/components/form/demos/demo-subscribe.tsx

@@ -45,22 +45,20 @@ export default function () {
       </Form.Item>
 
       <Form.Subscribe to={['loginMethod']}>
-        {({ loginMethod }) => {
-          return (
-            <>
-              {loginMethod === 'mobile' && (
-                <Form.Item name='account' label='手机号'>
-                  <Input placeholder='请输入手机号' />
-                </Form.Item>
-              )}
-              {loginMethod === 'email' && (
-                <Form.Item name='account' label='邮箱'>
-                  <Input placeholder='请输入邮箱' />
-                </Form.Item>
-              )}
-            </>
-          )
-        }}
+        {({ loginMethod }) => (
+          <>
+            {loginMethod === 'mobile' && (
+              <Form.Item name='account' label='手机号'>
+                <Input placeholder='请输入手机号' />
+              </Form.Item>
+            )}
+            {loginMethod === 'email' && (
+              <Form.Item name='account' label='邮箱'>
+                <Input placeholder='请输入邮箱' />
+              </Form.Item>
+            )}
+          </>
+        )}
       </Form.Subscribe>
     </Form>
   )

src/components/form/demos/demo2.tsx

@@ -52,13 +52,9 @@ export default () => {
         </Form.Item>
         <Form.Item
           label='表单联动-字段B'
-          shouldUpdate={(prevValues, curValues) => {
-            return prevValues.b !== curValues.b
-          }}
+          shouldUpdate={(prevValues, curValues) => prevValues.b !== curValues.b}
         >
-          {({ getFieldValue }) => {
-            return JSON.stringify(getFieldValue('b'))
-          }}
+          {({ getFieldValue }) => JSON.stringify(getFieldValue('b'))}
         </Form.Item>
         <DatePickerInputItem />
       </Form>

src/components/form/demos/demo4.tsx

@@ -4,7 +4,7 @@ import type { PickerValue } from 'antd-mobile/es/components/picker'
 import { DownOutline } from 'antd-mobile-icons'
 
 interface MobileValue {
-  preValue: string
+  preValue: string | number
   realValue: string
 }