From 7a95d8c707f17ff262f2905679e7dfaf4f9e8b48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 6 Mar 2020 23:43:22 +0800 Subject: [PATCH] feat: dropdownMatchSelectWidth = false can disable virtual scroll (#460) * support dropdownMatchSelectWidth is false * add min width * update snapshot * add virtual prop * add test case * update read me * preitter --- .prettierrc | 6 +- README.md | 157 +++++++++++------------ package.json | 2 +- src/OptionList.tsx | 3 + src/SelectTrigger.tsx | 21 +-- src/generate.tsx | 5 +- tests/Select.test.tsx | 99 ++++++++++---- tests/__snapshots__/Select.test.tsx.snap | 4 +- tests/__snapshots__/Tags.test.tsx.snap | 2 +- 9 files changed, 178 insertions(+), 121 deletions(-) diff --git a/.prettierrc b/.prettierrc index 27dd8afb8..4d75b549a 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,5 +3,7 @@ "semi": true, "singleQuote": true, "tabWidth": 2, - "trailingComma": "all" -} + "trailingComma": "all", + "proseWrap": "never", + "printWidth": 100 +} \ No newline at end of file diff --git a/README.md b/README.md index 7e081968d..02feb538b 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,12 @@ # rc-select + --- React Select -[![NPM version][npm-image]][npm-url] -[![build status][travis-image]][travis-url] -[![Test coverage][coveralls-image]][coveralls-url] -[![Dependencies](https://img.shields.io/david/react-component/select.svg?style=flat-square)](https://david-dm.org/react-component/select) -[![DevDependencies](https://img.shields.io/david/dev/react-component/select.svg?style=flat-square)](https://david-dm.org/react-component/select?type=dev) -[![npm download][download-image]][download-url] -[![Storybook](https://gw.alipayobjects.com/mdn/ob_info/afts/img/A*CQXNTZfK1vwAAAAAAAAAAABjAQAAAQ/original)](https://github.com/react-component/select) +[![NPM version][npm-image]][npm-url] [![build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![Dependencies](https://img.shields.io/david/react-component/select.svg?style=flat-square)](https://david-dm.org/react-component/select) [![DevDependencies](https://img.shields.io/david/dev/react-component/select.svg?style=flat-square)](https://david-dm.org/react-component/select?type=dev) [![npm download][download-image]][download-url] [![Storybook](https://gw.alipayobjects.com/mdn/ob_info/afts/img/A*CQXNTZfK1vwAAAAAAAAAAABjAQAAAQ/original)](https://github.com/react-component/select) -[Storybook]: https://github.com/storybooks/press/blob/master/badges/storybook.svg +[storybook]: https://github.com/storybooks/press/blob/master/badges/storybook.svg [npm-image]: http://img.shields.io/npm/v/rc-select.svg?style=flat-square [npm-url]: http://npmjs.org/package/rc-select [travis-image]: https://img.shields.io/travis/react-component/select.svg?style=flat-square @@ -29,12 +24,12 @@ React Select ## Feature -* support ie9,ie9+,chrome,firefox,safari +- support ie9,ie9+,chrome,firefox,safari ### Keyboard -* Open select (focus input || focus and click) -* KeyDown/KeyUp/Enter to navigate menu +- Open select (focus input || focus and click) +- KeyDown/KeyUp/Enter to navigate menu ## install @@ -45,7 +40,7 @@ React Select ### basic use ```js -import Select, {Option, OptGroup} from 'rc-select'; +import Select, { Option, OptGroup } from 'rc-select'; var c = ( - - - , - ); - toggleOpen(wrapper); - expect( - wrapper - .find('.rc-select-dropdown') - .last() - .props().style.width, - ).toBe(233); + describe('dropdownMatchSelectWidth', () => { + let domHook; + + beforeAll(() => { + domHook = spyElementPrototype(HTMLElement, 'offsetWidth', { + get: () => 1000, + }); + }); + + afterAll(() => { + domHook.mockRestore(); + }); + + it('dropdown menu width should not be smaller than trigger even dropdownMatchSelectWidth is false', () => { + const options = []; + for (let i = 0; i < 99; i += 1) { + options.push({ + value: i, + }); + } + + const wrapper = mount( + , + ); + toggleOpen(wrapper); + expect(wrapper.find('.rc-select-item')).toHaveLength(options.length); + }); }); it('if loading, arrow should show loading icon', () => { @@ -1538,15 +1586,18 @@ describe('Select.Basic', () => { , ); - [[1, '1'], [null, 'No'], [0, '0'], ['', 'Empty']].forEach( - ([value, showValue], index) => { - toggleOpen(wrapper); - selectItem(wrapper, index); - expect(onChange).toHaveBeenCalledWith(value, expect.anything()); - expect(wrapper.find('.rc-select-selection-item').text()).toEqual( - showValue, - ); - }, - ); + [ + [1, '1'], + [null, 'No'], + [0, '0'], + ['', 'Empty'], + ].forEach(([value, showValue], index) => { + toggleOpen(wrapper); + selectItem(wrapper, index); + expect(onChange).toHaveBeenCalledWith(value, expect.anything()); + expect(wrapper.find('.rc-select-selection-item').text()).toEqual( + showValue, + ); + }); }); }); diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap index 2aab5a62d..232b6db79 100644 --- a/tests/__snapshots__/Select.test.tsx.snap +++ b/tests/__snapshots__/Select.test.tsx.snap @@ -148,7 +148,7 @@ exports[`Select.Basic filterOption could be true as described in default value 1
diff --git a/tests/__snapshots__/Tags.test.tsx.snap b/tests/__snapshots__/Tags.test.tsx.snap index a513bba32..882af92e4 100644 --- a/tests/__snapshots__/Tags.test.tsx.snap +++ b/tests/__snapshots__/Tags.test.tsx.snap @@ -78,7 +78,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `