diff --git a/docs/balloon/index.en-us.md b/docs/balloon/index.en-us.md index b2a9bb4d53..d326683900 100644 --- a/docs/balloon/index.en-us.md +++ b/docs/balloon/index.en-us.md @@ -49,6 +49,7 @@ | popupStyle | custom style of popup | Object | {} | | popupClassName | custom className of popup | String | '' | | popupProps | props of popup | Object | {} | +| followTrigger | follow Trigger or not | Boolean | - | | id | id of popup. only when you set value, balloon will support accessibility | String | - | ### Balloon.Tooltip diff --git a/docs/balloon/index.md b/docs/balloon/index.md index 1f8a6de5a2..c3202e954d 100644 --- a/docs/balloon/index.md +++ b/docs/balloon/index.md @@ -52,6 +52,7 @@ | popupStyle | 弹层组件style，透传给Popup | Object | {} | | popupClassName | 弹层组件className，透传给Popup | String | '' | | popupProps | 弹层组件属性，透传给Popup | Object | {} | +| followTrigger | 是否跟随滚动 | Boolean | - | | id | 弹层id, 传入值才会支持无障碍 | String | - | ### Balloon.Tooltip @@ -67,6 +68,7 @@ | popupProps | 弹层组件属性，透传给Popup | Object | - | | pure | 是否pure render | Boolean | - | | popupContainer | 指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。 | String/Function | - | +| followTrigger | 是否跟随滚动 | Boolean | - | | id | 弹层id, 传入值才会支持无障碍 | String | - | ## 已知问题 diff --git a/docs/cascader-select/index.en-us.md b/docs/cascader-select/index.en-us.md index 0314dbaf85..3655ad654f 100644 --- a/docs/cascader-select/index.en-us.md +++ b/docs/cascader-select/index.en-us.md @@ -55,6 +55,7 @@ CascaderSelect consists of Select and Cascader. Cascader are hidden in a pop up | popupClassName | className of dropdown | String | - | | popupContainer | container of dropdown | String/Function | - | | popupProps | properties of Popup | Object | {} | +| followTrigger | follow Trigger or not | Boolean | - | @@ -87,7 +88,7 @@ const dataSource = [{ The custom attribute of item in the array is also transparently passed to the data parameter of the onChange function. - + ## ARIA and KeyBoard @@ -100,8 +101,8 @@ The custom attribute of item in the array is also transparently passed to the da | Enter | Open the directory or select current item | | Esc | Close the directory | | SPACE | Select current item | - - + + diff --git a/docs/cascader-select/index.md b/docs/cascader-select/index.md index 1546efbf58..15f2b38868 100644 --- a/docs/cascader-select/index.md +++ b/docs/cascader-select/index.md @@ -57,6 +57,7 @@ | popupClassName | 下拉框样式自定义类名 | String | - | | popupContainer | 下拉框挂载的容器节点 | String/Function | - | | popupProps | 透传到 Popup 的属性对象 | Object | {} | +| followTrigger | 是否跟随滚动 | Boolean | - | diff --git a/docs/cascader/index.md b/docs/cascader/index.md index e0a88950ba..ef462f1c7d 100644 --- a/docs/cascader/index.md +++ b/docs/cascader/index.md @@ -76,8 +76,8 @@ const dataSource = [{ | 按键 | 说明 | | :---------- | :--------------------- | -| Left Arrow | 获取同级当前项前一项焦点 | -| Right Arrow | 获取同级当前项后一项焦点 | -| Tab | 进入当前项的子元素，并获取第一个子元素为焦点 | +| Left Arrow | 获取同级当前项前一项焦点 | +| Right Arrow | 获取同级当前项后一项焦点 | +| Tab | 进入当前项的子元素，并获取第一个子元素为焦点 | | Esc | 返回当前项的父元素并获取焦点 | | SPACE | 选择当前项 | diff --git a/docs/date-picker/index.en-us.md b/docs/date-picker/index.en-us.md index 3a0e218a7b..40b792ecf7 100644 --- a/docs/date-picker/index.en-us.md +++ b/docs/date-picker/index.en-us.md @@ -42,6 +42,7 @@ DatePicker are used to select a single date for an input. | popupStyle | Custom style of popup | Object | - | | popupClassName | Custom className of popup | String | - | | popupProps | Props of popup | Object | - | +| followTrigger | follow Trigger or not | Boolean | - | | dateInputAriaLabel | Date input aria-label attr | String | - | ### DatePicker.RangePicker @@ -82,7 +83,7 @@ DatePicker are used to select a single date for an input. ## ARIA and KeyBoard When the `Date Picker` is focused, press `enter` will open popup to input date or time. - + | 按键 | 说明 | | :---------- | :------------------------------ | | number key | Need to manual input the date, the specified date format | diff --git a/docs/date-picker/index.md b/docs/date-picker/index.md index 0ec402ef86..9a24211a0d 100644 --- a/docs/date-picker/index.md +++ b/docs/date-picker/index.md @@ -116,6 +116,7 @@ DatePicker 默认情况下接收和返回的数据类型都是 Moment 对象。 | popupStyle | 弹层自定义样式 | Object | - | | popupClassName | 弹层自定义样式类 | String | - | | popupProps | 弹层其他属性 | Object | - | +| followTrigger | 是否跟随滚动 | Boolean | - | | inputProps | 输入框其他属性 | Object | - | | dateCellRender | 自定义日期渲染函数

