application/components/lock-buttons.js

import React from 'react';
import {Row, Col} from './flexbox';
import Chip from 'material-ui/Chip';
import FlatButton from 'material-ui/FlatButton';
import FontIcon from 'material-ui/FontIcon';
import Avatar from 'material-ui/Avatar';
import {deepOrange200, deepOrange800, blue100, blue900} from 'material-ui/styles/colors';

import CurrentUser from './../current-user';

class LockButtons extends React.Component {
    constructor(props) {
        super(props);

    }

    render() {
        const isEditable = this.props.userEditable;
        const isNew = this.props.lockable.uuid ? false : true;

        if (this.props.lockable.lock && this.props.lockable.lock.uuid) {
            // is locked
            if (CurrentUser.getUuid() == this.props.lockable.lock.user.uuid) {
                // to this user
                return (
                    <span>
                        <FlatButton
                            className='action-savecheckin secondary-button'
                            onClick={this.props.onSaveCheckIn}
                            label="Save & Check In"
                            icon={<FontIcon className='mui-icons'>save</FontIcon>}
                            />
                        <FlatButton
                            className='action-save'
                            onClick={this.props.onSave}
                            label="Save"
                            icon={<FontIcon className='mui-icons'>save</FontIcon>}
                            />
                        <FlatButton
                            className='action-checkin'
                            onClick={this.props.onCheckIn}
                            label="Cancel Check-out"
                            icon={<FontIcon className='mui-icons'>clear</FontIcon>}
                            />
                    </span>
                );
            }
            // to another user
            return (
                <div className='lock-indicator'>
                    <FontIcon className="mui-icons">lock_outline</FontIcon>
                    Locked by {this.props.lockable.lock.user.name}
                </div>
            );

        } else {
            // is not locked
            if (isNew) {
                // and is new
                return (
                    <FlatButton
                        className='action-save'
                        onClick={this.props.onSave}
                        label="Save"
                        icon={<FontIcon className='mui-icons'>save</FontIcon>}
                        />
                );
            }

            return (
                <FlatButton
                    className='action-checkout'
                    onClick={this.props.onCheckOut}
                    disabled={isNew ? true : false}
                    label="Check Out"
                    icon={<FontIcon className='mui-icons'>lock_open</FontIcon>}
                    />
            );
        }

    }
}

export default LockButtons;