honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2067 from chandaniprajapati/react-my-events/fixed-date-issues

This commit is contained in:
Hugo Bernier 2021-10-31 02:01:15 -04:00 committed by GitHub
parent 9d8ea4214d ebf179191e
commit e71b6b24ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 301 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
samples/react-emoji-ratings/release/component-dependency-audit/react-emoji-ratings.json Normal file
View File

@ -0,0 +1,116 @@
{
"bundles": {
"react-emoji-reaction-rating-web-part": {
"dependencies": [
{
"componentId": "f9e737b7-f0df-4597-ba8c-3060f82380db",
"componentName": "@microsoft/sp-property-pane",
"componentVersion": "1.12.1",
"isDirectDependency": true
},
{
"componentId": "1c6c9123-7aac-41f3-a376-3caea41ed83f",
"componentName": "@microsoft/sp-loader",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "8217e442-8ed3-41fd-957d-b112e841286a",
"componentName": "@ms/sp-telemetry",
"componentVersion": "0.19.2",
"isDirectDependency": false
},
{
"componentId": "e40f8203-b39d-425a-a957-714852e33b79",
"componentName": "@microsoft/sp-dynamic-data",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
"componentName": "@microsoft/sp-lodash-subset",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
"componentName": "@microsoft/sp-core-library",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "01c4df03-e775-48cb-aa14-171ee5199a15",
"componentName": "tslib",
"componentVersion": "1.10.0",
"isDirectDependency": false
},
{
"componentId": "2e09fb9b-13bb-48f2-859f-97d6fff71176",
"componentName": "@ms/odsp-core-bundle",
"componentVersion": "1.1.13",
"isDirectDependency": false
},
{
"componentId": "78359e4b-07c2-43c6-8d0b-d060b4d577e8",
"componentName": "@microsoft/sp-diagnostics",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8",
"componentName": "@microsoft/sp-page-context",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "229b8d08-79f3-438b-8c21-4613fc877abd",
"componentName": "@microsoft/load-themed-styles",
"componentVersion": "0.1.2",
"isDirectDependency": false
},
{
"componentId": "c07208f0-ea3b-4c1a-9965-ac1b825211a6",
"componentName": "@microsoft/sp-http",
"componentVersion": "1.12.1",
"isDirectDependency": false
},
{
"componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
"componentName": "react",
"componentVersion": "16.9.0",
"isDirectDependency": false
},
{
"componentId": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
"componentName": "react-dom",
"componentVersion": "16.9.0",
"isDirectDependency": false
},
{
"componentId": "02a01e42-69ab-403d-8a16-acd128661f8e",
"componentName": "@microsoft/office-ui-fabric-react-bundle",
"componentVersion": "1.12.1",
"isDirectDependency": true
},
{
"componentId": "17ce0976-e69a-4355-be84-89b69a74717d",
"componentName": "@ms/uifabric-styling-bundle",
"componentVersion": "0.1.0",
"isDirectDependency": false
},
{
"componentId": "974a7777-0990-4136-8fa6-95d80114c2e0",
"componentName": "@microsoft/sp-webpart-base",
"componentVersion": "1.12.1",
"isDirectDependency": true
},
{
"componentId": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
"componentName": "@microsoft/sp-component-base",
"componentVersion": "1.12.1",
"isDirectDependency": false
}
]
}
}
}

138
samples/react-emoji-ratings/release/manifests/0dbbad17-3a6b-44ed-8ebb-989a8dd906b5.manifest.json Normal file
View File

