acklen-keystone/admin/client/App/screens/List/components/ListControl.js

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

import React from 'react';
import classnames from 'classnames';

var ListControl = React.createClass({
	propTypes: {
		dragSource: React.PropTypes.func,
		onClick: React.PropTypes.func,
		type: React.PropTypes.oneOf(['check', 'delete', 'sortable']).isRequired,
	},
	renderControl () {
		var icon = 'octicon octicon-';
		var className = classnames('ItemList__control ItemList__control--' + this.props.type, {
			'is-active': this.props.active,
		});
		var tabindex = this.props.type === 'sortable' ? -1 : null;

		if (this.props.type === 'check') {
			icon += 'check';
		}
		if (this.props.type === 'delete') {
			icon += 'trashcan';
		}
		if (this.props.type === 'sortable') {
			icon += 'three-bars';
		}

		var renderButton = (
			<button type="button" onClick={this.props.onClick} className={className} tabIndex={tabindex}>
				<span className={icon} />
			</button>
		);

		var notRenderButton = (
			<div />
		);

		if (this.props.dragSource) {
			if (this.props.type === 'delete') {
				return this.props.dragSource(notRenderButton);
			} else {
				return this.props.dragSource(renderButton);
			}
		} else {
			if (this.props.type === 'delete') {
				return notRenderButton;
			} else {
				return renderButton;
			}
		}
	},
	render () {
		var className = 'ItemList__col--control ItemList__col--' + this.props.type;

		return (
			<td className={className}>
				{this.renderControl()}
			</td>
		);
	},
});

module.exports = ListControl;