react-zeanium-ui-ui
Version:
Zeanium UI Framework for React.js
101 lines (96 loc) • 2.77 kB
JavaScript
require('./Panel.less');
var React = require('react');
var ReactDOM = require('react-dom');
var Layout = require('../layout/Layout');
var ToolBar = require('./ToolBar');
var Draggable = window.Draggable;
module.exports = React.createClass({
displayName:'Panel',
getInitialState:function(){
return {
}
},
componentDidMount:function(){
if(this.props.draggable){
var _fixedLayout = this.refs['fixed-layout'],
_source, _target;
if(_fixedLayout){
_source = ReactDOM.findDOMNode(_fixedLayout);
_target = ReactDOM.findDOMNode(_fixedLayout.refs['layout-head']);
} else {
_source = ReactDOM.findDOMNode(this);
_target = ReactDOM.findDOMNode(this.refs['drag-target']);
}
Draggable.init(_target, {
source: _source,
start: this.props.dragStart || [0, 0],
vector: this.props.dragVector || ['left', 'top']
});
}
},
render:function(){
var _hHeight = this.props.hHeight || 35;
var _props = this.props,
_mode = _props.mode || 'fixed',
_children = _props.children;
if(_children&&!_children.length){
_children = [_children];
}
switch (_mode) {
case 'fixed':
return (
<Layout
ref="fixed-layout"
className={this.props.className}
skin={"c-panel " + (this.props.skin||'')}
begin={_hHeight}
end={_props.fHeight}
style={_props.style}
hStyle={_props.hStyle}
bStyle={_props.bStyle}
fStyle={_props.fStyle}
direction="V">
<ToolBar
icon={_props.icon}
title={_props.title}
items={_props.toolbarItems}
onClick={_props.onToolbarClick}
floatDirection={_props.toolbarItemFloatDirection}
height={_hHeight}>
{_children&&_children[0]}
</ToolBar>
{_children&&_children[1]}
{_children&&_children[2]}
</Layout>
);
case 'flow':
var _style = _props.style||{},
_hStyle = _props.hStyle||{},
_fStyle = _props.fStyle||{};
_style.height = 'auto';
_hStyle.height = _hHeight;
_fStyle.height = _props.fHeight;
return (
<div className={"c-panel " + (this.props.skin||'') + ' ' + (this.props.className||'')} style={_style}>
<div className="c-panel-head" ref="drag-target" style={_hStyle} >
<ToolBar
icon={_props.icon}
title={_props.title}
items={_props.toolbarItems}
onClick={_props.onToolbarClick}
floatDirection={_props.toolbarItemFloatDirection}
height={_hHeight}>
{_children&&_children[0]}
</ToolBar>
</div>
<div className="c-panel-body" style={_props.bStyle}>
{_children&&_children[1]}
</div>
<div className="c-panel-foot" style={_fStyle} >
{_children&&_children[2]}
</div>
</div>
);
}
}
});