From 7396948c96c29e840514797ef7fdb8f6b5328967 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 25 Aug 2018 23:41:30 +0800 Subject: [PATCH] support controlled open for Select, close #10482 --- .../__tests__/__snapshots__/demo.test.js.snap | 61 +++++++++++++++++-- components/select/__tests__/index.test.js | 23 +++++++ components/select/demo/basic.md | 4 +- components/select/index.en-US.md | 2 + components/select/index.tsx | 2 + components/select/index.zh-CN.md | 2 + package.json | 2 +- 7 files changed, 89 insertions(+), 7 deletions(-) diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap index caa55a8839..c73474fc80 100644 --- a/components/select/__tests__/__snapshots__/demo.test.js.snap +++ b/components/select/__tests__/__snapshots__/demo.test.js.snap @@ -44,12 +44,12 @@ exports[`renders ./components/select/demo/automatic-tokenization.md correctly 1` exports[`renders ./components/select/demo/basic.md correctly 1`] = `
+
+
+
+
    +
  • + Jack +
    • +
  • + Lucy +
    • +
  • + Disabled +
    • +
  • + yiminghe +
    • +
+
+
+
{ focusTest(Select); @@ -55,4 +57,25 @@ describe('Select', () => { expect(dropdownWrapper.find('MenuItem').length).toBe(1); expect(dropdownWrapper.find('MenuItem').at(0).text()).toBe('not at all'); }); + + it('should be controlled by open prop', () => { + const onDropdownVisibleChange = jest.fn(); + const wrapper = mount( + + ); + let dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()); + expect(dropdownWrapper.props().visible).toBe(true); + wrapper.find('.ant-select').simulate('click'); + expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false); + expect(dropdownWrapper.props().visible).toBe(true); + + wrapper.setProps({ open: false }); + dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()); + expect(dropdownWrapper.props().visible).toBe(false); + wrapper.find('.ant-select').simulate('click'); + expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(true); + expect(dropdownWrapper.props().visible).toBe(false); + }); }); diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md index e487ea7efc..ea7bfbdf73 100644 --- a/components/select/demo/basic.md +++ b/components/select/demo/basic.md @@ -24,13 +24,13 @@ function handleChange(value) { ReactDOM.render(
- - console.log(open)}>
, diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index cfbe682634..8caf183cf7 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -57,6 +57,8 @@ Select component to select value from options. | onPopupScroll | Called when dropdown scrolls | function | - | | onSearch | Callback function that is fired when input changed. | function(value: string) | | | onSelect | Called when a option is selected, the params are option's value (or key) and option instance. | function(value, option:Option) | - | +| open | controlled open state of dropdown | boolean | - | +| onDropdownVisibleChange | call when dropdown open | function(open) | - | ### Select Methods diff --git a/components/select/index.tsx b/components/select/index.tsx index e871a87945..306966d7df 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -30,6 +30,8 @@ export interface AbstractSelectProps { getPopupContainer?: (triggerNode: Element) => HTMLElement; filterOption?: boolean | ((inputValue: string, option: React.ReactElement) => any); id?: string; + open?: boolean; + onDropdownVisibleChange?: (open: boolean) => void; } export interface LabeledValue { diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 3dc92a5b24..db418aef33 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -58,6 +58,8 @@ title: Select | onPopupScroll | 下拉列表滚动时的回调 | function | - | | onSearch | 文本框值变化时回调 | function(value: string) | | | onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(value, option:Option) | - | +| open | 是否展开下拉菜单 | boolean | - | +| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | > 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。 diff --git a/package.json b/package.json index eac80fd3d6..d490f71bd8 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "rc-pagination": "~1.17.0", "rc-progress": "~2.2.2", "rc-rate": "~2.4.0", - "rc-select": "~8.2.0", + "rc-select": "~8.2.3", "rc-slider": "~8.6.0", "rc-steps": "~3.2.1", "rc-switch": "~1.7.0",