**签名**:
Function(value: Object) => ReactNode
**参数**:
_value_: {Object} 日期值（moment对象）
**返回值**:
{ReactNode} null
| Function | - | | monthCellRender | 自定义月份渲染函数

**签名**:
Function(calendarDate: Object) => ReactNode
**参数**:
_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象
**返回值**:
{ReactNode} null
| Function | - | @@ -148,6 +149,7 @@ DatePicker 默认情况下接收和返回的数据类型都是 Moment 对象。 | popupStyle | 弹层自定义样式 | Object | - | | popupClassName | 弹层自定义样式类 | String | - | | popupProps | 弹层其他属性 | Object | - | +| followTrigger | 是否跟随滚动 | Boolean | - | | inputProps | 输入框其他属性 | Object | - | | monthCellRender | 自定义月份渲染函数

**签名**:
Function(calendarDate: Object) => ReactNode
**参数**:
_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象
**返回值**:
{ReactNode} null
| Function | - | | dateInputAriaLabel | 日期输入框的 aria-label 属性 | String | - | @@ -180,6 +182,7 @@ DatePicker 默认情况下接收和返回的数据类型都是 Moment 对象。 | popupStyle | 弹层自定义样式 | Object | - | | | | popupClassName | 弹层自定义样式类 | String | - | | | | popupProps | 弹层其他属性 | Object | - | | | +| followTrigger | 是否跟随滚动 | Boolean | - | | | | inputProps | 输入框其他属性 | Object | - | | | | dateCellRender | 自定义日期单元格渲染

