-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.ts
114 lines (99 loc) · 3.52 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import { configurable, provide, tag, Events, Selectors, Store, StoreSections, Tag } from '@storefront/core';
@configurable
@provide<Breadcrumbs.Props, Breadcrumbs.State>(
'breadcrumbs',
({ showLabels, labels }, { fields, selectedNavigations, originalQuery, correctedQuery }) => ({
showLabels,
labels,
fields,
selectedNavigations,
originalQuery,
correctedQuery,
})
)
@tag('gb-breadcrumbs', require('./index.html'))
class Breadcrumbs {
props: Breadcrumbs.Props = {
showLabels: true,
labels: {
results: 'Results:',
noResults: 'No Results:',
corrected: 'Corrected:',
},
};
queryProps() {
const { showLabels, labels } = this.props;
const { originalQuery, correctedQuery } = this.state;
return { showLabels, labels, originalQuery, correctedQuery };
}
init() {
let navigationsSelector;
switch (this.props.storeSection) {
case StoreSections.PAST_PURCHASES:
this.subscribe(Events.PAST_PURCHASE_SELECTED_REFINEMENTS_UPDATED, this.updateFields);
this.subscribe(Events.PAST_PURCHASE_NAVIGATIONS_UPDATED, this.updateFields);
this.subscribe(Events.PAST_PURCHASE_NAVIGATIONS_UPDATED, this.updateSelectedNavigations);
navigationsSelector = () => this.select(Selectors.pastPurchaseNavigations);
break;
case StoreSections.SEARCH:
this.subscribe(Events.ORIGINAL_QUERY_UPDATED, this.updateOriginalQuery);
this.subscribe(Events.CORRECTED_QUERY_UPDATED, this.updateCorrectedQuery);
this.subscribe(Events.NAVIGATIONS_UPDATED, this.updateFields);
this.subscribe(Events.NAVIGATIONS_UPDATED, this.updateSelectedNavigations);
navigationsSelector = () => this.select(Selectors.navigations);
break;
}
this.state = {
navigationsSelector,
fields: this.getFields(navigationsSelector()),
originalQuery: this.select(Selectors.query),
selectedNavigations: this.getSelectedNavigations(navigationsSelector())
};
}
onBeforeMount() {
// force update on before-mount, note that originalQuery is set in constructor
const correctedQuery = this.select(Selectors.currentQuery);
if (this.state.originalQuery !== correctedQuery) {
this.updateCorrectedQuery(correctedQuery);
}
}
updateOriginalQuery = (originalQuery: string) => this.set({ originalQuery });
updateCorrectedQuery = (correctedQuery: string) => this.set({ correctedQuery });
/**
* @deprecated
*/
updateFields = () => this.set({ fields: this.getFields(this.state.navigationsSelector()) });
updateSelectedNavigations = () =>
this.set({ selectedNavigations: this.getSelectedNavigations(this.state.navigationsSelector()) })
/**
* @deprecated
*/
getFields(navigations: Store.Navigation[]) {
return navigations
.filter((navigation) => navigation.selected.length !== 0)
.map((navigation) => navigation.field);
}
getSelectedNavigations(navigations: Store.Navigation[]) {
return navigations
.filter((navigation) => navigation.selected.length !== 0);
}
}
interface Breadcrumbs extends Tag<Breadcrumbs.Props, Breadcrumbs.State> {}
namespace Breadcrumbs {
export interface Props extends Tag.Props {
showLabels?: boolean;
labels?: {
results?: string;
noResults?: string;
corrected?: string;
};
}
export interface State {
fields: string[];
originalQuery: string;
selectedNavigations: Store.Navigation[];
correctedQuery?: string;
navigationsSelector?: () => Store.Navigation[];
}
}
export default Breadcrumbs;