+ {!this.props.apiKey || !this.props.newsUrl ? (
+
+ {errorMesage}
+
+
+ ) : _renderNews.length > 0 ? (
+ <>
+
+
+ {_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/src/webparts/components/NewsTile/NewsTile.module.scss b/samples/react-global-news/src/webparts/components/NewsTile/NewsTile.module.scss
new file mode 100644
index 000000000..0a53e9543
--- /dev/null
+++ b/samples/react-global-news/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/src/webparts/components/NewsTile/NewsTile.tsx b/samples/react-global-news/src/webparts/components/NewsTile/NewsTile.tsx
new file mode 100644
index 000000000..5253c89f7
--- /dev/null
+++ b/samples/react-global-news/src/webparts/components/NewsTile/NewsTile.tsx
@@ -0,0 +1,84 @@
+import { IArticle } from "../../../services/IArticle";
+import {
+ Text,
+ DocumentCard,
+ DocumentCardTitle,
+ DocumentCardDetails,
+ Persona,
+ 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";
+import { escape } from "@microsoft/sp-lodash-subset";
+
+const _defaultImage: string = require("../../../../assets/news.jpg");
+
+export const NewsTile = (props: { article: IArticle }) => {
+ let { 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/src/webparts/components/NoNews/NoNews.tsx b/samples/react-global-news/src/webparts/components/NoNews/NoNews.tsx
new file mode 100644
index 000000000..427a99752
--- /dev/null
+++ b/samples/react-global-news/src/webparts/components/NoNews/NoNews.tsx
@@ -0,0 +1,37 @@
+import { IArticle } from "../../../services/IArticle";
+import {
+ Icon,
+ Label,
+ Text,
+ Stack,
+ Image,
+ ImageFit,
+ DocumentCard,
+ DocumentCardTitle,
+ DocumentCardDetails
+} from "office-ui-fabric-react";
+import moment from "moment";
+import styles from "../News.module.scss";
+import React from "react";
+
+export const NoNews = () => {
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/samples/react-global-news/src/webparts/news/NewsWebPart.manifest.json b/samples/react-global-news/src/webparts/news/NewsWebPart.manifest.json
new file mode 100644
index 000000000..5bc6f7440
--- /dev/null
+++ b/samples/react-global-news/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,
+ "supportsThemeVariants": true,
+
+ // 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,
+ "supportedHosts": ["SharePointWebPart","TeamsTab","TeamsPersonalApp","SharePointFullPage"],
+
+ "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": "3f28c6d88b804e75a66840dbb5aa84b1",
+ "endpoint":"",
+ "queryTitleOnly" : "",
+ "domains": "",
+ "excludeDomains": "",
+ "language":"",
+ "country": "ALL",
+ "category": "general",
+ "pagesize": 12,
+ "viewOption": "tiles" // tiles or list
+ }
+ }]
+}
diff --git a/samples/react-global-news/src/webparts/news/NewsWebPart.ts b/samples/react-global-news/src/webparts/news/NewsWebPart.ts
new file mode 100644
index 000000000..11cf9d37e
--- /dev/null
+++ b/samples/react-global-news/src/webparts/news/NewsWebPart.ts
@@ -0,0 +1,541 @@
+import * as React from "react";
+import * as ReactDom from "react-dom";
+import { Version } from "@microsoft/sp-core-library";
+import {
+ IPropertyPaneConfiguration,
+ PropertyPaneTextField,
+ PropertyPaneChoiceGroup,
+ PropertyPaneToggle,
+ PropertyPaneDropdown,
+ IPropertyPaneDropdownOption,
+ PropertyPaneSlider,
+ PropertyPaneHorizontalRule,
+ PropertyPaneLabel
+} from "@microsoft/sp-property-pane";
+import { BaseClientSideWebPart } 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 { DisplayMode } from "@microsoft/sp-core-library";
+import * as $ from "jquery";
+import { loadTheme, IDropdownOption } from "office-ui-fabric-react";
+import { PropertyFieldMultiSelect } from "@pnp/spfx-property-controls/lib/PropertyFieldMultiSelect";
+import { ISourcesResults } from "../../services/ISourcesResults";
+import { ISource } from "../../services/ISource";
+import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base';
+
+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" }
+];
+
+const teamsDefaultTheme = require("../../common/TeamsDefaultTheme.json");
+const teamsDarkTheme = require("../../common/TeamsDarkTheme.json");
+const teamsContrastTheme = require("../../common/TeamsContrastTheme.json");
+
+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[] = [];
+ private _themeProvider: ThemeProvider;
+ private _themeVariant: IReadonlyTheme | undefined;
+
+ protected async onInit
+
+
+