@ -0,0 +1,138 @@
{
"id": "0dbbad17-3a6b-44ed-8ebb-989a8dd906b5",
"alias": "ReactEmojiReactionRatingWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"requiresCustomScript": false,
"supportedHosts": [
"SharePointWebPart"
],
"preconfiguredEntries": [
{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
"group": {
"default": "Other"
},
"title": {
"default": "react-emoji-reaction-rating"
},
"description": {
"default": "react-emoji-reaction-rating description"
},
"officeFabricIconFontName": "Page",
"properties": {
"propertyRatingText": "React emoji reaction rating web part!. How does you like this news/article? ",
"propertyEmojisCollection": [
{
"Title": "Wow!",
"ImageUrl": "https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg1.png"
},
{
"Title": "Mmm",
"ImageUrl": "https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg2.png"
},
{
"Title": "Hmm",
"ImageUrl": "https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg3.png"
},
{
"Title": "Meh",
"ImageUrl": "https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg4.png"
},
{
"Title": "Pff",
"ImageUrl": "https://mypersorg.sharepoint.com/sites/PnPSearchDemo/EmojiLibrary/RatingImg5.png"
}
],
"propertyEnableComments": "True",
"propertyEnableCount": "True"
}
}
],
"loaderConfig": {
"internalModuleBaseUrls": [
"<!-- PATH TO CDN -->"
],
"entryModuleId": "react-emoji-reaction-rating-web-part",
"scriptResources": {
"react-emoji-reaction-rating-web-part": {
"type": "path",
"path": "react-emoji-reaction-rating-web-part.js"
},
"@microsoft/sp-property-pane": {
"type": "component",
"id": "f9e737b7-f0df-4597-ba8c-3060f82380db",
"version": "1.12.1"
},
"@microsoft/office-ui-fabric-react-bundle": {
"type": "component",
"id": "02a01e42-69ab-403d-8a16-acd128661f8e",
"version": "1.12.1"
},
"@microsoft/sp-lodash-subset": {
"type": "component",
"id": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
"version": "1.12.1"
},
"@microsoft/sp-core-library": {
"type": "component",
"id": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
"version": "1.12.1"
},
"@microsoft/sp-webpart-base": {
"type": "component",
"id": "974a7777-0990-4136-8fa6-95d80114c2e0",
"version": "1.12.1"
},
"react": {
"type": "component",
"id": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
"version": "16.9.0"
},
"react-dom": {
"type": "component",
"id": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
"version": "16.9.0"
},
"ReactEmojiReactionRatingWebPartStrings": {
"type": "path",
"path": "ReactEmojiReactionRatingWebPartStrings_en-us.js"
},
"PropertyControlStrings": {
"type": "localizedPath",
"paths": {
"bg-BG": "PropertyControlStrings_bg-bg.js",
"ca-ES": "PropertyControlStrings_ca-es.js",
"da-DK": "PropertyControlStrings_da-dk.js",
"de-DE": "PropertyControlStrings_de-de.js",
"el-GR": "PropertyControlStrings_el-gr.js",
"en-US": "PropertyControlStrings_en-us.js",
"es-ES": "PropertyControlStrings_es-es.js",
"et-EE": "PropertyControlStrings_et-ee.js",
"fi-FI": "PropertyControlStrings_fi-fi.js",
"fr-FR": "PropertyControlStrings_fr-fr.js",
"it-IT": "PropertyControlStrings_it-it.js",
"ja-JP": "PropertyControlStrings_ja-jp.js",
"lt-LT": "PropertyControlStrings_lt-lt.js",
"lv-LV": "PropertyControlStrings_lv-lv.js",
"nb-NO": "PropertyControlStrings_nb-no.js",
"nl-NL": "PropertyControlStrings_nl-nl.js",
"no": "PropertyControlStrings_no.js",
"pl-PL": "PropertyControlStrings_pl-pl.js",
"pt-PT": "PropertyControlStrings_pt-pt.js",
"ro-RO": "PropertyControlStrings_ro-ro.js",
"ru-RU": "PropertyControlStrings_ru-ru.js",
"sk-SK": "PropertyControlStrings_sk-sk.js",
"sr-Latn-RS": "PropertyControlStrings_sr-latn-rs.js",
"sv-SE": "PropertyControlStrings_sv-se.js",
"tr-TR": "PropertyControlStrings_tr-tr.js",
"vi-VN": "PropertyControlStrings_vi-vn.js",
"zh-CN": "PropertyControlStrings_zh-cn.js",
"zh-TW": "PropertyControlStrings_zh-tw.js"
},
"defaultPath": "PropertyControlStrings_en-us.js"
}
}
}
}

9
samples/react-my-events/README.md
View File

@ -21,9 +21,11 @@ This web part provides loggedin user's outlook events with some advanced feature
![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg)
![Node.js LTS v14 | LTS v12 | LTS v10](https://img.shields.io/badge/Node.js-LTS%20v14%20%7C%20LTS%20v12%20%7C%20LTS%20v10-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams")
![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%202019-Not%20compatible-red.svg)
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%202016%20(Feature%20Pack%202)-Not%20compatible-red.svg)
![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "This solution requires access to user's Outlook events")
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
## Applies to
@ -61,6 +63,7 @@ react-my-events | [Chandani Prajapati](https://github.com/chandaniprajapati) ([@
Version|Date|Comments
-------|----|--------
1.0 | August 18, 2021 | Initial release
1.1 | October 4, 2021 | Fixed date issue as start and end date are rendering incorrect in event card.
## Minimal Path to Awesome

BIN
samples/react-my-events/assets/preview.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 MiB

BIN
samples/react-my-events/assets/preview.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 45 KiB

6
samples/react-my-events/assets/sample.json
View File

@ -9,7 +9,7 @@
"This web part provides loggedin user's outlook events with some advanced features"
],
"created": "2021-08-18",
"modified": "2021-08-18",
"modified": "2021-10-04",
"products": [
"SharePoint",
"Office"
@ -22,6 +22,10 @@
{
"key": "SPFX-VERSION",
"value": "1.12.1"
},
{
"key": "PNPCONTROLS",
"value": "PropertyFieldNumber, WebPartTitle"
}
],
"thumbnails": [

6
samples/react-my-events/src/shared/components/DateBox/DateBox.tsx
View File

@ -55,9 +55,9 @@ export default class DateBox extends React.Component<IDateBoxProps, {}>{
(this.props.size === IDateBoxSize.Small ? styles.boxIsSmall : styles.boxIsMedium), this.props.className
)}
data-automation-id="multipleDayBox">
<div className={styles.date} data-automation-id="multipleDayStartDateContainer">{startEvent.format("MMM D").toUpperCase()}</div>
<hr className={styles.separator} />
<div className={styles.date} data-automation-id="multipleDayEndDateContainer">{endEvent.format("MMM D").toUpperCase()}</div>
<div className={styles.month} data-automation-id="multipleDayStartDateContainer">{startEvent.format("MMM").toUpperCase()}</div>
<div className={styles.day}
data-automation-id="singleDayDayContainer">{startEvent.format("D") + "-" + endEvent.format("D")}</div>
</div>);
}
}

