render()

in source/idea/idea-cluster-manager/webapp/src/components/form-builder/form-builder.tsx [399:533]

• 132 lines of code
• 12 McCabe index (conditional complexity)

    render() {
        const editIcon = () => (this.state.edit ? faCheck : faEdit);
        return (
            <Grid gridDefinition={[{ colspan: 1 }, { colspan: 9 }, { colspan: 2 }]}>
                <div style={{ display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", height: "100%" }}>
                    <Icon name="expand" />
                </div>
                {this.state.edit && (
                    <div>
                        {this.state.debugMode && <p>{this.props.id}</p>}
                        <Container variant="default">
                            <IdeaForm
                                ref={this.form}
                                name={this.props.id}
                                showHeader={false}
                                showActions={false}
                                params={this.state.buildParams}
                                columns={2}
                                values={this.props.param}
                                onStateChange={(event) => {
                                    const param = this.build();
                                    this.setState({
                                        param: param,
                                    });
                                }}
                            />

                            {this.state.param.param_type === "select" && (
                                <div>
                                    <Box margin={{ bottom: "xxxs", top: "l" }} color="text-label">
                                        Choices
                                    </Box>
                                    <AttributeEditor
                                        items={this.state.choices}
                                        addButtonText="Add"
                                        removeButtonText="Remove"
                                        onAddButtonClick={() => {
                                            const choices = this.state.choices;
                                            choices.push({});
                                            this.setChoices(choices);
                                        }}
                                        onRemoveButtonClick={(event) => {
                                            const choices = this.state.choices;
                                            choices.splice(event.detail.itemIndex, 1);
                                            this.setChoices(choices);
                                        }}
                                        definition={[
                                            {
                                                label: "Label",
                                                control: (item: SocaUserInputChoice) => (
                                                    <Input
                                                        value={Utils.asString(item.title)}
                                                        onChange={(event) => {
                                                            const choices = this.state.choices;
                                                            choices.forEach((choice) => {
                                                                if (item.value === choice.value) {
                                                                    choice.title = event.detail.value;
                                                                }
                                                            });
                                                            this.setChoices(choices);
                                                        }}
                                                    />
                                                ),
                                            },
                                            {
                                                label: "Value",
                                                control: (item: SocaUserInputChoice) => (
                                                    <Input
                                                        value={Utils.asString(item.value)}
                                                        onChange={(event) => {
                                                            const choices = this.state.choices;
                                                            choices.forEach((choice) => {
                                                                if (item.title === choice.title) {
                                                                    choice.value = event.detail.value;
                                                                }
                                                            });
                                                            this.setChoices(choices);
                                                        }}
                                                    />
                                                ),
                                            },
                                        ]}
                                    />
                                </div>
                            )}

                            <SpaceBetween direction="vertical" size="m">
                                <div>
                                    <h4>Preview</h4>
                                    <div style={{ backgroundColor: "#f1f1f1", boxSizing: "border-box", padding: "20px" }}>{this.state.showPreview && <IdeaFormField ref={this.preview} module={this.props.id} param={this.state.param} />}</div>
                                </div>

                                <Box float="right">
                                    <SpaceBetween size={"xs"} direction="horizontal">
                                        <Button onClick={this.onEdit} variant="primary">
                                            <FontAwesomeIcon icon={editIcon()} /> Save
                                        </Button>
                                    </SpaceBetween>
                                </Box>
                            </SpaceBetween>
                        </Container>
                    </div>
                )}
                {!this.state.edit && (
                    <div>
                        {this.state.debugMode && <p>{this.props.id}</p>}
                        <Container variant="default">
                            <IdeaFormField module={this.props.id} param={this.build()} value={this.state.param.default} />
                        </Container>
                    </div>
                )}
                <SpaceBetween size="xs" direction="vertical">
                    <SpaceBetween size="xxxs" direction="horizontal">
                        {!this.state.edit && (
                            <Button onClick={this.onEdit} variant="normal">
                                <FontAwesomeIcon icon={editIcon()} />
                            </Button>
                        )}
                        {this.state.edit && (
                            <Button onClick={this.onClose} variant="normal">
                                <FontAwesomeIcon icon={faWindowClose} />
                            </Button>
                        )}
                    </SpaceBetween>
                    <Button onClick={this.onCopy} variant="normal">
                        <FontAwesomeIcon icon={faCopy} />
                    </Button>
                    <Button onClick={this.onDelete} variant="normal">
                        <FontAwesomeIcon icon={faTrash} />
                    </Button>
                </SpaceBetween>
            </Grid>
        );
    }
}