+
}
lastPageText={}
prevPageText={}
nextPageText={}
- activeLinkClass={ 'active' }
+ activeLinkClass={ styles.active }
itemsCountPerPage={ this.props.itemsCountPerPage }
totalItemsCount={ this.props.totalItems }
pageRangeDisplayed={5}
diff --git a/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsContainer/ISearchResultsContainerProps.ts b/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsContainer/ISearchResultsContainerProps.ts
index 7adc65989..ff36046fb 100644
--- a/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsContainer/ISearchResultsContainerProps.ts
+++ b/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsContainer/ISearchResultsContainerProps.ts
@@ -14,12 +14,12 @@ interface ISearchResultsContainerProps {
/**
* The search data provider instance
*/
- searchDataProvider: ISearchService;
+ searchService: ISearchService;
/**
* The taxonomy data provider instance
*/
- taxonomyDataProvider: ITaxonomyService;
+ taxonomyService: ITaxonomyService;
/**
* The search query keywords
diff --git a/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsContainer/ISearchResultsContainerState.ts b/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsContainer/ISearchResultsContainerState.ts
index 0d6f7c20e..51acb8054 100644
--- a/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsContainer/ISearchResultsContainerState.ts
+++ b/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsContainer/ISearchResultsContainerState.ts
@@ -42,11 +42,6 @@ interface ISearchResultsContainerState {
*/
areResultsLoading: boolean;
- /**
- * Indicates whether or not the componetn loads for the first time
- */
- isComponentLoading: boolean;
-
/**
* Keeps the last query in case you change the query in the propery panel
*/
diff --git a/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsContainer/SearchResultsContainer.tsx b/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsContainer/SearchResultsContainer.tsx
index 32b59e6fa..626b24d31 100644
--- a/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsContainer/SearchResultsContainer.tsx
+++ b/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsContainer/SearchResultsContainer.tsx
@@ -3,16 +3,16 @@ import ISearchContainerProps from './ISearchResultsContainerProps';
import ISearchContainerState from './ISearchResultsContainerState';
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
-import { Shimmer, ShimmerElementType as ElemType } from 'office-ui-fabric-react/lib/Shimmer';
+import { Shimmer, ShimmerElementType as ElemType, ShimmerElementsGroup } from 'office-ui-fabric-react/lib/Shimmer';
import { Logger, LogLevel } from '@pnp/logging';
import * as strings from 'SearchWebPartStrings';
import { IRefinementFilter, IRefinementValue, IRefinementResult } from '../../../../models/ISearchResult';
-import '../SearchResultsWebPart.scss';
import Paging from '../Paging/Paging';
import { Overlay } from 'office-ui-fabric-react/lib/Overlay';
import { DisplayMode } from '@microsoft/sp-core-library';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import SearchResultsTemplate from '../Layouts/SearchResultsTemplate';
+import styles from '../SearchResultsWebPart.module.scss';
declare var System: any;
let FilterPanel = null;
@@ -33,7 +33,6 @@ export default class SearchResultsContainer extends React.Component
-
-
-
- ;
- }
+ if (areResultsLoading) {
- let webPartTitle = null;
- if (this.props.webPartTitle && this.props.webPartTitle.length > 0) {
- webPartTitle =
;
- }
-
- if (isComponentLoading) {
- //renderWpContent =
;
- renderWpContent = (
-
-
-
-
);
- } else {
-
- if (hasError) {
- renderWpContent =
{errorMessage};
+ if (items.RelevantResults.length > 0) {
+ renderOverlay =
+
+
+
+
;
} else {
-
- let filterPanel = this.state.availableFilters && this.state.availableFilters.length > 0 ?
:
;
-
- if (items.RelevantResults.length === 0) {
-
- if (!this.props.showBlank) {
- renderWpContent =
-
- {webPartTitle}
- {filterPanel}
-
{strings.NoResultMessage}
-
;
- } else {
- if (this.props.displayMode === DisplayMode.Edit) {
- renderWpContent =
{strings.ShowBlankEditInfoMessage};
- }
- }
- } else {
- renderWpContent =
-
- {webPartTitle}
- {filterPanel}
- {renderOverlay}
-
- {this.props.showPaging ?
-
- : null
- }
-
;
+ let i = 0;
+ let renderShimmerElements: JSX.Element[] = [];
+ while (i < 4) {
+ renderShimmerElements.push(
+
);
+ i++;
}
+
+ renderWpContent =
{ renderShimmerElements }
;
}
}
+
+ if (this.props.webPartTitle && this.props.webPartTitle.length > 0) {
+ renderWebPartTitle =
;
+ }
+
+ if (hasError) {
+ renderWpContent =
{errorMessage};
+ } else {
+
+ const currentQuery = this.props.queryKeywords + this.props.searchService.queryTemplate + this.props.selectedProperties.join(',');
+ const renderFilterPanel = this.state.availableFilters && this.state.availableFilters.length > 0 ?
+
:
;
+
+ if (items.RelevantResults.length === 0) {
+
+ // Check if a search request has already been entered (to distinguish the first use scenario)
+ if (!this.props.showBlank && this.state.lastQuery && !this.state.areResultsLoading) {
+ renderWpContent =
+
+ {renderWebPartTitle}
+ {renderFilterPanel}
+
{strings.NoResultMessage}
+
;
+ } else {
+ if (this.props.displayMode === DisplayMode.Edit && !areResultsLoading) {
+ renderWpContent =
{strings.ShowBlankEditInfoMessage};
+ }
+ }
+ } else {
+
+ renderWpContent =
+
+ {renderWebPartTitle}
+ {renderFilterPanel}
+ {renderOverlay}
+
+ {this.props.showPaging ?
+
+ : null
+ }
+
;
+ }
+ }
+
return (
-
+
{renderWpContent}
);
@@ -148,11 +165,11 @@ export default class SearchResultsContainer extends React.Component
0) {
@@ -163,16 +180,12 @@ export default class SearchResultsContainer extends React.Component 0) {
+ if (FilterPanel === null && localizedFilters && localizedFilters.length > 0) {
const filterPanelComponent = await System.import(
/* webpackChunkName: 'search-filterpanel' */
'../FilterPanel'
@@ -238,6 +249,7 @@ export default class SearchResultsContainer extends React.Component 0) {
// Process all terms in a single JSOM call for performance purpose. In general JSOM is pretty slow so we try to limit the number of calls...
- await this.props.taxonomyDataProvider.initialize();
- const termValues = await this.props.taxonomyDataProvider.getTermsById(termsToLocalize.map((t) => { return t.termId; }));
+ await this.props.taxonomyService.initialize();
+ const termValues = await this.props.taxonomyService.getTermsById(termsToLocalize.map((t) => { return t.termId; }));
const termsEnumerator = termValues.getEnumerator();
@@ -432,4 +446,24 @@ export default class SearchResultsContainer extends React.Component
+
+
+ ;
+ }
}
\ No newline at end of file
diff --git a/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsWebPart.scss b/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsWebPart.module.scss
similarity index 53%
rename from samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsWebPart.scss
rename to samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsWebPart.module.scss
index ba2b53ac0..0abfca5d7 100644
--- a/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsWebPart.scss
+++ b/samples/react-search-refiners/src/webparts/searchResults/components/SearchResultsWebPart.module.scss
@@ -1,17 +1,17 @@
.searchWp {
+ min-height: 35px;
+
+ // Needed to avoid overlay overflow
+ position: relative;
+
&__noresult {
padding:10px;
text-align: center;
}
- iframe {
- border: 0;
- width: 100%;
- }
-
&__filterResultBtn {
- color: "[theme: themePrimary]";
+ color: "[theme: themePrimary, default: #005a9e]";
}
&__selectedFilters {
@@ -34,7 +34,7 @@
}
i:hover {
- color: "[theme: themePrimary]";
+ color: "[theme: themePrimary, default: #005a9e]";
cursor: pointer;
}
}
@@ -43,7 +43,7 @@
text-align: center;
margin-top: 15px;
- .searchWp__paginationContainer__pagination {
+ &__pagination {
display: inline-block;
text-align: center;
@@ -58,65 +58,69 @@
a {
float: left;
- color: "[theme: themePrimary]";
+ color: "[theme: themePrimary, default: #005a9e]";
padding: 5px 10px;
text-decoration: none;
border-radius: 15px;
i {
font-size: 10px;
- color: "[theme: themePrimary]";
- }
+ color: "[theme: themePrimary, default: #005a9e]";
+ }
+ }
+
+ .active {
+ background-color: "[theme: themePrimary, default: #005a9e]";
+ color: white;
}
a:visited {
color: inherit;
}
-
- a.active {
- background-color: "[theme: themePrimary]";
- color: white;
- }
}
}
}
}
-}
-.filterPanel {
+ &__filterPanel {
- &__body {
- padding: 20px;
- overflow: auto;
+ position: relative;
- .header-icon {
- text-align: right;
- margin-bottom:8px;
-
- .ms-Icon {
- font-size: 16px;
- font-weight: 500;
- line-height: 1.5;
- letter-spacing: 0.5px;
-
- &.ms-Icon--CalculatorSubtract, &.ms-Icon--CalculatorAddition {
- font-weight: bold;
+ &__body {
+ padding-right: 20px;
+ padding-left: 20px;
+ overflow: auto;
+
+ &__headerIcon {
+ text-align: right;
+ margin-top: 5px;
+
+ .ms-Icon {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 1.5;
+ letter-spacing: 0.5px;
+
+ &.ms-Icon--CalculatorSubtract, &.ms-Icon--CalculatorAddition {
+ font-weight: bold;
+ }
}
}
- }
-
- &__allFiltersToggle {
- margin-bottom: 25px;
- }
-
- &__group {
-
- .ms-List-page~.ms-List-page {
- margin-top: 15px;
+
+ &__allFiltersToggle {
+ margin-bottom: 15px;
+ padding-left: 10px;
}
-
- button {
- padding: 10px;
+
+ &__group {
+
+ &__header {
+ margin-top: 15px;
+ }
+
+ button {
+ padding: 10px;
+ }
}
}
}
diff --git a/samples/react-search-refiners/src/webparts/searchResults/loc/en-us.js b/samples/react-search-refiners/src/webparts/searchResults/loc/en-us.js
index f9a94647d..712d90691 100644
--- a/samples/react-search-refiners/src/webparts/searchResults/loc/en-us.js
+++ b/samples/react-search-refiners/src/webparts/searchResults/loc/en-us.js
@@ -10,7 +10,7 @@ define([], function() {
"NoResultMessage": "There are no results to show",
"RefinersFieldLabel": "Refiners",
"FilterPanelTitle": "Available filters",
- "FilterResultsButtonLabel": "Filter results",
+ "FilterResultsButtonLabel": "Filters",
"SelectedFiltersLabel": "Selected filters:",
"ApplyAllFiltersLabel": "Apply all filters",
"RemoveAllFiltersLabel": "Remove all filters",
@@ -50,6 +50,9 @@ define([], function() {
"ErrorTemplateExtension": "The template must be a valid .htm or .html file",
"ErrorTemplateResolve": "Unable to resolve the specified template. Error details: '{0}'",
"WebPartTitle": "Web part title",
- "HandlebarsHelpersDescription": "Enable functions from moment and handlebars helpers. See https://github.com/SharePoint/sp-dev-fx-webparts/blob/master/samples/react-search-refiners/README.md#available-tokens for more information."
+ "HandlebarsHelpersDescription": "Enable functions from moment and handlebars helpers. See https://github.com/SharePoint/sp-dev-fx-webparts/blob/master/samples/react-search-refiners/README.md#available-tokens for more information.",
+ "DynamicDataSourceLabel": "Available data sources",
+ "DynamicDataSourcePropertyLabel": "Available properties",
+ "PromotedResultsLabel": "Promoted result(s)"
}
});
\ No newline at end of file
diff --git a/samples/react-search-refiners/src/webparts/searchResults/loc/fr-fr.js b/samples/react-search-refiners/src/webparts/searchResults/loc/fr-fr.js
index 76eb50fb7..77645ec3f 100644
--- a/samples/react-search-refiners/src/webparts/searchResults/loc/fr-fr.js
+++ b/samples/react-search-refiners/src/webparts/searchResults/loc/fr-fr.js
@@ -10,7 +10,7 @@ define([], function() {
"NoResultMessage": "Il n'y a aucun résultat à afficher.",
"RefinersFieldLabel": "Filtres",
"FilterPanelTitle": "Filtres disponibles",
- "FilterResultsButtonLabel": "Filtrer l'affichage",
+ "FilterResultsButtonLabel": "Filtrer",
"SelectedFiltersLabel": "Filtre(s) appliqué(s):",
"ApplyAllFiltersLabel": "Appliquer tous les filters",
"RemoveAllFiltersLabel": "Supprimer tous les filtres",
@@ -50,6 +50,9 @@ define([], function() {
"ErrorTemplateExtension": "Le file modèle doit être un fichier .htm ou .html valide",
"ErrorTemplateResolve": "Impossible de résoudre le fichier. Détails: '{0}'",
"WebPartTitle": "Titre de web part",
- "HandlebarsHelpersDescription": "Activer les fonctions de moment et handlebars helpers. Voir https://github.com/SharePoint/sp-dev-fx-webparts/blob/master/samples/react-search-refiners/README.md#available-tokens pour plus d'informations."
+ "HandlebarsHelpersDescription": "Activer les fonctions de moment et handlebars helpers. Voir https://github.com/SharePoint/sp-dev-fx-webparts/blob/master/samples/react-search-refiners/README.md#available-tokens pour plus d'informations.",
+ "DynamicDataSourceLabel": "Source de données disponibles",
+ "DynamicDataSourcePropertyLabel": "Propriétés disponibles",
+ "PromotedResultsLabel": "Résultat(s) promu(s)"
}
});
\ No newline at end of file
diff --git a/samples/react-search-refiners/src/webparts/searchResults/loc/mystrings.d.ts b/samples/react-search-refiners/src/webparts/searchResults/loc/mystrings.d.ts
index 8af763fc2..ad27bcfbe 100644
--- a/samples/react-search-refiners/src/webparts/searchResults/loc/mystrings.d.ts
+++ b/samples/react-search-refiners/src/webparts/searchResults/loc/mystrings.d.ts
@@ -50,6 +50,9 @@ declare interface ISearchWebPartStrings {
ErrorTemplateResolve: string;
WebPartTitle: string;
HandlebarsHelpersDescription: string;
+ DynamicDataSourceLabel: string;
+ DynamicDataSourcePropertyLabel: string;
+ PromotedResultsLabel: string;
}
declare module 'SearchWebPartStrings' {
+
+#### Best bets
+
+This WP supports SharePoint best bets via SharePoint query rules:
+
+
+
+