Merge pull request #1353 from ant-design/5.2.0-rc.1

5.2.0 rc.1

Author: 1uokun

.jest.config.js

@@ -8,7 +8,8 @@ const transformPackages = [
   'react-native-collapsible',
   '@bang88/react-native-ultimate-listview',
   '@react-native-community',
-  'react-native-gesture-handler'
+  'react-native-gesture-handler',
+  'react-native-reanimated'
 ];
 
 module.exports = {

README.md

@@ -29,60 +29,23 @@ A configurable Mobile UI specification and React-based implementation.
 
 ## Expo
 
- - **Web support**
-   
-   Preview Web Platform in [[here] 🔗](https://1uokun.github.io/ant-design-mobile-rn/index.html)
+> HTML5 Preview: [ant-design-mobile-rn/index.html](https://1uokun.github.io/ant-design-mobile-rn/index.html)
 
- - **Expo demo app**
 
 |SDK 49+|
 |--|
 | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&groupId=5278146b-c8d6-4c93-8a6b-6f942a2b5fb5" />](https://expo.dev/preview/update?message=5.2.0%20Form%20%26%20Input&updateRuntimeVersion=5.2.0&createdAt=2024-05-24T06%3A10%3A13.909Z&slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&group=5278146b-c8d6-4c93-8a6b-6f942a2b5fb5) |
 
+Open the camera app on your device and scan the code above, <br>
+need install expo app: https://expo.io/tools
+
 <details><summary>Expo SDK history version</summary>
 
 |Expo SDK 44|SDK 47 iOS|SDK 47 Android|
 |--|--|--|
 | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/expo-go?owner=1uokun&slug=ant-design-mobile-rn&releaseChannel=default&host=exp.host" />](https://expo.dev/@1uokun/ant-design-mobile-rn) | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?updateId=38b3a547-ab2b-4066-95ed-400f1707dcc6&appScheme=exp&host=u.expo.dev" />](https://expo.dev/@1uokun/ant-design-mobile-rn) | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?updateId=05f0e308-2dd5-4cb9-9e6b-1ae31561bfee&appScheme=exp&host=u.expo.dev" />](https://expo.dev/@1uokun/ant-design-mobile-rn) |
 </details>
 
-> Open the camera app on your device and scan the code above, <br>
-need install expo app: https://expo.io/tools
-
-## Development
-
- - **Running On Device**
-
-```bash
-# clone
-git clone git@github.com:ant-design/ant-design-mobile-rn.git
-
-# go to ant rn folder
-cd ant-design-mobile-rn
-
-# install dependencies
-yarn
-
-# start ios
-cd rn-kitchen-sink/ios && pod install
-yarn ios 
-
-# start android
-yarn android
-```
-
- - **Running On Expo**
-
-```bash
-# go to expo example folder
-cd example
-
-# install dependencies
-yarn
-
-# start expo
-yarn expo
-```
 
 ## Install & Usage
 
@@ -123,14 +86,48 @@ then
 npx react-native-asset
 ```
 
-[introduce](docs/react/introduce.en-US.md#2-installation)
-
 ## Links
 
 - [Home Page](http://rn.mobile.ant.design)
+- [More Introduce >](docs/react/introduce.en-US.md)
 - [Developer Instruction](development.en-US.md)
-- [React components](http://github.com/react-component/)
-- [Demos](https://github.com/ant-design/antd-mobile-samples)
+
+## Development
+
+ - **Running On Expo**
+
+> node >= 18
+
+```bash
+# go to expo example folder
+cd example
+
+# install dependencies
+yarn
+
+# start expo
+yarn expo
+```
+
+ - **Running On Device**
+
+```bash
+# clone
+git clone git@github.com:ant-design/ant-design-mobile-rn.git
+
+# go to ant rn folder
+cd ant-design-mobile-rn
+
+# install dependencies
+yarn
+
+# start ios
+cd rn-kitchen-sink/ios && pod install
+yarn ios 
+
+# start android
+yarn android
+```
 
 ## Contributing
 

README.zh-CN.md

@@ -27,15 +27,14 @@ Ant Design 移动端设计规范。`@ant-design/react-native` 是 Ant Design 的
 
 ## Expo
 
- - **Web support**
-   
-   点击[[这里] 🔗 ](https://1uokun.github.io/ant-design-mobile-rn/index.html)预览H5网页版本
+> HTML5 预览: [ant-design-mobile-rn/index.html](https://1uokun.github.io/ant-design-mobile-rn/index.html)
 
- - **Expo demo app**
 
-|SDK 49+ iOS|SDK 49+ Android|
-|--|--|
-| [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?updateId=91ccee3a-f631-4bdb-b643-e3d01b52a95c&appScheme=exp&host=u.expo.dev" />](https://expo.dev/@1uokun/ant-design-mobile-rn) | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?updateId=49a4c02d-5dc0-47b9-a98f-61932a6d4765&appScheme=exp&host=u.expo.dev" />](https://expo.dev/@1uokun/ant-design-mobile-rn) |
+|SDK 49+|
+|--|
+| [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&groupId=5278146b-c8d6-4c93-8a6b-6f942a2b5fb5" />](https://expo.dev/preview/update?message=5.2.0%20Form%20%26%20Input&updateRuntimeVersion=5.2.0&createdAt=2024-05-24T06%3A10%3A13.909Z&slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&group=5278146b-c8d6-4c93-8a6b-6f942a2b5fb5) |
+
+提示：使用本地原相机扫瞄上面的二维码, 需要下载 Expo App: https://expo.io/tools
 
 <details><summary>Expo SDK历史版本</summary>
 
@@ -44,46 +43,6 @@ Ant Design 移动端设计规范。`@ant-design/react-native` 是 Ant Design 的
 | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/expo-go?owner=1uokun&slug=ant-design-mobile-rn&releaseChannel=default&host=exp.host" />](https://expo.dev/@1uokun/ant-design-mobile-rn) | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?updateId=38b3a547-ab2b-4066-95ed-400f1707dcc6&appScheme=exp&host=u.expo.dev" />](https://expo.dev/@1uokun/ant-design-mobile-rn) | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?updateId=05f0e308-2dd5-4cb9-9e6b-1ae31561bfee&appScheme=exp&host=u.expo.dev" />](https://expo.dev/@1uokun/ant-design-mobile-rn) |
 </details>
 
-> 提示：使用本地原相机扫瞄上面的二维码, 需要下载 Expo App: https://expo.io/tools
-
-## 本地演示
-
- - **使用 react-native-cli 运行**
-
-```bash
-# clone
-git clone git@github.com:ant-design/ant-design-mobile-rn.git
-
-# go to ant rn folder
-cd ant-design-mobile-rn
-
-# install dependencies
-yarn
-
-# start ios
-cd rn-kitchen-sink/ios && pod install
-yarn ios
-
-# start android
-yarn android
-
-# start expo
-yarn expo
-```
-
- - **使用 expo-cli 运行**
-
-```bash
-# go to expo example folder
-cd example
-
-# install dependencies
-yarn
-
-# start expo
-yarn expo
-```
-
 ## 安装 & 使用
 
 ```bash
@@ -99,20 +58,19 @@ yarn add @ant-design/react-native
 ### 安装peer依赖
 
 ```bash
-npm install @react-native-community/segmented-control @react-native-community/slider
+npm install @react-native-community/segmented-control @react-native-community/slider @ant-design/icons-react-native react-native-gesture-handler
 ```
 
 or
 
 ```bash
-yarn add @react-native-community/segmented-control @react-native-community/slider
+yarn add @react-native-community/segmented-control @react-native-community/slider @ant-design/icons-react-native react-native-gesture-handler
 ```
 
 > 安装完依赖后需要到 iOS 目录 `pod install`(auto linking)，Android 不需要手动处理
 
 ### 链接字体图标
 
-
 ```js
 // 配置根目录下的 `react-native.config.js` 文件
 module.exports = {
@@ -125,14 +83,46 @@ module.exports = {
 npx react-native-asset
 ```
 
-[介绍](docs/react/introduce.zh-CN.md#2-安装)
-
 ## 链接
 
 - [首页](http://rn.mobile.ant.design)
-- [开发文档](development.zh-CN.md)
-- [底层 React 模块](http://github.com/react-component)
-- [官方 Demo 集合](https://github.com/ant-design/antd-mobile-samples)
+- [更详细的安装说明 >](docs/react/introduce.zh-CN.md)
+- [开发者文档](development.zh-CN.md)
+
+## 本地演示
+
+ - **使用 expo-cli 运行**
+
+```bash
+# go to expo example folder
+cd example
+
+# install dependencies
+yarn
+
+# start expo
+yarn expo
+```
+
+ - **使用 react-native-cli 运行**
+
+```bash
+# clone
+git clone git@github.com:ant-design/ant-design-mobile-rn.git
+
+# go to ant rn folder
+cd ant-design-mobile-rn
+
+# install dependencies
+yarn
+
+# start ios
+cd rn-kitchen-sink/ios && pod install
+yarn ios
+
+# start android
+yarn android
+```
 
 ## 欢迎贡献
 

components/_util/hooks/useClickAway.ts

@@ -0,0 +1,30 @@
+import { useEffect, useMemo, useRef } from 'react'
+import {
+  DeviceEventEmitter,
+  EmitterSubscription,
+  GestureResponderEvent,
+  NativeEventEmitter,
+} from 'react-native'
+
+export const USE_CLICK_AWAY_EVENT_NAME = 'ANT_DESIGN_MOBILE_RN_USE_CLICK_AWAY'
+
+export default function useClickAway(
+  onClickAway: (event: GestureResponderEvent) => void,
+) {
+  const TopViewEventEmitter = useMemo(
+    () => DeviceEventEmitter || new NativeEventEmitter(),
+    [],
+  )
+
+  const onClickAwayRef = useRef<EmitterSubscription>()
+
+  useEffect(() => {
+    onClickAwayRef.current = TopViewEventEmitter.addListener(
+      USE_CLICK_AWAY_EVENT_NAME,
+      onClickAway,
+    )
+    return () => {
+      onClickAwayRef.current?.remove?.()
+    }
+  }, [TopViewEventEmitter, onClickAway])
+}

components/date-picker-view/index.en-US.md

@@ -45,4 +45,4 @@ Properties | Descrition | Type | Default | Version
 | filter  | Filter available time	 | `DatePickerFilter` | - | `5.1.0` |
 
 
-In addition, the following attributes of [PickerView](/components/picker-view) are supported: `style` `styles` `itemStyle` `itemHeight` `numberOfLines` `renderMaskTop` `renderMaskBottom`
+In addition, the following properties of [PickerView](/components/picker-view) are supported: `style` `styles` `itemStyle` `itemHeight` `numberOfLines` `renderMaskTop` `renderMaskBottom`

components/date-picker/index.en-US.md

@@ -50,14 +50,14 @@ Properties | Descrition | Type | Default | Version
 | filter  | Filter available time	 | `DatePickerFilter` | - | `5.1.0` |
 
 
-In addition, the following attributes of [Picker](/components/picker) are supported: `onPickerChange` `onVisibleChange` `style` `styles` `itemStyle` `itemHeight` `numberOfLines` `title` `okText` `dismissText` `okButtonProps` `dismissButtonProps` `visible` `children` `renderMaskTop` `renderMaskBottom`
+In addition, the following properties of [Picker](/components/picker) are supported: `onPickerChange` `onVisibleChange` `style` `styles` `itemStyle` `itemHeight` `numberOfLines` `title` `okText` `dismissText` `okButtonProps` `dismissButtonProps` `visible` `children` `renderMaskTop` `renderMaskBottom`
 
 ### Children
-Same as [Picker](/components/picker/#Children), except type `format` is different：
+Same as [Picker](/components/picker#children), except type `format` is different：
 
 Properties | Descrition | Type | Default
 ----|-----|------|------
 | format  | format the selected value |`(value: Date) => date string` | import [Day.js Format](https://day.js.org/docs/en/parse/string-format), precision:`YYYY-MM-DD`,`YYYY-MM-DD HH:mm:ss`|
 
 ### Ref
-Same as `Picker`
+Same as [Picker](/components/picker#ref)

components/date-picker/index.zh-CN.md

@@ -54,11 +54,11 @@ type DatePickerFilter = Partial<
 此外还支持 [Picker](/components/picker-cn) 的以下属性：`onPickerChange` `onVisibleChange` `style` `styles` `itemStyle` `itemHeight` `numberOfLines` `title` `okText` `dismissText` `okButtonProps` `dismissButtonProps` `visible` `children` `renderMaskTop` `renderMaskBottom`
 
 ### Children
-同 [Picker](/components/picker-cn/#Children)，其中`format`类型不同：
+同 [Picker](/components/picker-cn#children)，其中`format`类型不同：
 
 属性 | 说明 | 类型 | 默认值
 ----|-----|------|------
 | format  | 格式化选中的值 |`(value: Date) => date string` | 引用 [Day.js Format](https://day.js.org/docs/en/parse/string-format)，参数对应精度:`YYYY-MM-DD`,`YYYY-MM-DD HH:mm:ss`|
 
 ### Ref
-同 `Picker`。
+同 [Picker](/components/picker-cn#ref)。

components/image-picker/index.en-US.md

@@ -4,3 +4,5 @@ type: Data Entry
 title: DatePickerView
 subtitle: (deprecated)
 ---
+
+Deprecated since `5.1.0`.

components/image-picker/index.zh-CN.md

@@ -4,3 +4,5 @@ type: Data Entry
 title: ImagePicker
 subtitle: 图片选择器(已弃用)
 ---
+
+`5.1.0`开始已弃用。

components/index.tsx

@@ -36,7 +36,6 @@ export { default as Provider } from './provider/index'
 export { default as Radio } from './radio/index'
 export { default as Result } from './result/index'
 export { default as SearchBar } from './search-bar/index'
-export { default as SegmentedControl } from './segmented-control/index'
 export { default as Slider } from './slider/index'
 export { default as Stepper } from './stepper/index'
 export { default as Steps } from './steps/index'
@@ -55,3 +54,7 @@ export { default as WingBlank } from './wing-blank/index'
  * @deprecated
  */
 export class ImagePicker {}
+/**
+ * @deprecated
+ */
+export class SegmentedControl {}