Skip to content

Commit 11aaf01

Browse files
authored
Merge pull request #1608 from sheinsight/feat/popover-animate-prop
feat: 为 Popover 组件新增 animation 属性
2 parents ec61914 + 80f2009 commit 11aaf01

File tree

8 files changed

+81
-2
lines changed

8 files changed

+81
-2
lines changed

docs/api/shineout/popover.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
const api = JSON.parse('[{"title":"Popover","properties":[{"name":"className","tag":{"cn":"自定义类名","en":"Custom class name","default":"","version":""},"required":false,"type":"string"},{"name":"style","tag":{"cn":"自定义样式","en":"Custom style","default":"","version":""},"required":false,"type":"CSSProperties"},{"name":"position","tag":{"cn":"弹出层位置。若不设置,则默认为 auto","en":"The position of pop-up layer. Default auto","default":"","version":""},"required":false,"type":"| \\\"left-top\\\" | \\\"left-bottom\\\" | \\\"right-top\\\" | \\\"right-bottom\\\" | \\\"top-right\\\" | \\\"top-left\\\" | \\\"bottom-right\\\" | \\\"bottom-left\\\" | \\\"left\\\" | \\\"right\\\" | \\\"top\\\" | \\\"bottom\\\" | \\\"auto\\\""},{"name":"priorityDirection","tag":{"cn":"弹出位置优先级, 默认为左右优先, 只在未设置 position 时生效","en":"Popup location priority, default is top and bottom priority, only valid when position is not set, Options: [\\\"vertical\\\", \\\"horizontal\\\", \\\"auto\\\"]","default":"\\\"vertical\\\"","version":""},"required":false,"type":"\\\"auto\\\" | \\\"vertical\\\" | \\\"horizontal\\\""},{"name":"mouseEnterDelay","tag":{"cn":"移入显示延迟(毫秒)","en":"The show delay of mouseenter(ms)","default":"0","version":""},"required":false,"type":"number"},{"name":"mouseLeaveDelay","tag":{"cn":"移除隐藏延迟(毫秒)","en":"The hidden delay of mouseleave (ms)","default":"0","version":""},"required":false,"type":"number"},{"name":"trigger","tag":{"cn":"触发方式","en":"Trigger mode","default":"\\\"hover\\\"","version":""},"required":false,"type":"\\\"click\\\" | \\\"hover\\\""},{"name":"destroy","tag":{"cn":"关闭 Popover 后销毁内容 dom","en":"Delete dom when close","default":"false","version":""},"required":false,"type":"boolean"},{"name":"visible","tag":{"cn":"是否可见(受控)","en":"Is visible (controlled)","default":"","version":""},"required":false,"type":"boolean"},{"name":"onVisibleChange","tag":{"cn":"The event of visible change","en":"显示隐藏改变时事件","default":"","version":""},"required":false,"type":"((open: boolean) => void)"},{"name":"onOpen","tag":{"cn":"Popover 弹出回调事件","en":"Callback event when open","default":"","version":""},"required":false,"type":"(() => void)"},{"name":"onClose","tag":{"cn":"Popover 关闭时回调事件","en":"Callback event when close","default":"","version":""},"required":false,"type":"(() => void)"},{"name":"children","tag":{"cn":"弹出显示内容,如果内容为函数,则参数是主动关闭操作","en":"Pop-up content","default":"index","version":""},"required":false,"type":"ReactNode | ((close: () => void) => ReactNode)"},{"name":"getPopupContainer","tag":{"cn":"自定义 Popover 容器,覆盖默认渲染在 body 下的行为, () => DOMElement","en":"Custom Popover container, override the default behavior which is rendering under the body, () => DOMElement","default":"","version":""},"required":false,"type":"(() => HTMLElement | null)"},{"name":"useTextStyle","tag":{"cn":"使用内置文本样式","en":"Using inner styles","default":"","version":""},"required":false,"type":"boolean"},{"name":"type","tag":{"cn":"Type of popover","en":"类型","default":"","version":""},"required":false,"type":"\\\"info\\\" | \\\"success\\\" | \\\"warning\\\" | \\\"danger\\\" | \\\"error\\\""},{"name":"border","tag":{"cn":"弹出层边框颜色(含箭头)","en":"The color of pop-up border(with arrows)","default":"","version":""},"required":false,"type":"string"},{"name":"background","tag":{"cn":"弹出层背景色(含箭头)","en":"Pop-up background-color(with arrows)","default":"","version":""},"required":false,"type":"string"},{"name":"zIndex","tag":{"cn":"Popover 层级","en":"Z-index of popover","default":"1060","version":""},"required":false,"type":"number"},{"name":"showArrow","tag":{"cn":"是否显示箭头","en":"Show arrow","default":"true","version":""},"required":false,"type":"boolean"},{"name":"defaultVisible","tag":{"cn":"默认是否显示","en":"Whether to display by default","default":"","version":""},"required":false,"type":"boolean"},{"name":"clickToCancelDelay","tag":{"cn":"MouseEnterDelay 内点击元素后取消弹出","en":"Cancel the popup after clicking the element in mouseEnterDelay","default":"false","version":""},"required":false,"type":"boolean"},{"name":"scrollDismiss","tag":{"cn":"滚动来关闭气泡框,如果需要指定滚动元素,则通过函数返回","en":"Scroll to dismiss, return el to order scroller","default":"false","version":""},"required":false,"type":"boolean | (() => HTMLElement | null)"},{"name":"arrowClass","tag":{"cn":"箭头的 class 名称","en":"The class name of the arrow","default":"","version":""},"required":false,"type":"string"},{"name":"offset","tag":{"cn":"弹出层宽度|高度的附加值,期望弹出层的宽度|高度增加或减少的值,可以是负数;举例:[4, 0] 表示宽度增加 4px,高度不变","en":"The offset value of the width|height of the pop-up layer, expect the width|height of the pop-up layer to increase or decrease","default":"[0,0]","version":"3.6.0"},"required":false,"type":"[number, number]"},{"name":"popupGap","tag":{"cn":"弹出层与触发元素的间距","en":"The gap between the pop-up layer and the trigger element","default":"0","version":"3.6.0"},"required":false,"type":"number"},{"name":"disabled","tag":{"cn":"是否禁用弹出","en":"Whether to disable pop-up","default":"","version":"3.7.0"},"required":false,"type":"boolean"}],"cn":"","en":"","sort":"1"},{"title":"Popover.Confirm","properties":[{"name":"type","tag":{"cn":"类型同 [Alert](/components/Alert) type 属性","en":"same with [Alert](/components/Alert) type","default":"\\\"confirmwarning\\\"","version":""},"required":false,"type":"\\\"success\\\" | \\\"info\\\" | \\\"warning\\\" | \\\"danger\\\" | \\\"confirmwarning\\\" | \\\"error\\\""},{"name":"children","tag":{"cn":"弹出显示内容","en":"Pop-up content.","default":"","version":""},"required":false,"type":"ReactNode"},{"name":"text","tag":{"cn":"按钮文字","en":"button text","default":"{ ok: \\\"Ok\\\", cancel: \\\"Cancel\\\" }","version":""},"required":false,"type":"{ ok?: string; cancel?: string; }"},{"name":"onOk","tag":{"cn":"点击确定按钮时触发事件,返回 Promise 时,会在 Promise resolve 后关闭 Tooltip","en":"ok button click callback, will close tooltip while returned promise resolve","default":"","version":""},"required":false,"type":"(() => void | Promise<any>)"},{"name":"onCancel","tag":{"cn":"点击取消按钮时触发事件,返回 Promise 时,会在 Promise resolve 后关闭 Tooltip","en":"cancel button click callback, will close tooltip while returned promise resolve","default":"","version":""},"required":false,"type":"(() => void | Promise<any>)"},{"name":"okType","tag":{"cn":"确认按钮的类型,与 [Button](/components/Button) 类型相同","en":"ok button\\\"s type, same with [Button](/components/Button) type","default":"\\\"danger\\\"","version":""},"required":false,"type":"| \\\"default\\\" | \\\"primary\\\" | \\\"secondary\\\" | \\\"danger\\\" | \\\"warning\\\" | \\\"success\\\" | \\\"link\\\""},{"name":"icon","tag":{"cn":"自定义Icon","en":"custom icon","default":"","version":""},"required":false,"type":"ReactNode"},{"name":"title","tag":{"cn":"标题","en":"title","default":"","version":""},"required":false,"type":"ReactNode"}],"cn":"基本API 和 Popover 一致,特定API如下","en":"The basic API is consistent with Popover, and the specific API is as follows","sort":"2"}]');
1+
const api = JSON.parse('[{"title":"Popover","properties":[{"name":"className","tag":{"cn":"自定义类名","en":"Custom class name","default":"","version":""},"required":false,"type":"string"},{"name":"style","tag":{"cn":"自定义样式","en":"Custom style","default":"","version":""},"required":false,"type":"CSSProperties"},{"name":"position","tag":{"cn":"弹出层位置。若不设置,则默认为 auto","en":"The position of pop-up layer. Default auto","default":"","version":""},"required":false,"type":"| \\\"left-top\\\" | \\\"left-bottom\\\" | \\\"right-top\\\" | \\\"right-bottom\\\" | \\\"top-right\\\" | \\\"top-left\\\" | \\\"bottom-right\\\" | \\\"bottom-left\\\" | \\\"left\\\" | \\\"right\\\" | \\\"top\\\" | \\\"bottom\\\" | \\\"auto\\\""},{"name":"priorityDirection","tag":{"cn":"弹出位置优先级, 默认为左右优先, 只在未设置 position 时生效","en":"Popup location priority, default is top and bottom priority, only valid when position is not set, Options: [\\\"vertical\\\", \\\"horizontal\\\", \\\"auto\\\"]","default":"\\\"vertical\\\"","version":""},"required":false,"type":"\\\"auto\\\" | \\\"vertical\\\" | \\\"horizontal\\\""},{"name":"mouseEnterDelay","tag":{"cn":"移入显示延迟(毫秒)","en":"The show delay of mouseenter(ms)","default":"0","version":""},"required":false,"type":"number"},{"name":"mouseLeaveDelay","tag":{"cn":"移除隐藏延迟(毫秒)","en":"The hidden delay of mouseleave (ms)","default":"0","version":""},"required":false,"type":"number"},{"name":"trigger","tag":{"cn":"触发方式","en":"Trigger mode","default":"\\\"hover\\\"","version":""},"required":false,"type":"\\\"click\\\" | \\\"hover\\\""},{"name":"destroy","tag":{"cn":"关闭 Popover 后销毁内容 dom","en":"Delete dom when close","default":"false","version":""},"required":false,"type":"boolean"},{"name":"visible","tag":{"cn":"是否可见(受控)","en":"Is visible (controlled)","default":"","version":""},"required":false,"type":"boolean"},{"name":"onVisibleChange","tag":{"cn":"The event of visible change","en":"显示隐藏改变时事件","default":"","version":""},"required":false,"type":"((open: boolean) => void)"},{"name":"onOpen","tag":{"cn":"Popover 弹出回调事件","en":"Callback event when open","default":"","version":""},"required":false,"type":"(() => void)"},{"name":"onClose","tag":{"cn":"Popover 关闭时回调事件","en":"Callback event when close","default":"","version":""},"required":false,"type":"(() => void)"},{"name":"children","tag":{"cn":"弹出显示内容,如果内容为函数,则参数是主动关闭操作","en":"Pop-up content","default":"index","version":""},"required":false,"type":"ReactNode | ((close: () => void) => ReactNode)"},{"name":"getPopupContainer","tag":{"cn":"自定义 Popover 容器,覆盖默认渲染在 body 下的行为, () => DOMElement","en":"Custom Popover container, override the default behavior which is rendering under the body, () => DOMElement","default":"","version":""},"required":false,"type":"(() => HTMLElement | null)"},{"name":"useTextStyle","tag":{"cn":"使用内置文本样式","en":"Using inner styles","default":"","version":""},"required":false,"type":"boolean"},{"name":"type","tag":{"cn":"Type of popover","en":"类型","default":"","version":""},"required":false,"type":"\\\"info\\\" | \\\"success\\\" | \\\"warning\\\" | \\\"danger\\\" | \\\"error\\\""},{"name":"border","tag":{"cn":"弹出层边框颜色(含箭头)","en":"The color of pop-up border(with arrows)","default":"","version":""},"required":false,"type":"string"},{"name":"background","tag":{"cn":"弹出层背景色(含箭头)","en":"Pop-up background-color(with arrows)","default":"","version":""},"required":false,"type":"string"},{"name":"zIndex","tag":{"cn":"Popover 层级","en":"Z-index of popover","default":"1060","version":""},"required":false,"type":"number"},{"name":"showArrow","tag":{"cn":"是否显示箭头","en":"Show arrow","default":"true","version":""},"required":false,"type":"boolean"},{"name":"defaultVisible","tag":{"cn":"默认是否显示","en":"Whether to display by default","default":"","version":""},"required":false,"type":"boolean"},{"name":"clickToCancelDelay","tag":{"cn":"MouseEnterDelay 内点击元素后取消弹出","en":"Cancel the popup after clicking the element in mouseEnterDelay","default":"false","version":""},"required":false,"type":"boolean"},{"name":"scrollDismiss","tag":{"cn":"滚动来关闭气泡框,如果需要指定滚动元素,则通过函数返回","en":"Scroll to dismiss, return el to order scroller","default":"false","version":""},"required":false,"type":"boolean | (() => HTMLElement | null)"},{"name":"arrowClass","tag":{"cn":"箭头的 class 名称","en":"The class name of the arrow","default":"","version":""},"required":false,"type":"string"},{"name":"offset","tag":{"cn":"弹出层宽度|高度的附加值,期望弹出层的宽度|高度增加或减少的值,可以是负数;举例:[4, 0] 表示宽度增加 4px,高度不变","en":"The offset value of the width|height of the pop-up layer, expect the width|height of the pop-up layer to increase or decrease","default":"[0,0]","version":"3.6.0"},"required":false,"type":"[number, number]"},{"name":"popupGap","tag":{"cn":"弹出层与触发元素的间距","en":"The gap between the pop-up layer and the trigger element","default":"0","version":"3.6.0"},"required":false,"type":"number"},{"name":"disabled","tag":{"cn":"是否禁用弹出","en":"Whether to disable pop-up","default":"","version":"3.7.0"},"required":false,"type":"boolean"},{"name":"animation","tag":{"cn":"是否开启动画效果","en":"Whether to enable animation","default":"true","version":"3.9.9"},"required":false,"type":"boolean"}],"cn":"","en":"","sort":"1"},{"title":"Popover.Confirm","properties":[{"name":"type","tag":{"cn":"类型同 [Alert](/components/Alert) type 属性","en":"same with [Alert](/components/Alert) type","default":"\\\"confirmwarning\\\"","version":""},"required":false,"type":"\\\"success\\\" | \\\"info\\\" | \\\"warning\\\" | \\\"danger\\\" | \\\"confirmwarning\\\" | \\\"error\\\""},{"name":"children","tag":{"cn":"弹出显示内容","en":"Pop-up content.","default":"","version":""},"required":false,"type":"ReactNode"},{"name":"text","tag":{"cn":"按钮文字","en":"button text","default":"{ ok: \\\"Ok\\\", cancel: \\\"Cancel\\\" }","version":""},"required":false,"type":"{ ok?: string; cancel?: string; }"},{"name":"onOk","tag":{"cn":"点击确定按钮时触发事件,返回 Promise 时,会在 Promise resolve 后关闭 Tooltip","en":"ok button click callback, will close tooltip while returned promise resolve","default":"","version":""},"required":false,"type":"(() => void | Promise<any>)"},{"name":"onCancel","tag":{"cn":"点击取消按钮时触发事件,返回 Promise 时,会在 Promise resolve 后关闭 Tooltip","en":"cancel button click callback, will close tooltip while returned promise resolve","default":"","version":""},"required":false,"type":"(() => void | Promise<any>)"},{"name":"okType","tag":{"cn":"确认按钮的类型,与 [Button](/components/Button) 类型相同","en":"ok button\\\"s type, same with [Button](/components/Button) type","default":"\\\"danger\\\"","version":""},"required":false,"type":"| \\\"default\\\" | \\\"primary\\\" | \\\"secondary\\\" | \\\"danger\\\" | \\\"warning\\\" | \\\"success\\\" | \\\"link\\\""},{"name":"icon","tag":{"cn":"自定义Icon","en":"custom icon","default":"","version":""},"required":false,"type":"ReactNode"},{"name":"title","tag":{"cn":"标题","en":"title","default":"","version":""},"required":false,"type":"ReactNode"}],"cn":"基本API 和 Popover 一致,特定API如下","en":"The basic API is consistent with Popover, and the specific API is as follows","sort":"2"}]');
22
export default api;

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sheinx",
33
"private": true,
4-
"version": "3.9.9-beta.1",
4+
"version": "3.9.9-beta.2",
55
"description": "A react library developed with sheinx",
66
"module": "dist/index.js",
77
"types": "dist/index.d.ts",

