gurubot2/src/components/CrudDocument/index.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import CrudField from 'components/CrudField';

import './style.scss';

export default class CrudDocument extends Component {
    static propTypes = {
        id: PropTypes.string.isRequired,
        pending: PropTypes.bool,
        fields: PropTypes.object.isRequired,
        docFields: PropTypes.object.isRequired,
        onUpdate: PropTypes.func.isRequired,
        onDelete: PropTypes.func.isRequired
    };

    constructor(props) {
        super(props);

        this.state = {
            editing: false
        };
    }

    onEditStart = () => {
        this.setState({ editing: true });
    };

    onEditEnd = (key, value) => {
        this.setState({ editing: false });

        this.props.onUpdate(this.props.id, { [key]: value });
    };

    onDelete = () => {
        this.props.onDelete(this.props.id);
    };

    render() {
        const {
            pending,
            fields,
            docFields
        } = this.props;

        const fieldsList = Object.keys(fields).map(key => (
            <CrudField key={key}
                field={key}
                pending={pending}
                type={docFields[key].type}
                value={fields[key]}
                onEditStart={this.onEditStart}
                onEditEnd={this.onEditEnd}
            />
        ));

        const className = classNames('crud-document-wrapper', {
            pending
        });

        return (
            <div className={className}>
                <div className="fields-list">
                    {fieldsList}
                </div>
                <div className="meta">
                    <button className="button-delete"
                        onClick={this.onDelete}
                        disabled={pending}>
                        {'Delete'}
                    </button>
                </div>
            </div>
        );
    }
}