Merge pull request #2506 from arunkumarperumal/react-tabaccordion
This commit is contained in:
Hugo Bernier
GitHub
commit
341eefae2b
|
|
@ -0,0 +1,39 @@
|
||||||
|
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
|
||||||
|
{
|
||||||
|
"name": "SPFx 1.13.1",
|
||||||
|
"image": "docker.io/m365pnp/spfx:1.13.1",
|
||||||
|
// Set *default* container specific settings.json values on container create.
|
||||||
|
"settings": {},
|
||||||
|
// Add the IDs of extensions you want installed when the container is created.
|
||||||
|
"extensions": [
|
||||||
|
"editorconfig.editorconfig",
|
||||||
|
"dbaeumer.vscode-eslint"
|
||||||
|
],
|
||||||
|
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||||
|
"forwardPorts": [
|
||||||
|
4321,
|
||||||
|
35729
|
||||||
|
],
|
||||||
|
"portsAttributes": {
|
||||||
|
"4321": {
|
||||||
|
"protocol": "https",
|
||||||
|
"label": "Manifest",
|
||||||
|
"onAutoForward": "silent",
|
||||||
|
"requireLocalPort": true
|
||||||
|
},
|
||||||
|
// Not needed for SPFx>= 1.12.1
|
||||||
|
// "5432": {
|
||||||
|
// "protocol": "https",
|
||||||
|
// "label": "Workbench",
|
||||||
|
// "onAutoForward": "silent"
|
||||||
|
// },
|
||||||
|
"35729": {
|
||||||
|
"protocol": "https",
|
||||||
|
"label": "LiveReload",
|
||||||
|
"onAutoForward": "silent",
|
||||||
|
"requireLocalPort": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
|
||||||
|
"remoteUser": "node"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
echo
|
||||||
|
echo -e "\e[1;94mInstalling Node dependencies\e[0m"
|
||||||
|
npm install
|
||||||
|
|
||||||
|
## commands to create dev certificate and copy it to the root folder of the project
|
||||||
|
echo
|
||||||
|
echo -e "\e[1;94mGenerating dev certificate\e[0m"
|
||||||
|
gulp trust-dev-cert
|
||||||
|
|
||||||
|
# Convert the generated PEM certificate to a CER certificate
|
||||||
|
openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
|
||||||
|
|
||||||
|
# Copy the PEM ecrtificate for non-Windows hosts
|
||||||
|
cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
|
||||||
|
|
||||||
|
## add *.cer to .gitignore to prevent certificates from being saved in repo
|
||||||
|
if ! grep -Fxq '*.cer' ./.gitignore
|
||||||
|
then
|
||||||
|
echo "# .CER Certificates" >> .gitignore
|
||||||
|
echo "*.cer" >> .gitignore
|
||||||
|
fi
|
||||||
|
|
||||||
|
## add *.pem to .gitignore to prevent certificates from being saved in repo
|
||||||
|
if ! grep -Fxq '*.pem' ./.gitignore
|
||||||
|
then
|
||||||
|
echo "# .PEM Certificates" >> .gitignore
|
||||||
|
echo "*.pem" >> .gitignore
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo
|
||||||
|
echo -e "\e[1;92mReady!\e[0m"
|
||||||
|
|
||||||
|
echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Build generated files
|
||||||
|
dist
|
||||||
|
lib
|
||||||
|
release
|
||||||
|
solution
|
||||||
|
temp
|
||||||
|
*.sppkg
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
|
||||||
|
# OSX
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Visual Studio files
|
||||||
|
.ntvs_analysis.dat
|
||||||
|
.vs
|
||||||
|
bin
|
||||||
|
obj
|
||||||
|
|
||||||
|
# Resx Generated Code
|
||||||
|
*.resx.ts
|
||||||
|
|
||||||
|
# Styles Generated Code
|
||||||
|
*.scss.ts
|
||||||
|
# .CER Certificates
|
||||||
|
*.cer
|
||||||
|
# .PEM Certificates
|
||||||
|
*.pem
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
!dist
|
||||||
|
config
|
||||||
|
|
||||||
|
gulpfile.js
|
||||||
|
|
||||||
|
release
|
||||||
|
src
|
||||||
|
temp
|
||||||
|
|
||||||
|
tsconfig.json
|
||||||
|
tslint.json
|
||||||
|
|
||||||
|
*.log
|
||||||
|
|
||||||
|
.yo-rc.json
|
||||||
|
.vscode
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"@microsoft/generator-sharepoint": {
|
||||||
|
"plusBeta": false,
|
||||||
|
"isCreatingSolution": true,
|
||||||
|
"environment": "spo",
|
||||||
|
"version": "1.13.0",
|
||||||
|
"libraryName": "react-tabacordion",
|
||||||
|
"libraryId": "e516c8e2-da07-4dba-a522-ae36ec31e879",
|
||||||
|
"packageManager": "npm",
|
||||||
|
"isDomainIsolated": false,
|
||||||
|
"componentType": "webpart"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
---
|
||||||
|
page_type: sample
|
||||||
|
products:
|
||||||
|
- office-sp
|
||||||
|
languages:
|
||||||
|
- javascript
|
||||||
|
- typescript
|
||||||
|
extensions:
|
||||||
|
contentType: samples
|
||||||
|
technologies:
|
||||||
|
- SharePoint Framework
|
||||||
|
platforms:
|
||||||
|
- react
|
||||||
|
createdDate: 03/30/2022 12:00:00 AM
|
||||||
|
---
|
||||||
|
# Tab Accordion Web Part with Property Field Collection Data and tinyMCE for Rich Text Editing
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
|
||||||
|
- This Web Part allows users to create content as Tabbed content using Property Field Collection Data and tinyMCE for Rich Text Editing targeted for SharePoint Online.
|
||||||
|
- Provides options to view as an Accordion or Tab.
|
||||||
|
- In mobile browser defaults to Accordion view.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Compatibility
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Applies to
|
||||||
|
|
||||||
|
- [SharePoint Framework](https://aka.ms/spfx)
|
||||||
|
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||||
|
|
||||||
|
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
There are no pre-requisites to use these samples.
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
|
||||||
|
Solution|Author(s)
|
||||||
|
--------|---------
|
||||||
|
react-accordion-with-richtext | [Arun Kumar Perumal](https://github.com/arunkumarperumal) - LinkedIn: <https://www.linkedin.com/in/arunkumarperumal/> - Twitter: <https://twitter.com/arun_perumal16>
|
||||||
|
|
||||||
|
## Version history
|
||||||
|
|
||||||
|
Version|Date|Comments
|
||||||
|
-------|----|--------
|
||||||
|
1.0|April 11, 2022|Initial release
|
||||||
|
|
||||||
|
|
||||||
|
## Minimal path to awesome
|
||||||
|
|
||||||
|
- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-with-richtext) then unzip it)
|
||||||
|
- Ensure that you are at the solution folder
|
||||||
|
- in the command-line run:
|
||||||
|
- `npm install`
|
||||||
|
- `gulp serve`
|
||||||
|
|
||||||
|
> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit <https://aka.ms/spfx-devcontainer> for further instructions.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
This Web Part allows users to create content as Tabbed content using Property Field Collection Data and tinyMCE for Rich Text Editing targeted for SharePoint Online.
|
||||||
|
|
||||||
|
Has the following features:
|
||||||
|
|
||||||
|
- Ability to create Tabs or Accordions based content
|
||||||
|
- Ability to create Tabs with Rich Text Editor for content using tinyMCE Control
|
||||||
|
- Defaults to Accordion in Mobile displays
|
||||||
|
- Uses Custom Accordion components included in the code.
|
||||||
|
- Uses Custom Tab components included in the code
|
||||||
|
- Use the site Primary colors and themes for display
|
||||||
|
|
||||||
|
|
||||||
|
> Share your web part with others through Microsoft 365 Patterns and Practices program to get visibility and exposure. More details on the community, open-source projects and other activities from http://aka.ms/m365pnp.
|
||||||
|
|
||||||
|
## References
|
||||||
|
|
||||||
|
- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||||
|
- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
|
||||||
|
- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
|
||||||
|
- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
|
||||||
|
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
|
||||||
|
|
||||||
|
|
||||||
|
## Help
|
||||||
|
|
||||||
|
|
||||||
|
We do not support samples, but 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.
|
||||||
|
|
||||||
|
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-accordion-with-richtext%22) to see if anybody else is having the same issues.
|
||||||
|
|
||||||
|
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-accordion-with-richtext) and see what the community is saying.
|
||||||
|
|
||||||
|
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-accordion-with-richtext&template=bug-report.yml&sample=react-accordion-with-richtext&authors=@arunkumarperumal&title=react-accordion-with-richtext%20-%20).
|
||||||
|
|
||||||
|
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-accordion-with-richtext&template=question.yml&sample=react-accordion-with-richtext&authors=@arunkumarperumal&title=react-accordion-with-richtext%20-%20).
|
||||||
|
|
||||||
|
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-accordion-with-richtext&template=suggestion.yml&sample=react-accordion-with-richtext&authors=@arunkumarperumal&title=react-accordion-with-richtext%20-%20).
|
||||||
|
|
||||||
|
## Disclaimer
|
||||||
|
|
||||||
|
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||||
|
|
||||||
|
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-accordion-with-richtext" />
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 MiB |
|
|
@ -0,0 +1,56 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "pnp-sp-dev-spfx-web-parts-react-accordion-with-richtext",
|
||||||
|
"source": "pnp",
|
||||||
|
"title": "Tab Accordion",
|
||||||
|
"shortDescription": "This Web Part allows users to create content as Tabbed content using Property Field Collection Data and tinyMCE for Rich Text Editing targeted for SharePoint Online",
|
||||||
|
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-with-richtext",
|
||||||
|
"downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-with-richtext",
|
||||||
|
"longDescription": [
|
||||||
|
"This Web Part allows users to create content as Tabbed content using Property Field Collection Data and tinyMCE for Rich Text Editing targeted for SharePoint Online"
|
||||||
|
],
|
||||||
|
"creationDateTime": "2022-03-30",
|
||||||
|
"updateDateTime": "2022-03-30",
|
||||||
|
"products": [
|
||||||
|
"SharePoint"
|
||||||
|
],
|
||||||
|
"metadata": [
|
||||||
|
{
|
||||||
|
"key": "CLIENT-SIDE-DEV",
|
||||||
|
"value": "React"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "SPFX-VERSION",
|
||||||
|
"value": "1.14"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"thumbnails": [
|
||||||
|
{
|
||||||
|
"type": "image",
|
||||||
|
"order": 100,
|
||||||
|
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-accordion-with-richtext/assets/TabAccordionWebpart.PNG",
|
||||||
|
"alt": "Web Part Preview"
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// "type": "video",
|
||||||
|
// "order": 101,
|
||||||
|
// "url": "https://www.youtube.com/embed/FS-_0KENJkI",
|
||||||
|
// "alt": "Community demo of the web part"
|
||||||
|
// }
|
||||||
|
],
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"gitHubAccount": "arunkumarperumal",
|
||||||
|
"pictureUrl": "https://github.com/arunkumarperumal.png",
|
||||||
|
"name": "Arun Kumar Perumal"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"name": "Build your first SharePoint client-side web part",
|
||||||
|
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
|
||||||
|
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||||
|
"version": "2.0",
|
||||||
|
"bundles": {
|
||||||
|
"tab-accordion-web-part": {
|
||||||
|
"components": [
|
||||||
|
{
|
||||||
|
"entrypoint": "./lib/webparts/tabAccordion/TabAccordionWebPart.js",
|
||||||
|
"manifest": "./src/webparts/tabAccordion/TabAccordionWebPart.manifest.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"externals": {
|
||||||
|
"tinymce": {
|
||||||
|
"path": "https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.3/tinymce.min.js",
|
||||||
|
"globalName": "tinymce"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"localizedResources": {
|
||||||
|
"TabAccordionWebPartStrings": "lib/webparts/tabAccordion/loc/{locale}.js",
|
||||||
|
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js",
|
||||||
|
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||||
|
"workingDir": "./release/assets/",
|
||||||
|
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||||
|
"container": "react-tabacordion",
|
||||||
|
"accessKey": "<!-- ACCESS KEY -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||||
|
"solution": {
|
||||||
|
"name": "react-tabacordion",
|
||||||
|
"id": "e516c8e2-da07-4dba-a522-ae36ec31e879",
|
||||||
|
"version": "1.0.0.0",
|
||||||
|
"includeClientSideAssets": true,
|
||||||
|
"skipFeatureDeployment": true,
|
||||||
|
"isDomainIsolated": false,
|
||||||
|
"developer": {
|
||||||
|
"name": "",
|
||||||
|
"websiteUrl": "",
|
||||||
|
"privacyUrl": "",
|
||||||
|
"termsOfUseUrl": "",
|
||||||
|
"mpnId": "Undefined-1.13.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"paths": {
|
||||||
|
"zippedPackage": "solution/react-tabacordion.sppkg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||||
|
"port": 4321,
|
||||||
|
"https": true,
|
||||||
|
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||||
|
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const build = require('@microsoft/sp-build-web');
|
||||||
|
|
||||||
|
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||||
|
|
||||||
|
var getTasks = build.rig.getTasks;
|
||||||
|
build.rig.getTasks = function () {
|
||||||
|
var result = getTasks.call(build.rig);
|
||||||
|
|
||||||
|
result.set('serve', result.get('serve-deprecated'));
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
build.initialize(require('gulp'));
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,35 @@
|
||||||
|
{
|
||||||
|
"name": "react-tabacordion",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"main": "lib/index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "gulp bundle",
|
||||||
|
"clean": "gulp clean",
|
||||||
|
"test": "gulp test"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "16.13.1",
|
||||||
|
"react-dom": "16.13.1",
|
||||||
|
"office-ui-fabric-react": "7.174.1",
|
||||||
|
"@microsoft/sp-core-library": "1.13.0",
|
||||||
|
"@microsoft/sp-property-pane": "1.13.0",
|
||||||
|
"@microsoft/sp-webpart-base": "1.13.0",
|
||||||
|
"@microsoft/sp-lodash-subset": "1.13.0",
|
||||||
|
"@microsoft/sp-office-ui-fabric-core": "1.13.0",
|
||||||
|
"@pnp/spfx-controls-react": "^3.5.0",
|
||||||
|
"@pnp/spfx-property-controls": "^3.3.0",
|
||||||
|
"@tinymce/tinymce-react": "^2.2.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "16.9.51",
|
||||||
|
"@types/react-dom": "16.9.8",
|
||||||
|
"@microsoft/sp-build-web": "1.13.0",
|
||||||
|
"@microsoft/sp-tslint-rules": "1.13.0",
|
||||||
|
"@microsoft/sp-module-interfaces": "1.13.0",
|
||||||
|
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
|
||||||
|
"gulp": "~4.0.2",
|
||||||
|
"ajv": "~5.2.2",
|
||||||
|
"@types/webpack-env": "1.13.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||||
|
"id": "51789d0c-7a65-494e-8969-59bfc883e751",
|
||||||
|
"alias": "TabAccordionWebPart",
|
||||||
|
"componentType": "WebPart",
|
||||||
|
|
||||||
|
// 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,
|
||||||
|
"supportedHosts": ["SharePointWebPart"],
|
||||||
|
|
||||||
|
"preconfiguredEntries": [{
|
||||||
|
"groupId": "ae3ce92d-ee3f-44cf-b944-eeaff3499b8b", // Other
|
||||||
|
"group": { "default": "Other" },
|
||||||
|
"title": { "default": "Tab Accordion" },
|
||||||
|
"description": { "default": "Tab & Accordion Web Part" },
|
||||||
|
"officeFabricIconFontName": "Page",
|
||||||
|
"properties": {
|
||||||
|
"tabs": [
|
||||||
|
{ "Title": "Tab 1", "Content": "Tab 1 Content"},
|
||||||
|
{ "Title": "Tab 2", "Content": "Tab 2 Content"},
|
||||||
|
{ "Title": "Tab 3", "Content": "Tab 3 Content"}
|
||||||
|
],
|
||||||
|
"title": "Tabs",
|
||||||
|
"type": "Tab"
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,181 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import * as ReactDom from 'react-dom';
|
||||||
|
import { Version, Guid } from '@microsoft/sp-core-library';
|
||||||
|
import { BrowserUtilities } from '@microsoft/sp-core-library/lib-commonjs/BrowserUtilities';
|
||||||
|
import {
|
||||||
|
BaseClientSideWebPart,
|
||||||
|
IWebPartPropertiesMetadata,
|
||||||
|
WebPartContext
|
||||||
|
} from '@microsoft/sp-webpart-base';
|
||||||
|
|
||||||
|
|
||||||
|
import {
|
||||||
|
IPropertyPaneConfiguration,
|
||||||
|
PropertyPaneDropdown,
|
||||||
|
PropertyPaneTextField
|
||||||
|
} from '@microsoft/sp-property-pane';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import * as strings from 'TabAccordionWebPartStrings';
|
||||||
|
import Tab from './components/CTab';
|
||||||
|
import { ICTabProps } from './components/ICTabProps';
|
||||||
|
import Accordion from './components/CAccordion';
|
||||||
|
import { ICAccordionProps } from './components/ICAccordionProps';
|
||||||
|
import { SPComponentLoader } from '@microsoft/sp-loader';
|
||||||
|
import 'tinymce';
|
||||||
|
export interface ITabAccordionWebPartProps {
|
||||||
|
tabs: any[];
|
||||||
|
type: string;
|
||||||
|
title: string;
|
||||||
|
accordion:boolean;
|
||||||
|
tabContent: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class TabAccordionWebPart extends BaseClientSideWebPart<ITabAccordionWebPartProps> {
|
||||||
|
private propertyFieldCollectionData;
|
||||||
|
private customCollectionFieldType;
|
||||||
|
private guid: string;
|
||||||
|
private isMobile: boolean;
|
||||||
|
|
||||||
|
// ...
|
||||||
|
protected get propertiesMetadata(): IWebPartPropertiesMetadata {
|
||||||
|
return {
|
||||||
|
'title': { isSearchablePlainText: true },
|
||||||
|
'tabContent': { isHtmlString: true }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// ...
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* Web part contructor.
|
||||||
|
*/
|
||||||
|
public constructor(context?: WebPartContext) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
//Initialize unique GUID
|
||||||
|
this.guid = Guid.newGuid().toString();
|
||||||
|
|
||||||
|
this.isMobile = BrowserUtilities.isMobileBrowser();
|
||||||
|
|
||||||
|
//Hack: to invoke correctly the onPropertyChange function outside this class
|
||||||
|
//we need to bind this object on it first
|
||||||
|
this.onPropertyPaneFieldChanged = this.onPropertyPaneFieldChanged.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public render(): void {
|
||||||
|
this.properties.tabContent = "";
|
||||||
|
this.properties.tabs.map((tab: any, tabindex: number) => {
|
||||||
|
this.properties.tabContent += tab.Title + "," + tab.Content + "|";
|
||||||
|
});
|
||||||
|
|
||||||
|
const elementTab: React.ReactElement<ICTabProps > = React.createElement(
|
||||||
|
Tab,
|
||||||
|
{
|
||||||
|
tabs: this.properties.tabs,
|
||||||
|
displayMode: this.displayMode,
|
||||||
|
guid: this.guid,
|
||||||
|
title:this.properties.title,
|
||||||
|
fUpdateProperty: (value: string) => {
|
||||||
|
this.properties.title = value;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
const elementAccordion: React.ReactElement<ICAccordionProps > = React.createElement(
|
||||||
|
Accordion,
|
||||||
|
{
|
||||||
|
tabs: this.properties.tabs,
|
||||||
|
displayMode: this.displayMode,
|
||||||
|
guid: this.guid,
|
||||||
|
title: this.properties.title,
|
||||||
|
accordion:this.properties.accordion,
|
||||||
|
fUpdateProperty: (value: string) => {
|
||||||
|
this.properties.title = value;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if(this.isMobile)
|
||||||
|
{
|
||||||
|
ReactDom.render(elementAccordion, this.domElement);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
if(this.properties.type == "Accordion")
|
||||||
|
{
|
||||||
|
ReactDom.render(elementAccordion, this.domElement);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
ReactDom.render(elementTab, this.domElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
protected get dataVersion(): Version {
|
||||||
|
return Version.parse('1.0');
|
||||||
|
}
|
||||||
|
|
||||||
|
//executes only before property pane is loaded.
|
||||||
|
protected async loadPropertyPaneResources(): Promise<void> {
|
||||||
|
// import additional controls/components
|
||||||
|
const { PropertyFieldCollectionData, CustomCollectionFieldType } = await import (
|
||||||
|
/* webpackChunkName: 'pnp-propcontrols-colldata' */
|
||||||
|
'@pnp/spfx-property-controls/lib/PropertyFieldCollectionData'
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this.propertyFieldCollectionData = PropertyFieldCollectionData;
|
||||||
|
this.customCollectionFieldType = CustomCollectionFieldType;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @function
|
||||||
|
* PropertyPanel settings definition
|
||||||
|
*/
|
||||||
|
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||||
|
return {
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
header: {
|
||||||
|
description: strings.PropertyPaneDescription
|
||||||
|
},
|
||||||
|
displayGroupsAsAccordion: true,
|
||||||
|
groups: [
|
||||||
|
{
|
||||||
|
groupName: strings.BasicGroupName,
|
||||||
|
groupFields: [
|
||||||
|
PropertyPaneDropdown('type', {
|
||||||
|
label: strings.Type,
|
||||||
|
disabled: false,
|
||||||
|
options: [
|
||||||
|
{key: 'Accordion', text: 'Accordion'},
|
||||||
|
{key: 'Tab', text: 'Tab'}
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
this.propertyFieldCollectionData("tabs", {
|
||||||
|
key: "tabs",
|
||||||
|
panelHeader: strings.ManageAccordion,
|
||||||
|
manageBtnLabel: strings.ManageAccordion,
|
||||||
|
value: this.properties.tabs,
|
||||||
|
enableSorting: false,
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
id: "Title",
|
||||||
|
title: strings.TitleFieldLabel,
|
||||||
|
type: this.customCollectionFieldType.string,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,237 @@
|
||||||
|
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ----------------------------------------------
|
||||||
|
* Demo styles
|
||||||
|
* ----------------------------------------------
|
||||||
|
**/
|
||||||
|
.webparttitle {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 600;
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webpartheader>span {
|
||||||
|
float: right;
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionAbsolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionRelative {
|
||||||
|
position: relative;
|
||||||
|
display: inline;
|
||||||
|
padding-left: 20px;
|
||||||
|
font-family: "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
|
||||||
|
font-size: 21px;
|
||||||
|
top: 15%;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion {
|
||||||
|
// border-bottom: 1px solid;
|
||||||
|
//border-radius: 2px;
|
||||||
|
// border-bottom-color: $ms-color-themePrimary;
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
margin-top: 10px !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
@media (max-width: 320px) {
|
||||||
|
margin-top: 10px !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.accordion__item{
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion__item:focus{
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordionItemHasIcon {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion__title {
|
||||||
|
background-color: $ms-color-neutralLighter;
|
||||||
|
color: $ms-color-themePrimary;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px 0px 10px 0px;
|
||||||
|
text-align: left;
|
||||||
|
border: none;
|
||||||
|
vertical-align: top;
|
||||||
|
&:hover {
|
||||||
|
background-color: $ms-color-neutralLight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion__item [aria-expanded='true'], .accordion__item [aria-selected='true'] {
|
||||||
|
background-color: $ms-color-themePrimary;
|
||||||
|
color:$ms-color-white;
|
||||||
|
&:hover {
|
||||||
|
background-color: $ms-color-themeDarker;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion__title:focus {
|
||||||
|
outline:none;
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion__body {
|
||||||
|
padding: 5px 20px;
|
||||||
|
display: block;
|
||||||
|
animation: fadein 0.35s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.accordionBodyHidden {
|
||||||
|
display: none;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadein 0.35s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion__title > *:last-child, .accordion__body > *:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion__arrow {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
top: 20%;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: $ms-color-themePrimary;
|
||||||
|
color:$ms-color-white;
|
||||||
|
margin-left: 20px;
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 10px;
|
||||||
|
height: 2px;
|
||||||
|
content: '';
|
||||||
|
background-color: $ms-color-white;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 10px;
|
||||||
|
height: 2px;
|
||||||
|
content: '';
|
||||||
|
transform: rotate(45deg);
|
||||||
|
background-color: $ms-color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-expanded='true'] .accordion__arrow, [aria-selected='true'] .accordion__arrow{
|
||||||
|
background-color: $ms-color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-expanded='true'] .accordion__arrow::before, [aria-selected='true'] .accordion__arrow::before {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
background-color: $ms-color-themePrimary;
|
||||||
|
color:$ms-color-themePrimary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion__arrow::before {
|
||||||
|
left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion__arrow::after {
|
||||||
|
right: 2px;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
[aria-expanded='true'] .accordion__arrow::after, [aria-selected='true'] .accordion__arrow::after {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
background-color: $ms-color-themePrimary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion__arrow {
|
||||||
|
&::before, &::after {
|
||||||
|
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -------------------------------------------------- */
|
||||||
|
/* ---------------- Animation part ------------------ */
|
||||||
|
/* -------------------------------------------------- */
|
||||||
|
|
||||||
|
@keyframes fadein {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes moveDown {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
10% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateY(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes moveUp {
|
||||||
|
0% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
10% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.accordionTitleAnimated {
|
||||||
|
&:hover .accordion__arrow {
|
||||||
|
animation-name: moveDown;
|
||||||
|
animation-duration: 1.5s;
|
||||||
|
}
|
||||||
|
&[aria-expanded='true']:hover .accordion__arrow {
|
||||||
|
animation-name: moveUp;
|
||||||
|
animation-duration: 1.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import styles from './CAccordion.module.scss';
|
||||||
|
import { ICAccordionProps } from './ICAccordionProps';
|
||||||
|
import { DisplayMode, Version } from '@microsoft/sp-core-library';
|
||||||
|
import { Editor } from '@tinymce/tinymce-react';
|
||||||
|
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Accordion,
|
||||||
|
AccordionItem,
|
||||||
|
AccordionItemTitle,
|
||||||
|
AccordionItemBody,
|
||||||
|
} from './utilities/Accordion/index';
|
||||||
|
|
||||||
|
export default class CAccordion extends React.Component<ICAccordionProps, {}> {
|
||||||
|
public handleEditorChange = (e) => {
|
||||||
|
var id = e.target.id.split("-editor-")[1];
|
||||||
|
//Save the content in properties
|
||||||
|
|
||||||
|
this.props.tabs[id].Content = e.target.getContent();
|
||||||
|
}
|
||||||
|
public render(): React.ReactElement<ICAccordionProps> {
|
||||||
|
if(this.props.displayMode === DisplayMode.Edit)
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className={styles.webpartheader}>
|
||||||
|
<WebPartTitle displayMode={this.props.displayMode}
|
||||||
|
title={this.props.title}
|
||||||
|
updateProperty={this.props.fUpdateProperty}
|
||||||
|
className={styles.webparttitle} />
|
||||||
|
</div>
|
||||||
|
<Accordion className={styles.accordion} aria-live="polite" accordion={this.props.accordion}>
|
||||||
|
{
|
||||||
|
this.props.tabs.map((tab: any, index: number) => {
|
||||||
|
return (
|
||||||
|
<AccordionItem key={"tab" + index} className={styles.accordion__item} aria-controls={this.props.guid + '-title-' + index} id={"tab" + index} >
|
||||||
|
<AccordionItemTitle className={styles.accordion__title} id={this.props.guid + '-title-' + index}>
|
||||||
|
<div className={styles.accordion__arrow} role="presentation" />
|
||||||
|
<div className={styles["positionRelative"]}>
|
||||||
|
{tab.Title}
|
||||||
|
</div>
|
||||||
|
</AccordionItemTitle>
|
||||||
|
<AccordionItemBody className={styles.accordion__body} hideBodyClassName={styles["accordionBodyHidden"]} >
|
||||||
|
<Editor
|
||||||
|
id={this.props.guid + '-editor-' + index}
|
||||||
|
value={tab.Content}
|
||||||
|
init={{
|
||||||
|
content_style: "a {color:rgb(0,120,212) !important}",
|
||||||
|
plugins: 'link image table lists media code',
|
||||||
|
menubar: 'edit insert format table lists view', // skip file
|
||||||
|
height : "240",
|
||||||
|
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | numlist bullist | media | code',
|
||||||
|
table_responsive_width: true,
|
||||||
|
table_default_styles: {
|
||||||
|
'width': '100%',
|
||||||
|
'height': 'auto'
|
||||||
|
},
|
||||||
|
image_advtab: true,
|
||||||
|
style_formats: [
|
||||||
|
{title: 'Headings', items: [
|
||||||
|
{title: 'Heading 1', format: 'h2'},
|
||||||
|
{title: 'Heading 2', format: 'h3'},
|
||||||
|
{title: 'Heading 3', format: 'h4'}
|
||||||
|
]}]
|
||||||
|
|
||||||
|
}}
|
||||||
|
onChange={this.handleEditorChange}
|
||||||
|
/>
|
||||||
|
</AccordionItemBody>
|
||||||
|
</AccordionItem>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Accordion>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className={styles.webpartheader}>
|
||||||
|
<WebPartTitle displayMode={this.props.displayMode}
|
||||||
|
title={this.props.title}
|
||||||
|
updateProperty={this.props.fUpdateProperty}
|
||||||
|
className={styles.webparttitle} />
|
||||||
|
</div>
|
||||||
|
<Accordion className={styles.accordion} aria-live="polite" accordion={this.props.accordion}>
|
||||||
|
{
|
||||||
|
this.props.tabs.map((tab: any, index: number) => {
|
||||||
|
return (
|
||||||
|
<AccordionItem key={"tab" + index} className={styles.accordion__item} aria-controls={this.props.guid + '-title-' + index} id={"tab" + index} >
|
||||||
|
<AccordionItemTitle className={styles.accordion__title} id={this.props.guid + '-title-' + index}>
|
||||||
|
<div className={styles.accordion__arrow} role="presentation" />
|
||||||
|
<div className={styles["positionRelative"]} >
|
||||||
|
{tab.Title}
|
||||||
|
</div>
|
||||||
|
</AccordionItemTitle>
|
||||||
|
<AccordionItemBody className={styles.accordion__body} hideBodyClassName={styles["accordionBodyHidden"]}>
|
||||||
|
<div dangerouslySetInnerHTML={{__html:tab.Content}} id={this.props.guid}></div>
|
||||||
|
</AccordionItemBody>
|
||||||
|
</AccordionItem>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Accordion>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||||
|
.outermargin {
|
||||||
|
margin:1em 1em;
|
||||||
|
}
|
||||||
|
.tabs {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs .tablinks {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 58px;
|
||||||
|
position: relative;
|
||||||
|
background-color: $ms-color-neutralLighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs .tablink {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
height: 58px;
|
||||||
|
line-height: 58px;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right:10px;
|
||||||
|
font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 400;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 20px;
|
||||||
|
color: $ms-color-neutralTertiary;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.tabs .tablinkactive {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
height: 58px;
|
||||||
|
line-height: 58px;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right:10px;
|
||||||
|
font-family: "Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 400;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
margin-left: 20px;
|
||||||
|
color: $ms-color-themePrimary;
|
||||||
|
}
|
||||||
|
.tabs .tablinkactive span {
|
||||||
|
border-bottom:2px solid;
|
||||||
|
border-bottom-color: $ms-color-themePrimary;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
.tabs .tablink:focus {
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
.tabs .tablinkactive:focus {
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
.tabs .content {
|
||||||
|
padding: 15px 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.tabs .content table {
|
||||||
|
border:none;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs .content tr:first-child {
|
||||||
|
color:#fff;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
font-weight: 600;
|
||||||
|
background-color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs .content td {
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
padding:5px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.tabs .content tr {
|
||||||
|
border-left: 1px solid #ddd;
|
||||||
|
border-right:1px solid #ddd;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs .content img {
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.tabs .content a {
|
||||||
|
color: $ms-color-themePrimary !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeLinkStyle {
|
||||||
|
border-Bottom: '2px solid rgb(0, 120, 212)'
|
||||||
|
}
|
||||||
|
|
||||||
|
.webparttitle {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 600;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webpartheader > span {
|
||||||
|
float: right;
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import styles from './CTab.module.scss';
|
||||||
|
import { ICTabProps } from './ICTabProps';
|
||||||
|
import { DisplayMode, Version } from '@microsoft/sp-core-library';
|
||||||
|
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
|
||||||
|
import { Editor } from '@tinymce/tinymce-react';
|
||||||
|
|
||||||
|
import { Tabs, TabLink, TabContent } from './utilities/Tab/index';
|
||||||
|
|
||||||
|
|
||||||
|
export default class CTab extends React.Component<ICTabProps, {}> {
|
||||||
|
constructor(props: ICTabProps) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
/* istanbul ignore next */
|
||||||
|
public handleEditorChange = (e) => {
|
||||||
|
/* istanbul ignore next */
|
||||||
|
var id = e.target.id.split("-editor-")[1];
|
||||||
|
//Save the content in properties
|
||||||
|
this.props.tabs[id].Content = e.target.getContent();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public render(): React.ReactElement<ICTabProps> {
|
||||||
|
if(this.props.displayMode === DisplayMode.Edit)
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className={styles.webpartheader}>
|
||||||
|
<WebPartTitle displayMode={this.props.displayMode}
|
||||||
|
title={this.props.title}
|
||||||
|
updateProperty={this.props.fUpdateProperty}
|
||||||
|
className={styles.webparttitle} />
|
||||||
|
</div>
|
||||||
|
<Tabs className={styles.tabs} selectedTab={this.props.guid + "-editor-0"}>
|
||||||
|
<div className={styles.tablinks} tabIndex={0}>
|
||||||
|
{
|
||||||
|
this.props.tabs.map((tab: any, tabindex: number) => {
|
||||||
|
return (
|
||||||
|
<TabLink className={styles.tablink} activeClassName={styles.tablinkactive}
|
||||||
|
id={this.props.guid + "-link-" + tabindex}
|
||||||
|
to={this.props.guid + "-editor-" + tabindex} key={this.props.guid + "-link-" + tabindex} ><span>{tab.Title}</span></TabLink>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div className={styles.content}>
|
||||||
|
{
|
||||||
|
this.props.tabs.map((tab: any, tabindex: number) => {
|
||||||
|
return (
|
||||||
|
<TabContent itemKey={this.props.guid + "-editor-" + tabindex}
|
||||||
|
key={this.props.guid + "-editor-" + tabindex}
|
||||||
|
for={this.props.guid + "-editor-" + tabindex} >
|
||||||
|
<Editor
|
||||||
|
id={this.props.guid + '-editor-' + tabindex}
|
||||||
|
itemKey={this.props.guid + '-editor-' + tabindex}
|
||||||
|
value={tab.Content}
|
||||||
|
init={{
|
||||||
|
content_style: "a {color:rgb(0,120,212) !important}",
|
||||||
|
plugins: 'link image table lists media code',
|
||||||
|
menubar: 'edit insert format table lists view', // skip file
|
||||||
|
height : "240",
|
||||||
|
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | numlist bullist | media | code',
|
||||||
|
table_responsive_width: true,
|
||||||
|
table_default_styles: {
|
||||||
|
'width': '100%',
|
||||||
|
'height': 'auto'
|
||||||
|
},
|
||||||
|
image_advtab: true,
|
||||||
|
style_formats: [
|
||||||
|
{title: 'Headings', items: [
|
||||||
|
{title: 'Heading 1', format: 'h2'},
|
||||||
|
{title: 'Heading 2', format: 'h3'},
|
||||||
|
{title: 'Heading 3', format: 'h4'}
|
||||||
|
]}]
|
||||||
|
|
||||||
|
}}
|
||||||
|
onChange={this.handleEditorChange}
|
||||||
|
/>
|
||||||
|
</TabContent>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className={styles.webpartheader}>
|
||||||
|
<WebPartTitle displayMode={this.props.displayMode}
|
||||||
|
title={this.props.title}
|
||||||
|
updateProperty={this.props.fUpdateProperty}
|
||||||
|
className={styles.webparttitle} />
|
||||||
|
</div>
|
||||||
|
<Tabs className={styles.tabs} selectedTab={this.props.guid + "-editor-0"} >
|
||||||
|
<div className={styles.tablinks} >
|
||||||
|
{
|
||||||
|
this.props.tabs.map((tab: any, tabindex: number) => {
|
||||||
|
return (
|
||||||
|
<TabLink className={styles.tablink} activeClassName={styles.tablinkactive}
|
||||||
|
id={this.props.guid + "-link-" + tabindex}
|
||||||
|
key={this.props.guid + "-link-" + tabindex}
|
||||||
|
to={this.props.guid + "-editor-" + tabindex}><span>{tab.Title}</span></TabLink>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div className={styles.content}>
|
||||||
|
{
|
||||||
|
this.props.tabs.map((tab: any, tabindex: number) => {
|
||||||
|
return (
|
||||||
|
<TabContent key={this.props.guid + "-editor-" + tabindex}
|
||||||
|
for={this.props.guid + "-editor-" + tabindex} >
|
||||||
|
<div dangerouslySetInnerHTML={{__html:tab.Content}} id={this.props.guid} ></div>
|
||||||
|
</TabContent>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { DisplayMode } from "@microsoft/sp-core-library";
|
||||||
|
|
||||||
|
export interface ICAccordionProps {
|
||||||
|
tabs: any[];
|
||||||
|
displayMode: DisplayMode;
|
||||||
|
guid: string;
|
||||||
|
title: string;
|
||||||
|
accordion:boolean;
|
||||||
|
fUpdateProperty: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { DisplayMode } from "@microsoft/sp-core-library";
|
||||||
|
|
||||||
|
export interface ICTabProps {
|
||||||
|
tabs: any[];
|
||||||
|
displayMode: DisplayMode;
|
||||||
|
guid: string;
|
||||||
|
title:string;
|
||||||
|
fUpdateProperty: (value: string) => void;
|
||||||
|
}
|
||||||
1
samples/react-accordion-with-richtext/src/webparts/tabAccordion/components/tinymcereact.d.ts
vendored
Normal file
1
samples/react-accordion-with-richtext/src/webparts/tabAccordion/components/tinymcereact.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
declare module '@tinymce/tinymce-react';
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
export interface IAccordionProps {
|
||||||
|
accordion?: boolean;
|
||||||
|
children?: JSX.Element[]|object;
|
||||||
|
className?: string;
|
||||||
|
onChange?: (any) => void;
|
||||||
|
}
|
||||||
|
export interface IAccordionState {
|
||||||
|
activeItems: any [];
|
||||||
|
accordion: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Accordion extends React.Component<IAccordionProps, IAccordionState> {
|
||||||
|
public static defaultProps = {
|
||||||
|
accordion: true,
|
||||||
|
onChange: (any) => {},
|
||||||
|
className: 'accordion',
|
||||||
|
};
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
const activeItems = this.preExpandedItems();
|
||||||
|
this.state = {
|
||||||
|
activeItems: activeItems,
|
||||||
|
accordion: true,
|
||||||
|
};
|
||||||
|
this.renderItems = this.renderItems.bind(this);
|
||||||
|
}
|
||||||
|
public preExpandedItems() {
|
||||||
|
const activeItems = [];
|
||||||
|
React.Children.map(this.props.children, (item, index) => {
|
||||||
|
let child = item as React.ReactElement<any>;
|
||||||
|
if (child.props.expanded) {
|
||||||
|
if (this.props.accordion) {
|
||||||
|
if (activeItems.length === 0) activeItems.push(index);
|
||||||
|
} else {
|
||||||
|
activeItems.push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return activeItems;
|
||||||
|
}
|
||||||
|
|
||||||
|
public handleClick(key) {
|
||||||
|
let activeItems = this.state.activeItems;
|
||||||
|
if (this.props.accordion) {
|
||||||
|
activeItems = activeItems[0] === key ? [] : [key];
|
||||||
|
} else {
|
||||||
|
activeItems = [...activeItems];
|
||||||
|
const index = activeItems.indexOf(key);
|
||||||
|
const isActive = index > -1;
|
||||||
|
if (isActive) {
|
||||||
|
// remove active state
|
||||||
|
activeItems.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
activeItems.push(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
activeItems: activeItems,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.props.onChange(this.props.accordion ? activeItems[0] : activeItems);
|
||||||
|
}
|
||||||
|
|
||||||
|
public renderItems() {
|
||||||
|
const { accordion, children } = this.props;
|
||||||
|
|
||||||
|
return React.Children.map(children, (item, index) => {
|
||||||
|
let child = item as React.ReactElement<any>;
|
||||||
|
const key = index;
|
||||||
|
const expanded = (this.state.activeItems.indexOf(key) !== -1) && (!child.props.disabled);
|
||||||
|
|
||||||
|
return React.cloneElement(child, {
|
||||||
|
disabled: child.props.disabled,
|
||||||
|
accordion: accordion,
|
||||||
|
expanded: expanded,
|
||||||
|
key: `accordion__item-${key}`,
|
||||||
|
onClick: this.handleClick.bind(this, key),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const { className } = this.props;
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
{this.renderItems()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { IAccordionItemTitleProps } from './AccordionItemTitle';
|
||||||
|
import { IAccordionItemBodyProps } from './AccordionItemBody';
|
||||||
|
|
||||||
|
export interface IAccordionItemProps {
|
||||||
|
accordion?: boolean;
|
||||||
|
onClick?: () => void;
|
||||||
|
expanded?: boolean;
|
||||||
|
children?: JSX.Element[];
|
||||||
|
className?: string;
|
||||||
|
hideBodyClassName?: string;
|
||||||
|
id?:string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default class AccordionItem extends React.Component<IAccordionItemProps, {}> {
|
||||||
|
public static defaultProps = {
|
||||||
|
accordion: true,
|
||||||
|
expanded: false,
|
||||||
|
onClick: () => {},
|
||||||
|
className: 'accordion__item',
|
||||||
|
hideBodyClassName: null,
|
||||||
|
};
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.renderChildren = this.renderChildren.bind(this);
|
||||||
|
}
|
||||||
|
public renderChildren() {
|
||||||
|
const { accordion, expanded, onClick, children } = this.props;
|
||||||
|
const itemUuid = this.props.id;
|
||||||
|
|
||||||
|
return React.Children.map(children, (item) => {
|
||||||
|
|
||||||
|
|
||||||
|
var child = item as React.ReactElement<any>;
|
||||||
|
if (child.props.accordionElementName === 'AccordionItemTitle') {
|
||||||
|
const itemProps : IAccordionItemTitleProps = {};
|
||||||
|
itemProps.expanded = expanded;
|
||||||
|
itemProps.key = 'title';
|
||||||
|
itemProps.id = `accordion__title-${itemUuid}`;
|
||||||
|
itemProps.ariaControls = `accordion__body-${itemUuid}`;
|
||||||
|
itemProps.onClick = onClick;
|
||||||
|
itemProps.role = accordion ? 'tab' : 'button';
|
||||||
|
|
||||||
|
return React.cloneElement(child, itemProps);
|
||||||
|
} else if (child.props.accordionElementName === 'AccordionItemBody') {
|
||||||
|
const itemProps : IAccordionItemBodyProps = {};
|
||||||
|
itemProps.expanded = expanded;
|
||||||
|
itemProps.key = 'body';
|
||||||
|
itemProps.id = `accordion__body-${itemUuid}`;
|
||||||
|
itemProps.role = accordion ? 'tabpanel' : '';
|
||||||
|
|
||||||
|
return React.cloneElement(child, itemProps);
|
||||||
|
}
|
||||||
|
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const { expanded, className } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
{this.renderChildren()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
|
||||||
|
export interface IAccordionItemBodyProps {
|
||||||
|
id?: string;
|
||||||
|
expanded?: boolean;
|
||||||
|
ariaControls?: string;
|
||||||
|
children?: JSX.Element|JSX.Element[];
|
||||||
|
className?: string;
|
||||||
|
hideBodyClassName?: string;
|
||||||
|
role?: string;
|
||||||
|
key?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class AccordionItemBody extends React.Component<IAccordionItemBodyProps, {}> {
|
||||||
|
public static defaultProps = {
|
||||||
|
id: '',
|
||||||
|
expanded: false,
|
||||||
|
className: 'accordion__body',
|
||||||
|
hideBodyClassName: 'accordion__body--hidden',
|
||||||
|
role: '',
|
||||||
|
accordionElementName: 'AccordionItemBody',
|
||||||
|
};
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
}
|
||||||
|
public render() {
|
||||||
|
const { id, expanded, children, className, hideBodyClassName, role } = this.props;
|
||||||
|
const ariaHidden = !expanded;
|
||||||
|
if(expanded)
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<div // eslint-disable-line jsx-a11y/no-static-element-interactions
|
||||||
|
id={id}
|
||||||
|
className={className}
|
||||||
|
aria-hidden={ariaHidden}
|
||||||
|
role={role}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<div // eslint-disable-line jsx-a11y/no-static-element-interactions
|
||||||
|
id={id}
|
||||||
|
className={hideBodyClassName}
|
||||||
|
aria-hidden={ariaHidden}
|
||||||
|
role={role}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
|
||||||
|
export interface IAccordionItemTitleProps {
|
||||||
|
id?: string;
|
||||||
|
expanded?: boolean;
|
||||||
|
onClick?: () => void;
|
||||||
|
ariaControls?: string;
|
||||||
|
children?: JSX.Element|JSX.Element[];
|
||||||
|
className?: string;
|
||||||
|
hideBodyClassName?: string;
|
||||||
|
role?: string;
|
||||||
|
key?: string;
|
||||||
|
accordionElementName?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class AccordionItemTitle extends React.Component<IAccordionItemTitleProps, {}> {
|
||||||
|
public static defaultProps = {
|
||||||
|
id: '',
|
||||||
|
expanded: false,
|
||||||
|
onClick: () => {},
|
||||||
|
ariaControls: '',
|
||||||
|
className: 'accordion__title',
|
||||||
|
hideBodyClassName: null,
|
||||||
|
role: '',
|
||||||
|
accordionElementName: 'AccordionItemTitle',
|
||||||
|
};
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.handleKeyPress = this.handleKeyPress.bind(this);
|
||||||
|
}
|
||||||
|
public handleKeyPress(evt) {
|
||||||
|
const { onClick } = this.props;
|
||||||
|
if (evt.charCode === 13 || evt.charCode === 32) {
|
||||||
|
onClick();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
public render() {
|
||||||
|
const { id, expanded, ariaControls, onClick, children, className, role, hideBodyClassName } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div // eslint-disable-line jsx-a11y/no-static-element-interactions
|
||||||
|
id={id}
|
||||||
|
aria-expanded={expanded}
|
||||||
|
aria-controls={ariaControls}
|
||||||
|
className={className}
|
||||||
|
onClick={onClick}
|
||||||
|
role={role}
|
||||||
|
tabIndex={0}
|
||||||
|
onKeyPress={this.handleKeyPress}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import Accordion from './Accordion';
|
||||||
|
import AccordionItem from './AccordionItem';
|
||||||
|
import AccordionItemTitle from './AccordionItemTitle';
|
||||||
|
import AccordionItemBody from './AccordionItemBody';
|
||||||
|
|
||||||
|
export {
|
||||||
|
Accordion,
|
||||||
|
AccordionItem,
|
||||||
|
AccordionItemTitle,
|
||||||
|
AccordionItemBody,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
export interface ITabContentProps {
|
||||||
|
for: string|number;
|
||||||
|
visibleStyle?: object;
|
||||||
|
isVisible?: boolean;
|
||||||
|
renderActiveTabContentOnly?: boolean;
|
||||||
|
disableInlineStyles?: boolean;
|
||||||
|
className?: string;
|
||||||
|
visibleClassName?: string;
|
||||||
|
style?: string;
|
||||||
|
displayName?: string;
|
||||||
|
itemKey?:string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const styles = {
|
||||||
|
hidden: {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class TabContent extends React.Component<ITabContentProps, {}> {
|
||||||
|
public static defaultProps = {
|
||||||
|
displayName: 'TabContent'
|
||||||
|
};
|
||||||
|
|
||||||
|
public canRenderChildren() {
|
||||||
|
return this.props.isVisible || !this.props.renderActiveTabContentOnly;
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const visibleStyle = this.props.visibleStyle || {};
|
||||||
|
const displayStyle = this.props.isVisible ? visibleStyle : styles.hidden;
|
||||||
|
const disableInlineStyles = this.props.disableInlineStyles;
|
||||||
|
const className = this.props.className;
|
||||||
|
const visibleClassName =
|
||||||
|
this.props.visibleClassName;
|
||||||
|
const style = this.props.style;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={className}
|
||||||
|
style={{...displayStyle } }
|
||||||
|
>
|
||||||
|
{this.canRenderChildren() && this.props.children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
export interface ITabLinkProps {
|
||||||
|
id?:string;
|
||||||
|
to: string|number;
|
||||||
|
handleSelect?: (to,namespace) => void;
|
||||||
|
isActive?: boolean;
|
||||||
|
namespace?: string;
|
||||||
|
activeStyle?: object;
|
||||||
|
disableInlineStyles?: boolean;
|
||||||
|
className?: string;
|
||||||
|
activeClassName?: string;
|
||||||
|
style?: object;
|
||||||
|
onClick?: (any) => void;
|
||||||
|
displayName?: string;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const defaultActiveStyle = {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class TabLink extends React.Component<ITabLinkProps, {}> {
|
||||||
|
public static defaultProps = {
|
||||||
|
displayName: 'TabLink'
|
||||||
|
};
|
||||||
|
public handleClick = e => {
|
||||||
|
|
||||||
|
this.props.handleSelect(this.props.to, this.props.namespace);
|
||||||
|
if(this.props.onClick)
|
||||||
|
{
|
||||||
|
this.props.onClick(e);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public handleKeyPress = e => {
|
||||||
|
if (e.key === ' ' || e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
this.handleClick(e);
|
||||||
|
}
|
||||||
|
if(e.key === 'Tab')
|
||||||
|
{
|
||||||
|
this.handleClick(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const {
|
||||||
|
id,
|
||||||
|
to,
|
||||||
|
handleSelect,
|
||||||
|
isActive,
|
||||||
|
namespace,
|
||||||
|
activeStyle,
|
||||||
|
disableInlineStyles,
|
||||||
|
className,
|
||||||
|
activeClassName,
|
||||||
|
style,
|
||||||
|
displayName,
|
||||||
|
...passedProps
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const _className = className;
|
||||||
|
const _activeClassName = activeClassName;
|
||||||
|
|
||||||
|
const _style = {
|
||||||
|
...style,
|
||||||
|
...((isActive && (activeStyle || defaultActiveStyle)) || {}),
|
||||||
|
};
|
||||||
|
|
||||||
|
if(isActive)
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
id={id}
|
||||||
|
className={_activeClassName}
|
||||||
|
style={_style}
|
||||||
|
tabIndex={0}
|
||||||
|
{...passedProps}
|
||||||
|
onKeyPress={this.handleKeyPress}
|
||||||
|
onKeyDown={this.handleKeyPress}
|
||||||
|
onClick={this.handleClick}
|
||||||
|
>
|
||||||
|
{this.props.children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
id={id}
|
||||||
|
className={_className}
|
||||||
|
style={_style}
|
||||||
|
tabIndex={0}
|
||||||
|
{...passedProps}
|
||||||
|
onKeyPress={this.handleKeyPress}
|
||||||
|
onKeyDown={this.handleKeyPress}
|
||||||
|
onClick={this.handleClick}
|
||||||
|
|
||||||
|
>
|
||||||
|
{this.props.children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,165 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
export interface ITabsProps {
|
||||||
|
name?: string;
|
||||||
|
handleSelect?: (any) => void;
|
||||||
|
selectedTab?: string;
|
||||||
|
activeLinkStyle?: object;
|
||||||
|
visibleTabStyle?: object;
|
||||||
|
disableInlineStyles?: boolean;
|
||||||
|
renderActiveTabContentOnly?: boolean;
|
||||||
|
className?: string;
|
||||||
|
style?:object;
|
||||||
|
displayName?:string;
|
||||||
|
}
|
||||||
|
export interface ITabsState {
|
||||||
|
selectedTab: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Tabs extends React.Component<ITabsProps, ITabsState> {
|
||||||
|
public defaultTab;
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
selectedTab: this.props.selectedTab,
|
||||||
|
};
|
||||||
|
this.findDefault(this.props.children);
|
||||||
|
this.handleFocus = this.handleFocus.bind(this);
|
||||||
|
}
|
||||||
|
public handleSelect = tab => {
|
||||||
|
this.setState({
|
||||||
|
selectedTab: tab,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public handleFocus(evt) {
|
||||||
|
|
||||||
|
if(evt.target.id === '')
|
||||||
|
{
|
||||||
|
evt.target.children[0].children[0].focus();
|
||||||
|
evt.target.children[0].children[0].click();
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
evt.target.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
public findDefault(children) {
|
||||||
|
/* if (this.defaultTab !== undefined) {
|
||||||
|
return this.defaultTab;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
let firstLink;
|
||||||
|
let firstDefaultLink;
|
||||||
|
|
||||||
|
const traverse = child => {
|
||||||
|
|
||||||
|
if (!child || !child.props || firstDefaultLink) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
/* if (child.type.displayName === 'TabLink') {
|
||||||
|
firstLink = firstLink || child.props.to;
|
||||||
|
firstDefaultLink =
|
||||||
|
firstDefaultLink || (child.props.default && child.props.to);
|
||||||
|
}*/
|
||||||
|
|
||||||
|
React.Children.forEach(child.props.children, traverse);
|
||||||
|
};
|
||||||
|
|
||||||
|
React.Children.forEach(children, traverse);
|
||||||
|
|
||||||
|
this.defaultTab = firstDefaultLink || firstLink;
|
||||||
|
return this.defaultTab;
|
||||||
|
}
|
||||||
|
|
||||||
|
public transformChildren(
|
||||||
|
children,
|
||||||
|
{
|
||||||
|
handleSelect,
|
||||||
|
selectedTab,
|
||||||
|
activeLinkStyle,
|
||||||
|
visibleTabStyle,
|
||||||
|
disableInlineStyles,
|
||||||
|
name,
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
/* if (typeof children !== 'object') {
|
||||||
|
return children;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
return React.Children.map(children, (child, index) => {
|
||||||
|
let childitem = child as React.ReactElement<any>;
|
||||||
|
/* if (!childitem) {
|
||||||
|
return childitem;
|
||||||
|
}*/
|
||||||
|
if (childitem.props.displayName === 'TabLink') {
|
||||||
|
return React.cloneElement(childitem, {
|
||||||
|
handleSelect,
|
||||||
|
isActive: childitem.props.to === this.state.selectedTab,
|
||||||
|
activeStyle: activeLinkStyle,
|
||||||
|
disableInlineStyles,
|
||||||
|
namespace: name,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (childitem.props.displayName === 'TabContent') {
|
||||||
|
return React.cloneElement(childitem, {
|
||||||
|
isVisible: childitem.props.for === this.state.selectedTab,
|
||||||
|
visibleStyle: visibleTabStyle,
|
||||||
|
disableInlineStyles,
|
||||||
|
renderActiveTabContentOnly: this.props.renderActiveTabContentOnly,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return React.cloneElement(
|
||||||
|
childitem,
|
||||||
|
{},
|
||||||
|
this.transformChildren(childitem.props && childitem.props.children, {
|
||||||
|
handleSelect,
|
||||||
|
selectedTab,
|
||||||
|
activeLinkStyle,
|
||||||
|
visibleTabStyle,
|
||||||
|
disableInlineStyles,
|
||||||
|
name,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const {
|
||||||
|
handleSelect: handleSelectProp,
|
||||||
|
selectedTab: selectedTabProp,
|
||||||
|
activeLinkStyle,
|
||||||
|
visibleTabStyle,
|
||||||
|
disableInlineStyles,
|
||||||
|
name,
|
||||||
|
renderActiveTabContentOnly, // eslint-disable-line
|
||||||
|
...divProps
|
||||||
|
} = this.props;
|
||||||
|
const handleSelect = handleSelectProp || this.handleSelect;
|
||||||
|
const selectedTab = this.state.selectedTab ;
|
||||||
|
|
||||||
|
const children = this.transformChildren(this.props.children, {
|
||||||
|
handleSelect,
|
||||||
|
selectedTab,
|
||||||
|
activeLinkStyle,
|
||||||
|
visibleTabStyle,
|
||||||
|
disableInlineStyles,
|
||||||
|
name: name,
|
||||||
|
});
|
||||||
|
|
||||||
|
return <div {...divProps} tabIndex={0} onFocus={this.handleFocus} ref="tabs">{children}</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import Tabs from './Tabs';
|
||||||
|
import TabLink from './TabLink';
|
||||||
|
import TabContent from './TabContent';
|
||||||
|
|
||||||
|
export {
|
||||||
|
Tabs,
|
||||||
|
TabLink,
|
||||||
|
TabContent
|
||||||
|
};
|
||||||
10
samples/react-accordion-with-richtext/src/webparts/tabAccordion/loc/en-us.js
vendored
Normal file
10
samples/react-accordion-with-richtext/src/webparts/tabAccordion/loc/en-us.js
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
define([], function() {
|
||||||
|
return {
|
||||||
|
"PropertyPaneDescription": "Customize your Tab Accordion",
|
||||||
|
"BasicGroupName": "Tabs",
|
||||||
|
"TitleFieldLabel": "Title",
|
||||||
|
"ManageAccordion": "Manage Tabs",
|
||||||
|
"Type": "Type",
|
||||||
|
"Tabs": "Tabs",
|
||||||
|
}
|
||||||
|
});
|
||||||
13
samples/react-accordion-with-richtext/src/webparts/tabAccordion/loc/mystrings.d.ts
vendored
Normal file
13
samples/react-accordion-with-richtext/src/webparts/tabAccordion/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
declare interface ITabAccordionWebPartStrings {
|
||||||
|
PropertyPaneDescription: string;
|
||||||
|
BasicGroupName: string;
|
||||||
|
TitleFieldLabel: string;
|
||||||
|
ManageAccordion: string;
|
||||||
|
Accordion: string;
|
||||||
|
Type: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'TabAccordionWebPartStrings' {
|
||||||
|
const strings: ITabAccordionWebPartStrings;
|
||||||
|
export = strings;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 542 B |
|
|
@ -0,0 +1,35 @@
|
||||||
|
{
|
||||||
|
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"jsx": "react",
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"outDir": "lib",
|
||||||
|
"inlineSources": false,
|
||||||
|
"strictNullChecks": false,
|
||||||
|
"noUnusedLocals": false,
|
||||||
|
"typeRoots": [
|
||||||
|
"./node_modules/@types",
|
||||||
|
"./node_modules/@microsoft"
|
||||||
|
],
|
||||||
|
"types": [
|
||||||
|
"webpack-env"
|
||||||
|
],
|
||||||
|
"lib": [
|
||||||
|
"es5",
|
||||||
|
"dom",
|
||||||
|
"es2015.collection",
|
||||||
|
"es2015.promise"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.tsx"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
{
|
||||||
|
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
|
||||||
|
"rules": {
|
||||||
|
"class-name": false,
|
||||||
|
"export-name": false,
|
||||||
|
"forin": false,
|
||||||
|
"label-position": false,
|
||||||
|
"member-access": true,
|
||||||
|
"no-arg": false,
|
||||||
|
"no-console": false,
|
||||||
|
"no-construct": false,
|
||||||
|
"no-duplicate-variable": true,
|
||||||
|
"no-eval": false,
|
||||||
|
"no-function-expression": true,
|
||||||
|
"no-internal-module": true,
|
||||||
|
"no-shadowed-variable": true,
|
||||||
|
"no-switch-case-fall-through": true,
|
||||||
|
"no-unnecessary-semicolons": true,
|
||||||
|
"no-unused-expression": true,
|
||||||
|
"no-with-statement": true,
|
||||||
|
"semicolon": true,
|
||||||
|
"trailing-comma": false,
|
||||||
|
"typedef": false,
|
||||||
|
"typedef-whitespace": false,
|
||||||
|
"use-named-parameter": true,
|
||||||
|
"variable-name": false,
|
||||||
|
"whitespace": false
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue