ListViewSelectorPaneField

import * as React from 'react';

export interface ListViewSelectorPaneFieldState {
  lists: ISPList[];
  selectedList: string;
}

export interface ListViewSelectorPaneFieldProps {
  label: string;
  context: any;
  selectedList: string;
}

export interface ISPList {
  Title: string;
  Id: string;
}

export interface ISPListCollection {
  value: ISPList[];
}

export interface ListOptionProps {
  value: string;
  text: string;
}

const ListOption: React.StatelessComponent<ListOptionProps> = (props: ListOptionProps) => (
  <option value={props.value}>{props.text}</option>
);

export default class ListViewSelectorPaneField extends React.Component<ListViewSelectorPaneFieldProps, ListViewSelectorPaneFieldState>{

    private _ddlLists: HTMLSelectElement;

    public constructor(props: ListViewSelectorPaneFieldProps){
      super(props);
      this._ddlListsChanged = this._ddlListsChanged.bind(this);
      this.state = {
        lists: [],
        selectedList: props.selectedList
      };
    }

    public render(): JSX.Element {
      var lists = this.state.lists.map((list: ISPList) => {
        return (<ListOption value={list.Id} text={list.Title} key={list.Id} />);
      });

      return (
        <div>
          <label className="ms-Label">{this.props.label}</label>
          <select
            ref={(c): HTMLSelectElement => this._ddlLists = c }
            onChange={this._ddlListsChanged}
            value={this.state.selectedList}>
            {lists}
          </select>
        </div>
      );
    }

    public componentDidMount(): void {
      this._getSharePointLists().then((listCollection) => {
        this.setState({
          lists: listCollection.value
        } as ListViewSelectorPaneFieldState);
      });
    }

    public get value(): string {
      return this.state.selectedList;
    }

    private _ddlListsChanged(event: React.KeyboardEvent): void {
      const element: HTMLSelectElement = event.target as HTMLSelectElement;
      console.log(element.value);
      this.setState({
        selectedList: element.value
      } as ListViewSelectorPaneFieldState);
    }

    private _getSharePointLists(): Promise<ISPListCollection> {
      return this.props.context.httpClient.get(this.props.context.pageContext.web.absoluteUrl + '/_api/web/lists?$filter=Hidden eq false')
          .then((response: Response) => {
          return response.json();
      });
  }
}