nest-parrot
Version:
Parrot built on react
268 lines (266 loc) • 8.96 kB
JSX
/**
* Created by brad.wu on 8/16/2015.
*/
(function () {
var model = $pt.createModel({
name: null
});
var button = $pt.createCellLayout('name', {
label: 'Click me',
comp: {
type: $pt.ComponentConstants.Button,
visible: {
depends: 'name',
when: function() {
return this.getModel().get('name') == null;
}
}
},
pos: {row: 1, col: 1}
});
var iconButton = $pt.createCellLayout('name', {
label: 'Click me',
comp: {
type: $pt.ComponentConstants.Button,
icon: 'pencil',
click: function() {
var value = this.getModel().get('name');
this.getModel().set('name', value ? null : 'abc');
}
},
pos: {row: 1, col: 1}
});
var linkIconButton = $pt.createCellLayout('name', {
label: 'Click me',
comp: {
type: $pt.ComponentConstants.Button,
icon: 'pencil',
style: 'link'
},
pos: {row: 1, col: 1}
});
var primaryIconButton = $pt.createCellLayout('name', {
label: 'Click me',
comp: {
type: $pt.ComponentConstants.Button,
icon: 'pencil',
style: 'primary'
},
pos: {row: 1, col: 1}
});
var dangerIconButton = $pt.createCellLayout('name', {
label: 'Click me',
comp: {
type: $pt.ComponentConstants.Button,
icon: 'pencil',
style: 'danger'
},
pos: {row: 1, col: 1}
});
var warnIconButton = $pt.createCellLayout('name', {
label: 'Click me',
comp: {
type: $pt.ComponentConstants.Button,
icon: 'pencil',
style: 'warning'
},
pos: {row: 1, col: 1}
});
var infoIconButton = $pt.createCellLayout('name', {
comp: {
type: $pt.ComponentConstants.Button,
icon: 'pencil',
style: 'info'
},
pos: {row: 1, col: 1}
});
var successIconButton = $pt.createCellLayout('name', {
comp: {
type: $pt.ComponentConstants.Button,
icon: 'pencil',
style: 'success',
more: [
{icon: 'commenting-o', text: 'commenting', click: function(model) {alert('Commenting');}},
{divider: true},
{icon: 'balance-scale', text: 'Balance', click: function(model) {alert('Balance');}}
]
},
pos: {row: 1, col: 1}
});
var successIconButton1 = $pt.createCellLayout('name', {
comp: {
type: $pt.ComponentConstants.Button,
icon: 'pencil',
style: 'success',
click: function() {console.log('success icon button 1');},
more: [
{icon: 'commenting-o', text: 'commenting', click: function(model) {alert('Commenting');}},
{divider: true},
{icon: 'balance-scale', text: 'Balance', click: function(model) {alert('Balance');}}
]
},
pos: {row: 1, col: 1}
});
var disabledButton = $pt.createCellLayout('name', {
label: 'Click me',
comp: {
type: $pt.ComponentConstants.Button,
enabled: {
when: function () {
return false;
},
depends: 'name'
}
},
pos: {row: 1, col: 1}
});
var disabledIconButton = $pt.createCellLayout('name', {
label: 'Click me',
comp: {
type: $pt.ComponentConstants.Button,
enabled: {
when: function () {
return false;
},
depends: 'name'
},
icon: 'pencil'
},
pos: {row: 1, col: 1}
});
var disabledLinkIconButton = $pt.createCellLayout('name', {
label: 'Click me',
comp: {
type: $pt.ComponentConstants.Button,
enabled: {
when: function () {
return false;
},
depends: 'name'
},
icon: 'pencil',
style: 'link'
},
pos: {row: 1, col: 1}
});
var disabledPrimaryIconButton = $pt.createCellLayout('name', {
label: 'Click me',
comp: {
type: $pt.ComponentConstants.Button,
enabled: {
when: function () {
return false;
},
depends: 'name'
},
icon: 'pencil',
style: 'primary'
},
pos: {row: 1, col: 1}
});
var disabledDangerIconButton = $pt.createCellLayout('name', {
label: 'Click me',
comp: {
type: $pt.ComponentConstants.Button,
enabled: {
when: function () {
return false;
},
depends: 'name'
},
icon: 'pencil',
style: 'danger'
},
pos: {row: 1, col: 1}
});
var disabledWarnIconButton = $pt.createCellLayout('name', {
label: 'Click me',
comp: {
type: $pt.ComponentConstants.Button,
enabled: {
when: function () {
return false;
},
depends: 'name'
},
icon: 'pencil',
style: 'warning'
},
pos: {row: 1, col: 1}
});
var disabledInfoIconButton = $pt.createCellLayout('name', {
comp: {
type: $pt.ComponentConstants.Button,
enabled: {
when: function () {
return false;
},
depends: 'name'
},
icon: 'pencil',
style: 'info'
},
pos: {row: 1, col: 1}
});
var disabledSuccessIconButton = $pt.createCellLayout('name', {
comp: {
type: $pt.ComponentConstants.Button,
enabled: {
when: function () {
return false;
},
depends: 'name'
},
icon: 'pencil',
style: 'success',
more: [
{icon: 'commenting-o', text: 'commenting', click: function(model) {alert('Commenting');}},
{divider: true},
{icon: 'balance-scale', text: 'Balance', click: function(model) {alert('Balance');}}
]
},
pos: {row: 1, col: 1}
});
var panel = (<div className='row'>
<div className='col-md-3 col-lg-3 col-sm-3'>
<span>Button</span>
<NFormButton model={model} layout={button}/>
<span>Icon Button</span>
<NFormButton model={model} layout={iconButton}/>
<span>Link Icon Button</span>
<NFormButton model={model} layout={linkIconButton}/>
<span>Primary Icon Button</span>
<NFormButton model={model} layout={primaryIconButton}/>
<span>Danger Icon Button</span>
<NFormButton model={model} layout={dangerIconButton}/>
<span>Warning Icon Button</span>
<NFormButton model={model} layout={warnIconButton}/>
<span>Info Icon Button</span>
<NFormButton model={model} layout={infoIconButton}/>
<span>Success Icon Button</span>
<NFormButton model={model} layout={successIconButton}/>
<span>Success Icon Button 1</span>
<NFormButton model={model} layout={successIconButton1}/>
</div>
<div className='col-md-3 col-lg-3 col-sm-3'>
<span>Disabled Button</span>
<NFormButton model={model} layout={disabledButton}/>
<span>Disabled Icon Button</span>
<NFormButton model={model} layout={disabledIconButton}/>
<span>Disabled Link Icon Button</span>
<NFormButton model={model} layout={disabledLinkIconButton}/>
<span>Disabled Primary Icon Button</span>
<NFormButton model={model} layout={disabledPrimaryIconButton}/>
<span>Disabled Danger Icon Button</span>
<NFormButton model={model} layout={disabledDangerIconButton}/>
<span>Disabled Warning Icon Button</span>
<NFormButton model={model} layout={disabledWarnIconButton}/>
<span>Disabled Info Icon Button</span>
<NFormButton model={model} layout={disabledInfoIconButton}/>
<span>Disabled Success Icon Button</span>
<NFormButton model={model} layout={disabledSuccessIconButton}/>
</div>
<NFormCell model={model} layout={button}/>
</div>);
ReactDOM.render(panel, document.getElementById('main'));
})();