Пример демонстрации (множество тестовых сценариев, просто проверяя нужную логику):
export interface IListItem{
Id: number;
Title: string;
Body : {
Body_p1: string;
Body_p2: string;
};
}
export interface IReactExState{
controlName:string,
ControlValue:string,
windowsID:number,
showPanel:boolean,
items: IListItem[],
Options:IComboBoxOption[],
selectionDetails: {},
showModal: boolean,
autoComplete: boolean,
allowFreeform: boolean
}
export default class OfficeFabric extends React.Component<IOfficeFabricProps, IReactExState> {
private _selection: Selection;
private _allItems: IListItem[];
private _columns: IColumn[];
public constructor(props: IOfficeFabricProps,state: IReactExState){
super(props);
this._selection = new Selection({
onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails() })
});
this._allItems = [
{
Id : 0,
Title : "test0",
Body : {
Body_p1: "test0_p1",
Body_p2: "test0_p2"
},
},
{
Id : 1,
Title : "test1",
Body : {
Body_p1: "test1_p1",
Body_p2: "test1_p2"
}
}
];
this._columns = [
{ key: 'Id', name: 'Id', fieldName: 'Id', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'Title', name: 'Title', fieldName: 'Title', minWidth: 200, maxWidth: 400, isResizable: true },
{ key: 'Body', name: 'Body', minWidth: 200, maxWidth: 400, isResizable: true,onRender: (item) => (
<div>
{item.Body.Body_p1}
</div>) },
];
this.state = {
controlName:"",
ControlValue:"",
windowsID:123.4,
showPanel:false,
items:this._allItems,
Options:[],
selectionDetails: this._getSelectionDetails() ,
showModal:false,
autoComplete: false,
allowFreeform: true
};
}
private _showModal = (): void => {
this.setState({ showModal: true });
};
private _closeModal = (): void => {
this.setState({ showModal: false });
};
private _getSelectionDetails(): string {
const selectionCount = this._selection.getSelectedCount();
switch (selectionCount) {
case 0:
return 'No items selected';
case 1:
return '1 item selected: ' + (this._selection.getSelection()[0] as IListItem).Title;
default:
return `${selectionCount} items selected`;
}
}
private _onItemInvoked = (item: IListItem): void => {
alert(`Item invoked: ${item.Title}`);
};
private _showPanel = () => {
this.setState({ showPanel: true });
};
private _hidePanel = () => {
this.setState({ showPanel: false });
};
private _Save = () => {
//to do save logic
this.setState({ showPanel: false });
alert('save clicked');
};
private _onRenderFooterContent = () => {
return (
<div>
<PrimaryButton onClick={this._hidePanel} style={{ marginRight: '8px' }}>
Save
</PrimaryButton>
<DefaultButton onClick={this._showPanel}>Cancel</DefaultButton>
</div>
);
};
public componentDidMount(){
var reactHandler = this;
this.props.context.spHttpClient.get(`${this.props.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('TestList')/items?select=ID,Title`,
SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => {
response.json().then((responseJSON: any) => {
let tempOptions:IComboBoxOption[]=[];
responseJSON.value.forEach(element => {
tempOptions.push({key:element.ID,text:element.Title})
});
reactHandler.setState({
Options: tempOptions
});
});
});
}
// private _onJobTitReportToChange = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
// this.props.onJobTitleReportToChange(newValue);
// }
public handleObjectWithMultipleFields = (ev, newText: string): void => {
const target = ev.target;
const value = newText;
var _ControlName=target.name;
this.setState({
controlName: _ControlName,
ControlValue:value
})
}
public render(): React.ReactElement<IOfficeFabricProps> {
return (
<div className={ styles.officeFabric }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
<ComboBox
label="ComboBox with toggleable freeform/auto-complete"
key={'' + this.state.autoComplete + this.state.allowFreeform /*key causes re-
render when toggles change*/}
allowFreeform={this.state.allowFreeform}
autoComplete={this.state.autoComplete ? 'on' : 'off'}
options={this.state.Options}
/>
<TextField name="txtA" value={this.state.windowsID.toString()}
onChange={this.handleObjectWithMultipleFields}/>
<TextField name="txtB"
onChange={this.handleObjectWithMultipleFields}/>
<div>
<DefaultButton secondaryText="Opens the Sample Panel" onClick={this._showPanel} text="Open Panel" />
<Panel
isOpen={this.state.showPanel}
type={PanelType.smallFixedFar}
onDismiss={this._hidePanel}
headerText="Panel - Small, right-aligned, fixed, with footer"
closeButtonAriaLabel="Close"
onRenderFooterContent={this._onRenderFooterContent}
>
<DefaultButton className={styles.tablink} text="Button" />
<ChoiceGroup
options={[
{
key: 'A',
text: 'Option A'
},
{
key: 'B',
text: 'Option B',
checked: true
},
{
key: 'C',
text: 'Option C',
disabled: true
},
{
key: 'D',
text: 'Option D',
checked: true,
disabled: true
}
]}
label="Pick one"
required={true}
/>
</Panel>
<DefaultButton secondaryText="Opens the Sample Modal" onClick={this._showModal} text="Open Modal" />
</div>
<MarqueeSelection selection={this._selection}>
<DetailsList
items={this.state.items}
columns={this._columns}
setKey="set"
layoutMode={DetailsListLayoutMode.justified}
selection={this._selection}
selectionPreservedOnEmptyClick={true}
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="Row checkbox"
onItemInvoked={this._onItemInvoked}
/>
</MarqueeSelection>
<a href="https://aka.ms/spfx" className={ styles.button }>
<span className={ styles.label }>Learn more</span>
</a>
<Icon iconName='Mail' />
<br/>
<Icon iconName='CirclePlus' />
<br/>
<Icon iconName='LocationDot' />
</div>
</div>
</div>
</div>
);
}
}