Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(emptyStates): implements empty source template and renderEmpty method #395

Merged
merged 11 commits into from
Jan 20, 2021

Conversation

shortcuts
Copy link
Member

  • If the empty source template or the renderEmpty method is defined, it will be triggered when no results are returned.
    When both are defined, the empty source template is prioritized.
  • getItemCountsCount has also been moved to the autocomplete-shared folder since it's now used when calling createAutocomplete

Implementation

empty source template:
Works as the footer or header source template.

autocomplete({
    // ...
  getSources() {
    return [
      {
        getItems({ query }) {
          return getAlgoliaHits({
              // ...
          });
        },
        templates: {
          item({ item }) {
            return reverseHighlightHit({ hit: item, attribute: 'query' });
          },
          empty() {
            return 'No results';
          },
        },
      },
    ];
  },
});

renderEmpty method:
Works as the render method.

autocomplete({
    // ...
  renderEmpty({ root }) {
    const div = document.createElement('div');

    div.innerHTML = 'No results';
    root.appendChild(div);
  },
});

@shortcuts shortcuts requested review from francoischalifour, a team and yannickcr and removed request for a team January 15, 2021 15:40
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 15, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 95298cf:

Sandbox Source
@algolia/js-example Configuration
@algolia/react-renderer-example Configuration

packages/autocomplete-js/src/getDefaultOptions.ts Outdated Show resolved Hide resolved
packages/website/docs/autocomplete-js.md Outdated Show resolved Hide resolved
examples/js/app.ts Show resolved Hide resolved
shortcuts and others added 2 commits January 19, 2021 10:31
Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
shortcuts and others added 3 commits January 20, 2021 09:18
Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
Copy link
Member

@francoischalifour francoischalifour left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job!

packages/autocomplete-js/src/autocomplete.ts Outdated Show resolved Hide resolved
@shortcuts shortcuts merged commit 8bd35e6 into next Jan 20, 2021
@shortcuts shortcuts deleted the feat/emptyStates branch January 20, 2021 12:44
francoischalifour added a commit that referenced this pull request Jan 21, 2021
…ethod (#395)

* Implements `empty` template and `renderEmpty` method

* Add wait function to `test/utils` folder

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
francoischalifour added a commit that referenced this pull request Feb 1, 2021
…ethod (#395)

* Implements `empty` template and `renderEmpty` method

* Add wait function to `test/utils` folder

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
francoischalifour added a commit that referenced this pull request Feb 1, 2021
…ethod (#395)

* Implements `empty` template and `renderEmpty` method

* Add wait function to `test/utils` folder

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
Meschreiber pushed a commit that referenced this pull request Feb 4, 2021
* docs(website): bootstrap new doc structure

* docs(website): add doc for `createAlgoliaInsightsPlugin`

* docs(website): add draft sections

* docs: rewrite "Integrating keyboard navigation" (#389)

* feat: add intro

* Apply suggestions from code review

Co-authored-by: Sarah Dayan <sarah.dayan@algolia.com>

* fix: remove conflicting sentence

* docs: rewrite "Accessing data with Context" (#390)

* docs: rewrote "Controlling behavior with State" (#391)

* fix: bold and underline text

* docs: rewrite "Populating autocomplete with Sources" (#396)

* docs: write "Displaying items with Templates" (#397)

* fix(core): update query conditions

* chore(test): add tests for getEnvironmentProps onTouchMove (#398)

* feat(emptyStates): implements empty source template and renderEmpty method (#395)

* Implements `empty` template and `renderEmpty` method

* Add wait function to `test/utils` folder

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

* Add tests for `onActive` and `onSelect` on plugins (#400)

* feat(js): change renderer implementation to virtual DOM (#381)

* feat(js): change renderer implementation to virtual DOM

* feat(highlighting): revamp highlighting system to VDOM (#399)

* fix: fix code example (#403)

* docs: switch core usage with autocomplete-js (#401)

* docs: write "Basic configuration options" (#402)

* docs: write "help and discussion" page (#394)

* docs: add help page

* Apply suggestions from code review

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

* feat: put in a placeholder input

* fix: update links

* fix: links

* fix: merge conflict

* fix: merge conflict

* feat: add AutocompleteExample

* feat: add AutocompleteItem

* fix: remove htm package

* fix: remove htm package

* fix: rename AutocompleteItem -> AutocompleteDocSearchItem

* fix(website): use React renderer in `AutocompleteExample`

* fix(website): support content record types

Co-authored-by: François Chalifour <francois.chalifour@gmail.com>
Co-authored-by: Sarah Dayan <sarah.dayan@algolia.com>
Co-authored-by: Yannick Croissant <yannick.croissant@algolia.com>
Co-authored-by: Clément Vannicatte <20689156+shortcuts@users.noreply.github.com>
Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
Meschreiber pushed a commit that referenced this pull request Feb 4, 2021
* docs(website): bootstrap new doc structure

* docs(website): add doc for `createAlgoliaInsightsPlugin`

* docs(website): add draft sections

* docs: rewrite "Integrating keyboard navigation" (#389)

* docs: rewrite "Accessing data with Context" (#390)

* docs: rewrote "Controlling behavior with State" (#391)

* docs: rewrite "Populating autocomplete with Sources" (#396)

* docs: write "Displaying items with Templates" (#397)

* fix(core): update query conditions

* chore(test): add tests for getEnvironmentProps onTouchMove (#398)

* feat(emptyStates): implements empty source template and renderEmpty method (#395)

* Implements `empty` template and `renderEmpty` method

* Add wait function to `test/utils` folder

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

* Add tests for `onActive` and `onSelect` on plugins (#400)

* feat(js): change renderer implementation to virtual DOM (#381)

* feat(js): change renderer implementation to virtual DOM

* feat(highlighting): revamp highlighting system to VDOM (#399)

* fix: fix code example (#403)

* docs: switch core usage with autocomplete-js (#401)

* docs: write "Basic configuration options" (#402)

* docs: write "help and discussion" page (#394)

* docs: add help page

* Apply suggestions from code review

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

* feat: getting started first draft

* Apply suggestions from code review

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

* feat: update code example

* fix: copy-edit

* feat: add placeholders

* fix: remove unnecessary code snippets

* fix: links

* fix: add record example

* fix: rename titles to be more user focused

* fix: correct URL

* fix: update links

* Apply suggestions from code review

Co-authored-by: Sarah Dayan <sarah.dayan@algolia.com>

* fix: update installation headers and add note

* fix: remove headless installation and add 3rd party caveat

* Update packages/website/docs/getting-started.md

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

* fix: remove CDNJS

* Update packages/website/docs/getting-started.md

Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

* Update packages/website/docs/getting-started.md

* Update packages/website/docs/getting-started.md

Co-authored-by: Sarah Dayan <sarah.dayan@algolia.com>

* feat: add AutocompleteExample

* fix: merge docs-1

Co-authored-by: François Chalifour <francois.chalifour@gmail.com>
Co-authored-by: Sarah Dayan <sarah.dayan@algolia.com>
Co-authored-by: Yannick Croissant <yannick.croissant@algolia.com>
Co-authored-by: Clément Vannicatte <20689156+shortcuts@users.noreply.github.com>
Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants