CustomPanel.tsx

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>
        );
    }
}