1
0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 09:35:10 +01:00
onion/js/components/ascribe_panel/action_panel.js
2015-08-10 09:22:39 +02:00

58 lines
1.5 KiB
JavaScript

'use strict';
import React from 'react';
import classnames from 'classnames';
let ActionPanel = React.createClass({
propTypes: {
title: React.PropTypes.string,
content: React.PropTypes.string,
buttons: React.PropTypes.element,
onClick: React.PropTypes.func,
ignoreFocus: React.PropTypes.bool
},
getInitialState() {
return {
isFocused: false
};
},
handleFocus() {
// if ignoreFocus (bool) is defined, then just ignore focusing on
// the property and input
if(this.props.ignoreFocus) {
return;
}
// if onClick is defined from the outside,
// just call it
if(this.props.onClick) {
this.props.onClick();
}
this.refs.input.getDOMNode().focus();
this.setState({
isFocused: true
});
},
render() {
return (
<div className={classnames('ascribe-panel-wrapper', {'is-focused': this.state.isFocused})}>
<div className="ascribe-panel-table">
<div className="ascribe-panel-content">
{this.props.content}
</div>
</div>
<div className="ascribe-panel-table">
<div className="ascribe-panel-content">
{this.props.buttons}
</div>
</div>
</div>
);
}
});
export default ActionPanel;