Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit fbe9f59

Browse files
dhayabdhayab
authoredJan 27, 2022
feat: add <ais-reverse-highlight>, <ais-snippet> and <ais-reverse-snippet> components (#891)
·
v4.4.34.2.0
1 parent 6a45385 commit fbe9f59

17 files changed

+411
-36
lines changed
 

‎examples/e-commerce/src/app/app.component.html

+2-8
Original file line numberDiff line numberDiff line change
@@ -154,16 +154,10 @@ <h2>Filters</h2>
154154
{{ item.categories && item.categories[0] }}
155155
</p>
156156
<h1>
157-
<ais-highlight
158-
attribute="name"
159-
[hit]="item"
160-
></ais-highlight>
157+
<ais-highlight attribute="name" [hit]="item"></ais-highlight>
161158
</h1>
162159
<p class="hit-description">
163-
<app-snippet
164-
attribute="description"
165-
[hit]="item"
166-
></app-snippet>
160+
<ais-snippet attribute="description" [hit]="item"></ais-snippet> •
167161
</p>
168162

169163
<footer>

‎examples/e-commerce/src/app/app.module.ts

+1-8
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,11 @@ import { NgAisModule } from 'angular-instantsearch';
44

55
import { AppComponent } from './app.component';
66
import { RatingMenu } from './rating-menu/rating-menu.component';
7-
import { Snippet } from './snippet/snippet.component';
87
import { ResetFiltersMobile } from './reset-filters-mobile/reset-filters-mobile.component';
98
import { NoResults } from './no-results/no-results.component';
109

1110
@NgModule({
12-
declarations: [
13-
AppComponent,
14-
RatingMenu,
15-
Snippet,
16-
ResetFiltersMobile,
17-
NoResults,
18-
],
11+
declarations: [AppComponent, RatingMenu, ResetFiltersMobile, NoResults],
1912
imports: [BrowserModule, NgAisModule.forRoot()],
2013
providers: [],
2114
bootstrap: [AppComponent],

‎examples/e-commerce/src/app/snippet/snippet.component.ts

-20
This file was deleted.

‎ng-package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"instantsearch.js/es": "instantsearch",
1111
"instantsearch.js/es/connectors": "instantsearch.connectors",
1212
"instantsearch.js/es/helpers": "instantsearch.helpers",
13+
"instantsearch.js/es/lib/utils": "instantsearch.lib.utils",
1314
"instantsearch.js/es/widgets/index/index": "instantsearch.widgets.index",
1415
"nouislider": "noUiSlider",
1516
"querystring-es3/encode": "qs.encode"

‎src/index.ts

+12
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,15 @@ export { NgAisToggleModule };
6161
import { NgAisHighlightModule } from './highlight/highlight.module';
6262
export { NgAisHighlightModule };
6363

64+
import { NgAisReverseHighlightModule } from './reverse-highlight/reverse-highlight.module';
65+
export { NgAisReverseHighlightModule };
66+
67+
import { NgAisSnippetModule } from './snippet/snippet.module';
68+
export { NgAisSnippetModule };
69+
70+
import { NgAisReverseSnippetModule } from './reverse-snippet/reverse-snippet.module';
71+
export { NgAisReverseSnippetModule };
72+
6473
import { NgAisRangeInputModule } from './range-input/range-input.module';
6574
export { NgAisRangeInputModule };
6675

@@ -113,6 +122,9 @@ const NGIS_MODULES = [
113122
NgAisRangeSliderModule,
114123
NgAisBreadcrumbModule,
115124
NgAisHighlightModule,
125+
NgAisReverseHighlightModule,
126+
NgAisSnippetModule,
127+
NgAisReverseSnippetModule,
116128
NgAisRangeInputModule,
117129
NgAisPanelModule,
118130
NgAisConfigureModule,

‎src/reverse-highlight/__tests__/__snapshots__/reverse-highlight.spec.ts.snap

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`reverse highlight should highlight strings 1`] = `
4+
<test-component
5+
attribute={[Function String]}
6+
highlightedTagName={[Function String]}
7+
hit={[Function Object]}
8+
>
9+
<ais-reverse-highlight>
10+
<span
11+
class="ais-ReverseHighlight"
12+
>
13+
foo
14+
<mark
15+
class="ais-ReverseHighlight-highlighted"
16+
>
17+
bar
18+
</mark>
19+
</span>
20+
</ais-reverse-highlight>
21+
</test-component>
22+
`;
23+
24+
exports[`reverse highlight should highlight with a custom highlightedTagName 1`] = `
25+
<test-component
26+
attribute={[Function String]}
27+
highlightedTagName={[Function String]}
28+
hit={[Function Object]}
29+
>
30+
<ais-reverse-highlight>
31+
<span
32+
class="ais-ReverseHighlight"
33+
>
34+
foo
35+
<em
36+
class="ais-ReverseHighlight-highlighted"
37+
>
38+
bar
39+
</em>
40+
</span>
41+
</ais-reverse-highlight>
42+
</test-component>
43+
`;

‎src/reverse-highlight/__tests__/reverse-highlight.spec.ts

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Component } from '@angular/core';
2+
import { TestBed } from '@angular/core/testing';
3+
4+
import { NgAisReverseHighlightModule } from '../reverse-highlight.module';
5+
6+
const render = ({ hit, attribute, highlightedTagName = 'mark' }) => {
7+
@Component({
8+
selector: 'test-component',
9+
template: `
10+
<ais-reverse-highlight [attribute]="attribute" [hit]="hit" [highlightedTagName]="highlightedTagName">
11+
</ais-reverse-highlight>
12+
`,
13+
})
14+
class TestComponent {
15+
hit = hit;
16+
attribute: string = attribute;
17+
highlightedTagName = highlightedTagName;
18+
}
19+
20+
TestBed.configureTestingModule({
21+
declarations: [TestComponent],
22+
imports: [NgAisReverseHighlightModule],
23+
});
24+
25+
const fixture = TestBed.createComponent(TestComponent);
26+
fixture.detectChanges();
27+
28+
return fixture;
29+
};
30+
31+
describe('reverse highlight', () => {
32+
it('should highlight strings', () => {
33+
const fixture = render({
34+
attribute: 'name',
35+
hit: {
36+
_highlightResult: {
37+
name: { value: '<mark>foo</mark> bar' },
38+
},
39+
},
40+
});
41+
expect(fixture).toMatchSnapshot();
42+
});
43+
44+
it('should highlight with a custom highlightedTagName', () => {
45+
const fixture = render({
46+
attribute: 'name',
47+
hit: {
48+
_highlightResult: {
49+
name: { value: '<mark>foo</mark> bar' },
50+
},
51+
},
52+
highlightedTagName: 'em',
53+
});
54+
expect(fixture).toMatchSnapshot();
55+
});
56+
});

‎src/reverse-highlight/reverse-highlight.module.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { NgModule } from '@angular/core';
2+
3+
import { NgAisReverseHighlight } from './reverse-highlight';
4+
5+
@NgModule({
6+
declarations: [NgAisReverseHighlight],
7+
exports: [NgAisReverseHighlight],
8+
})
9+
export class NgAisReverseHighlightModule {}

‎src/reverse-highlight/reverse-highlight.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
2+
3+
import { Hit } from 'instantsearch.js';
4+
import { reverseHighlight } from 'instantsearch.js/es/helpers';
5+
6+
@Component({
7+
selector: 'ais-reverse-highlight',
8+
changeDetection: ChangeDetectionStrategy.OnPush,
9+
template: `<span class="ais-ReverseHighlight" [innerHtml]="content"></span>`,
10+
})
11+
export class NgAisReverseHighlight {
12+
@Input() private readonly attribute: string;
13+
@Input() private readonly hit: Partial<Hit>;
14+
@Input() private readonly highlightedTagName: string = 'mark';
15+
16+
get content() {
17+
return reverseHighlight({
18+
attribute: this.attribute,
19+
hit: this.hit,
20+
highlightedTagName: this.highlightedTagName,
21+
});
22+
}
23+
}

‎src/reverse-snippet/__tests__/__snapshots__/reverse-snippet.spec.ts.snap

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`reverse snippet should snippet strings 1`] = `
4+
<test-component
5+
attribute={[Function String]}
6+
highlightedTagName={[Function String]}
7+
hit={[Function Object]}
8+
>
9+
<ais-reverse-snippet>
10+
<span
11+
class="ais-ReverseSnippet"
12+
>
13+
… foo
14+
<mark
15+
class="ais-ReverseSnippet-highlighted"
16+
>
17+
bar …
18+
</mark>
19+
</span>
20+
</ais-reverse-snippet>
21+
</test-component>
22+
`;
23+
24+
exports[`reverse snippet should snippet with a custom highlightedTagName 1`] = `
25+
<test-component
26+
attribute={[Function String]}
27+
highlightedTagName={[Function String]}
28+
hit={[Function Object]}
29+
>
30+
<ais-reverse-snippet>
31+
<span
32+
class="ais-ReverseSnippet"
33+
>
34+
… foo
35+
<em
36+
class="ais-ReverseSnippet-highlighted"
37+
>
38+
bar …
39+
</em>
40+
</span>
41+
</ais-reverse-snippet>
42+
</test-component>
43+
`;

‎src/reverse-snippet/__tests__/reverse-snippet.spec.ts

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Component } from '@angular/core';
2+
import { TestBed } from '@angular/core/testing';
3+
4+
import { NgAisReverseSnippetModule } from '../reverse-snippet.module';
5+
6+
const render = ({ hit, attribute, highlightedTagName = 'mark' }) => {
7+
@Component({
8+
selector: 'test-component',
9+
template: `
10+
<ais-reverse-snippet [attribute]="attribute" [hit]="hit" [highlightedTagName]="highlightedTagName">
11+
</ais-reverse-snippet>
12+
`,
13+
})
14+
class TestComponent {
15+
hit = hit;
16+
attribute: string = attribute;
17+
highlightedTagName = highlightedTagName;
18+
}
19+
20+
TestBed.configureTestingModule({
21+
declarations: [TestComponent],
22+
imports: [NgAisReverseSnippetModule],
23+
});
24+
25+
const fixture = TestBed.createComponent(TestComponent);
26+
fixture.detectChanges();
27+
28+
return fixture;
29+
};
30+
31+
describe('reverse snippet', () => {
32+
it('should snippet strings', () => {
33+
const fixture = render({
34+
attribute: 'description',
35+
hit: {
36+
_snippetResult: {
37+
description: { value: '… <mark>foo</mark> bar …' },
38+
},
39+
},
40+
});
41+
expect(fixture).toMatchSnapshot();
42+
});
43+
44+
it('should snippet with a custom highlightedTagName', () => {
45+
const fixture = render({
46+
attribute: 'description',
47+
hit: {
48+
_snippetResult: {
49+
description: { value: '… <mark>foo</mark> bar …' },
50+
},
51+
},
52+
highlightedTagName: 'em',
53+
});
54+
expect(fixture).toMatchSnapshot();
55+
});
56+
});

