Fixed linting, npmrc, sample.json, devcontainer. readme
This commit is contained in:
Hugo Bernier
parent
882ec700ae
commit
64aa132a24
|
|
@ -1,15 +1,14 @@
|
|||
// 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.11.0",
|
||||
"image": "docker.io/m365pnp/spfx:1.11.0",
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {},
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"name": "SPFx 1.18.2",
|
||||
"image": "docker.io/m365pnp/spfx:1.18.2",
|
||||
"customizations": {
|
||||
"vscode": {
|
||||
"extensions": [
|
||||
"editorconfig.editorconfig",
|
||||
"dbaeumer.vscode-eslint"
|
||||
],
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
]
|
||||
}
|
||||
},
|
||||
"forwardPorts": [
|
||||
4321,
|
||||
35729,
|
||||
|
|
|
|||
|
|
@ -7,9 +7,11 @@ 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
|
||||
|
||||
cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer
|
||||
cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem
|
||||
# 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
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
v18.19.0
|
||||
|
|
@ -14,14 +14,17 @@ While the original web part was based on an **XSLT** templating engine, this *Re
|
|||
|
||||
| :warning: Important |
|
||||
|:---------------------------|
|
||||
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|
||||
| Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to build this sample, you need to ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|
||||
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
|
||||
|
||||
|
||||
 
|
||||
This sample is optimally compatible with the following environment configuration:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"The React Content Query Web Part is a modern version of the good old Content by Query Web Part that was introduced in SharePoint 2007. Built for SharePoint Online, this modern version is built against the new SharePoint Framework (SPFx) and uses the latest Web Stack practices. While the original Web Part was based on a XSLT templating engine, this React Web Part is based on the well known Handlebars templating engine, which empowers users to create simple, yet powerfull HTML templates for rendering the queried content. This new version also lets the user query any site collections which resides on the same domain url, add unlimited filters, query DateTime fields to the nearest minute rather than being limited to a day, and much more."
|
||||
],
|
||||
"creationDateTime": "2021-01-07",
|
||||
"updateDateTime": "2023-05-04",
|
||||
"updateDateTime": "2024-03-31",
|
||||
"products": [
|
||||
"SharePoint"
|
||||
],
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.11.0"
|
||||
"value": "1.18.2"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
|
|
@ -141,6 +141,11 @@
|
|||
"gitHubAccount": "ChrisLizon",
|
||||
"name": "Chris Lizon",
|
||||
"pictureUrl": "https://github.com/ChrisLizon.png"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "nemortu",
|
||||
"name": "nemortu",
|
||||
"pictureUrl": "https://github.com/nemortu.png"
|
||||
}
|
||||
],
|
||||
"references": [
|
||||
|
|
|
|||
|
|
@ -291,7 +291,9 @@ export class CamlQueryHelper {
|
|||
if (!url) {
|
||||
url = window.location.href;
|
||||
}
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
name = name.replace(/[\[\]]/g, "\\$&");
|
||||
// eslint-disable-next-line @rushstack/security/no-unsafe-regexp
|
||||
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
||||
results = regex.exec(url);
|
||||
if (!results) return null;
|
||||
|
|
|
|||
|
|
@ -295,6 +295,7 @@ export class ContentQueryService implements IContentQueryService {
|
|||
this.listService.getListFields(webUrl, listId, ['InternalName', 'Title', 'Sortable'], 'Title').then((data: any) => {
|
||||
const sortableFields: any[] = data.value.filter((field) => { return field.Sortable == true; });
|
||||
let options: IDropdownOption[] = [{ key: "", text: strings.queryFilterPanelStrings.queryFilterStrings.fieldSelectLabel }];
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
const orderByOptions: IDropdownOption[] = sortableFields.map((field) => { return { key: field.InternalName, text: Text.format("{0} \{\{{1}\}\}", field.Title, field.InternalName) }; });
|
||||
options = options.concat(orderByOptions);
|
||||
this.orderByOptions = options;
|
||||
|
|
@ -371,7 +372,8 @@ export class ContentQueryService implements IContentQueryService {
|
|||
let items: IChecklistItem[] = fields.map((field) => {
|
||||
return {
|
||||
id: field.InternalName,
|
||||
label: Text.format("{0} \{\{{1}\}\}", field.Title, field.InternalName)
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
label: Text.format("{0} \{\{{1}\}}", field.Title, field.InternalName)
|
||||
};
|
||||
});
|
||||
this.viewFields = items;
|
||||
|
|
@ -479,6 +481,7 @@ export class ContentQueryService implements IContentQueryService {
|
|||
* @param itemSelectorEnabled: Defines whether to render the item selector element in the template
|
||||
*************************************************************************************************/
|
||||
public generateDefaultTemplate(viewFields: string[], itemSelectorEnabled: boolean): string {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
let viewFieldsStr = viewFields.map((field) => { return Text.format(" <span class='ms-DetailsRow-cell'><strong>{0}: </strong>\{\{{0}.textValue\}\}</span>", field); }).join("\n");
|
||||
let selectItemStr = "\n <span><button class='selectItem' data-itemId='{{ID.textValue}}'>Select</button></span>";
|
||||
let template = Text.format(`<style type="text/css">
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@ export class PropertyPaneAsyncChecklist implements IPropertyPaneField<IPropertyP
|
|||
stateKey: new Date().toString()
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @microsoft/spfx/pair-react-dom-render-unmount
|
||||
ReactDom.render(asyncChecklist, elem);
|
||||
this.loadedItems = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ export class AsyncChecklist extends React.Component<IAsyncChecklistProps, IAsync
|
|||
* Loads the checklist items asynchronously
|
||||
*************************************************************************************/
|
||||
private loadItems() {
|
||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
let _this_ = this;
|
||||
|
||||
_this_.checkedItems = this.getDefaultCheckedItems();
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ export class PropertyPaneAsyncDropdown implements IPropertyPaneField<IPropertyPa
|
|||
stateKey: new Date().toString()
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @microsoft/spfx/pair-react-dom-render-unmount
|
||||
ReactDom.render(asyncDropDown, elem);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ export class PropertyPaneQueryFilterPanel implements IPropertyPaneField<IPropert
|
|||
stateKey: new Date().toString()
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @microsoft/spfx/pair-react-dom-render-unmount
|
||||
ReactDom.render(queryFilterpanel, elem);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable react/no-direct-mutation-state */
|
||||
import * as React from 'react';
|
||||
import * as moment from 'moment';
|
||||
import { cloneDeep, isEmpty } from '@microsoft/sp-lodash-subset';
|
||||
|
|
@ -104,6 +105,7 @@ export class QueryFilter extends React.Component<IQueryFilterProps, IQueryFilter
|
|||
* When the NormalPeoplePicker value changes
|
||||
*************************************************************************************/
|
||||
private onTaxonomyPickerResolve(items: ITag[]) {
|
||||
// eslint-disable-next-line react/no-direct-mutation-state
|
||||
this.state.filter.value = items;
|
||||
this.onAnyChange();
|
||||
}
|
||||
|
|
@ -126,6 +128,7 @@ export class QueryFilter extends React.Component<IQueryFilterProps, IQueryFilter
|
|||
private onDateExpressionChange(newValue: string): string {
|
||||
|
||||
// Validates the picker
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
let regex = new RegExp(/^\[Today\](\s{0,}[\+-]\s{0,}\[{0,1}\d{1,4}\]{0,1}){0,1}$/);
|
||||
let isValid = regex.test(newValue) || isEmpty(newValue);
|
||||
let errorMsg = isValid ? '' : this.props.strings.datePickerExpressionError;
|
||||
|
|
@ -133,7 +136,9 @@ export class QueryFilter extends React.Component<IQueryFilterProps, IQueryFilter
|
|||
if(isValid) {
|
||||
// If the change is NOT triggered by the date picker change
|
||||
if(!(isEmpty(newValue) && this.state.filter.value != null)) {
|
||||
// eslint-disable-next-line react/no-direct-mutation-state
|
||||
this.state.filter.value = null;
|
||||
// eslint-disable-next-line react/no-direct-mutation-state
|
||||
this.state.filter.expression = newValue;
|
||||
this.setState({ filter: this.state.filter, pickersKey: this.state.pickersKey });
|
||||
this.onAnyChange();
|
||||
|
|
@ -150,6 +155,7 @@ export class QueryFilter extends React.Component<IQueryFilterProps, IQueryFilter
|
|||
* @param checked : Whether the checkbox is not checked or not
|
||||
*************************************************************************************/
|
||||
private onDateIncludeTimeChange(ev?: React.FormEvent<HTMLInputElement>, checked?: boolean) {
|
||||
// eslint-disable-next-line react/no-direct-mutation-state
|
||||
this.state.filter.includeTime = checked;
|
||||
this.onAnyChange();
|
||||
}
|
||||
|
|
@ -160,6 +166,7 @@ export class QueryFilter extends React.Component<IQueryFilterProps, IQueryFilter
|
|||
*************************************************************************************/
|
||||
private onJoinChoiceChange(ev?: React.FormEvent<HTMLInputElement>, option?: IChoiceGroupOption) {
|
||||
if(option) {
|
||||
// eslint-disable-next-line react/no-direct-mutation-state
|
||||
this.state.filter.join = QueryFilterJoin[option.key];
|
||||
this.onAnyChange();
|
||||
}
|
||||
|
|
@ -185,6 +192,7 @@ export class QueryFilter extends React.Component<IQueryFilterProps, IQueryFilter
|
|||
];
|
||||
|
||||
for(let field of this.props.fields) {
|
||||
// eslint-disable-next-line no-useless-escape
|
||||
let option:IDropdownOption = { key: field.internalName, text: Text.format("{0} \{\{{1}\}\}", field.displayName, field.internalName) };
|
||||
options.push(option);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable react/no-direct-mutation-state */
|
||||
import * as React from 'react';
|
||||
import { cloneDeep } from '@microsoft/sp-lodash-subset';
|
||||
import { Text } from '@microsoft/sp-core-library';
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@ export class PropertyPaneTextDialog implements IPropertyPaneField<IPropertyPaneT
|
|||
stateKey: new Date().toString()
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @microsoft/spfx/pair-react-dom-render-unmount
|
||||
ReactDom.render(textDialog, elem);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -139,6 +139,7 @@ export default class ContentQueryWebPart
|
|||
if (this.properties.enableMGT)
|
||||
{
|
||||
// Add MGT dependencies
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const MGT:any = require('@microsoft/mgt');
|
||||
|
||||
// We only need to re-register the SharePoint provider if we didn't register it before
|
||||
|
|
@ -168,6 +169,7 @@ export default class ContentQueryWebPart
|
|||
themeVariant: this._themeVariant
|
||||
}
|
||||
);
|
||||
// eslint-disable-next-line @microsoft/spfx/pair-react-dom-render-unmount
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
|
|
@ -548,7 +550,7 @@ export default class ContentQueryWebPart
|
|||
/***************************************************************************
|
||||
* Validates the templateUrl property
|
||||
***************************************************************************/
|
||||
private onTemplateUrlChange(value: string): Promise<String> {
|
||||
private onTemplateUrlChange(value: string): Promise<string> {
|
||||
Log.verbose(this.logSource, "WebPart property 'templateUrl' has changed, refreshing WebPart...", this.context.serviceScope);
|
||||
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
|
|
@ -576,7 +578,7 @@ export default class ContentQueryWebPart
|
|||
/***************************************************************************
|
||||
* Validates the itemLimit property
|
||||
***************************************************************************/
|
||||
private onItemLimitChange(value: string): Promise<String> {
|
||||
private onItemLimitChange(value: string): Promise<string> {
|
||||
Log.verbose(this.logSource, "WebPart property 'itemLimit' has changed, refreshing WebPart...", this.context.serviceScope);
|
||||
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ export default class ContentQuery extends React.Component<IContentQueryProps, IC
|
|||
super(props);
|
||||
|
||||
// Imports the handlebars-helpers
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
let helpers = require<any>('handlebars-helpers')({
|
||||
handlebars: Handlebars
|
||||
});
|
||||
|
|
@ -65,6 +66,7 @@ export default class ContentQuery extends React.Component<IContentQueryProps, IC
|
|||
*************************************************************************************/
|
||||
private loadExternalScriptsSequentially(scriptUrls: string[]): Promise<{}> {
|
||||
var index = 0;
|
||||
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
||||
var _this_ = this;
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
@ -386,7 +388,7 @@ export default class ContentQuery extends React.Component<IContentQueryProps, IC
|
|||
|
||||
{/* Shows the query results once loaded */}
|
||||
{mandatoryFieldsConfigured && !this.state.loading && !this.state.error &&
|
||||
<div dangerouslySetInnerHTML={this.createMarkup(this.state.processedTemplateResult)}></div>
|
||||
<div dangerouslySetInnerHTML={this.createMarkup(this.state.processedTemplateResult)} />
|
||||
}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue