Merge pull request #1402 from ant-design/5.3.2

5.3.2

CHANGELOG.en-US.md

@@ -14,6 +14,14 @@ toc: false
 
 ---
 
+### 5.3.2
+`2024-12-11`
+ - **Tooltip**
+    - feat: Add offset settings to tooltip [#1398](https://github.com/ant-design/ant-design-mobile-rn/pull/1398)
+    - fix: Tooltip flash style [#1391](https://github.com/ant-design/ant-design-mobile-rn/issues/1391)
+ - feat: Slider ref
+ - fix: new Date not adhering to ISO 8601 [#1401](https://github.com/ant-design/ant-design-mobile-rn/pull/1401)
+
 ### 5.3.1
 `2024-11-20`
  - **Carousel**

CHANGELOG.zh-CN.md

@@ -14,6 +14,14 @@ toc: false
 
 ---
 
+### 5.3.2
+`2024-12-11`
+ - **Tooltip**
+    - feat: Add offset settings to tooltip [#1398](https://github.com/ant-design/ant-design-mobile-rn/pull/1398)
+    - fix: Tooltip flash style [#1391](https://github.com/ant-design/ant-design-mobile-rn/issues/1391)
+ - feat: Slider ref
+ - fix: new Date not adhering to ISO 8601 [#1401](https://github.com/ant-design/ant-design-mobile-rn/pull/1401)
+
 ### 5.3.1
 `2024-11-20`
  - **Carousel**

components/date-picker-view/date-picker-view.tsx

@@ -17,14 +17,15 @@ import { PickerViewStyle } from '../picker-view/style'
 import { WithThemeStyles } from '../style'
 import { DatePickerViewPropsType } from './PropsType'
 import useRenderLabel from './useRenderLabel'
+import dayjs from 'dayjs'
 
 export interface DatePickerViewProps
   extends DatePickerViewPropsType,
     WithThemeStyles<PickerViewStyle> {}
 
 const defaultProps = {
-  minDate: new Date('2000-1-1'),
-  maxDate: new Date('2030-1-1'),
+  minDate: dayjs('2000-1-1').toDate(),
+  maxDate: dayjs('2030-1-1').toDate(),
   mode: 'date',
 }
 

components/date-picker/date-picker.tsx

@@ -26,8 +26,8 @@ export type DatePickerRef = any
 export interface DatePickerProps extends DatePickerPropsType {}
 
 const defaultProps = {
-  minDate: new Date('2000-1-1'),
-  maxDate: new Date('2030-1-1'),
+  minDate: dayjs('2000-1-1').toDate(),
+  maxDate: dayjs('2030-1-1').toDate(),
   precision: 'day',
 }
 

components/slider/PropsType.tsx

@@ -8,6 +8,10 @@ export type SliderMarks = {
 }
 export type SliderValueType = number | [number, number]
 
+export interface SliderRef {
+  onSlide: (changeX: number) => void
+}
+
 export type BaseSliderProps<SliderValue> = {
   min?: number
   max?: number

components/slider/index.tsx

@@ -1,4 +1,4 @@
-import { Slider } from './slider'
+import Slider from './slider'
 
 export type { SliderProps } from './PropsType'
 

components/slider/slider.tsx

@@ -1,8 +1,10 @@
 import getMiniDecimal from '@rc-component/mini-decimal'
 import React, {
+  ForwardedRef,
   useCallback,
   useContext,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState,
@@ -18,7 +20,12 @@ import Animated, {
 import HapticsContext from '../provider/HapticsContext'
 import { useTheme } from '../style'
 import Marks from './marks'
-import { BaseSliderProps, SliderProps, SliderValueType } from './PropsType'
+import {
+  BaseSliderProps,
+  SliderProps,
+  SliderRef,
+  SliderValueType,
+} from './PropsType'
 import SliderStyles from './style'
 import Thumb from './thumb'
 import Ticks from './ticks'
@@ -33,8 +40,9 @@ function nearest(arr: number[], target: number) {
   })
 }
 
-export function Slider<SliderValue extends SliderValueType>(
+function InternalSlider<SliderValue extends SliderValueType>(
   props: SliderProps,
+  ref: ForwardedRef<SliderRef>,
 ) {
   const {
     value: propsValue,
@@ -359,6 +367,15 @@ export function Slider<SliderValue extends SliderValueType>(
     )
   }
 
+  // ================== Actions Ref ==================
+  const actions = React.useMemo(
+    () => ({
+      onSlide,
+    }),
+    [onSlide],
+  )
+  useImperativeHandle(ref, () => actions)
+
   return (
     <GestureDetector gesture={gesture}>
       <View style={[ss.slider, disabled && ss.disabled, style]}>
@@ -384,3 +401,12 @@ export function Slider<SliderValue extends SliderValueType>(
     </GestureDetector>
   )
 }
+
+const Slider = React.forwardRef<SliderRef, SliderProps>(InternalSlider) as ((
+  props: React.PropsWithChildren<SliderProps> & React.RefAttributes<SliderRef>,
+) => React.ReactElement) &
+  Pick<React.FC, 'displayName'>
+
+Slider.displayName = 'Slider'
+
+export default React.memo(Slider)

components/tooltip/Tooltip.tsx

@@ -153,6 +153,9 @@ const InternalTooltip: React.ForwardRefRenderFunction<
   })
 
   const safeFloatingStyles = useMemo(() => {
+    if (floatingStyles.left === 0 && floatingStyles.top === 0) {
+      return { display: 'none' } as const
+    }
     if (isNaN(floatingStyles.left) || isNaN(floatingStyles.top)) {
       return { display: 'none' } as const
     }
@@ -175,7 +178,8 @@ const InternalTooltip: React.ForwardRefRenderFunction<
             style={{
               marginTop: crossOffset.top,
               marginLeft: crossOffset.left,
-            }}>
+            }}
+            collapsable={false}>
             <View
               ref={refs.setFloating}
               onLayout={update}

components/types.ts

@@ -48,7 +48,7 @@ export type {
 } from './radio/PropsType'
 export type { ResultNativeProps as ResultProps } from './result/index'
 export type { SearchBarProps } from './search-bar/index'
-export type { SliderProps } from './slider/PropsType'
+export type { SliderProps, SliderRef } from './slider/PropsType'
 export type { StepperProps } from './stepper/PropsType'
 export type { StepsProps } from './steps/index'
 export type {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/react-native",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "description": "基于蚂蚁金服移动设计规范的 React Native 组件库",
   "keywords": [
     "ant",