Add Accordion web part implementation with dynamic SharePoint list integration
- Created Accordion web part with SPFx 1.4.1 framework. - Implemented dynamic loading of SharePoint lists and fields. - Added configuration options for title, content, and category fields. - Included support for multiple open sections and initial state settings. - Developed HTML sanitizer for rich text content. - Implemented accessible accordion UI with category grouping. - Added localization support for English and German languages. - Created necessary configuration files for deployment and asset management. - Added validation script to ensure project compliance with standards.
This commit is contained in:
Torsten Brendgen
+19
@@ -0,0 +1,19 @@
|
||||
node_modules/
|
||||
lib/
|
||||
dist/
|
||||
temp/
|
||||
release/
|
||||
solution/
|
||||
sharepoint/solution/
|
||||
*.sppkg
|
||||
*.tgz
|
||||
coverage/
|
||||
*.resx.ts
|
||||
*.scss.ts
|
||||
*.log
|
||||
npm-debug.log*
|
||||
.vs/
|
||||
.idea/
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.4.1",
|
||||
"libraryName": "accordion",
|
||||
"libraryId": "27a6fd90-42a1-4e39-8862-08ed0e7803bc",
|
||||
"environment": "onprem",
|
||||
"packageManager": "npm",
|
||||
"solutionName": "accordion",
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
# Accordion
|
||||
|
||||
Accordion 1.0.0 ist ein listenbasiertes SPFx-WebPart für SharePoint Server Subscription Edition. Es orientiert
|
||||
sich funktional am PnP-Beispiel `react-accordion-dynamic-section`, verwendet aber die mit SharePoint SE
|
||||
kompatible SPFx-1.4.1-/React-15-Toolchain.
|
||||
|
||||
## Funktionen
|
||||
|
||||
- Auswahl einer nicht ausgeblendeten Liste aus dem aktuellen Web
|
||||
- dynamische Auswahl von Überschrift-, Inhalt-, Kategorie- und Sortierspalte
|
||||
- optionales Gruppieren nach Kategorien
|
||||
- auf- oder absteigende Sortierung
|
||||
- initial vollständig geschlossen, erster Eintrag geöffnet oder alle Einträge geöffnet
|
||||
- wahlweise genau ein oder mehrere gleichzeitig geöffnete Bereiche
|
||||
- semantische Buttons mit `aria-expanded`, `aria-controls` und zugeordneten Inhaltsregionen
|
||||
- SharePoint-Themefarben und Standardtypografie
|
||||
- bereinigte Rich-Text-Ausgabe ohne Skripte, Eventhandler, Bilder oder unsichere Links
|
||||
- zentrale Bereitstellung über den App Catalog
|
||||
|
||||
## Erwartete Liste
|
||||
|
||||
Es wird keine fachliche Liste provisioniert. Eine einfache FAQ-Liste kann beispielsweise folgende Spalten besitzen:
|
||||
|
||||
| Spalte | Typ | Verwendung |
|
||||
|---|---|---|
|
||||
| `Title` | Eine Textzeile | Überschrift |
|
||||
| `Content` | Mehrere Textzeilen mit Rich Text | Inhalt |
|
||||
| `Category` | Auswahl oder Text | optionale Gruppierung |
|
||||
| `SortOrder` | Zahl | optionale Sortierung |
|
||||
|
||||
Nach dem Hinzufügen des WebParts werden Liste und Spalten im Property Pane ausgewählt. Änderungen an den
|
||||
Listeneinträgen erscheinen beim nächsten Laden beziehungsweise Rendern der Seite automatisch.
|
||||
|
||||
## Version und Build
|
||||
|
||||
| Eigenschaft | Wert |
|
||||
|---|---|
|
||||
| Version | 1.0.0 |
|
||||
| SharePoint Framework | 1.4.1 |
|
||||
| React | 15.6.2 |
|
||||
| Node.js | 8.17.0 |
|
||||
| npm | 6.13.4 |
|
||||
|
||||
```powershell
|
||||
npm install
|
||||
npm run package
|
||||
```
|
||||
|
||||
Das Paket wird unter `sharepoint/solution/accordion.sppkg` erzeugt. Es kann im App Catalog zentral bereitgestellt
|
||||
werden. Danach steht das WebPart unter dem Namen **Accordion** beziehungsweise **Akkordeon** im WebPart-Picker zur Verfügung.
|
||||
|
||||
## Sicherheit
|
||||
|
||||
Der Inhalt einer Rich-Text-Spalte wird nicht ungeprüft ausgegeben. Erlaubt sind grundlegende Text-, Listen-,
|
||||
Tabellen- und Linkelemente. Skripte, eingebettete Inhalte, Eventhandler, Inline-Styles und unsichere URL-Schemata
|
||||
werden entfernt.
|
||||
|
||||
## Referenz
|
||||
|
||||
Die fachliche Vorlage ist das PnP Community Sample:
|
||||
https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-dynamic-section
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
# Accordion – Umsetzungsstand
|
||||
|
||||
Zielversion: 1.0.0
|
||||
Status: Implementierung abgeschlossen; Ship-Build auf der Node-8-Buildumgebung ausstehend
|
||||
|
||||
- [x] SPFx-1.4.1-WebPart-Grundgerüst
|
||||
- [x] Listen und unterstützte Spalten dynamisch laden
|
||||
- [x] Überschrift, Inhalt, Kategorie und Sortierung konfigurierbar machen
|
||||
- [x] Barrierearmes Accordion mit Einzelauswahl und Mehrfachauswahl
|
||||
- [x] Initialzustand `collapsed`, `first` und `all`
|
||||
- [x] Rich Text sicher bereinigen
|
||||
- [x] SharePoint-Themefarben und Standardtypografie verwenden
|
||||
- [x] Zentrale App-Catalog-Bereitstellung konfigurieren
|
||||
- [ ] Ship-Paket auf Node 8.17.0 erzeugen und in SharePoint SE testen
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"accordion-web-part": {
|
||||
"components": [{
|
||||
"entrypoint": "./lib/webparts/accordion/AccordionWebPart.js",
|
||||
"manifest": "./src/webparts/accordion/AccordionWebPart.manifest.json"
|
||||
}]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"AccordionWebPartStrings": "lib/webparts/accordion/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "accordion-client-side-solution",
|
||||
"title": "Accordion",
|
||||
"id": "27a6fd90-42a1-4e39-8862-08ed0e7803bc",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/accordion.sppkg"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
'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.`);
|
||||
build.initialize(require('gulp'));
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "accordion",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
"node": ">=6.9.0 <9.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "tsc --noEmit -p . && node tests/validate-project.js",
|
||||
"package": "npm test && gulp clean && gulp bundle --ship && gulp package-solution --ship"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.4.1",
|
||||
"@microsoft/sp-http": "1.4.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.4.1",
|
||||
"@microsoft/sp-webpart-base": "1.4.1",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "15.6.6",
|
||||
"@types/react-dom": "15.5.6",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"react": "15.6.2",
|
||||
"react-dom": "15.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "1.4.1",
|
||||
"@microsoft/sp-module-interfaces": "1.4.1",
|
||||
"@microsoft/sp-tslint-rules": "1.4.1",
|
||||
"@microsoft/sp-webpart-workbench": "1.4.1",
|
||||
"ajv": "5.2.2",
|
||||
"gulp": "~3.9.1"
|
||||
}
|
||||
}
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
declare module '*.module.scss' {
|
||||
const styles: { [className: string]: string };
|
||||
export default styles;
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
// Required TypeScript entry file.
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
|
||||
import { WebPartContext } from '@microsoft/sp-webpart-base';
|
||||
import { IAccordionFieldOption, IAccordionItem, IAccordionListOption } from './AccordionTypes';
|
||||
|
||||
export class AccordionDataService {
|
||||
public constructor(private context: WebPartContext) { }
|
||||
|
||||
public getLists(): Promise<IAccordionListOption[]> {
|
||||
const url: string = this.webUrl + '/_api/web/lists?$select=Id,Title&$filter=Hidden eq false&$orderby=Title';
|
||||
return this.context.spHttpClient.get(url, SPHttpClient.configurations.v1, { headers: this.headers })
|
||||
.then((response: SPHttpClientResponse): Promise<any> => this.ensureJson(response)) // tslint:disable-line:no-any
|
||||
.then((payload: any): IAccordionListOption[] => this.results(payload).map((list: any): IAccordionListOption => ({ // tslint:disable-line:no-any
|
||||
id: this.cleanGuid(list.Id),
|
||||
title: String(list.Title || list.Id)
|
||||
})));
|
||||
}
|
||||
|
||||
public getFields(listId: string): Promise<IAccordionFieldOption[]> {
|
||||
if (!this.isGuid(listId)) { return Promise.resolve([]); }
|
||||
const url: string = this.webUrl + "/_api/web/lists(guid'" + this.cleanGuid(listId) +
|
||||
"')/fields?$select=InternalName,Title,TypeAsString,Hidden,ReadOnlyField&$filter=Hidden eq false&$orderby=Title";
|
||||
return this.context.spHttpClient.get(url, SPHttpClient.configurations.v1, { headers: this.headers })
|
||||
.then((response: SPHttpClientResponse): Promise<any> => this.ensureJson(response)) // tslint:disable-line:no-any
|
||||
.then((payload: any): IAccordionFieldOption[] => this.results(payload) // tslint:disable-line:no-any
|
||||
.filter((field: any): boolean => !field.ReadOnlyField && this.isSupportedField(field.TypeAsString)) // tslint:disable-line:no-any
|
||||
.map((field: any): IAccordionFieldOption => ({ // tslint:disable-line:no-any
|
||||
internalName: String(field.InternalName || ''),
|
||||
title: String(field.Title || field.InternalName || ''),
|
||||
type: String(field.TypeAsString || '')
|
||||
})));
|
||||
}
|
||||
|
||||
public getItems(
|
||||
listId: string,
|
||||
titleField: string,
|
||||
contentField: string,
|
||||
categoryField: string,
|
||||
sortField: string,
|
||||
sortAscending: boolean
|
||||
): Promise<IAccordionItem[]> {
|
||||
if (!this.isGuid(listId)) { return Promise.reject(new Error('Invalid list ID.')); }
|
||||
const fields: string[] = this.uniqueFields(['Id', titleField, contentField, categoryField]);
|
||||
for (let i: number = 0; i < fields.length; i++) {
|
||||
if (!this.isFieldName(fields[i])) { return Promise.reject(new Error('Invalid field name.')); }
|
||||
}
|
||||
const orderField: string = this.isFieldName(sortField) ? sortField : titleField;
|
||||
const url: string = this.webUrl + "/_api/web/lists(guid'" + this.cleanGuid(listId) + "')/items" +
|
||||
'?$select=' + fields.join(',') + '&$orderby=' + orderField + (sortAscending ? ' asc' : ' desc') + '&$top=5000';
|
||||
return this.context.spHttpClient.get(url, SPHttpClient.configurations.v1, { headers: this.headers })
|
||||
.then((response: SPHttpClientResponse): Promise<any> => this.ensureJson(response)) // tslint:disable-line:no-any
|
||||
.then((payload: any): IAccordionItem[] => this.results(payload).map((item: any): IAccordionItem => ({ // tslint:disable-line:no-any
|
||||
id: Number(item.Id),
|
||||
title: this.toText(item[titleField]),
|
||||
content: this.toText(item[contentField]),
|
||||
category: categoryField ? this.toText(item[categoryField]) : ''
|
||||
})));
|
||||
}
|
||||
|
||||
private get webUrl(): string { return this.context.pageContext.web.absoluteUrl.replace(/\/$/, ''); }
|
||||
private get headers(): any { return { 'Accept': 'application/json;odata=verbose', 'OData-Version': '3.0' }; } // tslint:disable-line:no-any
|
||||
|
||||
private ensureJson(response: SPHttpClientResponse): Promise<any> { // tslint:disable-line:no-any
|
||||
if (response.ok) { return response.json(); }
|
||||
return response.text().then((text: string): Promise<any> => // tslint:disable-line:no-any
|
||||
Promise.reject(new Error('SharePoint request failed (' + response.status + '): ' + text)));
|
||||
}
|
||||
|
||||
private results(payload: any): any[] { // tslint:disable-line:no-any
|
||||
const source: any = payload && payload.d !== undefined ? payload.d : payload; // tslint:disable-line:no-any
|
||||
return source && Array.isArray(source.results) ? source.results : (Array.isArray(source) ? source : []);
|
||||
}
|
||||
|
||||
private uniqueFields(values: string[]): string[] {
|
||||
const result: string[] = [];
|
||||
for (let i: number = 0; i < values.length; i++) {
|
||||
const value: string = String(values[i] || '').trim();
|
||||
if (value && result.indexOf(value) < 0) { result.push(value); }
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
private toText(value: any): string { // tslint:disable-line:no-any
|
||||
if (value === undefined || value === null) { return ''; }
|
||||
if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') { return String(value); }
|
||||
if (value.Label) { return String(value.Label); }
|
||||
if (value.Description || value.Url) { return String(value.Description || value.Url); }
|
||||
if (Array.isArray(value.results)) { return value.results.map((entry: any): string => this.toText(entry)).join(', '); } // tslint:disable-line:no-any
|
||||
return '';
|
||||
}
|
||||
|
||||
private isSupportedField(type: string): boolean {
|
||||
return ['Text', 'Note', 'Choice', 'MultiChoice', 'Number', 'Integer', 'Boolean', 'DateTime', 'Computed'].indexOf(String(type)) >= 0;
|
||||
}
|
||||
private isFieldName(value: string): boolean { return /^[A-Za-z_][A-Za-z0-9_]*$/.test(String(value || '')); }
|
||||
private isGuid(value: string): boolean { return /^[0-9a-f]{8}-[0-9a-f-]{27}$/i.test(this.cleanGuid(value)); }
|
||||
private cleanGuid(value: string): string { return String(value || '').replace(/[{}]/g, '').toLowerCase(); }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
const AllowedTags: string[] = [
|
||||
'a', 'b', 'blockquote', 'br', 'code', 'div', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
|
||||
'i', 'li', 'ol', 'p', 'pre', 'span', 'strong', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'
|
||||
];
|
||||
const DropContentTags: string[] = [
|
||||
'button', 'embed', 'form', 'iframe', 'input', 'math', 'object', 'option', 'script', 'select', 'style', 'svg', 'textarea'
|
||||
];
|
||||
const AllowedAttributes: { [tag: string]: string[] } = {
|
||||
a: ['href', 'title', 'target'],
|
||||
td: ['colspan', 'rowspan'],
|
||||
th: ['colspan', 'rowspan']
|
||||
};
|
||||
|
||||
export function sanitizeAccordionHtml(value: string): string {
|
||||
const host: HTMLDivElement = document.createElement('div');
|
||||
host.innerHTML = String(value || '');
|
||||
sanitizeChildren(host);
|
||||
return host.innerHTML;
|
||||
}
|
||||
|
||||
function sanitizeChildren(parent: HTMLElement): void {
|
||||
let node: Node = parent.firstChild;
|
||||
while (node) {
|
||||
const next: Node = node.nextSibling;
|
||||
if (node.nodeType === 1) {
|
||||
const element: HTMLElement = node as HTMLElement;
|
||||
const tag: string = element.tagName.toLowerCase();
|
||||
if (AllowedTags.indexOf(tag) < 0) {
|
||||
if (DropContentTags.indexOf(tag) < 0) {
|
||||
while (element.firstChild) { parent.insertBefore(element.firstChild, element); }
|
||||
}
|
||||
parent.removeChild(element);
|
||||
} else {
|
||||
sanitizeAttributes(element, tag);
|
||||
sanitizeChildren(element);
|
||||
}
|
||||
} else if (node.nodeType !== 3) {
|
||||
parent.removeChild(node);
|
||||
}
|
||||
node = next;
|
||||
}
|
||||
}
|
||||
|
||||
function sanitizeAttributes(element: HTMLElement, tag: string): void {
|
||||
const allowed: string[] = AllowedAttributes[tag] || [];
|
||||
for (let i: number = element.attributes.length - 1; i >= 0; i--) {
|
||||
const name: string = element.attributes[i].name.toLowerCase();
|
||||
if (allowed.indexOf(name) < 0) { element.removeAttribute(element.attributes[i].name); }
|
||||
}
|
||||
if (tag === 'a') {
|
||||
const link: HTMLAnchorElement = element as HTMLAnchorElement;
|
||||
const href: string = link.getAttribute('href') || '';
|
||||
if (!isSafeLink(href)) { link.removeAttribute('href'); }
|
||||
if (link.getAttribute('target') === '_blank') { link.setAttribute('rel', 'noopener noreferrer'); }
|
||||
else { link.removeAttribute('target'); }
|
||||
}
|
||||
}
|
||||
|
||||
function isSafeLink(value: string): boolean {
|
||||
const href: string = String(value || '').trim();
|
||||
if (!href || href.charAt(0) === '/' || href.charAt(0) === '#' || href.indexOf('./') === 0 || href.indexOf('../') === 0) {
|
||||
return true;
|
||||
}
|
||||
return /^(https?:|mailto:)/i.test(href);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
export type AccordionInitialState = 'collapsed' | 'first' | 'all';
|
||||
|
||||
export interface IAccordionListOption {
|
||||
id: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface IAccordionFieldOption {
|
||||
internalName: string;
|
||||
title: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export interface IAccordionItem {
|
||||
id: number;
|
||||
title: string;
|
||||
content: string;
|
||||
category: string;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "18e20eee-2838-4032-8c9d-697e52099059",
|
||||
"alias": "AccordionWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
"requiresCustomScript": false,
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
|
||||
"group": { "default": "Other", "de-de": "Weitere" },
|
||||
"title": { "default": "Accordion", "de-de": "Akkordeon" },
|
||||
"description": {
|
||||
"default": "Displays SharePoint list items as an accessible accordion.",
|
||||
"de-de": "Zeigt Einträge einer SharePoint-Liste als barrierearmes Akkordeon an."
|
||||
},
|
||||
"officeFabricIconFontName": "BulletedList2",
|
||||
"properties": {
|
||||
"listId": "",
|
||||
"titleField": "Title",
|
||||
"contentField": "",
|
||||
"categoryField": "",
|
||||
"sortField": "Title",
|
||||
"sortAscending": true,
|
||||
"allowMultiple": false,
|
||||
"initialState": "collapsed",
|
||||
"showCategories": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
IPropertyPaneDropdownOption,
|
||||
PropertyPaneDropdown,
|
||||
PropertyPaneToggle
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import * as strings from 'AccordionWebPartStrings';
|
||||
import Accordion from './components/Accordion';
|
||||
import { IAccordionProps } from './components/IAccordionProps';
|
||||
import { AccordionDataService } from './AccordionDataService';
|
||||
import {
|
||||
AccordionInitialState,
|
||||
IAccordionFieldOption,
|
||||
IAccordionItem,
|
||||
IAccordionListOption
|
||||
} from './AccordionTypes';
|
||||
import styles from './components/Accordion.module.scss';
|
||||
|
||||
export interface IAccordionWebPartProps {
|
||||
listId: string;
|
||||
titleField: string;
|
||||
contentField: string;
|
||||
categoryField: string;
|
||||
sortField: string;
|
||||
sortAscending: boolean;
|
||||
allowMultiple: boolean;
|
||||
initialState: AccordionInitialState;
|
||||
showCategories: boolean;
|
||||
}
|
||||
|
||||
export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWebPartProps> {
|
||||
private service: AccordionDataService;
|
||||
private lists: IAccordionListOption[] = [];
|
||||
private fields: IAccordionFieldOption[] = [];
|
||||
private loadingLists: boolean = false;
|
||||
private loadingFields: boolean = false;
|
||||
private requestVersion: number = 0;
|
||||
private disposed: boolean = false;
|
||||
|
||||
protected onInit(): Promise<void> {
|
||||
this.service = new AccordionDataService(this.context);
|
||||
return super.onInit().then((): Promise<void> => this.loadLists())
|
||||
.then((): Promise<void> => this.properties.listId ? this.loadFields(this.properties.listId) : Promise.resolve());
|
||||
}
|
||||
|
||||
public render(): void {
|
||||
const version: number = ++this.requestVersion;
|
||||
if (!this.isConfigured()) {
|
||||
this.renderStatus(strings.ConfigureMessage, false);
|
||||
return;
|
||||
}
|
||||
this.renderStatus(strings.LoadingMessage, false);
|
||||
this.service.getItems(
|
||||
this.properties.listId,
|
||||
this.properties.titleField,
|
||||
this.properties.contentField,
|
||||
this.properties.categoryField || '',
|
||||
this.properties.sortField || this.properties.titleField,
|
||||
this.properties.sortAscending !== false
|
||||
).then((items: IAccordionItem[]): void => {
|
||||
if (this.disposed || version !== this.requestVersion) { return; }
|
||||
if (!items.length) { this.renderStatus(strings.EmptyMessage, false); return; }
|
||||
const element: React.ReactElement<IAccordionProps> = React.createElement(Accordion, {
|
||||
items: items,
|
||||
allowMultiple: this.properties.allowMultiple === true,
|
||||
initialState: this.normalizeInitialState(this.properties.initialState),
|
||||
showCategories: this.properties.showCategories !== false && !!this.properties.categoryField,
|
||||
expandLabel: strings.ExpandLabel,
|
||||
collapseLabel: strings.CollapseLabel,
|
||||
defaultCategory: strings.DefaultCategory
|
||||
});
|
||||
ReactDom.render(element, this.domElement);
|
||||
}).catch((error: Error): void => {
|
||||
if (this.disposed || version !== this.requestVersion) { return; }
|
||||
if (window.console) { console.error('[Accordion] ' + strings.LoadErrorMessage, error); }
|
||||
this.renderStatus(strings.LoadErrorMessage, true);
|
||||
});
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
this.disposed = true;
|
||||
this.requestVersion++;
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version { return Version.parse('1.0'); }
|
||||
|
||||
protected onPropertyPaneConfigurationStart(): void {
|
||||
if (!this.lists.length && !this.loadingLists) { this.loadLists(); }
|
||||
if (this.properties.listId && !this.fields.length && !this.loadingFields) {
|
||||
this.loadFields(this.properties.listId);
|
||||
}
|
||||
}
|
||||
|
||||
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void { // tslint:disable-line:no-any
|
||||
super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
|
||||
if (propertyPath === 'listId' && newValue !== oldValue) {
|
||||
this.properties.titleField = '';
|
||||
this.properties.contentField = '';
|
||||
this.properties.categoryField = '';
|
||||
this.properties.sortField = '';
|
||||
this.fields = [];
|
||||
this.context.propertyPane.refresh();
|
||||
this.loadFields(String(newValue || '')).then((): void => this.render());
|
||||
}
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
const fieldOptions: IPropertyPaneDropdownOption[] = this.fields.map((field: IAccordionFieldOption): IPropertyPaneDropdownOption => ({
|
||||
key: field.internalName, text: field.title + ' (' + field.internalName + ')'
|
||||
}));
|
||||
const categoryOptions: IPropertyPaneDropdownOption[] = [{ key: '', text: strings.NoCategoryOption }];
|
||||
const listOptions: IPropertyPaneDropdownOption[] = [{ key: '', text: strings.SelectOption }];
|
||||
for (let i: number = 0; i < fieldOptions.length; i++) { categoryOptions.push(fieldOptions[i]); }
|
||||
for (let i: number = 0; i < this.lists.length; i++) {
|
||||
listOptions.push({ key: this.lists[i].id, text: this.lists[i].title });
|
||||
}
|
||||
return {
|
||||
pages: [{
|
||||
header: { description: strings.PropertyPaneDescription },
|
||||
groups: [{
|
||||
groupName: strings.DataGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneDropdown('listId', {
|
||||
label: strings.ListFieldLabel,
|
||||
options: listOptions,
|
||||
disabled: this.loadingLists
|
||||
}),
|
||||
PropertyPaneDropdown('titleField', {
|
||||
label: strings.TitleFieldLabel, options: fieldOptions,
|
||||
disabled: !this.properties.listId || this.loadingFields
|
||||
}),
|
||||
PropertyPaneDropdown('contentField', {
|
||||
label: strings.ContentFieldLabel, options: fieldOptions,
|
||||
disabled: !this.properties.listId || this.loadingFields
|
||||
}),
|
||||
PropertyPaneDropdown('categoryField', {
|
||||
label: strings.CategoryFieldLabel, options: categoryOptions,
|
||||
disabled: !this.properties.listId || this.loadingFields
|
||||
}),
|
||||
PropertyPaneDropdown('sortField', {
|
||||
label: strings.SortFieldLabel, options: fieldOptions,
|
||||
disabled: !this.properties.listId || this.loadingFields
|
||||
}),
|
||||
PropertyPaneToggle('sortAscending', { label: strings.SortAscendingLabel })
|
||||
]
|
||||
}, {
|
||||
groupName: strings.BehaviorGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneDropdown('initialState', {
|
||||
label: strings.InitialStateFieldLabel,
|
||||
options: [
|
||||
{ key: 'collapsed', text: strings.InitialCollapsed },
|
||||
{ key: 'first', text: strings.InitialFirst },
|
||||
{ key: 'all', text: strings.InitialAll }
|
||||
]
|
||||
}),
|
||||
PropertyPaneToggle('allowMultiple', { label: strings.AllowMultipleLabel }),
|
||||
PropertyPaneToggle('showCategories', {
|
||||
label: strings.ShowCategoriesLabel,
|
||||
disabled: !this.properties.categoryField
|
||||
})
|
||||
]
|
||||
}]
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
private loadLists(): Promise<void> {
|
||||
this.loadingLists = true;
|
||||
this.refreshPropertyPane();
|
||||
return this.service.getLists().then((lists: IAccordionListOption[]): void => {
|
||||
this.lists = lists;
|
||||
}).catch((error: Error): void => {
|
||||
this.lists = [];
|
||||
if (window.console) { console.error('[Accordion] Lists could not be loaded.', error); }
|
||||
}).then((): void => {
|
||||
this.loadingLists = false;
|
||||
this.refreshPropertyPane();
|
||||
});
|
||||
}
|
||||
|
||||
private loadFields(listId: string): Promise<void> {
|
||||
if (!listId) { this.fields = []; return Promise.resolve(); }
|
||||
this.loadingFields = true;
|
||||
this.refreshPropertyPane();
|
||||
return this.service.getFields(listId).then((fields: IAccordionFieldOption[]): void => {
|
||||
this.fields = fields;
|
||||
this.applyFieldDefaults();
|
||||
}).catch((error: Error): void => {
|
||||
this.fields = [];
|
||||
if (window.console) { console.error('[Accordion] Fields could not be loaded.', error); }
|
||||
}).then((): void => {
|
||||
this.loadingFields = false;
|
||||
this.refreshPropertyPane();
|
||||
});
|
||||
}
|
||||
|
||||
private applyFieldDefaults(): void {
|
||||
const names: string[] = this.fields.map((field: IAccordionFieldOption): string => field.internalName);
|
||||
if (names.indexOf(this.properties.titleField) < 0) {
|
||||
this.properties.titleField = names.indexOf('Title') >= 0 ? 'Title' : (names[0] || '');
|
||||
}
|
||||
if (names.indexOf(this.properties.contentField) < 0) {
|
||||
const note: IAccordionFieldOption = this.fields.filter((field: IAccordionFieldOption): boolean =>
|
||||
field.type === 'Note' && field.internalName !== this.properties.titleField)[0];
|
||||
this.properties.contentField = note ? note.internalName : this.firstDifferentField(this.properties.titleField);
|
||||
}
|
||||
if (names.indexOf(this.properties.categoryField) < 0) { this.properties.categoryField = ''; }
|
||||
if (names.indexOf(this.properties.sortField) < 0) { this.properties.sortField = this.properties.titleField; }
|
||||
}
|
||||
|
||||
private firstDifferentField(excluded: string): string {
|
||||
for (let i: number = 0; i < this.fields.length; i++) {
|
||||
if (this.fields[i].internalName !== excluded) { return this.fields[i].internalName; }
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
private isConfigured(): boolean {
|
||||
return !!(this.service && this.properties.listId && this.properties.titleField && this.properties.contentField);
|
||||
}
|
||||
private normalizeInitialState(value: string): AccordionInitialState {
|
||||
return value === 'first' || value === 'all' ? value : 'collapsed';
|
||||
}
|
||||
private refreshPropertyPane(): void {
|
||||
if (this.context && this.context.propertyPane) { this.context.propertyPane.refresh(); }
|
||||
}
|
||||
private renderStatus(message: string, error: boolean): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
const status: HTMLDivElement = document.createElement('div');
|
||||
status.className = error ? styles.error : styles.status;
|
||||
status.setAttribute('role', error ? 'alert' : 'status');
|
||||
status.textContent = message;
|
||||
this.domElement.innerHTML = '';
|
||||
this.domElement.appendChild(status);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
|
||||
.accordion {
|
||||
font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
|
||||
font-size: 14px;
|
||||
color: "[theme: neutralPrimary, default: #323130]";
|
||||
}
|
||||
|
||||
.category { margin: 0 0 20px; }
|
||||
.categoryTitle {
|
||||
margin: 0 0 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: "[theme: neutralPrimary, default: #323130]";
|
||||
}
|
||||
.item { border-bottom: 1px solid "[theme: neutralLight, default: #edebe9]"; }
|
||||
.item:first-child { border-top: 1px solid "[theme: neutralLight, default: #edebe9]"; }
|
||||
.heading { margin: 0; font-size: inherit; font-weight: inherit; }
|
||||
.trigger {
|
||||
align-items: center;
|
||||
background: "[theme: white, default: #ffffff]";
|
||||
border: 0;
|
||||
color: "[theme: neutralPrimary, default: #323130]";
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
justify-content: space-between;
|
||||
min-height: 44px;
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
.trigger:hover { background: "[theme: neutralLighter, default: #f3f2f1]"; }
|
||||
.trigger:focus {
|
||||
outline: 2px solid "[theme: themePrimary, default: #0078d4]";
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.title { min-width: 0; padding-right: 12px; }
|
||||
.chevron,
|
||||
.chevronOpen {
|
||||
border-bottom: 1px solid currentColor;
|
||||
border-right: 1px solid currentColor;
|
||||
flex: 0 0 8px;
|
||||
height: 8px;
|
||||
margin-right: 4px;
|
||||
transform: rotate(45deg) translateY(-2px);
|
||||
transition: transform 120ms ease;
|
||||
width: 8px;
|
||||
}
|
||||
.chevronOpen { transform: rotate(225deg) translate(-2px, -2px); }
|
||||
.panel { background: "[theme: white, default: #ffffff]"; }
|
||||
.content { line-height: 1.5; padding: 4px 12px 16px; }
|
||||
.content > :first-child { margin-top: 0; }
|
||||
.content > :last-child { margin-bottom: 0; }
|
||||
.content a { color: "[theme: themePrimary, default: #0078d4]"; }
|
||||
.content table { border-collapse: collapse; max-width: 100%; }
|
||||
.content td,
|
||||
.content th { border: 1px solid "[theme: neutralLight, default: #edebe9]"; padding: 6px; }
|
||||
.status,
|
||||
.error {
|
||||
border: 1px solid "[theme: neutralLight, default: #edebe9]";
|
||||
color: "[theme: neutralPrimary, default: #323130]";
|
||||
font-family: "Segoe UI", "Segoe UI Web (West European)", sans-serif;
|
||||
padding: 16px;
|
||||
}
|
||||
.error {
|
||||
border-color: "[theme: errorText, default: #a80000]";
|
||||
color: "[theme: errorText, default: #a80000]";
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import * as React from 'react';
|
||||
import styles from './Accordion.module.scss';
|
||||
import { sanitizeAccordionHtml } from '../AccordionHtmlSanitizer';
|
||||
import { IAccordionItem } from '../AccordionTypes';
|
||||
import { IAccordionProps } from './IAccordionProps';
|
||||
|
||||
export interface IAccordionState { openIds: number[]; }
|
||||
|
||||
export default class Accordion extends React.Component<IAccordionProps, IAccordionState> {
|
||||
private instanceId: string = 'accordion-' + Math.random().toString(36).substring(2, 10);
|
||||
|
||||
public constructor(props: IAccordionProps) {
|
||||
super(props);
|
||||
this.state = { openIds: this.initialOpenIds(props) };
|
||||
}
|
||||
|
||||
public componentWillReceiveProps(nextProps: IAccordionProps): void {
|
||||
if (nextProps.items !== this.props.items || nextProps.initialState !== this.props.initialState) {
|
||||
this.setState({ openIds: this.initialOpenIds(nextProps) });
|
||||
}
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<any> { // tslint:disable-line:no-any
|
||||
const groups: Array<{ name: string; items: IAccordionItem[] }> = this.groupItems();
|
||||
return <div className={styles.accordion}>
|
||||
{groups.map((group, groupIndex) =>
|
||||
<section className={styles.category} key={'group-' + groupIndex}>
|
||||
{this.props.showCategories && group.name
|
||||
? <h2 className={styles.categoryTitle}>{group.name}</h2>
|
||||
: undefined}
|
||||
<div>{group.items.map((item: IAccordionItem) => this.renderItem(item))}</div>
|
||||
</section>
|
||||
)}
|
||||
</div>;
|
||||
}
|
||||
|
||||
private renderItem(item: IAccordionItem): React.ReactElement<any> { // tslint:disable-line:no-any
|
||||
const open: boolean = this.state.openIds.indexOf(item.id) >= 0;
|
||||
const buttonId: string = this.instanceId + '-button-' + item.id;
|
||||
const panelId: string = this.instanceId + '-panel-' + item.id;
|
||||
return <div className={styles.item} key={item.id}>
|
||||
<h3 className={styles.heading}>
|
||||
<button type='button' id={buttonId} className={styles.trigger}
|
||||
aria-expanded={open} aria-controls={panelId}
|
||||
aria-label={(open ? this.props.collapseLabel : this.props.expandLabel) + ' ' + item.title}
|
||||
onClick={() => this.toggle(item.id)}>
|
||||
<span className={styles.title}>{item.title}</span>
|
||||
<span className={open ? styles.chevronOpen : styles.chevron} aria-hidden='true' />
|
||||
</button>
|
||||
</h3>
|
||||
<div id={panelId} className={styles.panel} role='region' aria-labelledby={buttonId} hidden={!open}>
|
||||
<div className={styles.content} dangerouslySetInnerHTML={{ __html: sanitizeAccordionHtml(item.content) }} />
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
private toggle(id: number): void {
|
||||
const open: boolean = this.state.openIds.indexOf(id) >= 0;
|
||||
if (this.props.allowMultiple) {
|
||||
this.setState({ openIds: open
|
||||
? this.state.openIds.filter((current: number): boolean => current !== id)
|
||||
: this.state.openIds.concat([id]) });
|
||||
} else {
|
||||
this.setState({ openIds: open ? [] : [id] });
|
||||
}
|
||||
}
|
||||
|
||||
private initialOpenIds(props: IAccordionProps): number[] {
|
||||
if (props.initialState === 'all') { return props.items.map((item: IAccordionItem): number => item.id); }
|
||||
return props.initialState === 'first' && props.items.length ? [props.items[0].id] : [];
|
||||
}
|
||||
|
||||
private groupItems(): Array<{ name: string; items: IAccordionItem[] }> {
|
||||
if (!this.props.showCategories) { return [{ name: '', items: this.props.items }]; }
|
||||
const result: Array<{ name: string; items: IAccordionItem[] }> = [];
|
||||
const byName: { [name: string]: { name: string; items: IAccordionItem[] } } = {};
|
||||
for (let i: number = 0; i < this.props.items.length; i++) {
|
||||
const name: string = this.props.items[i].category || this.props.defaultCategory;
|
||||
if (!byName[name]) {
|
||||
byName[name] = { name: name, items: [] };
|
||||
result.push(byName[name]);
|
||||
}
|
||||
byName[name].items.push(this.props.items[i]);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { IAccordionItem, AccordionInitialState } from '../AccordionTypes';
|
||||
|
||||
export interface IAccordionProps {
|
||||
items: IAccordionItem[];
|
||||
allowMultiple: boolean;
|
||||
initialState: AccordionInitialState;
|
||||
showCategories: boolean;
|
||||
expandLabel: string;
|
||||
collapseLabel: string;
|
||||
defaultCategory: string;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Wählen Sie die Liste und Spalten für das Akkordeon aus.",
|
||||
"DataGroupName": "Datenquelle",
|
||||
"BehaviorGroupName": "Verhalten",
|
||||
"ListFieldLabel": "Liste",
|
||||
"TitleFieldLabel": "Spalte für Überschrift",
|
||||
"ContentFieldLabel": "Spalte für Inhalt",
|
||||
"CategoryFieldLabel": "Spalte für Kategorie (optional)",
|
||||
"SortFieldLabel": "Sortierspalte",
|
||||
"SortAscendingLabel": "Aufsteigend sortieren",
|
||||
"AllowMultipleLabel": "Mehrere geöffnete Bereiche erlauben",
|
||||
"InitialStateFieldLabel": "Initial geöffnet",
|
||||
"InitialCollapsed": "Keine",
|
||||
"InitialFirst": "Erster Bereich",
|
||||
"InitialAll": "Alle Bereiche",
|
||||
"ShowCategoriesLabel": "Kategorieüberschriften anzeigen",
|
||||
"SelectOption": "Auswählen...",
|
||||
"NoCategoryOption": "Keine Kategorien",
|
||||
"ConfigureMessage": "Konfigurieren Sie in den WebPart-Einstellungen eine Liste sowie Überschrift- und Inhaltsspalte.",
|
||||
"LoadingMessage": "Akkordeon wird geladen...",
|
||||
"EmptyMessage": "Es wurden keine Einträge gefunden.",
|
||||
"LoadErrorMessage": "Die Akkordeon-Einträge konnten nicht geladen werden.",
|
||||
"ExpandLabel": "Aufklappen",
|
||||
"CollapseLabel": "Zuklappen",
|
||||
"DefaultCategory": "Weitere"
|
||||
};
|
||||
});
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Select the list and columns used by the accordion.",
|
||||
"DataGroupName": "Data source",
|
||||
"BehaviorGroupName": "Behavior",
|
||||
"ListFieldLabel": "List",
|
||||
"TitleFieldLabel": "Heading column",
|
||||
"ContentFieldLabel": "Content column",
|
||||
"CategoryFieldLabel": "Category column (optional)",
|
||||
"SortFieldLabel": "Sort column",
|
||||
"SortAscendingLabel": "Sort ascending",
|
||||
"AllowMultipleLabel": "Allow multiple open sections",
|
||||
"InitialStateFieldLabel": "Initially open",
|
||||
"InitialCollapsed": "None",
|
||||
"InitialFirst": "First section",
|
||||
"InitialAll": "All sections",
|
||||
"ShowCategoriesLabel": "Show category headings",
|
||||
"SelectOption": "Select...",
|
||||
"NoCategoryOption": "No categories",
|
||||
"ConfigureMessage": "Configure a list, heading column and content column in the web part settings.",
|
||||
"LoadingMessage": "Loading accordion...",
|
||||
"EmptyMessage": "No entries were found.",
|
||||
"LoadErrorMessage": "The accordion entries could not be loaded.",
|
||||
"ExpandLabel": "Expand",
|
||||
"CollapseLabel": "Collapse",
|
||||
"DefaultCategory": "Other"
|
||||
};
|
||||
});
|
||||
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
declare interface IAccordionWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
DataGroupName: string;
|
||||
BehaviorGroupName: string;
|
||||
ListFieldLabel: string;
|
||||
TitleFieldLabel: string;
|
||||
ContentFieldLabel: string;
|
||||
CategoryFieldLabel: string;
|
||||
SortFieldLabel: string;
|
||||
SortAscendingLabel: string;
|
||||
AllowMultipleLabel: string;
|
||||
InitialStateFieldLabel: string;
|
||||
InitialCollapsed: string;
|
||||
InitialFirst: string;
|
||||
InitialAll: string;
|
||||
ShowCategoriesLabel: string;
|
||||
SelectOption: string;
|
||||
NoCategoryOption: string;
|
||||
ConfigureMessage: string;
|
||||
LoadingMessage: string;
|
||||
EmptyMessage: string;
|
||||
LoadErrorMessage: string;
|
||||
ExpandLabel: string;
|
||||
CollapseLabel: string;
|
||||
DefaultCategory: string;
|
||||
}
|
||||
|
||||
declare module 'AccordionWebPartStrings' {
|
||||
const strings: IAccordionWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
'use strict';
|
||||
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var root = path.resolve(__dirname, '..');
|
||||
var passed = 0;
|
||||
|
||||
function read(file) { return fs.readFileSync(path.join(root, file), 'utf8'); }
|
||||
function json(file) { return JSON.parse(read(file)); }
|
||||
function assert(condition, message) { if (!condition) { throw new Error(message); } passed++; }
|
||||
|
||||
var packageJson = json('package.json');
|
||||
var solution = json('config/package-solution.json').solution;
|
||||
var config = json('config/config.json');
|
||||
var manifest = json('src/webparts/accordion/AccordionWebPart.manifest.json');
|
||||
var webPart = read('src/webparts/accordion/AccordionWebPart.ts');
|
||||
var component = read('src/webparts/accordion/components/Accordion.tsx');
|
||||
var sanitizer = read('src/webparts/accordion/AccordionHtmlSanitizer.ts');
|
||||
var styles = read('src/webparts/accordion/components/Accordion.module.scss');
|
||||
|
||||
assert(packageJson.version === '1.0.0', 'Package version must be 1.0.0.');
|
||||
assert(solution.version === '1.0.0.0', 'Solution version must be 1.0.0.0.');
|
||||
assert(solution.includeClientSideAssets === true, 'Client-side assets must be included.');
|
||||
assert(solution.skipFeatureDeployment === true, 'Solution must support central deployment.');
|
||||
assert(manifest.componentType === 'WebPart', 'Component must be a web part.');
|
||||
assert(!!config.bundles['accordion-web-part'], 'Accordion bundle is missing.');
|
||||
assert(webPart.indexOf("PropertyPaneDropdown('listId'") >= 0, 'Dynamic list selection is missing.');
|
||||
assert(webPart.indexOf("PropertyPaneDropdown('contentField'") >= 0, 'Dynamic content field selection is missing.');
|
||||
assert(webPart.indexOf("PropertyPaneDropdown('categoryField'") >= 0, 'Category field selection is missing.');
|
||||
assert(component.indexOf("aria-expanded={open}") >= 0 && component.indexOf("role='region'") >= 0,
|
||||
'Accessible accordion semantics are missing.');
|
||||
assert(component.indexOf('sanitizeAccordionHtml(item.content)') >= 0, 'Rich text is not sanitized before rendering.');
|
||||
var allowedTags = sanitizer.substring(sanitizer.indexOf('const AllowedTags'), sanitizer.indexOf('const DropContentTags'));
|
||||
assert(allowedTags.indexOf("'script'") < 0 && allowedTags.indexOf("'img'") < 0 &&
|
||||
sanitizer.indexOf("'script'") >= 0,
|
||||
'Unsafe rich-text elements must be removed rather than allow-listed.');
|
||||
['neutralPrimary', 'neutralLight', 'neutralLighter', 'themePrimary', 'white'].forEach(function (slot) {
|
||||
assert(styles.indexOf('[theme: ' + slot + ', default:') >= 0, 'SharePoint theme slot is missing: ' + slot);
|
||||
});
|
||||
|
||||
console.log('Accordion project validation passed:', passed);
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"typeRoots": ["./node_modules/@types", "./node_modules/@microsoft"],
|
||||
"types": ["es6-promise", "webpack-env"],
|
||||
"lib": ["es5", "dom", "es2015.collection"]
|
||||
}
|
||||
}
|
||||
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"extends": "@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-use-before-declare": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user