Merge pull request #1396 from ant-design/5.3.1

5.3.1
ant-design · Nov 20, 2024 · 0b7f697 · 0b7f697
2 parents ed76b99 + a8de519
commit 0b7f697
Show file tree

Hide file tree

Showing 13 changed files with 115 additions and 32 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -13,6 +13,16 @@ toc: false
 - Major version release is not included in this schedule for breadking change and new features.
 
 ---
+
+### 5.3.1
+`2024-11-20`
+ - **Carousel**
+    - feat: add `lazy` & `renderLazyPlaceholder` prop
+    - fix: [email protected]+ avoid height collapse [#1372](https://github.com/ant-design/ant-design-mobile-rn/issues/1372)
+ - **Provider**
+    - fix: `onHaptics` not works bug
+ - fix: `lodash.mergewith` dependencie [#1397](https://github.com/ant-design/ant-design-mobile-rn/issues/1397)
+
 ### 5.3.0
 `2024-11-14`
  - 🌟 **Typescript**: export all component props types. 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -14,6 +14,15 @@ toc: false
 
 ---
 
+### 5.3.1
+`2024-11-20`
+ - **Carousel**
+    - feat: 新增 `lazy` & `renderLazyPlaceholder` 属性
+    - fix: [email protected]+ 高度坍塌 [#1372](https://github.com/ant-design/ant-design-mobile-rn/issues/1372)
+ - **Provider**
+    - fix: `onHaptics` 不工作bug
+ - fix: `lodash.mergewith` dependencie [#1397](https://github.com/ant-design/ant-design-mobile-rn/issues/1397)
+
 ### 5.3.0
 `2024-11-14`
  - 🌟 **Typescript**: 导出所有 component 的 props types。 

diff --git a/components/carousel/PropsType.tsx b/components/carousel/PropsType.tsx
@@ -12,6 +12,8 @@ export interface CarouselProps extends ScrollViewProps {
   dotActiveStyle?: StyleProp<ViewStyle>
   dotStyle?: StyleProp<ViewStyle>
   infinite?: boolean
+  lazy?: boolean | ((index: number) => boolean)
+  renderLazyPlaceholder?: (index: number) => ReactNode
   pageStyle?: StyleProp<ViewStyle>
   pagination?: (props: PaginationProps) => ReactNode
   selectedIndex?: number

diff --git a/components/carousel/__tests__/__snapshots__/demo.test.js.snap b/components/carousel/__tests__/__snapshots__/demo.test.js.snap
@@ -21,6 +21,13 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
       </Text>
       <View
         onLayout={[Function]}
+        style={
+          Object {
+            "backgroundColor": "#fff",
+            "height": 150,
+            "width": "100%",
+          }
+        }
       >
         <RCTScrollView
           accessibilityLabel="Carousel"
@@ -54,13 +61,6 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
           selectedIndex={2}
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
-          style={
-            Object {
-              "backgroundColor": "#fff",
-              "height": 150,
-              "width": "100%",
-            }
-          }
           vertical={false}
         >
           <View>
@@ -483,6 +483,13 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
       </Text>
       <View
         onLayout={[Function]}
+        style={
+          Object {
+            "backgroundColor": "#fff",
+            "height": 150,
+            "width": "100%",
+          }
+        }
       >
         <RCTScrollView
           accessibilityLabel="Carousel"
@@ -516,13 +523,6 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
           selectedIndex={1}
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
-          style={
-            Object {
-              "backgroundColor": "#fff",
-              "height": 150,
-              "width": "100%",
-            }
-          }
           vertical={true}
         >
           <View>

diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md
@@ -15,6 +15,8 @@ Properties | Descrition | Type | Default | Version
 | dotStyle  | style of dots | ViewStyle | | |
 | dotActiveStyle  | style of active dot | ViewStyle  | | |
 | infinite | whether is infinite loop | Boolean   | false | |
+| lazy | Function which takes an object with the current page and returns a boolean to indicate whether to lazily render the scenes. | Boolean \| `(index:number) => boolean` | false | `5.3.1` |
+| renderLazyPlaceholder | A callback that returns a custom React Element to render for pages not yet rendered. Requires the `lazy` prop to be enabled. | `(index:number) => ReactNode` | - | `5.3.1` |
 | pageStyle | style of the carousel page | ViewStyle |  | |
 | pagination | A generator function which could be used to customized pagination. | (props) => ReactNode  | | |
 | selectedIndex |  current selected index  |  number  |  0  | |
@@ -35,7 +37,7 @@ Properties | Descrition | Type
 
 ## FAQ
 
-### On the Android platform, when using `Carousel` nested in `ScrollView`, the Carousel Item cannot slide. What should I do?
+### 1. On the Android platform, when using `Carousel` nested in `ScrollView`, the Carousel Item cannot slide. What should I do?
 
 Support in `5.1.3`. Set the `nestedScrollEnabled` property of `ScrollView` to `true`.
 
@@ -46,7 +48,23 @@ Support in `5.1.3`. Set the `nestedScrollEnabled` property of `ScrollView` to `t
 </ScrollView>
 ```
 
-### Why choose Carousel instead of `react-native-pager-view` ?
+### 2. Use `lazy` and `renderLazyPlaceholder` props to render routes as needed
+
+Support in `5.3.1`.
+```jsx
+// `lazy={true}` only the current page is rendered
+<Carousel 
+  lazy
+  renderLazyPlaceholder={()=> <Loading /> }
+/>
+
+// eg: Render the sibling pages, a total of 3 pages
+<Carousel 
+  lazy={(i) => Math.abs(selectedIndex - i) < 2}
+>
+```
+
+### 3. Why choose Carousel instead of `react-native-pager-view` ?
 
 First, Carousel supports the `infinite` property, which means 🌟a true infinite loop🌟. <br/>
 Second, Carousel is completely based on `ScrollView`, which is not only lighter but also more compatible.
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
@@ -379,6 +379,31 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
     })
   }
 
+  lazyLoad(child: React.ReactNode, index: number) {
+    const { infinite, lazy, renderLazyPlaceholder } = this.props
+    const { selectedIndex } = this.state
+    if (!lazy) {
+      return child
+    }
+    if (
+      lazy &&
+      typeof lazy === 'boolean' &&
+      selectedIndex === index - (infinite ? 1 : 0)
+    ) {
+      return child
+    }
+
+    if (
+      lazy &&
+      typeof lazy === 'function' &&
+      lazy(index - (infinite ? 1 : 0))
+    ) {
+      return child
+    }
+
+    return renderLazyPlaceholder?.(index)
+  }
+
   render() {
     const { children, dots, infinite, accessibilityLabel, pageStyle } =
       this.props
@@ -399,14 +424,14 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
           key={`carousel_${index}`}
           accessibilityLabel={`${accessibilityLabel}_${index}`}
           style={pageWidth}>
-          {child}
+          {this.lazyLoad(child, index)}
         </View>
       ))
     } else {
       pages = <View style={pageWidth}>{children}</View>
     }
     return (
-      <View onLayout={this.onLayout}>
+      <View onLayout={this.onLayout} style={this.props.style}>
         {this.renderScroll(pages)}
         {dots && this.renderDots(selectedIndex)}
       </View>
@@ -435,6 +460,7 @@ class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
         showsVerticalScrollIndicator={false}
         scrollEventThrottle={Platform.OS === 'web' ? 0 : 16}
         {...this.props}
+        style={undefined}
         ref={this.scrollview as any}
         horizontal={!this.props.vertical}
         pagingEnabled={true}

diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md
@@ -18,6 +18,8 @@ subtitle: 走马灯
 | dotStyle  | 指示点样式 | ViewStyle | 无 | |
 | dotActiveStyle  | 当前激活的指示点样式 | ViewStyle | 无 | |
 | infinite | 是否循环播放 | Boolean   | false | |
+| lazy | 是否懒加载。支持布尔值或函数返回 | Boolean \| `(index:number) => boolean` | false | `5.3.1` |
+| renderLazyPlaceholder | 返回自定义 React 元素以呈现尚未呈现的页面的回调。以`索引`作为参数的对象。需要启用 `lazy` 属性。 | `(index:number) => ReactNode` | - | `5.3.1` |
 | pageStyle | 轮播页内样式 | ViewStyle | 无 | |
 | pagination | 自定义 pagination | (props) => ReactNode  |  | |
 | selectedIndex |  手动设置当前显示的索引  |  number  |  0  | |
@@ -49,7 +51,23 @@ Carousel 的其他属性和 react-native 内置组件[ScrollView](https://reactn
 </ScrollView>
 ```
 
-### 2. Carousel和 `react-native-pager-view` 有什么区别（或优势）？
+### 2. 使用 lazy 和 renderLazyPlaceholder 属性懒加载提高性能
+
+`5.3.1`新增支持。
+```jsx
+// lazy={true} 表示只渲染当前page
+<Carousel 
+  lazy
+  renderLazyPlaceholder={()=> <Loading /> }
+/>
+
+// 渲染相邻的page，总共3个page
+<Carousel 
+  lazy={(i) => Math.abs(selectedIndex - i) < 2}
+>
+```
+
+### 3. Carousel和 `react-native-pager-view` 有什么区别（或优势）？
 
 首先，Carousel支持`infinite`属性，即🌟真正的无限循环🌟。 <br/>
 其次，Carousel是完全基于`ScrollView`实现，不仅更轻量，且更具有兼容性。
diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap
@@ -913,6 +913,12 @@ exports[`renders ./components/grid/demo/basic.tsx correctly 1`] = `
     </View>
     <View
       onLayout={[Function]}
+      style={
+        Object {
+          "height": 320,
+          "width": "100%",
+        }
+      }
     >
       <RCTScrollView
         accessibilityLabel="Carousel"
@@ -945,12 +951,6 @@ exports[`renders ./components/grid/demo/basic.tsx correctly 1`] = `
         selectedIndex={0}
         showsHorizontalScrollIndicator={false}
         showsVerticalScrollIndicator={false}
-        style={
-          Object {
-            "height": 320,
-            "width": "100%",
-          }
-        }
         vertical={false}
       >
         <View>

diff --git a/components/picker-view/picker-view.tsx b/components/picker-view/picker-view.tsx
@@ -86,7 +86,7 @@ const RMCPickerView: React.FC<RMCPickerViewProps> = (props) => {
   const handleSelect = useCallback(
     (...args) => {
       p.handleSelect.apply(undefined, args)
-      onHaptics('picker')
+      onHaptics?.('picker')
     },
     [onHaptics, p.handleSelect],
   )

diff --git a/components/slider/slider.tsx b/components/slider/slider.tsx
@@ -203,7 +203,7 @@ export function Slider<SliderValue extends SliderValueType>(
       const safeValue = getSafeValue(value)
       if (isSliding) {
         onChange?.(safeValue)
-        ticks && !disabledStep && onHaptics('slider')
+        ticks && !disabledStep && onHaptics?.('slider')
       }
       if (!isSliding || range) {
         offset1.value = getPositionByValue(safeValue, 0)
@@ -250,7 +250,7 @@ export function Slider<SliderValue extends SliderValueType>(
         sliderValue.value = targetValue as SliderValue
       }
       if (!ticks) {
-        onHaptics('slider')
+        onHaptics?.('slider')
       }
     },
     [getValueByPosition, onHaptics, range, sliderValue, ticks],

diff --git a/components/stepper/stepper.tsx b/components/stepper/stepper.tsx
@@ -167,7 +167,7 @@ function InnerStepper<ValueType extends number | string>(
       return state
     }
 
-    onHaptics('stepper')
+    onHaptics?.('stepper')
 
     let stepValue = getMiniDecimal(step)
     if (action.type === 'minus') {

diff --git a/components/switch/Switch.tsx b/components/switch/Switch.tsx
@@ -144,7 +144,7 @@ const AntmSwitch = (props: SwitchProps) => {
           throw e
         }
       }
-      onHaptics('switch')
+      onHaptics?.('switch')
       return newChecked
     }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/react-native",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "基于蚂蚁金服移动设计规范的 React Native 组件库",
   "keywords": [
     "ant",
@@ -37,6 +37,7 @@
     "classnames": "^2.2.1",
     "dayjs": "^1.11.7",
     "lodash.assignwith": "^4.2.0",
+    "lodash.mergewith": "^4.6.2",
     "normalize-css-color": "^1.0.2",
     "rc-field-form": "^2.0.0",
     "rc-util": "^5.39.1",
@@ -75,7 +76,6 @@
     "jest": "^26.6.3",
     "jsonml.js": "^0.1.0",
     "lint-staged": "^8.0.4",
-    "lodash.mergewith": "^4.6.2",
     "metro-react-native-babel-preset": "^0.66.0",
     "mockdate": "^2.0.1",
     "pre-commit": "1.x",
-Original file line number
+Diff line change
@@ Expand Up / @@ -144,7 +144,7 @@ const AntmSwitch = (props: SwitchProps) => { @@
               throw e
             }
           }
-          onHaptics('switch')
+          onHaptics?.('switch')
           return newChecked
         }
@@ Expand Down @@