nest-parrot
Version:
Parrot built on react
147 lines (143 loc) • 4.62 kB
JSX
/**
* panel footer which only contains buttons
* depends NFormButton
*/
(function (window, $, React, ReactDOM, $pt) {
var NPanelFooter = React.createClass({
displayName: 'NPanelFooter',
statics: {
RESET_TEXT: "Reset",
RESET_ICON: "reply-all",
RESET_STYLE: "warning",
VALIDATE_TEXT: "Validate",
VALIDATE_ICON: "bug",
VALIDATE_STYLE: "default",
SAVE_TEXT: 'Save',
SAVE_ICON: 'floppy-o',
SAVE_STYLE: 'primary',
CANCEL_TEXT: 'Cancel',
CANCEL_ICON: 'ban',
CANCEL_STYLE: 'danger'
},
// componentWillUpdate: function (nextProps) {
// },
// componentDidUpdate: function (prevProps, prevState) {
// },
// componentDidMount: function () {
// },
// componentWillUnmount: function () {
// },
/**
* render left buttons
*/
renderLeftButtons: function () {
if (this.props.left) {
if (Array.isArray(this.props.left)) {
return this.props.left.map(function(button, buttonIndex) {
return this.renderButton(button, buttonIndex, true)
}.bind(this));
} else {
return this.renderButton(this.props.left, 'left', true);
}
} else {
return null;
}
},
/**
* render right buttons
*/
renderRightButtons: function () {
if (this.props.right) {
if (Array.isArray(this.props.right)) {
return this.props.right.map(function(button, buttonIndex) {
return this.renderButton(button, buttonIndex, false)
}.bind(this));
} else {
return this.renderButton(this.props.right, 'right', false);
}
} else {
return null;
}
},
/**
* render button
*/
renderButton: function (option, buttonIndex, onLeft) {
if (this.isViewMode() && option.view == 'edit') {
return null;
} else if (!this.isViewMode() && option.view == 'view') {
return null;
}
var layout = $.extend(true, {
label: option.text,
comp: {type: $pt.ComponentConstants.Button},
css: {comp: (onLeft ? 'on-left' : 'on-right')}
}, {
comp: option
});
delete layout.comp.label;
var model = this.getModel();
return <$pt.Components.NFormButton model={this.getModel()}
layout={$pt.createCellLayout('pseudo-button', layout)}
key={buttonIndex}/>;
// }
},
/**
* render
* @returns {XML}
*/
render: function () {
return (<div className="row n-panel-footer">
<div className="col-sm-12 col-md-12 col-lg-12">
<div className="btn-toolbar" role='toolbar'>
{this.props.reset ? this.renderButton({
icon: NPanelFooter.RESET_ICON,
text: NPanelFooter.RESET_TEXT,
style: NPanelFooter.RESET_STYLE,
click: this.props.reset.click ? this.props.reset.click : this.props.reset,
enabled: this.props.reset.enabled ? this.props.reset.enabled : true,
visible: this.props.reset.visible ? this.props.reset.visible : true
}, 'reset', true) : null}
{this.props.validate ? this.renderButton({
icon: NPanelFooter.VALIDATE_ICON,
text: NPanelFooter.VALIDATE_TEXT,
style: NPanelFooter.VALIDATE_STYLE,
click: this.props.validate.click ? this.props.validate.click : this.props.validate,
enabled: this.props.validate.enabled ? this.props.validate.enabled : true,
visible: this.props.validate.visible ? this.props.validate.visible : true
}, 'validate', true) : null}
{this.renderLeftButtons()}
{this.props.cancel ? this.renderButton({
icon: NPanelFooter.CANCEL_ICON,
text: NPanelFooter.CANCEL_TEXT,
style: NPanelFooter.CANCEL_STYLE,
click: this.props.cancel.click ? this.props.cancel.click : this.props.cancel,
enabled: this.props.cancel.enabled ? this.props.cancel.enabled : true,
visible: this.props.cancel.visible ? this.props.cancel.visible : true
}, 'cancel', false) : null}
{this.props.save ? this.renderButton({
icon: NPanelFooter.SAVE_ICON,
text: NPanelFooter.SAVE_TEXT,
style: NPanelFooter.SAVE_STYLE,
click: this.props.save.click ? this.props.save.click : this.props.save,
enabled: this.props.save.enabled ? this.props.save.enabled : true,
visible: this.props.save.visible ? this.props.save.visible : true
}, 'save', false) : null}
{this.renderRightButtons()}
</div>
</div>
</div>);
},
/**
* get model
* @returns {ModelInterface}
*/
getModel: function () {
return this.props.model == null ? $pt.createModel({}) : this.props.model;
},
isViewMode: function() {
return this.props.view;
}
});
$pt.Components.NPanelFooter = NPanelFooter;
}(window, jQuery, React, ReactDOM, $pt));