public render()

in ui-fabric-react/scripts/WorkItemSearchComponent.tsx [42:79]


    public render(): JSX.Element {
        let filter = this.state.filter;
        let filterSection = <div className="filter-section">
            <TextField placeholder="Enter a keyword to search work items" className="keyword" onChanged={this._onKeywordChange.bind(this)} value={filter.keyword} onKeyPress={this._onKeywordKeypress.bind(this)} />
            <div className="filters">
                <Checkbox label='Assigned to me' onChange={this._onAssignedToMeChange.bind(this)} checked={filter.assignedToMe} className="filter-check" />
                <Checkbox label='Has attachments' onChange={this._onHasAttachmentsChange.bind(this)} checked={filter.hasAttachments} className="filter-check" />
                <Checkbox label='Has links' onChange={this._onHasLinksChange.bind(this)} checked={filter.hasLinks} className="filter-check" />
            </div>
            <div className="actions">
                <DefaultButton onClick={this._onClearClick.bind(this)} className="action-button" split={false}>Clear</DefaultButton>
                <DefaultButton onClick={this._onSearchClick.bind(this)}  split={false} disabled={!this._canSearch(this.state)} className="action-button">Search</DefaultButton>
            </div>
        </div>;

        let result = this.state.result;
        let resultSection: JSX.Element = null;
        if (result.queryResult) {
            if (result.queryResult.workItems.length > 0) {
                resultSection = this._getWorkItemsList(result.queryResult);
            }
            else {
                resultSection = <MessageBar messageBarType={MessageBarType.info}>No work items found</MessageBar>
            }
        } else if (result.error) {
            resultSection = <MessageBar messageBarType={MessageBarType.error}>{result.error}</MessageBar>
        } else if (this.state.querying) {
            resultSection = <Label>Querying...</Label>;
        }

        return (
            <div className="work-item-search">
                {filterSection}
                {resultSection}
            </div>
        );

    }