‎src/reverse-snippet/reverse-snippet.module.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { NgModule } from '@angular/core';
2+
3+
import { NgAisReverseSnippet } from './reverse-snippet';
4+
5+
@NgModule({
6+
declarations: [NgAisReverseSnippet],
7+
exports: [NgAisReverseSnippet],
8+
})
9+
export class NgAisReverseSnippetModule {}

‎src/reverse-snippet/reverse-snippet.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
2+
3+
import { Hit } from 'instantsearch.js';
4+
import { reverseSnippet } from 'instantsearch.js/es/helpers';
5+
6+
@Component({
7+
selector: 'ais-reverse-snippet',
8+
changeDetection: ChangeDetectionStrategy.OnPush,
9+
template: `<span class="ais-ReverseSnippet" [innerHtml]="content"></span>`,
10+
})
11+
export class NgAisReverseSnippet {
12+
@Input() private readonly attribute: string;
13+
@Input() private readonly hit: Partial<Hit>;
14+
@Input() private readonly highlightedTagName: string = 'mark';
15+
16+
get content() {
17+
return reverseSnippet({
18+
attribute: this.attribute,
19+
hit: this.hit,
20+
highlightedTagName: this.highlightedTagName,
21+
});
22+
}
23+
}

0 commit comments

Comments
 (0)
This repository has been archived.