+ {!this.props.apiKey || !this.props.newsUrl ? (
+
+ {errorMesage}
+
+
+ ) : _renderNews.length > 0 ? (
+ <>
+
+ );
+ }
+}
diff --git a/samples/react-global-news-sp2019/src/webparts/components/NewsItem/NewsItem.tsx b/samples/react-global-news-sp2019/src/webparts/components/NewsItem/NewsItem.tsx
new file mode 100644
index 000000000..5a17af8f2
--- /dev/null
+++ b/samples/react-global-news-sp2019/src/webparts/components/NewsItem/NewsItem.tsx
@@ -0,0 +1,96 @@
+import { IArticle } from "../../../services/IArticle";
+import {
+ Label,
+ Text,
+ DocumentCardActivity
+} from "office-ui-fabric-react";
+import * as moment from "moment";
+import styles from "../News.module.scss";
+import * as React from "react";
+import * as strings from "NewsWebPartStrings";
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const _defaultImage:string = require("./../../../../assets/news.jpg");
+
+export const NewsItem = (props: { article: IArticle }):JSX.Element => {
+ const { article } = props;
+ return (
+ <>
+
+ {_renderNews}
+
+
+ {this.state.totalPages > 1 && (
+ <>
+ {
+ this._getNews(
+ this.props.newsUrl,
+ this.props.apiKey,
+ page
+ );
+ }}
+ />
+
+ )}
+
+
+ ) : (
+ {
+ ev.preventDefault();
+ window.open(article.url, "_blank");
+ }}
+ >
+
+
+ );
+};
diff --git a/samples/react-global-news-sp2019/src/webparts/components/NewsTile/NewsTile.module.scss b/samples/react-global-news-sp2019/src/webparts/components/NewsTile/NewsTile.module.scss
new file mode 100644
index 000000000..0a53e9543
--- /dev/null
+++ b/samples/react-global-news-sp2019/src/webparts/components/NewsTile/NewsTile.module.scss
@@ -0,0 +1,178 @@
+@import "~office-ui-fabric-react/dist/sass/References.scss";
+@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
+ .card {
+ flex-direction: column;
+ }
+ .image {
+ width: 100%;
+ }
+ .newsTitle {
+ margin-top: 20px;
+ }
+}
+
+@media screen and (min-width: 320px) and (max-width: 1024px){
+
+}
+
+.image {
+ object-fit: cover;
+}
+
+.newsTitle {
+ font-size: 20px;
+ padding-top: 0px;
+ /* color: $ms-color-themePrimary; */
+ margin-bottom: 20px;
+ @include ms-fontWeight-semibold;
+ font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system,
+ BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+}
+.row {
+ @include ms-Grid-row;
+ @include ms-fontColor-white;
+ background-color: $ms-color-themeDark;
+ padding: 20px;
+}
+.column {
+ @include ms-Grid-col;
+ @include ms-lg10;
+ @include ms-xl8;
+ @include ms-xlPush2;
+ @include ms-lgPush1;
+}
+
+.title {
+ @include ms-font-xl;
+ @include ms-fontColor-white;
+}
+
+.description {
+ /* color: $ms-color-neutralSecondaryAlt; */
+ @include ms-fontSize-m;
+ padding-left: 16px;
+ padding-right: 16px;
+ line-height: 22px;
+ font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system,
+ BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+ margin-bottom: 10px;
+}
+
+.author {
+ font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system,
+ BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+}
+
+.date {
+ @include ms-font-s-plus;
+ max-width: 200px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-right: 15px;
+ font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system,
+ BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+}
+
+.descriptionTile {
+ /* color: $ms-color-neutralSecondaryAlt;*/
+ @include ms-fontSize-m;
+ padding-left: 16px;
+ padding-right: 16px;
+ line-height: 22px;
+ max-height: 135px;
+ min-height: 135px;
+ margin-bottom: 15px;
+ display: block;
+ overflow: hidden;
+ font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system,
+ BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+}
+
+.separator {
+ border-top: 1px solid lighten(#333, 70%);
+ margin: 0 auto;
+ padding-bottom: 5px;
+ width: 90%;
+}
+
+.cardTile {
+max-width: 100%
+}
+
+[data-theme="default"] {
+ .cardTile {
+ border-color: $ms-color-neutralTertiaryAlt;
+ }
+ .separator {
+ border-top: 1px solid $ms-color-neutralTertiaryAlt;
+ margin: 0 auto;
+ padding-bottom: 5px;
+ width: 90%;
+ }
+}
+[data-theme="dark"] {
+ .cardTile {
+ border-color: $ms-color-neutralSecondaryAlt;
+ }
+ .separator {
+ border-top: 1px solid $ms-color-neutralSecondaryAlt;
+ margin: 0 auto;
+ padding-bottom: 5px;
+ width: 90%;
+ }
+ .cardTile:hover {
+ border-color: $ms-color-neutralTertiary;
+ }
+ .descriptionTile {
+ /* color: $ms-color-neutralSecondaryAlt;*/
+ @include ms-fontSize-m;
+ padding-left: 16px;
+ padding-right: 16px;
+ line-height: 22px;
+ max-height: 135px;
+ min-height: 135px;
+ margin-bottom: 15px;
+ display: block;
+ overflow: hidden;
+ color: $ms-color-neutralTertiaryAlt;
+ font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system,
+ BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+ }
+
+ :global {
+ .ms-Persona-initials {
+ color: $ms-color-white;
+ }
+ }
+}
+[data-theme="contrast"] {
+ .cardTile {
+ border-color: $ms-color-neutralTertiaryAlt;
+ }
+ .separator {
+ border-top: 1px solid $ms-color-neutralTertiaryAlt;
+ margin: 0 auto;
+ padding-bottom: 5px;
+ width: 90%;
+ }
+ .descriptionTile {
+ /* color: $ms-color-neutralSecondaryAlt;*/
+ @include ms-fontSize-m;
+ padding-left: 16px;
+ padding-right: 16px;
+ line-height: 22px;
+ max-height: 135px;
+ min-height: 135px;
+ margin-bottom: 15px;
+ display: block;
+ overflow: hidden;
+ color: $ms-color-neutralTertiaryAlt;
+ font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system,
+ BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+ }
+ :global {
+ .ms-Persona-initials {
+ color: $ms-color-white;
+ }
+ }
+}
diff --git a/samples/react-global-news-sp2019/src/webparts/components/NewsTile/NewsTile.tsx b/samples/react-global-news-sp2019/src/webparts/components/NewsTile/NewsTile.tsx
new file mode 100644
index 000000000..4ecd7a66d
--- /dev/null
+++ b/samples/react-global-news-sp2019/src/webparts/components/NewsTile/NewsTile.tsx
@@ -0,0 +1,84 @@
+
+import { IArticle } from "../../../services/IArticle";
+import {
+ Text,
+ DocumentCard,
+ DocumentCardTitle,
+ DocumentCardDetails,
+ DocumentCardActivity,
+} from "office-ui-fabric-react";
+import * as moment from "moment";
+import styles from "./NewsTile.module.scss";
+import * as React from "react";
+import * as strings from "NewsWebPartStrings";
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const _defaultImage: string = require("../../../../assets/news.jpg");
+
+export const NewsTile = (props: { article: IArticle }):JSX.Element => {
+ const { article } = props;
+
+ return (
+ <>
+
+ 
{
+ ev.currentTarget.setAttribute('src',_defaultImage); // set Default image if can not load article image
+ }}
+ >
+
+
+
+
+
+
+
+
+
+ {article.description
+ ? article.description.trim()
+ : strings.CanNotShowArticleTextMessage}
+
+
+
+ 
{
+ ev.currentTarget.setAttribute("src", _defaultImage); // set Default image if can not load article image
+ }}
+ >
+
+
+
+
+
+ {article.description
+ ? article.description
+ : strings.CanNotShowArticleTextMessage}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/samples/react-global-news-sp2019/src/webparts/components/NoNews/NoNews.tsx b/samples/react-global-news-sp2019/src/webparts/components/NoNews/NoNews.tsx
new file mode 100644
index 000000000..6be737b51
--- /dev/null
+++ b/samples/react-global-news-sp2019/src/webparts/components/NoNews/NoNews.tsx
@@ -0,0 +1,28 @@
+import {
+ Icon,
+ Stack,
+ DocumentCardTitle} from "office-ui-fabric-react";
+import styles from "../News.module.scss";
+import React from "react";
+
+export const NoNews = ():JSX.Element => {
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/samples/react-global-news-sp2019/src/webparts/news/NewsWebPart.manifest.json b/samples/react-global-news-sp2019/src/webparts/news/NewsWebPart.manifest.json
new file mode 100644
index 000000000..724faf6c9
--- /dev/null
+++ b/samples/react-global-news-sp2019/src/webparts/news/NewsWebPart.manifest.json
@@ -0,0 +1,39 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+ "id": "137868a8-8e7e-4e06-85f3-a8913f5ff71c",
+ "alias": "NewsWebPart",
+ "componentType": "WebPart",
+ "supportsFullBleed": true, // suport to full width sections
+ // The "*" signifies that the version should be taken from the package.json
+ "version": "*",
+ "manifestVersion": 2,
+
+
+ // If true, the component can only be installed on sites where Custom Script is allowed.
+ // Components that allow authors to embed arbitrary script code should set this to true.
+ // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+ "requiresCustomScript": false,
+
+
+ "preconfiguredEntries": [{
+ "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+ "group": { "default": "Other" },
+ "title": { "default": "World News" },
+ "description": { "default": "World News WebPart" },
+ "officeFabricIconFontName": "NewsSearch",
+ "properties": {
+ "title": "News",
+ "newsUrl": "https://newsapi.org/v2/everything?q=*",
+ "apiKey": "1da2fba78a5e459ba299f002f53155cf",
+ "endpoint":"",
+ "queryTitleOnly" : "",
+ "domains": "",
+ "excludeDomains": "",
+ "language":"",
+ "country": "ALL",
+ "category": "general",
+ "pagesize": 12,
+ "viewOption": "tiles" // tiles or list
+ }
+ }]
+}
diff --git a/samples/react-global-news-sp2019/src/webparts/news/NewsWebPart.ts b/samples/react-global-news-sp2019/src/webparts/news/NewsWebPart.ts
new file mode 100644
index 000000000..11de1224d
--- /dev/null
+++ b/samples/react-global-news-sp2019/src/webparts/news/NewsWebPart.ts
@@ -0,0 +1,485 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from "react";
+import * as ReactDom from "react-dom";
+import { Version } from "@microsoft/sp-core-library";
+import {
+ PropertyPaneChoiceGroup,
+ PropertyPaneToggle,
+ PropertyPaneDropdown,
+ IPropertyPaneDropdownOption,
+ PropertyPaneSlider,
+ PropertyPaneLabel,
+ BaseClientSideWebPart,
+ IPropertyPaneConfiguration,
+ PropertyPaneTextField
+} from '@microsoft/sp-webpart-base';
+
+import * as lodash from "lodash";
+import * as strings from "NewsWebPartStrings";
+import News from "../components/News";
+import { INewsProps } from "../components/INewsProps";
+import dataservices from "../../services/dataservices";
+import { IDropdownOption } from "office-ui-fabric-react";
+import { PropertyFieldMultiSelect } from "@pnp/spfx-property-controls/lib/PropertyFieldMultiSelect";
+import { ISourcesResults } from "../../services/ISourcesResults";
+
+import { Theme } from 'spfx-uifabric-themes';
+
+
+const languages: IPropertyPaneDropdownOption[] = [
+ { key: "all", text: "All Languages" },
+ { key: "ar", text: "Arabic" },
+ { key: "de", text: "German" },
+ { key: "en", text: "English" },
+ { key: "es", text: "Castilian" },
+ { key: "fr", text: "French" },
+ { key: "he", text: "Hebrew" },
+ { key: "it", text: "Italian" },
+ { key: "nl", text: "Dutch" },
+ { key: "no", text: "Norwegian" },
+ { key: "pt", text: "Portuguese" },
+ { key: "ru", text: "Russian" },
+ { key: "se", text: "Northern Sami" },
+ { key: "zh", text: "Chinese" }
+];
+
+const countries: IPropertyPaneDropdownOption[] = [
+ { key: "ALL", text: "All Countries" },
+ { key: "AE", text: "United Arab Emirates" },
+ { key: "AR", text: "Argentina" },
+ { key: "AT", text: "Austria" },
+ { key: "AU", text: "Australia" },
+ { key: "BE", text: "Belgium" },
+ { key: "BG", text: "Bulgaria" },
+ { key: "BR", text: "Brazil" },
+ { key: "CA", text: "Canada" },
+ { key: "CH", text: "Switzerland" },
+ { key: "CN", text: "China" },
+ { key: "CO", text: "Colombia" },
+ { key: "CU", text: "Cuba" },
+ { key: "CZ", text: "Czech Republic" },
+ { key: "DE", text: "Germany" },
+ { key: "EG", text: "Egypt" },
+ { key: "FR", text: "France" },
+ { key: "GB", text: "United Kingdom" },
+ { key: "GR", text: "Greece" },
+ { key: "HK", text: "Hong Kong" },
+ { key: "HU", text: "Hungary" },
+ { key: "ID", text: "Indonesia" },
+ { key: "IE", text: "Ireland" },
+ { key: "IL", text: "Israel" },
+ { key: "IN", text: "India" },
+ { key: "IT", text: "Italy" },
+ { key: "JP", text: "Japan" },
+ { key: "KR", text: "Korea, Republic of" },
+ { key: "LT", text: "Lithuania" },
+ { key: "LV", text: "Latvia" },
+ { key: "MA", text: "Morocco" },
+ { key: "MX", text: "Mexico" },
+ { key: "MY", text: "Malaysia" },
+ { key: "NG", text: "Nigeria" },
+ { key: "NL", text: "Netherlands" },
+ { key: "NO", text: "Norway" },
+ { key: "NZ", text: "New Zealand" },
+ { key: "PH", text: "Philippines" },
+ { key: "PL", text: "Poland" },
+ { key: "PT", text: "Portugal" },
+ { key: "RO", text: "Romania" },
+ { key: "RS", text: "Serbia" },
+ { key: "RU", text: "Russian Federation" },
+ { key: "SA", text: "Saudi Arabia" },
+ { key: "SE", text: "Sweden" },
+ { key: "SG", text: "Singapore" },
+ { key: "SI", text: "Slovenia" },
+ { key: "SK", text: "Slovakia" },
+ { key: "TH", text: "Thailand" },
+ { key: "TR", text: "Turkey" },
+ { key: "TW", text: "Taiwan, Province of China" },
+ { key: "UA", text: "Ukraine" },
+ { key: "US", text: "United States" },
+ { key: "VE", text: "Venezuela, Bolivarian Republic of" },
+ { key: "ZA", text: "South Africa" }
+];
+
+const categories: IPropertyPaneDropdownOption[] = [
+ { key: "business", text: "business" },
+ { key: "entertainment", text: "entertainment" },
+ { key: "general", text: "general" },
+ { key: "health", text: "health" },
+ { key: "science", text: "science" },
+ { key: "sports", text: "sports" },
+ { key: "technology", text: "technology" }
+];
+
+export interface INewsWebPartProps {
+ title: string;
+ newsUrl: string;
+ apiKey: string;
+ endpoint: number;
+ queryTitleOnly: boolean;
+ domains: string;
+ excludeDomains: string;
+ language: string;
+ country: string;
+ category: string;
+ query: string;
+ pagesize: number;
+ viewOption: string;
+ sources: string[];
+}
+
+export default class NewsWebPart extends BaseClientSideWebPart<
+ INewsWebPartProps
+> {
+ private _sourcesOptions: IDropdownOption[] = [];
+
+
+ protected async onInit(): Promise
+
+
+ "+e+"
"),this.data.innerHTML=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"order",{get:function(){return this.data.position.controlIndex},set:function(e){this.data.position.controlIndex=e},enumerable:!0,configurable:!0}),t.prototype.onColumnChange=function(e){this.data.position.sectionFactor=e.factor,this.data.position.controlIndex=wt(e.controls),this.data.position.zoneIndex=e.data.position.zoneIndex,this.data.position.sectionIndex=e.order,this.data.position.layoutIndex=e.data.position.layoutIndex},t.Default={addedFromPersistedData:!1,anchorComponentId:"",controlType:4,displayMode:2,editorType:"CKEditor",emphasis:{},id:"",innerHTML:"",position:{controlIndex:1,layoutIndex:1,sectionFactor:12,sectionIndex:1,zoneIndex:1}},t}(Mt),Dt=function(e){function t(n){return void 0===n&&(n=JSON.parse(JSON.stringify(t.Default))),e.call(this,n)||this}return l(t,e),t.fromComponentDef=function(e){var n=new t;return n.import(e),n},Object.defineProperty(t.prototype,"title",{get:function(){return this.data.webPartData.title},set:function(e){this.data.webPartData.title=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"description",{get:function(){return this.data.webPartData.description},set:function(e){this.data.webPartData.description=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"order",{get:function(){return this.data.position.controlIndex},set:function(e){this.data.position.controlIndex=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"height",{get:function(){return this.data.reservedHeight},set:function(e){this.data.reservedHeight=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"width",{get:function(){return this.data.reservedWidth},set:function(e){this.data.reservedWidth=e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dataVersion",{get:function(){return this.data.webPartData.dataVersion},set:function(e){this.data.webPartData.dataVersion=e},enumerable:!0,configurable:!0}),t.prototype.setProperties=function(e){return this.data.webPartData.properties=Object(o.f)(this.data.webPartData.properties,e),this},t.prototype.getProperties=function(){return this.data.webPartData.properties},t.prototype.onColumnChange=function(e){this.data.position={controlIndex:wt(e.controls),layoutIndex:e.data.position.layoutIndex,sectionFactor:e.factor,sectionIndex:e.data.position.sectionIndex,zoneIndex:e.data.position.zoneIndex}},t.prototype.import=function(e){var t=Object(o.h)(),n=e.Id.replace(/^\{|\}$/g,"").toLowerCase(),r=JSON.parse(e.Manifest).preconfiguredEntries[0];this.setData(Object.assign({},this.data,{id:t,webPartData:{dataVersion:"1.0",description:r.description.default,id:n,instanceId:t,properties:r.properties,title:r.title.default},webPartId:n}))},t.Default={addedFromPersistedData:!1,controlType:3,displayMode:2,emphasis:{},id:null,position:{controlIndex:1,layoutIndex:1,sectionFactor:12,sectionIndex:1,zoneIndex:1},reservedHeight:500,reservedWidth:500,webPartData:null,webPartId:null},t}(Mt);new Map([["text","Querytext"],["template","QueryTemplate"],["sourceId","SourceId"],["trimDuplicatesIncludeId",""],["startRow",""],["rowLimit",""],["rankingModelId",""],["rowsPerPage",""],["selectProperties",""],["culture",""],["timeZoneId",""],["refinementFilters",""],["refiners",""],["hiddenConstraints",""],["sortList",""],["timeout",""],["hithighlightedProperties",""],["clientType",""],["personalizationData",""],["resultsURL",""],["queryTag",""],["properties",""],["queryTemplatePropertiesUrl",""],["reorderingRules",""],["hitHighlightedMultivaluePropertyLimit",""],["collapseSpecification",""],["uiLanguage",""],["desiredSnippetLength",""],["maxSnippetLength",""],["summaryLength",""]]),new Map([]);var Ot,Lt,Et,Ft=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return l(t,e),t.prototype.execute=function(e){var t=this,n=this.parseQuery(e),r=Object(o.n)({request:Object(o.f)(S("Microsoft.Office.Server.Search.REST.SearchRequest"),Object.assign({},n,{HitHighlightedProperties:this.fixArrProp(n.HitHighlightedProperties),Properties:this.fixArrProp(n.Properties),RefinementFilters:this.fixArrProp(n.RefinementFilters),ReorderingRules:this.fixArrProp(n.ReorderingRules),SelectProperties:this.fixArrProp(n.SelectProperties),SortList:this.fixArrProp(n.SortList)}))});if(this._useCaching){this._forceCaching=!0;var a="PnPjs.SearchWithCaching("+Object(o.i)(r)+")";Object(o.q)(this._cachingOptions)?/\/_api\/search\/postquery$/i.test(this._cachingOptions.key)&&(this._cachingOptions.key=a):this._cachingOptions=new i.c(a)}return this.postCore({body:r}).then(function(e){return new Nt(e,t.toUrl(),n)})},t.prototype.fixArrProp=function(e){return void 0===e?{results:[]}:(e=Object(o.k)(e)?e:[e],Object(o.j)(e,"results")?e:{results:e})},t.prototype.parseQuery=function(e){return"string"==typeof e?{Querytext:e}:e.toSearchQuery?e.toSearchQuery():e},t=c([I("_api/search/postquery")],t)}(C),Nt=function(){function e(e,t,n,o,r){void 0===o&&(o=null),void 0===r&&(r=null),this._url=t,this._query=n,this._raw=o,this._primary=r,this._raw=e.postquery?e.postquery:e}return Object.defineProperty(e.prototype,"ElapsedTime",{get:function(){return this.RawSearchResults.ElapsedTime},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"RowCount",{get:function(){return this.RawSearchResults.PrimaryQueryResult.RelevantResults.RowCount},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"TotalRows",{get:function(){return this.RawSearchResults.PrimaryQueryResult.RelevantResults.TotalRows},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"TotalRowsIncludingDuplicates",{get:function(){return this.RawSearchResults.PrimaryQueryResult.RelevantResults.TotalRowsIncludingDuplicates},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"RawSearchResults",{get:function(){return this._raw},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"PrimarySearchResults",{get:function(){return null===this._primary&&(this._primary=this.formatSearchResults(this._raw.PrimaryQueryResult.RelevantResults.Table.Rows)),this._primary},enumerable:!0,configurable:!0}),e.prototype.getPage=function(e,t){if(this.TotalRows