From 28d138c56841497f0b0aa72533a248ed6a06a654 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Je=CC=81re=CC=81my=20Gabriele?= Date: Fri, 6 Jul 2018 09:29:59 +0200 Subject: [PATCH 1/6] Pass renderSectionContainer + remove failing tests MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Note: even when cloning repo + yarn + yarn test, they fail ô_o... --- package.json | 6 +-- src/Autosuggest.js | 5 ++- .../AutosuggestApp.test.js | 19 +++++----- test/helpers.js | 12 +++--- test/plain-list/AutosuggestApp.test.js | 38 +++++++++---------- 5 files changed, 39 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index fd52741d..38186b3e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "react-autosuggest", - "version": "9.4.3", + "name": "ricardo-react-autosuggest", + "version": "9.4.4", "description": "WAI-ARIA compliant React autosuggest component", "main": "dist/index.js", "repository": { @@ -26,7 +26,7 @@ }, "dependencies": { "prop-types": "^15.5.10", - "react-autowhatever": "^10.1.2", + "ricardo-react-autowhatever": "^10.2.1", "shallow-equal": "^1.0.0" }, "peerDependencies": { diff --git a/src/Autosuggest.js b/src/Autosuggest.js index bdaffd58..8bfe22ed 100644 --- a/src/Autosuggest.js +++ b/src/Autosuggest.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import shallowEqualArrays from 'shallow-equal/arrays'; -import Autowhatever from 'react-autowhatever'; +import Autowhatever from 'ricardo-react-autowhatever'; import { defaultTheme, mapToAutowhateverTheme } from './theme'; const alwaysTrue = () => true; @@ -38,6 +38,7 @@ export default class Autosuggest extends Component { onSuggestionHighlighted: PropTypes.func, renderInputComponent: PropTypes.func, renderSuggestionsContainer: PropTypes.func, + renderSectionContainer: PropTypes.func, getSuggestionValue: PropTypes.func.isRequired, renderSuggestion: PropTypes.func.isRequired, inputProps: (props, propName) => { @@ -510,6 +511,7 @@ export default class Autosuggest extends Component { inputProps, multiSection, renderSectionTitle, + renderSectionContainer, id, getSectionSuggestions, theme, @@ -748,6 +750,7 @@ export default class Autosuggest extends Component { renderItem={renderSuggestion} renderItemData={renderSuggestionData} renderSectionTitle={renderSectionTitle} + renderSectionContainer={renderSectionContainer} getSectionItems={getSectionSuggestions} highlightedSectionIndex={highlightedSectionIndex} highlightedItemIndex={highlightedSuggestionIndex} diff --git a/test/focus-first-suggestion/AutosuggestApp.test.js b/test/focus-first-suggestion/AutosuggestApp.test.js index 9a4cc66c..6048865b 100644 --- a/test/focus-first-suggestion/AutosuggestApp.test.js +++ b/test/focus-first-suggestion/AutosuggestApp.test.js @@ -128,16 +128,15 @@ describe('Autosuggest with highlightFirstSuggestion={true}', () => { onSuggestionSelected.reset(); clickEnter(); expect(onSuggestionSelected).to.have.been.calledOnce; - expect(onSuggestionSelected).to.have.been.calledWithExactly( - syntheticEventMatcher, - { - suggestion: { name: 'Perl', year: 1987 }, - suggestionValue: 'Perl', - suggestionIndex: 0, - sectionIndex: null, - method: 'enter' - } - ); + expect( + onSuggestionSelected + ).to.have.been.calledWithExactly(syntheticEventMatcher, { + suggestion: { name: 'Perl', year: 1987 }, + suggestionValue: 'Perl', + suggestionIndex: 0, + sectionIndex: null, + method: 'enter' + }); }); }); diff --git a/test/helpers.js b/test/helpers.js index 8cb1a9ae..565adc19 100644 --- a/test/helpers.js +++ b/test/helpers.js @@ -92,13 +92,11 @@ export const getSuggestion = suggestionIndex => { throw Error( ` Cannot find suggestion #${suggestionIndex}. - ${ - suggestions.length === 0 - ? 'No suggestions found.' - : `Only ${suggestions.length} suggestion${ - suggestions.length === 1 ? '' : 's' - } found.` - } + ${suggestions.length === 0 + ? 'No suggestions found.' + : `Only ${suggestions.length} suggestion${suggestions.length === 1 + ? '' + : 's'} found.`} ` ); } diff --git a/test/plain-list/AutosuggestApp.test.js b/test/plain-list/AutosuggestApp.test.js index c13bde13..6a1b4b73 100644 --- a/test/plain-list/AutosuggestApp.test.js +++ b/test/plain-list/AutosuggestApp.test.js @@ -602,32 +602,30 @@ describe('Default Autosuggest', () => { it('should be called once with the right parameters when suggestion is clicked', () => { clickSuggestion(1); expect(onSuggestionSelected).to.have.been.calledOnce; - expect(onSuggestionSelected).to.have.been.calledWithExactly( - syntheticEventMatcher, - { - suggestion: { name: 'JavaScript', year: 1995 }, - suggestionValue: 'JavaScript', - suggestionIndex: 1, - sectionIndex: null, - method: 'click' - } - ); + expect( + onSuggestionSelected + ).to.have.been.calledWithExactly(syntheticEventMatcher, { + suggestion: { name: 'JavaScript', year: 1995 }, + suggestionValue: 'JavaScript', + suggestionIndex: 1, + sectionIndex: null, + method: 'click' + }); }); it('should be called once with the right parameters when Enter is pressed and suggestion is highlighted', () => { clickDown(); clickEnter(); expect(onSuggestionSelected).to.have.been.calledOnce; - expect(onSuggestionSelected).to.have.been.calledWithExactly( - syntheticEventMatcher, - { - suggestion: { name: 'Java', year: 1995 }, - suggestionValue: 'Java', - suggestionIndex: 0, - sectionIndex: null, - method: 'enter' - } - ); + expect( + onSuggestionSelected + ).to.have.been.calledWithExactly(syntheticEventMatcher, { + suggestion: { name: 'Java', year: 1995 }, + suggestionValue: 'Java', + suggestionIndex: 0, + sectionIndex: null, + method: 'enter' + }); }); it('should not be called when Enter is pressed and there is no highlighted suggestion', () => { From d6ba427b22250b132dea9d0e95edefb4bc195d1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Gabriele?= Date: Wed, 23 Jan 2019 11:49:57 +0100 Subject: [PATCH 2/6] Update to latest autowhatever --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 38186b3e..2d86f359 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ricardo-react-autosuggest", - "version": "9.4.4", + "version": "9.4.5", "description": "WAI-ARIA compliant React autosuggest component", "main": "dist/index.js", "repository": { @@ -26,7 +26,7 @@ }, "dependencies": { "prop-types": "^15.5.10", - "ricardo-react-autowhatever": "^10.2.1", + "ricardo-react-autowhatever": "^10.2.2", "shallow-equal": "^1.0.0" }, "peerDependencies": { From e39367f37e2193599b4aaed424b611f3c3a9372f Mon Sep 17 00:00:00 2001 From: Jeremy Gabriele Date: Wed, 7 Aug 2019 13:51:01 +0200 Subject: [PATCH 3/6] Update Readme to explain why we forked --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index da582464..304d138d 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,9 @@ # React Autosuggest +## Ricardo Fork +This project has been forked to be able to render a custom wrapper for each section of the autocomplete (this is done in **react-autowhatever** that has also been forked) + ## Demo Check out the [Homepage](http://react-autosuggest.js.org) and the [Codepen examples](http://codepen.io/collection/DkkYaQ). From 0c8c7d2b701632de5c8d004c262695bb5e76dc16 Mon Sep 17 00:00:00 2001 From: Jeremy Gabriele Date: Thu, 3 Oct 2019 17:15:29 +0200 Subject: [PATCH 4/6] Add doc for renderSectionContainer --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index 304d138d..076c3fcb 100644 --- a/README.md +++ b/README.md @@ -169,6 +169,7 @@ class Example extends React.Component { | [`renderSectionTitle`](#render-section-title-prop) | Function | ✓
when `multiSection={true}` | Use your imagination to define how section titles are rendered. | | [`getSectionSuggestions`](#get-section-suggestions-prop) | Function | ✓
when `multiSection={true}` | Implement it to teach Autosuggest where to find the suggestions for every section. | | [`renderInputComponent`](#render-input-component-prop) | Function | | Use it only if you need to customize the rendering of the input. | +| [`renderSectionContainer`](#render-section-component-prop) | Function | | Use it only if you need to customize the rendering of the sections. | | [`renderSuggestionsContainer`](#render-suggestions-container-prop) | Function | | Use it if you want to customize things inside the suggestions container beyond rendering the suggestions themselves. | | [`theme`](#theme-prop) | Object | | Use your imagination to style the Autosuggest. | | [`id`](#id-prop) | String | | Use it only if you have multiple Autosuggest components on a page. | @@ -503,6 +504,12 @@ const renderInputComponent = inputProps => ( **Note:** When using `renderInputComponent`, you still need to specify the usual [`inputProps`](#input-props-prop). Autosuggest will merge the `inputProps` that you provide with other props that are needed for accessibility (e.g. `'aria-activedescendant'`), and will pass the **merged `inputProps`** to `renderInputComponent`. + + +#### Added by Ricardo – renderSectionContainer (optional) + +You shouldn't specify `renderSectionContainer` unless you want to customize the rendering of the sections. + #### renderSuggestionsContainer (optional) From 3b590cedd9fddbb5c228597ac0de47e6c2093ed0 Mon Sep 17 00:00:00 2001 From: Jeremy Gabriele Date: Thu, 3 Oct 2019 17:16:18 +0200 Subject: [PATCH 5/6] Fix anchor for renderSectionContainer --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 076c3fcb..198baa2c 100644 --- a/README.md +++ b/README.md @@ -169,7 +169,7 @@ class Example extends React.Component { | [`renderSectionTitle`](#render-section-title-prop) | Function | ✓
when `multiSection={true}` | Use your imagination to define how section titles are rendered. | | [`getSectionSuggestions`](#get-section-suggestions-prop) | Function | ✓
when `multiSection={true}` | Implement it to teach Autosuggest where to find the suggestions for every section. | | [`renderInputComponent`](#render-input-component-prop) | Function | | Use it only if you need to customize the rendering of the input. | -| [`renderSectionContainer`](#render-section-component-prop) | Function | | Use it only if you need to customize the rendering of the sections. | +| [`renderSectionContainer`](#render-section-container-prop) | Function | | Use it only if you need to customize the rendering of the sections. | | [`renderSuggestionsContainer`](#render-suggestions-container-prop) | Function | | Use it if you want to customize things inside the suggestions container beyond rendering the suggestions themselves. | | [`theme`](#theme-prop) | Object | | Use your imagination to style the Autosuggest. | | [`id`](#id-prop) | String | | Use it only if you have multiple Autosuggest components on a page. | From 533ea6b44715827f1df6ab9649abd0fbf50cc54c Mon Sep 17 00:00:00 2001 From: Jeremy Gabriele Date: Thu, 3 Oct 2019 17:19:34 +0200 Subject: [PATCH 6/6] Add signature of renderSectionContainer --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 198baa2c..bd441c64 100644 --- a/README.md +++ b/README.md @@ -510,6 +510,12 @@ const renderInputComponent = inputProps => ( You shouldn't specify `renderSectionContainer` unless you want to customize the rendering of the sections. +The signature is: + +```js +function renderSectionContainer(section, children) +``` + #### renderSuggestionsContainer (optional)