feat(popup): 添加自定义顶部

Author: xiaoyatong

src/packages/popup/doc.en-US.md

@@ -91,6 +91,7 @@ import { Popup } from '@nutui/nutui-react'
 | minHeight | Minimum height of the popup | `string` | `26%` |
 | left | The left of title | `ReactNode` | `-` |
 | title | The center of title | `ReactNode` | `-` |
+| top | The top of popup | `ReactNode` | `-` |
 | description | The subtitle/description | `ReactNode` | `-` |
 | destroyOnClose | Whether to close after the component is destroyed | `boolean` | `false` |
 | round | Whether to show rounded corners | `boolean` | `false` |

src/packages/popup/doc.md

@@ -91,6 +91,7 @@ import { Popup } from '@nutui/nutui-react'
 | minHeight | 设置最小高度 | `string` | `26%` |
 | left | 标题左侧部分 | `ReactNode` | `-` |
 | title | 标题中间部分 | `ReactNode` | `-` |
+| top | 顶部占位 | `ReactNode` | `-` |
 | description | 子标题/描述部分 | `ReactNode` | `-` |
 | destroyOnClose | 组件不可见时，卸载内容 | `boolean` | `false` |
 | round | 是否显示圆角 | `boolean` | `false` |

src/packages/popup/doc.taro.md

@@ -101,6 +101,7 @@ import { Popup } from '@nutui/nutui-react-taro'
 | minHeight | 设置最小高度 | `string` | `26%` |
 | left | 标题左侧部分 | `ReactNode` | `-` |
 | title | 标题中间部分 | `ReactNode` | `-` |
+| top | 頂部佔位 | `ReactNode` | `-` |
 | description | 子标题/描述部分 | `ReactNode` | `-` |
 | destroyOnClose | 组件不可见时，卸载内容 | `boolean` | `false` |
 | round | 是否显示圆角 | `boolean` | `false` |

src/packages/popup/popup.taro.tsx

@@ -69,6 +69,7 @@ export const Popup: FunctionComponent<
     closeIcon,
     left,
     title,
+    top,
     description,
     style,
     transition,
@@ -314,6 +315,7 @@ export const Popup: FunctionComponent<
         onTouchEnd={handleTouchEnd}
         onTouchCancel={handleTouchEnd}
       >
+        {top}
         {renderTitle()}
         {showChildren ? children : null}
       </View>

src/packages/popup/popup.tsx

@@ -66,6 +66,7 @@ export const Popup: FunctionComponent<
     closeIcon,
     left,
     title,
+    top,
     description,
     style,
     transition,
@@ -290,6 +291,7 @@ export const Popup: FunctionComponent<
           onTouchEnd={handleTouchEnd}
           onTouchCancel={handleTouchEnd}
         >
+          {top}
           {renderTitle()}
           {showChildren && children}
         </div>

src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md

@@ -98,6 +98,7 @@ If your project uses these components, please read the documentation carefully a
 
 - Added the resizable property for scrolling up and down when the bottom popup is active.
 - Added the minHeight property for setting the minimum height, which can be used with resizable.
+- Added a new attribute top to display user-defined content above the title.
 - Added the onTouchStart, onTouchMove, and onTouchEnd methods.
 
 ### Layout

src/sites/sites-react/doc/docs/react/migrate-from-v2.md

@@ -98,6 +98,7 @@ plugins: [
 
 - 新增属性 resizable，用于底部弹出时，可上下滑动
 - 新增属性 minHeight，用于设置最小高度，可搭配 resizable 使用
+- 新增属性 top，用于在title上侧展示用户自定义内容
 - 新增 onTouchStart、onTouchMove、onTouchEnd 方法
 
 ### 布局组件

src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md

@@ -98,6 +98,7 @@ If your project uses these components, please read the documentation carefully a
 
 - Added the resizable property for scrolling up and down when the bottom popup is active.
 - Added the minHeight property for setting the minimum height, which can be used with resizable.
+- Added a new attribute top to display user-defined content above the title.
 - Added the onTouchStart, onTouchMove, and onTouchEnd methods.
 
 ### Layout

src/sites/sites-react/doc/docs/taro/migrate-from-v2.md

@@ -98,6 +98,7 @@ plugins: [
 
 - 新增属性 resizable，用于底部弹出时，可上下滑动
 - 新增属性 minHeight，用于设置最小高度，可搭配 resizable 使用
+- 新增属性 top，用于在title上侧展示用户自定义内容
 - 新增 onTouchStart、onTouchMove、onTouchEnd 方法
 
 ### 布局组件

src/types/spec/popup/base.ts

@@ -17,6 +17,7 @@ export interface BasePopup extends BaseProps, BaseOverlay {
   closeIcon: ReactNode
   left?: ReactNode
   title?: ReactNode
+  top?: ReactNode
   description?: ReactNode
   destroyOnClose: boolean
   overlay: boolean