**签名**:
Function() => void | Function | - | | | | startDateInputAriaLabel | 开始日期输入框的 aria-label 属性 | String | - | | | @@ -212,6 +215,7 @@ DatePicker 默认情况下接收和返回的数据类型都是 Moment 对象。 | popupStyle | 弹层自定义样式 | Object | - | | popupClassName | 弹层自定义样式类 | String | - | | popupProps | 弹层其他属性 | Object | - | +| followTrigger | 是否跟随滚动 | Boolean | - | | inputProps | 输入框其他属性 | Object | - | | dateInputAriaLabel | 日期输入框的 aria-label 属性 | String | - | diff --git a/docs/menu-button/index.en-us.md b/docs/menu-button/index.en-us.md index fbb04bbc8b..1d753b7725 100644 --- a/docs/menu-button/index.en-us.md +++ b/docs/menu-button/index.en-us.md @@ -27,6 +27,7 @@ MenuButton is a button which, when clicked or pressed, will show a context menu. | popupStyle | Custom style of popup | Object | - | | popupClassName | Custom className of popup | String | - | | popupProps | Props of popup | Object | - | +| followTrigger | follow Trigger or not | Boolean | - | | defaultSelectedKeys | Default selected items, as Menu | Array | \[] | | selectedKeys | Selected items, as Menu | Array | - | | selectMode | Select mode of menu, see Menu | String | - | diff --git a/docs/menu-button/index.md b/docs/menu-button/index.md index 647112f76b..1c651db46b 100644 --- a/docs/menu-button/index.md +++ b/docs/menu-button/index.md @@ -28,6 +28,7 @@ | popupStyle | 弹层自定义样式 | Object | - | | popupClassName | 弹层自定义样式类 | String | - | | popupProps | 弹层属性透传 | Object | - | +| followTrigger | 是否跟随滚动 | Boolean | - | | defaultSelectedKeys | 默认激活的菜单项（用法同 Menu 非受控） | Array | \[] | | selectedKeys | 激活的菜单项（用法同 Menu 受控） | Array | - | | selectMode | 菜单的选择模式，同 Menu | String | - | diff --git a/docs/search/index.en-us.md b/docs/search/index.en-us.md index 67f18acfb8..075637bc52 100644 --- a/docs/search/index.en-us.md +++ b/docs/search/index.en-us.md @@ -38,6 +38,7 @@ search data in forms or pages. | filterProps | filter props | Object | - | | buttonProps | props for Button | Object | {} | | popupContent | custom popup menu | ReactNode | - | +| followTrigger | follow Trigger or not | Boolean | - | | visible | popupContent is displayed | Boolean | - | | hasClear | show clear text button | Boolean | false | | hasIcon | show find button | Boolean | true | diff --git a/docs/search/index.md b/docs/search/index.md index f57888803e..45ffd9539d 100644 --- a/docs/search/index.md +++ b/docs/search/index.md @@ -39,6 +39,7 @@ | filterProps | 选择器的props | Object | - | | buttonProps | 按钮的额外属性 | Object | {} | | popupContent | 自定义渲染的的下拉框 | ReactNode | - | +| followTrigger | 是否跟随滚动 | Boolean | - | | visible | 自定义渲染的的下拉框 | Boolean | - | | hasClear | 是否显示清除按钮 | Boolean | false | | hasIcon | 是否显示搜索按钮 | Boolean | true | diff --git a/docs/split-button/index.en-us.md b/docs/split-button/index.en-us.md index 56990a2deb..0230e64ba3 100644 --- a/docs/split-button/index.en-us.md +++ b/docs/split-button/index.en-us.md @@ -37,5 +37,6 @@ SplitButton is kind of GroupButton, only the icon part could be trigerred by use | popupStyle | Custom style of popup | Object | - | | popupClassName | Custom className of popup | String | - | | popupProps | Props of popup | Object | {} | +| followTrigger | follow Trigger or not | Boolean | - | | menuProps | Props of Menu | Object | {} | | leftButtonProps | Props of left button | Object | {} | diff --git a/docs/split-button/index.md b/docs/split-button/index.md index c047df838d..61be3b362d 100644 --- a/docs/split-button/index.md +++ b/docs/split-button/index.md @@ -38,5 +38,6 @@ SplitButton 同样由 Button 和 Menu 组成，其在触发区域上可以分为 | popupStyle | 弹层自定义样式 | Object | - | | popupClassName | 弹层自定义样式类 | String | - | | popupProps | 透传给弹层的属性 | Object | - | +| followTrigger | 是否跟随滚动 | Boolean | - | | menuProps | 透传给 Menu 的属性 | Object | {} | | leftButtonProps | 透传给 左侧按钮 的属性 | Object | {} | diff --git a/docs/time-picker/index.en-us.md b/docs/time-picker/index.en-us.md index a27ad82d68..58bb3a077a 100644 --- a/docs/time-picker/index.en-us.md +++ b/docs/time-picker/index.en-us.md @@ -50,6 +50,7 @@ By default, TimePicker using moment instance as input value, which is the sugges | popupStyle | Custom style of popup | Object | - | | popupClassName | Custom className of popup | String | - | | popupProps | Props of popup | Object | - | +| followTrigger | follow Trigger or not | Boolean | - | | disabled | Disable the picker | Boolean | false | | onChange | Callback when date changes

