+
+
+ );
+};
diff --git a/samples/react-news-banner/src/components/Banner/BannerReducer.ts b/samples/react-news-banner/src/components/Banner/BannerReducer.ts
new file mode 100644
index 000000000..4d5208c3f
--- /dev/null
+++ b/samples/react-news-banner/src/components/Banner/BannerReducer.ts
@@ -0,0 +1,24 @@
+import { IListItem, INotification } from "./../../entities";
+import { EBannerTypes } from "./EBannerTypes";
+import { IBannerState } from "./IBannerState";
+// Reducer
+export const reducer = (
+ state: IBannerState,
+ action: { type: EBannerTypes; payload: unknown }
+): IBannerState => {
+ switch (action.type) {
+ case EBannerTypes.SET_ITEMS:
+ return { ...state, items: action.payload as IListItem[] };
+ case EBannerTypes.SET_SELECTED_ITEM:
+ return {
+ ...state,
+ selectedItem: action.payload as IListItem,
+ };
+ case EBannerTypes.SET_ISLOADING:
+ return { ...state, isLoading: action.payload as boolean };
+ case EBannerTypes.SET_MESSAGE:
+ return { ...state, messageError: action.payload as INotification };
+ default:
+ return state;
+ }
+};
diff --git a/samples/react-news-banner/src/components/Banner/EBannerTypes.ts b/samples/react-news-banner/src/components/Banner/EBannerTypes.ts
new file mode 100644
index 000000000..ca835d7b6
--- /dev/null
+++ b/samples/react-news-banner/src/components/Banner/EBannerTypes.ts
@@ -0,0 +1,10 @@
+export enum EBannerTypes {
+ "SET_SELECTED_ITEM" = "SET_SELECTED_ITEM",
+ "SET_SELECTED_INDEX" = "SET_SELECTED_INDEX",
+ "SET_ITEMS" = "SET_ITEMS",
+ "SET_ISLOADING" ="SET_ISLOADING",
+ "SET_MESSAGE" ="SET_MESSAGE",
+ "SET_IS_RUNNING_ACTION" = "SET_IS_RUNNING_ACTION",
+ "SET_SHOW_DIALOG" = "SET_SHOW_DIALOG",
+
+}
diff --git a/samples/react-news-banner/src/components/Banner/IBannerProps.ts b/samples/react-news-banner/src/components/Banner/IBannerProps.ts
new file mode 100755
index 000000000..03c2cff6c
--- /dev/null
+++ b/samples/react-news-banner/src/components/Banner/IBannerProps.ts
@@ -0,0 +1,8 @@
+/* tslint:disable */
+import { WebPartContext } from "@microsoft/sp-webpart-base";
+import { ISelectedProperties } from "../../entities/ISeletedProperties";
+
+export interface IBannerProps {
+ selectedProperties:ISelectedProperties;
+ webpartContext: WebPartContext;
+}
diff --git a/samples/react-news-banner/src/components/Banner/IBannerState.ts b/samples/react-news-banner/src/components/Banner/IBannerState.ts
new file mode 100644
index 000000000..200c0a09c
--- /dev/null
+++ b/samples/react-news-banner/src/components/Banner/IBannerState.ts
@@ -0,0 +1,10 @@
+/* tslint:disable */
+import { INotification } from "../../entities";
+import { IListItem } from "../../entities/IListItem";
+
+export interface IBannerState {
+ selectedItem: IListItem;
+ items:IListItem[];
+ isLoading: boolean;
+ messageError: INotification
+}
diff --git a/samples/react-news-banner/src/components/Banner/index.ts b/samples/react-news-banner/src/components/Banner/index.ts
new file mode 100644
index 000000000..ef67c90c5
--- /dev/null
+++ b/samples/react-news-banner/src/components/Banner/index.ts
@@ -0,0 +1,2 @@
+/* tslint:disable */
+export * from './Banner';
diff --git a/samples/react-news-banner/src/components/BannerCard/BannerCard.module.scss b/samples/react-news-banner/src/components/BannerCard/BannerCard.module.scss
new file mode 100644
index 000000000..299cb5fce
--- /dev/null
+++ b/samples/react-news-banner/src/components/BannerCard/BannerCard.module.scss
@@ -0,0 +1,52 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.subTitleNews {
+ @include ms-font-m;
+ // color: $ms-color-themeDark;
+ font-weight: 700;
+ text-overflow: ellipsis;
+ font-weight: $ms-font-weight-semibold;
+ font-size: $ms-font-size-m;
+ height: 32px;
+ line-height: 32px;
+ vertical-align: top;
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 100%;
+ min-width: 0px;
+}
+
+.description {
+ font-size: $ms-font-size-m;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 4;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+.documentCard {
+ margin-bottom: 3px;
+ max-width: 100%;
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-bottom: 15px;
+
+}
+
+.documentCardSeleted {
+ margin-bottom: 3px;
+ max-width: 100%;
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-bottom: 15px;
+ background-color: $ms-color-themePrimary;
+ color: $ms-color-white
+
+}
+.documentCard:hover {
+ background-color: $ms-color-themePrimary;
+ color: $ms-color-white;
+ cursor: pointer;
+}
diff --git a/samples/react-news-banner/src/components/BannerCard/BannerCard.tsx b/samples/react-news-banner/src/components/BannerCard/BannerCard.tsx
new file mode 100644
index 000000000..c6d1f11d4
--- /dev/null
+++ b/samples/react-news-banner/src/components/BannerCard/BannerCard.tsx
@@ -0,0 +1,27 @@
+/* tslint:disable */
+import { format, parseISO } from "date-fns";
+import React from "react";
+import styles from "./BannerCard.module.scss";
+import { IBannerCardProps } from "./IBannerCardProps";
+
+export const BannerCard: React.FunctionComponent
+
+ 
+
+
+
+ {items.map((item, i) => {
+ const _isSeleted: boolean = item.id === selectedItem.id;
+ return (
+
+
+ {i > 0 && i < items.length ? (
+
+ ) : null}
+
+ );
+ })}
+ {
+ props.onSeletedItem(item);
+ }}
+ >
+
+
+ );
+};
diff --git a/samples/react-news-banner/src/components/BannerCard/IBannerCardProps.ts b/samples/react-news-banner/src/components/BannerCard/IBannerCardProps.ts
new file mode 100644
index 000000000..0a8d45d40
--- /dev/null
+++ b/samples/react-news-banner/src/components/BannerCard/IBannerCardProps.ts
@@ -0,0 +1,11 @@
+/* tslint:disable */
+import { IListItem } from "../../entities/IListItem";
+import { ISelectedProperties } from "../../entities/ISeletedProperties";
+
+export interface IBannerCardProps {
+ item: IListItem;
+ isSelected: boolean;
+ onSeletedItem?: (item: IListItem) => void;
+ currentCultureName:string;
+ selectedProperties:ISelectedProperties;
+}
diff --git a/samples/react-news-banner/src/components/BannerCard/index.ts b/samples/react-news-banner/src/components/BannerCard/index.ts
new file mode 100644
index 000000000..75fa4afdc
--- /dev/null
+++ b/samples/react-news-banner/src/components/BannerCard/index.ts
@@ -0,0 +1 @@
+export * from './BannerCard';
diff --git a/samples/react-news-banner/src/components/index.ts b/samples/react-news-banner/src/components/index.ts
new file mode 100644
index 000000000..bc95f09d6
--- /dev/null
+++ b/samples/react-news-banner/src/components/index.ts
@@ -0,0 +1 @@
+export * from './Banner';
diff --git a/samples/react-news-banner/src/entities/IListItem.ts b/samples/react-news-banner/src/entities/IListItem.ts
new file mode 100644
index 000000000..adddd29b4
--- /dev/null
+++ b/samples/react-news-banner/src/entities/IListItem.ts
@@ -0,0 +1,9 @@
+/* tslint:disable */
+export interface IListItem {
+ id: string;
+ title:string;
+ publishedDate:string;
+ description:string;
+ imageUrl:string;
+ linkUrl:string;
+}
diff --git a/samples/react-news-banner/src/entities/INotification.ts b/samples/react-news-banner/src/entities/INotification.ts
new file mode 100644
index 000000000..47d05eae3
--- /dev/null
+++ b/samples/react-news-banner/src/entities/INotification.ts
@@ -0,0 +1,7 @@
+import { MessageBarType } from "office-ui-fabric-react";
+
+export interface INotification {
+ message: string;
+ messageBarType: MessageBarType;
+ isToShow: boolean;
+}
diff --git a/samples/react-news-banner/src/entities/ISPColumn.ts b/samples/react-news-banner/src/entities/ISPColumn.ts
new file mode 100644
index 000000000..40204131a
--- /dev/null
+++ b/samples/react-news-banner/src/entities/ISPColumn.ts
@@ -0,0 +1,46 @@
+export interface ISPColumn {
+ 'odata.type': string;
+ 'odata.id': string;
+ 'odata.editLink': string;
+ AutoIndexed: boolean;
+ CanBeDeleted: boolean;
+ ClientSideComponentId: string;
+ ClientSideComponentProperties?: string;
+ ClientValidationFormula?: string;
+ ClientValidationMessage?: string;
+ CustomFormatter?: string;
+ DefaultFormula?: string;
+ DefaultValue?: string;
+ Description: string;
+ Direction: string;
+ EnforceUniqueValues: boolean;
+ EntityPropertyName: string;
+ Filterable: boolean;
+ FromBaseType: boolean;
+ Group: string;
+ Hidden: boolean;
+ Id: string;
+ Indexed: boolean;
+ IndexStatus: number;
+ InternalName: string;
+ IsModern: boolean;
+ JSLink: string;
+ PinnedToFiltersPane: boolean;
+ ReadOnlyField: boolean;
+ Required: boolean;
+ SchemaXml: string;
+ Scope: string;
+ Sealed: boolean;
+ ShowInFiltersPane: number;
+ Sortable: boolean;
+ StaticName: string;
+ Title: string;
+ FieldTypeKind: number;
+ TypeAsString: string;
+ TypeDisplayName: string;
+ TypeShortDescription: string;
+ ValidationFormula?: string;
+ ValidationMessage?: string;
+ MaxLength: number;
+ RichText: boolean;
+}
diff --git a/samples/react-news-banner/src/entities/ISPList.ts b/samples/react-news-banner/src/entities/ISPList.ts
new file mode 100644
index 000000000..8ae939763
--- /dev/null
+++ b/samples/react-news-banner/src/entities/ISPList.ts
@@ -0,0 +1,67 @@
+export interface ISPList {
+ 'odata.metadata': string;
+ 'odata.type': string;
+ 'odata.id': string;
+ 'odata.etag': string;
+ 'odata.editLink': string;
+ AllowContentTypes: boolean;
+ BaseTemplate: number;
+ BaseType: number;
+ ContentTypesEnabled: boolean;
+ CrawlNonDefaultViews: boolean;
+ Created: string;
+ CurrentChangeToken: CurrentChangeToken;
+ DefaultContentApprovalWorkflowId: string;
+ DefaultItemOpenUseListSetting: boolean;
+ Description: string;
+ Direction: string;
+ DisableCommenting: boolean;
+ DisableGridEditing: boolean;
+ DocumentTemplateUrl?: string;
+ DraftVersionVisibility: number;
+ EnableAttachments: boolean;
+ EnableFolderCreation: boolean;
+ EnableMinorVersions: boolean;
+ EnableModeration: boolean;
+ EnableRequestSignOff: boolean;
+ EnableVersioning: boolean;
+ EntityTypeName: string;
+ ExemptFromBlockDownloadOfNonViewableFiles: boolean;
+ FileSavePostProcessingEnabled: boolean;
+ ForceCheckout: boolean;
+ HasExternalDataSource: boolean;
+ Hidden: boolean;
+ Id: string;
+ ImagePath: ImagePath;
+ ImageUrl: string;
+ IrmEnabled: boolean;
+ IrmExpire: boolean;
+ IrmReject: boolean;
+ IsApplicationList: boolean;
+ IsCatalog: boolean;
+ IsPrivate: boolean;
+ ItemCount: number;
+ LastItemDeletedDate: string;
+ LastItemModifiedDate: string;
+ LastItemUserModifiedDate: string;
+ ListExperienceOptions: number;
+ ListItemEntityTypeFullName: string;
+ MajorVersionLimit: number;
+ MajorWithMinorVersionsLimit: number;
+ MultipleDataList: boolean;
+ NoCrawl: boolean;
+ ParentWebPath: ImagePath;
+ ParentWebUrl: string;
+ ParserDisabled: boolean;
+ ServerTemplateCanCreateFolders: boolean;
+ TemplateFeatureId: string;
+ Title: string;
+}
+
+interface ImagePath {
+ DecodedUrl: string;
+}
+
+interface CurrentChangeToken {
+ StringValue: string;
+}
diff --git a/samples/react-news-banner/src/entities/ISeletedProperties.ts b/samples/react-news-banner/src/entities/ISeletedProperties.ts
new file mode 100644
index 000000000..40491f975
--- /dev/null
+++ b/samples/react-news-banner/src/entities/ISeletedProperties.ts
@@ -0,0 +1,14 @@
+import { IPropertyFieldSite } from '@pnp/spfx-property-controls/lib/PropertyFieldSitePicker';
+
+export interface ISelectedProperties {
+ title: string;
+ listId: string;
+ sites: IPropertyFieldSite[];
+ titleFieldName: string;
+ dateFieldName: string;
+ descriptionFieldName: string;
+ imageUrlFieldName: string;
+ listBasetemplate: number;
+ numberItems: number;
+ titleLink: string;
+}
diff --git a/samples/react-news-banner/src/entities/index.ts b/samples/react-news-banner/src/entities/index.ts
new file mode 100644
index 000000000..06226ef57
--- /dev/null
+++ b/samples/react-news-banner/src/entities/index.ts
@@ -0,0 +1,5 @@
+export * from './IListItem';
+export * from './INotification';
+export * from './ISeletedProperties';
+export * from './ISPList';
+export * from './ISPColumn';
diff --git a/samples/react-news-banner/src/hooks/useList.ts b/samples/react-news-banner/src/hooks/useList.ts
new file mode 100644
index 000000000..0a2166ceb
--- /dev/null
+++ b/samples/react-news-banner/src/hooks/useList.ts
@@ -0,0 +1,95 @@
+/* tslint:disable */
+import { Web } from "@pnp/sp";
+import { IListItem, ISPList } from "./../entities";
+import { sortBy, uniqBy } from "lodash";
+import { ISelectedProperties } from "../entities";
+import { ISPColumn } from "../entities";
+
+type retrunFunctions = {
+ getListColumns: (webUrl: string, listId: string) => Promise{_date}
+ {item.description}
+