render()

in packages/sanddance-explorer/src/dialogs/search.tsx [235:326]
92 lines of code
6 McCabe index (conditional complexity)

        render() {
            return (
                <Group
                    className="sanddance-search"
                    label={strings.labelSearch}
                >
                    <div>
                        {this.state.groups.map((group, groupIndex) => (
                            <div
                                className="sanddance-search-group"
                                key={group.key}
                            >
                                <Dropdown
                                    collapseLabel={this.props.collapseLabels}
                                    className="search-group-clause"
                                    label={strings.labelSearchClause}
                                    disabled={groupIndex === 0 || this.props.disableGroupOR}
                                    dropdownWidth={120}
                                    options={getGroupClauses(group.clause, groupIndex, this.props.disableGroupOR)}
                                    onChange={(e, o) => this.updateGroup({ clause: (o.data as SearchExpressionClause) }, groupIndex)}
                                />
                                <div>
                                    {group.expressions.map((ex, i) => (
                                        <div
                                            className="sanddance-search-expression"
                                            key={ex.key}
                                        >
                                            <SearchTerm
                                                collapseLabels={this.props.collapseLabels}
                                                onUpdateExpression={(ex, i) => this.updateExpression(ex, groupIndex, i)}
                                                autoCompleteDistinctValues={this.props.autoCompleteDistinctValues}
                                                index={i}
                                                columns={this.state.sortedColumns}
                                                data={this.props.data}
                                                searchExpression={ex}
                                                disableOR={this.props.disableExpressionOR}
                                                column={getColumnWithName(ex.name, this.state.sortedColumns)}
                                            />
                                            {group.expressions.length > 1 && (
                                                <Button
                                                    themePalette={this.props.themePalette}
                                                    className="search-action"
                                                    iconName="Cancel"
                                                    onClick={() => this.deleteExpression(groupIndex, i)}
                                                    text={strings.buttonDeleteExpression}
                                                />
                                            )}
                                        </div>
                                    ))}
                                </div>
                                {group.expressions.length < maxClauses && (
                                    <div>
                                        <Button
                                            themePalette={this.props.themePalette}
                                            className="search-action"
                                            iconName="Add"
                                            onClick={() => this.addExpression(groupIndex)}
                                            text={strings.buttonAddExpression}
                                        />
                                    </div>
                                )}
                                {this.state.groups.length > 1 && (
                                    <Button
                                        themePalette={this.props.themePalette}
                                        className="search-action"
                                        iconName="Cancel"
                                        onClick={() => this.deleteGroup(groupIndex)}
                                        text={strings.buttonDeleteExpressionGroup}
                                    />
                                )}
                            </div>
                        ))}
                        {this.state.groups.length < maxClauses && (
                            <div>
                                <Button
                                    themePalette={this.props.themePalette}
                                    className="search-action search-bottom-action"
                                    iconName="Add"
                                    onClick={() => this.addGroup()}
                                    text={strings.buttonAddExpressionGroup}
                                />
                            </div>
                        )}
                    </div>
                    <base.fluentUI.PrimaryButton
                        className="search-action search-bottom-action"
                        text={strings.buttonSelect}
                        onClick={() => this.validateAndSearch()}
                    />
                </Group>
            );
        }