render()

in packages/sanddance-explorer/src/dialogs/snapshots.tsx [58:180]

• 123 lines of code
• 7 McCabe index (conditional complexity)

        render() {
            const items: FluentUITypes.IContextualMenuItem[] = [
                {
                    key: 'clear',
                    text: strings.buttonClearSnapshots,
                    onClick: () => this.setState({
                        confirmation: {
                            buttonText: strings.buttonClearSnapshots,
                            handler: () => this.props.onClearSnapshots()
                        }
                    }),
                    disabled: this.props.snapshots.length === 0
                }
            ];
            if (this.props.getTopActions) {
                items.push.apply(items, this.props.getTopActions(this.props.snapshots));
            }
            return (
                <Group className="sanddance-snapshots" label={strings.labelSnapshots}>
                    <div>
                        <base.fluentUI.PrimaryButton
                            text={strings.buttonCreateSnapshot}
                            onClick={e => this.props.editor.editSnapshot()}
                            split
                            menuProps={{
                                items
                            }}
                        />
                        {this.props.getChildren && this.props.getChildren(this.props.snapshots)}
                        {this.state.confirmation && (
                            <Dialog
                                hidden={false}
                                buttons={(
                                    <base.fluentUI.PrimaryButton
                                        key={0}
                                        onClick={e => {
                                            this.setState({ confirmation: null });
                                            this.state.confirmation.handler();
                                        }}
                                        iconProps={{ iconName: 'Delete' }}
                                        text={this.state.confirmation.buttonText}
                                    />
                                )}
                                onDismiss={() => this.setState({ confirmation: null })}
                            >
                                {strings.labelConfirmation}
                            </Dialog>
                        )}
                        <div>
                            {this.props.snapshots.map((snapshot, i) => {
                                const actions: SnapshotAction[] = this.props.getActions && this.props.getActions(snapshot, i) || [];
                                actions.push(
                                    {
                                        iconButtonProps: {
                                            themePalette: this.props.themePalette,
                                            title: strings.buttonEditSnapshot,
                                            onClick: e => this.props.editor.editSnapshot(snapshot, i),
                                            iconName: 'Edit'
                                        }
                                    }
                                );
                                if (this.props.snapshots.length > 1) {
                                    actions.push(
                                        {
                                            iconButtonProps: {
                                                disabled: i === 0,
                                                themePalette: this.props.themePalette,
                                                title: strings.buttonMoveUp,
                                                onClick: e => this.props.onMoveUp(i),
                                                iconName: 'SortUp'
                                            }
                                        },
                                        {
                                            iconButtonProps: {
                                                disabled: i > this.props.snapshots.length - 2,
                                                themePalette: this.props.themePalette,
                                                title: strings.buttonMoveDown,
                                                onClick: e => this.props.onMoveDown(i),
                                                iconName: 'SortDown'
                                            }
                                        }
                                    );
                                }
                                actions.push(
                                    {
                                        iconButtonProps: {
                                            themePalette: this.props.themePalette,
                                            title: strings.buttonDeleteSnapshot,
                                            onClick: () =>
                                                this.setState({
                                                    confirmation: {
                                                        buttonText: strings.buttonDeleteSnapshot,
                                                        handler: () => this.props.onRemoveSnapshot(i)
                                                    }
                                                }),
                                            iconName: 'Delete'
                                        }
                                    }
                                );
                                return (
                                    <div key={i} className={util.classList('snapshot', i === this.props.selectedSnapshotIndex && 'selected')}>
                                        <div
                                            onClick={e => this.props.onSnapshotClick(snapshot, i)}
                                        >
                                            <div className='title'>
                                                {snapshot.title}
                                            </div>
                                            <div className='thumbnail'>
                                                <img title={snapshot.description} src={snapshot.image} style={{ backgroundColor: snapshot.bgColor }} />
                                            </div>
                                        </div>
                                        <Actions
                                            actions={actions}
                                            snapshot={snapshot}
                                        />
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </Group>
            );
        }