Merge pull request #5307 from Sandeep-FED/update-modern-carousel
This commit is contained in:
commit
d54365558e
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "SPFx 1.18.2",
|
||||
"image": "docker.io/m365pnp/spfx:1.18.2",
|
||||
"name": "SPFx 1.20.2",
|
||||
"image": "docker.io/m365pnp/spfx:1.20.2",
|
||||
"customizations": {
|
||||
"vscode": {
|
||||
"extensions": [
|
||||
|
|
|
@ -10,9 +10,9 @@
|
|||
"nodeVersion": "18.18.2",
|
||||
"sdksVersions": {
|
||||
"@microsoft/microsoft-graph-client": "3.0.2",
|
||||
"@microsoft/teams-js": "2.12.0"
|
||||
"@microsoft/teams-js": "2.24.0"
|
||||
},
|
||||
"version": "1.18.2",
|
||||
"version": "1.20.0",
|
||||
"libraryName": "award-recognition",
|
||||
"libraryId": "45e061b8-13f5-423f-bedb-12fc2a44fa89",
|
||||
"environment": "spo",
|
||||
|
|
|
@ -8,22 +8,22 @@ This SharePoint Framework (SPFx) web part introduces a contemporary carousel com
|
|||
|
||||
## Compatibility
|
||||
|
||||
| :warning: Important |
|
||||
|:---------------------------|
|
||||
| Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to build this sample, you need to ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|
||||
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
|
||||
| :warning: Important |
|
||||
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to build this sample, you need to ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node. |
|
||||
| Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
![version](https://img.shields.io/badge/version-1.18.2-green.svg)
|
||||
![version](https://img.shields.io/badge/version-1.20.0-green.svg)
|
||||
|
||||
This sample is optimally compatible with the following environment configuration:
|
||||
|
||||
![SPFx 1.18.2](https://img.shields.io/badge/SPFx-1.18.2-green.svg)
|
||||
![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
|
||||
![Node.js v18 | v16](https://img.shields.io/badge/Node.js-v18%20%7C%20v16-green.svg)
|
||||
![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%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
|
||||
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
![Does not work with SharePoint 2016 (Feature Pack 2)](<https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg> "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
|
||||
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-red.svg)
|
||||
![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-red.svg)
|
||||
|
@ -39,17 +39,17 @@ This sample is optimally compatible with the following environment configuration
|
|||
|
||||
Create a SharePoint custom list `Award Recognition` in the SPO site with below columns
|
||||
|
||||
| Column Name | Type |
|
||||
| ------- | --------------- |
|
||||
| Title | OOTB |
|
||||
| Designation | Text |
|
||||
| UserImage | Image |
|
||||
| Column Name | Type |
|
||||
| ----------- | ----- |
|
||||
| Title | OOTB |
|
||||
| Designation | Text |
|
||||
| UserImage | Image |
|
||||
|
||||
## Solution
|
||||
|
||||
| Solution | Author(s) |
|
||||
| ----------- | ------------------------------------------------------- |
|
||||
| react-modern-carousel| Sandeep P S ( [LinkedIn](https://www.linkedin.com/in/sandeepps1299/) ) / Quadrasystems.net ( [Twitter](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) / [LinkedIn](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) ) |
|
||||
| Solution | Author(s) |
|
||||
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| react-modern-carousel | Sandeep P S ( [LinkedIn](https://www.linkedin.com/in/sandeepps1299/) ) / Quadrasystems.net ( [Twitter](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) / [LinkedIn](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) ) |
|
||||
|
||||
## Contributors🧑💻
|
||||
|
||||
|
@ -57,9 +57,10 @@ Create a SharePoint custom list `Award Recognition` in the SPO site with below c
|
|||
|
||||
## Version history
|
||||
|
||||
| Version | Date | Comments |
|
||||
| ------- | ---------------- | --------------- |
|
||||
| 1.0 | March 16, 2024 | Initial release |
|
||||
| Version | Date | Comments |
|
||||
| ------- | ---------------- | ----------------------------------- |
|
||||
| 1.0 | March 16, 2024 | Initial release |
|
||||
| 1.1 | October 19, 2024 | Upgrade to SPFx 1.20 & misc changes |
|
||||
|
||||
## Minimal Path to Awesome⚡
|
||||
|
||||
|
@ -97,7 +98,7 @@ Key features demonstrated by this solution:
|
|||
|
||||
## Help
|
||||
|
||||
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
|
||||
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
|
||||
|
||||
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
"This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site. This innovative feature enhances user experience by providing fluid navigation through various pieces of content, thereby adding a touch of elegance and sophistication to the SharePoint environment."
|
||||
],
|
||||
"creationDateTime": "2024-03-16",
|
||||
"updateDateTime": "2024-03-16",
|
||||
"updateDateTime": "2024-10-10",
|
||||
"products": [
|
||||
"SharePoint"
|
||||
],
|
||||
|
@ -21,7 +21,7 @@
|
|||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.18.2"
|
||||
"value": "1.20.2"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
|
|
|
@ -3,12 +3,12 @@
|
|||
"solution": {
|
||||
"name": "award-recognition-client-side-solution",
|
||||
"id": "45e061b8-13f5-423f-bedb-12fc2a44fa89",
|
||||
"version": "1.0.0.0",
|
||||
"version": "1.1.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false,
|
||||
"developer": {
|
||||
"name": "",
|
||||
"name": "Sandeep P S",
|
||||
"websiteUrl": "",
|
||||
"privacyUrl": "",
|
||||
"termsOfUseUrl": "",
|
||||
|
@ -30,7 +30,7 @@
|
|||
"title": "award-recognition Feature",
|
||||
"description": "The feature that activates elements of the award-recognition solution.",
|
||||
"id": "475edc5c-974e-43d2-874b-0262da790739",
|
||||
"version": "1.0.0.0"
|
||||
"version": "1.1.0.0"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "award-recognition",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
|
||||
|
@ -13,14 +13,14 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@fluentui/react": "8.106.4",
|
||||
"@fluentui/react-components": "^9.40.0",
|
||||
"@fluentui/react-components": "^9.55.1",
|
||||
"@microsoft/sp-adaptive-card-extension-base": "1.18.2",
|
||||
"@microsoft/sp-core-library": "1.18.2",
|
||||
"@microsoft/sp-lodash-subset": "1.18.2",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.18.2",
|
||||
"@microsoft/sp-property-pane": "1.18.2",
|
||||
"@microsoft/sp-webpart-base": "1.18.2",
|
||||
"@pnp/sp": "^3.20.0",
|
||||
"@microsoft/sp-core-library": "1.20.0",
|
||||
"@microsoft/sp-lodash-subset": "1.20.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.20.0",
|
||||
"@microsoft/sp-property-pane": "1.20.0",
|
||||
"@microsoft/sp-webpart-base": "1.20.0",
|
||||
"@pnp/sp": "^3.26.0",
|
||||
"pnp-react-hooks": "^1.3.0",
|
||||
"react": "17.0.1",
|
||||
"react-dom": "17.0.1",
|
||||
|
@ -28,18 +28,17 @@
|
|||
"tslib": "2.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/eslint-config-spfx": "1.18.2",
|
||||
"@microsoft/eslint-config-spfx": "1.20.2",
|
||||
"@microsoft/eslint-plugin-spfx": "1.18.2",
|
||||
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
|
||||
"@microsoft/rush-stack-compiler-4.7": "0.1.0",
|
||||
"@microsoft/sp-build-web": "1.18.2",
|
||||
"@microsoft/sp-module-interfaces": "1.18.2",
|
||||
"@rushstack/eslint-config": "2.5.1",
|
||||
"@microsoft/sp-module-interfaces": "1.20.2",
|
||||
"@rushstack/eslint-config": "4.0.1",
|
||||
"@types/react": "17.0.45",
|
||||
"@types/react-dom": "17.0.17",
|
||||
"@types/webpack-env": "~1.15.2",
|
||||
"ajv": "^6.12.5",
|
||||
"eslint": "8.7.0",
|
||||
"eslint": "8.57.0",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"gulp": "4.0.2",
|
||||
"typescript": "4.7.4"
|
||||
|
|
|
@ -1,54 +1,54 @@
|
|||
import * as React from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { EffectCoverflow } from "swiper";
|
||||
import { Card, CardPreview } from "@fluentui/react-components"
|
||||
import { useEffect, useState } from "react"
|
||||
import { useListItems } from "pnp-react-hooks/hooks/sp/useListItems"
|
||||
import { ListOptions } from "pnp-react-hooks/types/options/ListOptions"
|
||||
import { useSite } from "pnp-react-hooks/hooks/sp/useSite"
|
||||
import { Card, CardPreview } from "@fluentui/react-components";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useListItems } from "pnp-react-hooks/hooks/sp/useListItems";
|
||||
import { ListOptions } from "pnp-react-hooks/types/options/ListOptions";
|
||||
import { useSite } from "pnp-react-hooks/hooks/sp/useSite";
|
||||
|
||||
// Import Swiper styles
|
||||
import "swiper/swiper.min.css"
|
||||
import "swiper/modules/navigation/navigation.min.css"
|
||||
import "swiper/modules/pagination/pagination.min.css"
|
||||
import "swiper/modules/effect-coverflow/effect-coverflow.min.css"
|
||||
import "swiper/swiper.min.css";
|
||||
import "swiper/modules/navigation/navigation.min.css";
|
||||
import "swiper/modules/pagination/pagination.min.css";
|
||||
import "swiper/modules/effect-coverflow/effect-coverflow.min.css";
|
||||
|
||||
import { AwardItems } from "../types/AwardItems"
|
||||
import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss"
|
||||
import { Content } from "./Content"
|
||||
import { AwardItems } from "../types/AwardItems";
|
||||
import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss";
|
||||
import { Content } from "./Content";
|
||||
|
||||
export const Carousel = (): JSX.Element => {
|
||||
const [awardList, setAwardList] = useState<AwardItems[]>([])
|
||||
const [selectedUser, setSelectedUser] = useState<AwardItems | null>(null)
|
||||
const [awardList, setAwardList] = useState<AwardItems[]>([]);
|
||||
const [selectedUser, setSelectedUser] = useState<AwardItems | null>(null);
|
||||
|
||||
const listItems = useListItems<AwardItems>("Award Recognition", {
|
||||
query: {
|
||||
select: ["ID", "Title", "Designation", "UserImage"],
|
||||
},
|
||||
mode: ListOptions.All,
|
||||
})
|
||||
});
|
||||
|
||||
const siteInfo = useSite()
|
||||
const siteInfo = useSite();
|
||||
|
||||
useEffect(() => {
|
||||
if (listItems && listItems.length > 0) {
|
||||
const parsedData = listItems.map((item) => {
|
||||
const AppImageUrl = JSON.parse(item.UserImage)
|
||||
const ImageUrl = `${siteInfo.Url}/Lists/Award%20Recognition/Attachments/${item.ID}/${AppImageUrl.fileName}`
|
||||
return { ...item, ImageUrl }
|
||||
})
|
||||
setAwardList(parsedData)
|
||||
const AppImageUrl = JSON.parse(item.UserImage);
|
||||
const ImageUrl = `${siteInfo.Url}/Lists/Award%20Recognition/Attachments/${item.ID}/${AppImageUrl.fileName}`;
|
||||
return { ...item, ImageUrl };
|
||||
});
|
||||
setAwardList(parsedData);
|
||||
if (selectedUser === null) {
|
||||
setSelectedUser(parsedData[0])
|
||||
setSelectedUser(parsedData[0]);
|
||||
}
|
||||
}
|
||||
}, [listItems, selectedUser, siteInfo])
|
||||
}, [listItems, selectedUser, siteInfo]);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const handleSlideChange = (swiper: any): void => {
|
||||
const activeIndex = swiper.activeIndex
|
||||
setSelectedUser(awardList[activeIndex])
|
||||
}
|
||||
const activeIndex = swiper.activeIndex;
|
||||
setSelectedUser(awardList[activeIndex]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
|
@ -56,8 +56,10 @@ export const Carousel = (): JSX.Element => {
|
|||
<Content user={selectedUser} />
|
||||
</aside>
|
||||
<aside className={styles.carouselWrapper}>
|
||||
<div className={styles.fade_left}></div>
|
||||
<div className={styles.fade_right}></div>
|
||||
<Swiper
|
||||
effect='coverflow'
|
||||
effect="coverflow"
|
||||
grabCursor={true}
|
||||
coverflowEffect={{
|
||||
rotate: 0,
|
||||
|
@ -93,8 +95,8 @@ export const Carousel = (): JSX.Element => {
|
|||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<CardPreview>
|
||||
<img src={user.ImageUrl} alt={user.Title}/>
|
||||
<CardPreview style={{ height: "inherit" }}>
|
||||
<img src={user.ImageUrl} alt={user.Title} />
|
||||
</CardPreview>
|
||||
</Card>
|
||||
</SwiperSlide>
|
||||
|
@ -102,5 +104,5 @@ export const Carousel = (): JSX.Element => {
|
|||
</Swiper>
|
||||
</aside>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
@ -26,6 +26,7 @@ $primaryColor: "[theme: themePrimary, default: #0078d7]";
|
|||
}
|
||||
.carouselWrapper {
|
||||
width: 70%;
|
||||
position: relative;
|
||||
}
|
||||
.contentDescriptionWrapper {
|
||||
display: grid;
|
||||
|
@ -36,3 +37,26 @@ $primaryColor: "[theme: themePrimary, default: #0078d7]";
|
|||
display: grid;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// Fade
|
||||
.fade_left,
|
||||
.fade_right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4rem; /* Equivalent to w-16 in Tailwind */
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.fade_left {
|
||||
left: 0;
|
||||
background: linear-gradient(to right, white, transparent);
|
||||
}
|
||||
|
||||
.fade_right {
|
||||
right: 0;
|
||||
background: linear-gradient(to left, white, transparent);
|
||||
}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
define([], function () {
|
||||
return {
|
||||
PropertyPaneDescription: "Description",
|
||||
BasicGroupName: "Configure this webpart",
|
||||
WebpartFieldLabel: "Webpart Title",
|
||||
ContentTitleFieldLabel: "Content Title",
|
||||
ContentDescriptionFieldLabel: "Content Description",
|
||||
PropertyPaneDescription: "Configure this webpart",
|
||||
BasicGroupName: "Basic Settings",
|
||||
WebpartFieldLabel: "Header",
|
||||
ContentTitleFieldLabel: "Sub heading",
|
||||
ContentDescriptionFieldLabel: "Sub heading description",
|
||||
AppLocalEnvironmentSharePoint:
|
||||
"The app is running on your local environment as SharePoint web part",
|
||||
AppLocalEnvironmentTeams:
|
||||
|
|
Loading…
Reference in New Issue