render()

in wstl1/tools/notebook/data-model-browser/src/components/search_bar.tsx [121:186]

• 66 lines of code
• 4 McCabe index (conditional complexity)

  render() {
    return (
      <div className={localStyles.searchContainer}>
        <Autocomplete
          freeSolo
          id="search-search"
          getOptionLabel={(result: SearchableField) => result.path}
          getOptionSelected={(
            result: SearchableField,
            value: SearchableField
          ) => result.path === value.path}
          filterOptions={x => x}
          options={this.state.activeResults}
          onChange={(
            event: object,
            result: unknown,
            reason: AutocompleteChangeReason
          ) => {
            if (reason === 'select-option') {
              const searchableField = result as SearchableField;
              this.handleRowClick(searchableField.path);
            } else if (reason === 'clear') {
              this.clearSearch();
            }
          }}
          onInputChange={(event: object, newValue: string, reason: string) => {
            if (reason === 'input') {
              this.setState({searchText: newValue});
              this.doSearch(newValue);
            }
          }}
          classes={{root: classnames(localStyles.input)}}
          renderInput={params => (
            <TextField
              {...params}
              label="Search data model"
              variant="outlined"
              fullWidth
            />
          )}
          renderOption={(option: SearchableField) => {
            return (
              <Grid container alignItems="center">
                <Grid item xs>
                  <Typography
                    key={option.path}
                    variant="body2"
                    color="textPrimary"
                  >
                    {option.path}
                  </Typography>
                  <Typography
                    key={option.path + '1'}
                    variant="body2"
                    color="textSecondary"
                  >
                    {option.description}
                  </Typography>
                </Grid>
              </Grid>
            );
          }}
        />
      </div>
    );
  }