chore: feature merge master (#6324)

* docs: update doc of SwipeAction ProgressBar ProgressCircle Popover Switch (#6232) * doc: update SwupeAction doc * doc: update ProgressBar ProgressCircle doc * doc: update Popover doc * doc: update Switch doc * test: fix failed test (#6227) * doc: Improve doc descriptions of some components (#6233) * doc: update docs * doc: update doc * fix: virtual input value 0 (#6231) * fix: fix placeholder show when value is number 0 on virtual-input * test: add value `0` --------- Co-authored-by: wuguangsen.wgs <[email protected]> Co-authored-by: miracles1919 <[email protected]> * fix(TextArea): hidden textarea element is not positioned relative to its parent (#6239) fix: hidden textarea element is not positioned relative to its parent * chore: bump 5.32.0 * enhance: useWheel dir change (#6240) * enhance: useWheel dir change * enhance: 代码风格调整 * refactor: 数组解构方式优化 * style: delete note code * chore: prompt when repairing step cloneElement (#6259) * fix(TextArea): reset rows when rows exceed autoSize (#6256) * fix(TextArea): rows should be the smallest of default and autoSize * refactor: adjust rows logic * chore: side add type specification (#6258) * chore: type enhance (#6262) * refactor: to simplify the judge (#6263) * refactor: to simplify the judge * refactor: simplify the judge * fix: add null judge * fix: add judage case * chore: repair type warning (#6267) * fix: classname use repeatedly (#6278) * chore: form's code style optimization (#6279) * refactor(Calendar): change locale from method to string (#6276) * refactor(Calendar): change locale from method to string * test(ConfigProvider): remove spaces in Japanese translation in calendar --------- Co-authored-by: litaoq <[email protected]> * chore: add `--inactive-color-half` type (#6281) * enhance: passive and preventDefault coexist repair (#6284) * enhance: passive and preventDefault coexist repair * refactor: code simplify * test: add useLockScroll test case * chore: pick type to InputHTMLAttributes (#6290) * enhance(toast): compatible with rtl mode (#6287) fix(toast): compatible with rtl mode Co-authored-by: Fog3211 <[email protected]> * test(useLockScroll): update test (#6292) * fix: repir passive and preventDefault in components (#6296) enhance: fix passive and preventDefault in components * chore: eventOptions type fix (#6298) chore: type fix * enhance: floating-panel add classPrefix (#6297) * chore: code simplify (#6295) * chore: code simplify * chore: code simplify * fix: useLockScroll whether the element scroll is in the end #6253 (#6254) * fix: useLockScroll whether the element scroll is in the end #6253 * test: useLockScroll test case #6253 * fix: useLockScroll whether the element scroll is in the end #6253 * test: useLockScroll whether the element scroll is in the end #6253 * test: useLockScroll with strict params #6253 * test: useLockScroll with strict params #6253 * fix: del px and remove {} #6253 * fix: error-block Normal display 0 (#6309) * fix: error-block Normal display 0 * test: add test case * chore: center-popup use classPrefix (#6305) * chore: pickview use classPrefix (#6304) chore: pickview dom use classPrefix * enhance: replace missing colors with css variables. fix #6319 (#6320) * enhance: replace missing colors with css variables. fix #6319 * enhance: replace black color with css variable * chore: update tag snapshots for css var --------- Co-authored-by: Wing <[email protected]> Co-authored-by: WuLiSenSen <[email protected]> Co-authored-by: wuguangsen.wgs <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: 二货机器人 <[email protected]> Co-authored-by: whwnow <[email protected]> Co-authored-by: litaoq <[email protected]> Co-authored-by: Hyden Liu <[email protected]> Co-authored-by: Fog3211 <[email protected]> Co-authored-by: Fog3211 <[email protected]> Co-authored-by: wang.haoyu <[email protected]> Co-authored-by: Wuma <[email protected]>
ant-design · Aug 16, 2023 · 5ed6ffd · 5ed6ffd
1 parent ac7c2be
commit 5ed6ffd
Show file tree

Hide file tree

Showing 70 changed files with 549 additions and 241 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.31.1",
+  "version": "5.32.0",
   "scripts": {
     "start": "dumi dev",
     "build": "gulp",

diff --git a/src/components/action-sheet/action-sheet.less b/src/components/action-sheet/action-sheet.less
@@ -31,7 +31,7 @@
     background-color: var(--adm-color-background);
     padding: 16px;
     &:active {
-      background-color: #eeeeee;
+      background-color: var(--adm-color-border);
     }
     &-disabled {
       cursor: not-allowed;

diff --git a/src/components/button/button.less b/src/components/button/button.less
@@ -42,8 +42,9 @@
     );
     width: 100%;
     height: 100%;
-    background-color: #000;
-    border: var(--border-width) var(--border-style) #000;
+    background-color: var(--adm-color-text-dark-solid);
+    border: var(--border-width) var(--border-style)
+      var(--adm-color-text-dark-solid);
     border-radius: var(--border-radius);
     opacity: 0;
     content: ' ';

diff --git a/src/components/calendar/calendar.tsx b/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(

diff --git a/src/components/center-popup/center-popup.tsx b/src/components/center-popup/center-popup.tsx
@@ -17,6 +17,8 @@ import {
   PopupBaseProps,
 } from '../popup/popup-base-props'
 
+const classPrefix = 'adm-center-popup'
+
 export type CenterPopupProps = PopupBaseProps &
   PropsWithChildren<{
     // These props currently are only used internally. They are not exported to users:
@@ -73,7 +75,7 @@ export const CenterPopup: FC<CenterPopupProps> = p => {
 
   const body = (
     <div
-      className={classNames('adm-center-popup-body', props.bodyClassName)}
+      className={classNames(`${classPrefix}-body`, props.bodyClassName)}
       style={props.bodyStyle}
     >
       {props.children}
@@ -85,7 +87,7 @@ export const CenterPopup: FC<CenterPopupProps> = p => {
     withNativeProps(
       props,
       <div
-        className='adm-center-popup'
+        className={classPrefix}
         style={{
           display: active ? undefined : 'none',
           pointerEvents: active ? undefined : 'none',
@@ -103,21 +105,21 @@ export const CenterPopup: FC<CenterPopupProps> = p => {
               }
             }}
             style={props.maskStyle}
-            className={classNames('adm-center-popup-mask', props.maskClassName)}
+            className={classNames(`${classPrefix}-mask`, props.maskClassName)}
             disableBodyScroll={false}
             stopPropagation={props.stopPropagation}
           />
         )}
         <div
-          className='adm-center-popup-wrap'
+          className={`${classPrefix}-wrap`}
           role={props.role}
           aria-label={props['aria-label']}
         >
           <animated.div style={style} ref={ref}>
             {props.showCloseButton && (
               <a
                 className={classNames(
-                  'adm-center-popup-close',
+                  `${classPrefix}-close`,
                   'adm-plain-anchor'
                 )}
                 onClick={() => {

diff --git a/src/components/checkbox/index.en.md b/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` |

diff --git a/src/components/checkbox/index.zh.md b/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` |

diff --git a/src/components/collapse/collapse.tsx b/src/components/collapse/collapse.tsx
@@ -130,30 +130,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]
 

diff --git a/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap b/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"

diff --git a/src/components/ellipsis/ellipsis.tsx b/src/components/ellipsis/ellipsis.tsx
@@ -195,34 +195,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

diff --git a/src/components/error-block/create-error-block.tsx b/src/components/error-block/create-error-block.tsx
@@ -31,9 +31,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' ? (
@@ -51,11 +52,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>
 

diff --git a/src/components/error-block/error-block.less b/src/components/error-block/error-block.less
@@ -26,7 +26,7 @@
 
   &-description {
     font-size: var(--adm-font-size-4);
-    color: #999;
+    color: var(--adm-color-weak);
     line-height: 1.4;
     margin-top: 12px;
     &-title {

diff --git a/src/components/error-block/tests/error-block.test.tsx b/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 + '')
+  })
 })
diff --git a/src/components/floating-panel/floating-panel.tsx b/src/components/floating-panel/floating-panel.tsx
@@ -9,6 +9,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,
@@ -83,7 +85,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()
@@ -104,9 +106,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,
       }
     )
 
@@ -134,22 +134,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>