render()

in src/web/src/views/cli/CLIModuleSelector.tsx [124:235]
110 lines of code
11 McCabe index (conditional complexity)

  render() {
    const { options, value, openDialog, createDialogValue } = this.state;

    const { repo, name } = this.props;

    return (
      <React.Fragment>
        <Autocomplete
          id={repo + "-module-select"}
          value={value}
          sx={{ width: 280 }}
          options={options}
          autoHighlight
          onChange={(_event, newValue: any) => {
            if (typeof newValue === "string") {
              setTimeout(() => {
                this.setState({
                  openDialog: true,
                  createDialogValue: {
                    name: newValue,
                    url: null,
                    folder: null,
                  },
                });
              });
            } else if (newValue && newValue.inputValue) {
              this.setState({
                openDialog: true,
                createDialogValue: {
                  name: newValue.inputValue,
                  url: null,
                  folder: null,
                },
              });
            } else {
              this.onValueUpdated(newValue);
            }
          }}
          filterOptions={(options, params: any) => {
            const filtered = filter(options, params);
            if (params.inputValue !== "" && -1 === options.findIndex((e) => e.name === params.inputValue)) {
              filtered.push({
                inputValue: params.inputValue,
                title: `Create "${params.inputValue}"`,
              });
            }
            return filtered;
          }}
          getOptionLabel={(option) => {
            if (typeof option === "string") {
              return option;
            }
            if (option.title) {
              return option.title;
            }
            return option.name;
          }}
          renderOption={(props, option) => {
            const labelName = option && option.title ? option.title : option.name;
            return (
              <Box component="li" {...props}>
                {labelName}
              </Box>
            );
          }}
          selectOnFocus
          clearOnBlur
          renderInput={(params) => (
            <TextField
              {...params}
              label={name}
              inputProps={{
                ...params.inputProps,
                autoComplete: "new-password", // disable autocomplete and autofill
              }}
            />
          )}
        />
        <Dialog open={openDialog} onClose={this.handleDialogClose}>
          <Box component="form" onSubmit={this.handleDialogSubmit}>
            <DialogTitle>{"Create module in Azure CLI" + repo === "Extension" ? " Extension" : ""}</DialogTitle>
            <DialogContent>
              <TextField
                autoFocus
                margin="normal"
                id="name"
                required
                value={createDialogValue.name}
                onChange={(event: any) => {
                  this.setState({
                    createDialogValue: {
                      ...createDialogValue,
                      name: event.target.value,
                    },
                  });
                }}
                label="Module Name"
                type="text"
                variant="standard"
              />
            </DialogContent>
            <DialogActions>
              <Button onClick={this.handleDialogClose}>Cancel</Button>
              <Button type="submit" color="success">
                Create
              </Button>
            </DialogActions>
          </Box>
        </Dialog>
      </React.Fragment>
    );
  }