-
Notifications
You must be signed in to change notification settings - Fork 6
/
PnPControls.tsx
executable file
·118 lines (103 loc) · 3.31 KB
/
PnPControls.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import * as React from 'react';
import styles from './PnPControls.module.scss';
import { IPnPControlsProps, IPnPControlsState } from './IPnPControlsProps';
import { escape } from '@microsoft/sp-lodash-subset';
// PnP imports
import { sp } from "@pnp/sp";
import { Placeholder } from '@pnp/spfx-controls-react/lib/Placeholder';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { ListView, IViewField } from '@pnp/spfx-controls-react/lib/ListView';
export default class PnPControls extends React.Component<IPnPControlsProps, IPnPControlsState> {
private _viewFields: IViewField[] = [
{
name: "Id",
displayName: "ID",
maxWidth: 25,
minWidth: 25,
sorting: true
},
{
name: "File.Name",
linkPropertyName: "File.ServerRelativeUrl",
displayName: "Name",
sorting: true
}
];
constructor(props: IPnPControlsProps) {
super(props);
this.state = {
items: [],
};
}
public render(): React.ReactElement<IPnPControlsProps> {
if (this.props.list === null || this.props.list === "" || this.props.list === undefined) {
return (
<Placeholder
iconName="Edit"
iconText="Configure your web part"
description="Please configure the web part."
buttonLabel="Configure"
onConfigure={this._onConfigure.bind(this)} />
);
}
return (
this.state.items.length === 0 ?
(
<Placeholder
iconName="InfoSolid"
iconText="No items found"
description="No items to display" />
) : (
<div>
<WebPartTitle displayMode={this.props.displayMode}
title={this.props.title}
updateProperty={this.props.updateTitle} />
<ListView items={this.state.items}
viewFields={this._viewFields}
selection={this._getSelection}
iconFieldName="File.ServerRelativeUrl" />
</div>
)
);
}
private _onConfigure() {
this.props.context.propertyPane.open();
}
private async _getItems() {
let select = '*';
let expand = 'File';
let filter = '';
// filter by selected term if required
if (this.props.term !== undefined && this.props.term !== null && this.props.term.length > 0) {
const term = this.props.term[0];
select = `${select},TaxCatchAll/Term`;
expand = `${expand},TaxCatchAll`;
filter = `TaxCatchAll/Term eq '${term.name}'`;
}
const items = await sp.web.lists.getById(this.props.list).items
.select(select)
.expand(expand)
.filter(filter)
.get();
// update state
this.setState({
items: items ? items : []
});
console.log('List Items:', this.state.items);
}
public componentDidMount() {
if (this.props.list !== null && this.props.list !== "" && this.props.list !== undefined) {
this._getItems();
}
}
public componentDidUpdate(prevProps: IPnPControlsProps, prevState: IPnPControlsState) {
if (this.props.list !== prevProps.list || this.props.term !== prevProps.term) {
if (this.props.list !== null && this.props.list !== "" && this.props.list !== undefined) {
this._getItems();
}
}
}
private _getSelection(items: any[]) {
console.log('Selected List items:', items);
}
}