packages/base/src/config/index.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,19 @@ type TooltipConfig = {
1717
persistent?: boolean;
1818
}
1919

20+
/**
21+
* @en Global configuration for Popover component
22+
* @cn Popover组件的全局配置
23+
* @version 3.9.9
24+
*/
25+
export type PopoverConfig = {
26+
/**
27+
* @en Global default animation setting for Popover component
28+
* @cn Popover组件的全局默认动画设置
29+
*/
30+
animation?: boolean;
31+
}
32+
2033
/**
2134
* @en Global configuration for Empty component
2235
* @cn Empty组件的全局配置
@@ -42,6 +55,7 @@ export interface ConfigOption {
4255
trim?: boolean;
4356
spin?: SpinConfig;
4457
tooltip?: TooltipConfig;
58+
popover?: PopoverConfig;
4559
/**
4660
* @en Global configuration for Empty component
4761
* @cn Empty组件的全局配置
@@ -61,6 +75,7 @@ export const defaultConfig: ConfigOption = {
6175
trim: undefined,
6276
spin: 'ring',
6377
tooltip: undefined,
78+
popover: {},
6479
empty: {},
6580
direction: 'ltr',
6681
popupContainer: null,

packages/base/src/popover/popover.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ const Popover = (props: PopoverProps) => {
2626

2727
const config = useConfig();
2828

29+
// Use global config animation if props.animation is not explicitly set
30+
const animation = props.animation ?? config.popover?.animation ?? true;
31+
2932
const popoverStyle = jssStyle?.popover?.();
3033

3134
const render = useRender();
@@ -181,6 +184,7 @@ const Popover = (props: PopoverProps) => {
181184
popoverStyle?.wrapper,
182185
open && popoverStyle?.wrapperOpen,
183186
!showArrow && popoverStyle?.hideArrow,
187+
animation === false && popoverStyle?.wrapperNoAnimation,
184188
)}
185189
style={containerStyle}
186190
{...util.getDataAttribute({ position: props.adjust ? positionState : position, type })}

packages/base/src/popover/popover.type.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export interface PopoverClasses {
1111
*/
1212
wrapper: string;
1313
wrapperOpen: string;
14+
wrapperNoAnimation: string;
1415
content: string;
1516
arrow: string;
1617
hideArrow: string;
@@ -198,6 +199,14 @@ export interface PopoverProps extends Pick<CommonType, 'className' | 'style'> {
198199
*/
199200
disabled?: boolean;
200201

202+
/**
203+
* @en Whether to enable animation
204+
* @cn 是否开启动画效果
205+
* @default true
206+
* @version 3.9.9
207+
*/
208+
animation?: boolean;
209+
201210
/**
202211
* @private 边界元素,内部使用
203212
*/

packages/shineout-style/src/popover/popover.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,11 @@ const popoverStyle: JsStyles<PopoverClassType> = {
191191
animation: '$fadeIn 200ms ease, $moveRightBottom 200ms cubic-bezier(0.22, 0.61, 0.36, 1);',
192192
},
193193
},
194+
wrapperNoAnimation: {
195+
'&[data-soui-position]': {
196+
animation: 'none',
197+
}
198+
},
194199
arrow: {},
195200
hideArrow: {},
196201
content: {

packages/shineout/src/popover/__doc__/changelog.cn.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 3.9.9-beta.2
2+
2026-01-27
3+
### 🆕 Feature
4+
- `Popover` 新增全局配置项 `animation`,用于配置是否启用弹出动画效果 ([#1607](https://github.com/sheinsight/shineout-next/pull/1607))
5+
6+
17
## 3.8.4-beta.7
28
2025-09-25
39

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/**
2+
* cn - 动画
3+
* -- 设置 `animation` 为 false,关闭动画效果。也可以通过 `setConfig({ popover: { animation: false } })` 全局配置所有 Popover 的动画效果
4+
* en - Animation
5+
* -- Set `animation` to false to disable animation. You can also use `setConfig({ popover: { animation: false } })` to globally configure animation for all Popovers
6+
*/
7+
import React from 'react';
8+
import { Button, Popover, Switch } from 'shineout';
9+
10+
export default () => {
11+
const [animation, setAnimation] = React.useState(true);
12+
return (
13+
<>
14+
<div style={{ marginBottom: 24 }}>
15+
<Switch value={animation} onChange={setAnimation} />
16+
<span style={{ marginLeft: 8 }}>Enable Animation</span>
17+
</div>
18+
<div style={{ display: 'flex', gap: 16 }}>
19+
<Button mode='outline'>
20+
Hover me (controlled)
21+
<Popover animation={animation}>
22+
This popover's animation is controlled by the switch above.
23+
</Popover>
24+
</Button>
25+
<Button mode='outline'>
26+
Always with animation
27+
<Popover animation={true}>
28+
This popover always has animation enabled.
29+
</Popover>
30+
</Button>
31+
<Button mode='outline'>
32+
Always without animation
33+
<Popover animation={false}>
34+
This popover always has animation disabled.
35+
</Popover>
36+
</Button>
37+
</div>
38+
</>
39+
);
40+
};

0 commit comments

Comments
 (0)