**signature**:
Function(value: Object/String) => void
**paramter**:
_value_: {Object/String} date value | Function | func.noop | diff --git a/docs/time-picker/index.md b/docs/time-picker/index.md index 195d7500b3..0b9dd3d90e 100644 --- a/docs/time-picker/index.md +++ b/docs/time-picker/index.md @@ -50,6 +50,7 @@ | popupStyle | 弹层自定义样式 | Object | - | | popupClassName | 弹层自定义样式类 | String | - | | popupProps | 弹层属性 | Object | - | +| followTrigger | 是否跟随滚动 | Boolean | - | | disabled | 是否禁用 | Boolean | false | | onChange | 时间值改变时的回调

**签名**:
Function(value: Object/String) => void
**参数**:
_value_: {Object/String} 时间对象或时间字符串 | Function | func.noop | diff --git a/docs/tree-select/index.en-us.md b/docs/tree-select/index.en-us.md index a8e4c40084..cc5ce5946c 100644 --- a/docs/tree-select/index.en-us.md +++ b/docs/tree-select/index.en-us.md @@ -50,7 +50,7 @@ Like Select, TreeSelect can be used when the selected data structure is a tree s | popupClassName | class name of dropdown | String | - | | popupContainer | container of dropdown | String/Function | - | | popupProps | properties of Popup | Object | - | - +| followTrigger | follow Trigger or not | Boolean | - | ### TreeSelect.Node diff --git a/docs/tree-select/index.md b/docs/tree-select/index.md index 89343dc3a9..08b569131f 100644 --- a/docs/tree-select/index.md +++ b/docs/tree-select/index.md @@ -51,6 +51,7 @@ | popupClassName | 下拉框样式自定义类名 | String | - | | popupContainer | 下拉框挂载的容器节点 | String/Function | - | | popupProps | 透传到 Popup 的属性对象 | Object | - | +| followTrigger | 是否跟随滚动 | Boolean | - | diff --git a/src/balloon/balloon.jsx b/src/balloon/balloon.jsx index c833ffc340..c1ea599b02 100644 --- a/src/balloon/balloon.jsx +++ b/src/balloon/balloon.jsx @@ -154,6 +154,10 @@ export default class Balloon extends React.Component { * 弹层组件属性，透传给Popup */ popupProps: PropTypes.object, + /** + * 是否跟随滚动 + */ + followTrigger: PropTypes.bool, /** * 弹层id, 传入值才会支持无障碍 */ @@ -290,6 +294,7 @@ export default class Balloon extends React.Component { popupStyle, popupClassName, popupProps, + followTrigger, rtl, ...others } = this.props; @@ -352,6 +357,7 @@ export default class Balloon extends React.Component { return ( trigger.parentNode; + container = trigger => (trigger && trigger.parentNode) || trigger; newWrapperStyle.position = 'relative'; } diff --git a/src/search/Search.jsx b/src/search/Search.jsx index daf99f1f6f..37e8e098a2 100644 --- a/src/search/Search.jsx +++ b/src/search/Search.jsx @@ -101,6 +101,10 @@ class Search extends React.Component { * 自定义渲染的的下拉框 */ popupContent: PropTypes.node, + /** + * 是否跟随滚动 + */ + followTrigger: PropTypes.bool, /** * 自定义渲染的的下拉框 */ @@ -216,6 +220,7 @@ class Search extends React.Component { filterProps, buttonProps, popupContent, + followTrigger, hasClear, visible, locale, @@ -283,6 +288,7 @@ class Search extends React.Component { filterSelect = (