application/components/content/content-lock.js

import React from 'react';
import {Row, Col} from './../flexbox';
import Immutable from 'immutable';
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 ceoTheme from './../../theme';

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

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

    }

    shouldComponentUpdate(nextProps, nextState) {
        if (!Immutable.is(nextProps.content.get('lock'), this.props.content.get('lock'))) {
            return true;
        }
        if (nextProps.userEditable != this.props.userEditable) {
            return true;
        }

        return false;
    }

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

        if (this.props.content.get('lock') && this.props.content.get('lock').get('uuid')) {
            // is locked
            if (CurrentUser.getUuid() == this.props.content.get('lock').get('user').get('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 (
                <FlatButton
                    className='lock-indicator'
                    label={'Locked by ' + this.props.content.get('lock').get('user').get('name')}
                    icon={<FontIcon className='mui-icons'>lock_outline</FontIcon>}
                    disabled={true}
                    />
            );

        } 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 ContentLock;