8
samples/react-my-events/src/shared/components/EventCard/EventCard.tsx
View File

@ -66,8 +66,8 @@ export const EventCard = (props: IEventCardProps) => {
<div>
<DateBox
className={styles.dateBox}
startDate={start}
endDate={end}
startDate={eventDate}
endDate={endDate}
size={IDateBoxSize.Small}
themeVariant={themeVariant}
/>
@ -102,8 +102,8 @@ export const EventCard = (props: IEventCardProps) => {
<div className={styles.dateBoxContainer} style={{ height: 120, borderBottom: '1px solid rgb(237, 235, 233)' }}>
<DateBox
className={styles.dateBox}
startDate={start}
endDate={end}
startDate={eventDate}
endDate={endDate}
size={IDateBoxSize.Medium}
themeVariant={themeVariant}
/>

4
samples/react-my-events/src/shared/services/CalendarService.ts
View File

@ -26,8 +26,6 @@ export class CalendarService {
catch (err) {
Promise.reject(err);
}
}
}
}

69
samples/react-my-events/src/webparts/reactMyEvents/components/ReactMyEvents.tsx
View File

@ -47,26 +47,21 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
public getStartEndDate() {
switch (this.props.dateRange) {
case DateRange.AllUpcoming:
//this.endDate = moment().add(1, "years").format('YYYY-MM-DD');
this.endDate = moment().endOf('week').day('Friday').add(1, 'years').format('YYYY-MM-DD');
break;
case DateRange.ThisWeek:
this.endDate = moment().endOf('week').day('Friday').format('YYYY-MM-DD');
//this.endDate = moment().add(1, "weeks").format('YYYY-MM-DD');
break;
case DateRange.NextTwoWeeks:
//this.endDate = moment().add(3, "weeks").format('YYYY-MM-DD');
this.endDate = moment().endOf('week').day('Friday').add(2, 'week').format('YYYY-MM-DD');
break;
case DateRange.Month:
//this.endDate = moment().add(1, "months").format('YYYY-MM-DD');
this.endDate = moment().endOf('week').day('Friday').add(1, "months").format('YYYY-MM-DD');
break;
case DateRange.Quarter:
//this.endDate = moment().add(1, "quarters").format('YYYY-MM-DD');
this.endDate = moment().endOf('week').day('Friday').add(1, "quarters").format('YYYY-MM-DD');
break;
}
}
}
public componentDidMount() {
@ -105,6 +100,33 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
});
}
private _onPageUpdate = (pageNumber: number): void => {
this.setState({
currentPage: pageNumber
});
}
private _onRenderCompactItem = (item: any, _index: number): JSX.Element => {
return <div
data-is-focusable={true}
data-is-focus-item={true}
role="listitem"
aria-label={item.subject}
>
<EventCard
key={`eventCard${_index}`}
event={item}
isCompact={Layouts.compact}
layout={this.props.layout}
themeVariant={this.props.themeVariant} />
</div>;
}
private _onConfigure = () => {
this.props.context.propertyPane.open();
}
private _renderFilmstripList(): JSX.Element {
const {
events } = this.state;
@ -139,12 +161,6 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
} = this.state;
const { maxEvents } = this.props;
let pagedItems: any[] = this.state.events;
const totalItems: number = pagedItems.length;
let showPages: boolean = false;
let pagedEvents: ICalendarEvent[] = events;
let usePaging: boolean = false;
@ -158,7 +174,6 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
}
return (
<div className={styles.compact}>
<CompactLayout
items={pagedEvents}
@ -177,32 +192,6 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
);
}
private _onPageUpdate = (pageNumber: number): void => {
this.setState({
currentPage: pageNumber
});
}
private _onRenderCompactItem = (item: any, _index: number): JSX.Element => {
return <div
data-is-focusable={true}
data-is-focus-item={true}
role="listitem"
aria-label={item.subject}
>
<EventCard
key={`eventCard${_index}`}
event={item}
isCompact={Layouts.compact}
layout={this.props.layout}
themeVariant={this.props.themeVariant} />
</div>;
}
private _onConfigure = () => {
this.props.context.propertyPane.open();
}
private _renderContent(): JSX.Element {
const isCompact = this.props.layout;
const { errorMessage, events, loading } = this.state;
@ -224,11 +213,9 @@ export default class ReactMyEvents extends React.Component<IReactMyEventsProps,
}
else if (events.length === 0) {
// we're done loading, no errors, but have no events
return (<MessageBar
messageBarType={MessageBarType.error}>{this.state.noEventsFoundMessage}</MessageBar>);
}
}
public render(): React.ReactElement<IReactMyEventsProps> {