Skip to content

Instantly share code, notes, and snippets.

@ypcode

ypcode/CustomPanel.tsx Secret

Created Jan 3, 2019
Embed
What would you like to do?
import * as React from 'react';
import { TextField, DefaultButton, PrimaryButton, DialogFooter, autobind, Panel, Spinner, SpinnerType } from "office-ui-fabric-react";
import { sp } from "@pnp/sp";
export interface ICustomPanelState {
saving: boolean;
}
export interface ICustomPanelProps {
onClose: () => void;
isOpen: boolean;
currentTitle: string;
itemId: number;
listId: string;
}
export default class CustomPanel extends React.Component<ICustomPanelProps, ICustomPanelState> {
private editedTitle: string = null;
constructor(props: ICustomPanelProps) {
super(props);
this.state = {
saving: false
};
}
@autobind
private _onTitleChanged(title: string) {
this.editedTitle = title;
}
@autobind
private _onCancel() {
this.props.onClose();
}
@autobind
private _onSave() {
this.setState({ saving: true });
sp.web.lists.getById(this.props.listId).items.getById(this.props.itemId).update({
'Title': this.editedTitle
}).then(() => {
this.setState({ saving: false });
this.props.onClose();
});
}
public render(): React.ReactElement<ICustomPanelProps> {
let { isOpen, currentTitle } = this.props;
return (
<Panel isOpen={isOpen}>
<h2>This is a custom panel with your own content</h2>
<TextField value={currentTitle} onChanged={this._onTitleChanged} label="Item title" placeholder="Choose the new title" />
{this.state.saving && <Spinner type={SpinnerType.large} label="Saving..." />}
<DialogFooter>
<DefaultButton text="Cancel" onClick={this._onCancel} />
<PrimaryButton text="Save" onClick={this._onSave} />
</DialogFooter>
</Panel>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment