renderSectionContainer

README.md

@@ -175,6 +175,7 @@ class Example extends React.Component {
 | [`getSectionSuggestions`](#get-section-suggestions-prop) | Function | ✓<br>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. |
 | [`renderSuggestionsContainer`](#render-suggestions-container-prop) | Function | | Use it if you want to customize things inside the suggestions container beyond rendering the suggestions themselves. |
+| [`renderSectionContainer`](#render-sections-container-prop) | Function | | Use it if you want to customize things inside the sections container beyond rendering the sections 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. |
 
@@ -602,6 +603,39 @@ function renderSuggestionsContainer({ containerProps, children }) {
 }
 ```
 
+<a name="render-sections-container-prop"></a>
+
+#### renderSectionContainer (optional)
+
+You shouldn't specify `renderSectionContainer` unless you want to customize the content or behaviour of the sections container beyond rendering the sections themselves. For example, you might want to add a custom text before/after the sections list.
+
+The signature is:
+
+```js
+function renderSectionContainer({ containerProps, children, query })
+```
+
+where:
+
+- `containerProps` - props that you MUST pass to the topmost element that is returned from `renderSectionContainer`.
+- `children` - the sections themselves. It's up to you where to render them.
+- `query` - Same as `query` in [`renderSuggestion`](#render-suggestion-prop).
+
+For example:
+
+```js
+function renderSectionContainer({ containerProps, children, query }) {
+ return (
+ <div {...containerProps}>
+ {children}
+ <div>
+ Press Enter to search <strong>{query}</strong>
+ </div>
+ </div>
+ );
+}
+```
+
 <a name="theme-prop"></a>
 
 #### theme (optional)

src/Autosuggest.js

@@ -9,6 +9,9 @@ const defaultShouldRenderSuggestions = (value) => value.trim().length > 0;
 const defaultRenderSuggestionsContainer = ({ containerProps, children }) => (
  <div {...containerProps}>{children}</div>
 );
+const defaultRenderSectionContainer = ({ containerProps, children }) => (
+ <div {...containerProps}>{children}</div>
+);
 
 const REASON_SUGGESTIONS_REVEALED = 'suggestions-revealed';
 const REASON_SUGGESTIONS_UPDATED = 'suggestions-updated';
@@ -47,6 +50,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) => {
@@ -100,6 +104,7 @@ export default class Autosuggest extends Component {
 
  static defaultProps = {
  renderSuggestionsContainer: defaultRenderSuggestionsContainer,
+ renderSectionContainer: defaultRenderSectionContainer,
  shouldRenderSuggestions: defaultShouldRenderSuggestions,
  alwaysRenderSuggestions: false,
  multiSection: false,
@@ -545,6 +550,17 @@ export default class Autosuggest extends Component {
  });
  };
 
+ renderSectionContainer = ({ containerProps, children, section }) => {
+ const { renderSectionContainer } = this.props;
+
+ return renderSectionContainer({
+ containerProps,
+ children,
+ query: this.getQuery(),
+ section,
+ });
+ };
+
  render() {
  const {
  suggestions,
@@ -803,6 +819,7 @@ export default class Autosuggest extends Component {
  items={items}
  renderInputComponent={renderInputComponent}
  renderItemsContainer={this.renderSuggestionsContainer}
+ renderSectionContainer={this.renderSectionContainer}
  renderItem={renderSuggestion}
  renderItemData={renderSuggestionData}
  renderSectionTitle={renderSectionTitle}

src/Autowhatever.js

@@ -10,6 +10,9 @@ const defaultRenderInputComponent = (props) => <input {...props} />;
 const defaultRenderItemsContainer = ({ containerProps, children }) => (
  <div {...containerProps}>{children}</div>
 );
+const defaultRenderSectionContainer = ({ containerProps, children }) => (
+ <div {...containerProps}>{children}</div>
+);
 const defaultTheme = {
  container: 'react-autowhatever__container',
  containerOpen: 'react-autowhatever__container--open',
@@ -33,6 +36,7 @@ export default class Autowhatever extends Component {
  multiSection: PropTypes.bool, // Indicates whether a multi section layout should be rendered.
  renderInputComponent: PropTypes.func, // When specified, it is used to render the input element.
  renderItemsContainer: PropTypes.func, // Renders the items container.
+ renderSectionContainer: PropTypes.func, // Renders the section container.
  items: PropTypes.array.isRequired, // Array of items or sections to render.
  renderItem: PropTypes.func, // This function renders a single item.
  renderItemData: PropTypes.object, // Arbitrary data that will be passed to renderItem()
@@ -59,6 +63,7 @@ export default class Autowhatever extends Component {
  multiSection: false,
  renderInputComponent: defaultRenderInputComponent,
  renderItemsContainer: defaultRenderItemsContainer,
+ renderSectionContainer: defaultRenderSectionContainer,
  renderItem: () => {
  throw new Error('`renderItem` must be provided');
  },
@@ -191,6 +196,7 @@ export default class Autowhatever extends Component {
  items,
  renderItem,
  renderItemData,
+ renderSectionContainer,
  renderSectionTitle,
  highlightedSectionIndex,
  highlightedItemIndex,
@@ -203,41 +209,41 @@ export default class Autowhatever extends Component {
  const isFirstSection = sectionIndex === 0;
 
  // `key` is provided by theme()
- /* eslint-disable react/jsx-key */
- return (
- <div
- {...theme(
-  `${sectionKeyPrefix}container`,
-  'sectionContainer',
-  isFirstSection && 'sectionContainerFirst'
-  )}
- >
- <SectionTitle
- section={section}
- renderSectionTitle={renderSectionTitle}
- theme={theme}
- sectionKeyPrefix={sectionKeyPrefix}
- />
- <ItemList
- items={this.sectionsItems[sectionIndex]}
- itemProps={itemProps}
- renderItem={renderItem}
- renderItemData={renderItemData}
- sectionIndex={sectionIndex}
- highlightedItemIndex={
- highlightedSectionIndex === sectionIndex
- ? highlightedItemIndex
- : null
- }
- onHighlightedItemChange={this.onHighlightedItemChange}
- getItemId={this.getItemId}
- theme={theme}
- keyPrefix={keyPrefix}
- ref={this.storeItemsListReference}
- />
- </div>
- );
- /* eslint-enable react/jsx-key */
+ return renderSectionContainer({
+  section,
+ containerProps: theme(
+ `${sectionKeyPrefix}container`,
+ 'sectionContainer',
+ isFirstSection && 'sectionContainerFirst'
+ ),
+ children: (
+  <React.Fragment>
+  <SectionTitle
+  section={section}
+  renderSectionTitle={renderSectionTitle}
+  theme={theme}
+  sectionKeyPrefix={sectionKeyPrefix}
+  />
+  <ItemList
+  items={this.sectionsItems[sectionIndex]}
+  itemProps={itemProps}
+  renderItem={renderItem}
+  renderItemData={renderItemData}
+  sectionIndex={sectionIndex}
+  highlightedItemIndex={
+  highlightedSectionIndex === sectionIndex
+  ? highlightedItemIndex
+  : null
+  }
+  onHighlightedItemChange={this.onHighlightedItemChange}
+  getItemId={this.getItemId}
+  theme={theme}
+  keyPrefix={keyPrefix}
+  ref={this.storeItemsListReference}
+  />
+  </React.Fragment>
+  ),
+ });
  });
  }
 

test/render-section-container/AutosuggestApp.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import sinon from 'sinon';
+import Autosuggest from '../../src/Autosuggest';
+import languages from '../plain-list/languages';
+import { escapeRegexCharacters } from '../../demo/src/components/utils/utils.js';
+
+const getMatchingLanguages = value => {
+ const escapedValue = escapeRegexCharacters(value.trim());
+ const regex = new RegExp('^' + escapedValue, 'i');
+
+ return languages.filter(language => regex.test(language.name));
+};
+
+let app = null;
+
+const onChange = (event, { newValue }) => {
+ app.setState({
+ value: newValue
+ });
+};
+
+const onSuggestionsFetchRequested = ({ value }) => {
+ app.setState({
+ suggestions: [{ title: 'languages', languages: getMatchingLanguages(value) }]
+ });
+};
+
+const onSuggestionsClearRequested = () => {
+ app.setState({
+ suggestions: []
+ });
+};
+
+const getSuggestionValue = suggestion => suggestion.name;
+
+const renderSuggestion = suggestion => suggestion.name;
+
+export const renderSectionContainer = sinon.spy(
+ ({ containerProps, children, query, section }) => <div {...containerProps}>
+ <div className="my-section-container-header">
+ Showing results for <strong className="my-query">{query}</strong> in {section.title}
+ </div>
+ {children}
+ </div>
+);
+
+const renderSectionTitle = () => null;
+
+const getSectionSuggestions = section => section.languages;
+
+export default class AutosuggestApp extends Component {
+ constructor() {
+ super();
+
+ app = this;
+
+ this.state = {
+ value: '',
+ suggestions: []
+ };
+ }
+
+ storeAutosuggestReference = autosuggest => {
+ if (autosuggest !== null) {
+ this.input = autosuggest.input;
+ }
+ };
+
+ alwaysRenderSuggestions = () => true;
+
+ render() {
+ const { value, suggestions } = this.state;
+ const inputProps = {
+ value,
+ onChange
+ };
+
+ return (
+ <Autosuggest
+ multiSection={true}
+ renderSectionTitle={renderSectionTitle}
+ getSectionSuggestions={getSectionSuggestions}
+ alwaysRenderSuggestions={this.alwaysRenderSuggestions}
+ suggestions={suggestions}
+ onSuggestionsFetchRequested={onSuggestionsFetchRequested}
+ onSuggestionsClearRequested={onSuggestionsClearRequested}
+ getSuggestionValue={getSuggestionValue}
+ renderSuggestion={renderSuggestion}
+ renderSectionContainer={renderSectionContainer}
+ inputProps={inputProps}
+ ref={this.storeAutosuggestReference}
+ />
+ );
+ }
+}

test/render-section-container/AutosuggestApp.test.js

@@ -0,0 +1,46 @@
+import sinon from 'sinon';
+import React from 'react';
+import TestUtils from 'react-dom/test-utils';
+import { expect } from 'chai';
+import {
+ init,
+ childrenMatcher,
+ getInnerHTML,
+ getElementWithClass,
+ setInputValue
+} from '../helpers';
+import AutosuggestApp, { renderSectionContainer } from './AutosuggestApp';
+
+describe('Autosuggest with renderSectionContainer', () => {
+ beforeEach(() => {
+ init(TestUtils.renderIntoDocument(<AutosuggestApp />));
+ renderSectionContainer.resetHistory();
+ setInputValue('c ');
+ });
+
+ it('should render whatever renderSectionContainer returns', () => {
+ expect(getElementWithClass('my-section-container-header')).not.to.equal(
+ null
+ );
+ expect(getInnerHTML(getElementWithClass('my-query'))).to.equal('c');
+ });
+
+ it('should call renderSectionContainer once with the right parameters', () => {
+ expect(renderSectionContainer).to.have.been.calledOnce;
+ expect(renderSectionContainer).to.be.calledWith({
+ containerProps: sinon.match({
+ key: sinon.match.string,
+ className: sinon.match.string,
+ }),
+ children: childrenMatcher,
+ query: 'c',
+ section: sinon.match({
+ title: sinon.match.string,
+ languages: sinon.match.every(sinon.match({
+ name: sinon.match.string,
+ year: sinon.match.number
+ }))
+ })
+ });
+ });
+});