nest-parrot
Version:
Parrot built on react
366 lines (361 loc) • 9.44 kB
JSX
(function (context, $) {
var $demo = $pt.getService(context, '$demo');
var painter = function () {
var modelTemplate = {};
var model = $pt.createModel(modelTemplate);
var modelCode = $demo.convertModelCreatorToString({
variable: 'model',
template: modelTemplate
});
var compCode = $demo.convertComponentCreatorToString({
tag: 'NPanel',
model: 'model',
layout: 'layout'
});
var check = {
normal: function () {
var layoutTemplate = {
label: 'Panel Title',
comp: {
checkInTitle: {
data: 'enabled'
},
editLayout: {
name: {
label: 'Name'
}
}
}
};
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'panel',
template: layoutTemplate
});
return {
id: 'form-panel-check-normal',
title: 'In Title',
desc: ['Panel with a check box in title.'],
xml: [{
width: 12,
xml: <NPanel model={model} layout={$pt.createCellLayout('panel', layoutTemplate)}/>
}],
code: [modelCode, layoutCode, compCode],
index: 10
};
},
label: function () {
var layoutTemplate = {
label: 'Panel Title',
comp: {
checkInTitle: {
data: 'enabled',
label: 'Need Confirm?'
},
editLayout: {
name: {
label: 'Name'
}
}
}
};
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'panel',
template: layoutTemplate
});
return {
id: 'form-panel-check-label',
title: 'Label',
desc: ['A check box with label in title.'],
xml: [{
width: 12,
xml: <NPanel model={model} layout={$pt.createCellLayout('panel', layoutTemplate)}/>
}],
code: [modelCode, layoutCode, compCode],
index: 20
};
},
collapsible: function () {
var layoutTemplate = {
label: 'Panel Title',
comp: {
checkInTitle: {
data: 'enabled',
label: 'Need Confirm?',
collapsible: 'same'
},
editLayout: {
name: {
label: 'Name'
}
}
}
};
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'panel',
template: layoutTemplate
});
return {
id: 'form-panel-check-collapsible',
title: 'Collapsible',
desc: [<span>Check box control the collapsible.
<code>same</code> means when the check box value is true, expand the panel.
Or set as <code>reverse</code> to exchange. Can be used with or with no <code>collapsible</code>.</span>],
xml: [{
width: 12,
xml: <NPanel model={model} layout={$pt.createCellLayout('panel', layoutTemplate)}/>
}],
code: [modelCode, layoutCode, compCode],
index: 30
};
}
};
var all = {
defaultOptions: function () {
var layoutTemplate = {
comp: {
editLayout: {
name: {
label: 'Name'
}
}
}
};
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'panel',
template: layoutTemplate
});
return {
id: 'form-panel-default',
title: 'Default',
desc: <span>Panel use <code>editLayout</code> to render its inner content,
<code>editLayout</code> is a JSON to describe the section layout,
using <code>key : cell JSON</code>.</span>,
xml: {
width: 12,
xml: <NPanel model={model} layout={$pt.createCellLayout('panel', layoutTemplate)}/>
},
code: [modelCode, layoutCode, compCode],
index: 10
};
},
title: function () {
var layoutTemplate = {
label: 'Panel Title',
comp: {
editLayout: {
name: {
label: 'Name'
}
}
}
};
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'panel',
template: layoutTemplate
});
var layoutTemplate2 = {
label: 'Any', // to enable the panel title
comp: {
collapsible: true,
collapsedLabel: 'Collapsed',
expandedLabel: 'Expanded',
editLayout: {
name: {
label: 'Name'
}
}
}
};
var layoutCode2 = $demo.convertCellLayoutCreatorToString({
variable: 'layout2',
cellKey: 'panel2',
template: layoutTemplate2
});
var compCode2 = $demo.convertComponentCreatorToString({
tag: 'NPanel',
model: 'model',
layout: 'layout2'
});
var layoutTemplate3 = {
label: 'Any', // to enable the panel title
comp: {
collapsible: true,
collapsedLabel: {
depends: 'name',
when: function (model) {
return 'Collapsed ' + model.get('name');
}
},
expandedLabel: {
depends: 'name',
when: function (model) {
return 'Expanded ' + model.get('name');
}
},
editLayout: {
name: {
label: 'Name'
}
}
}
};
var layoutCode3 = $demo.convertCellLayoutCreatorToString({
variable: 'layout3',
cellKey: 'panel3',
template: layoutTemplate3
});
var compCode3 = $demo.convertComponentCreatorToString({
tag: 'NPanel',
model: 'model',
layout: 'layout3'
});
return {
id: 'form-panel-label',
title: 'Label',
desc: ['Label used as title of panel.',
<span>Or control title by <code>expandedLabel</code> and <code>collapsedLabel</code>.<br/>
Use these features must set something in <code>label</code>, to enable the panel title.<br/>
Use <code>collapsedLabel</code> must true <code>collapsible</code> .</span>,
<span>
<code>expandedLabel</code> and <code>collapsedLabel</code> also can be declared as <code>enabled</code> (see Form Cell),
contains <code>depends</code> and <code>when</code>.
</span>],
xml: [{
width: 12,
xml: <NPanel model={model} layout={$pt.createCellLayout('panel', layoutTemplate)}/>
},
{
width: 12,
xml: <NPanel model={model} layout={$pt.createCellLayout('panel', layoutTemplate2)}/>
},
{
width: 12,
xml: <NPanel model={model} layout={$pt.createCellLayout('panel', layoutTemplate3)}/>
}],
code: [modelCode, layoutCode, layoutCode2, layoutCode3, compCode, compCode2, compCode3],
index: 20
};
},
style: function () {
var layoutTemplate = {
label: 'Panel Title',
comp: {
style: 'success',
editLayout: {
name: {
label: 'Name'
}
}
}
};
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'panel',
template: layoutTemplate
});
return {
id: 'form-panel-style',
title: 'Style',
desc: ['Panel with style.',
<span>Style can be <code>default</code>, <code>primary</code>, <code>success</code>, <code>info</code>, <code>warning</code>, <code>danger</code>.</span>,
'Or any customized style name, refer to Bootstrap panel styles.'],
xml: [{
width: 12,
xml: <NPanel model={model} layout={$pt.createCellLayout('panel', layoutTemplate)}/>
}],
code: [modelCode, layoutCode, compCode],
index: 30
};
},
expand: function () {
var layoutTemplate = {
label: 'Panel Title',
comp: {
collapsible: true,
expanded: false,
editLayout: {
name: {
label: 'Name'
}
}
}
};
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'panel',
template: layoutTemplate
});
return {
id: 'form-panel-expand',
title: 'Expand',
desc: ['Panel with initial expanded.'],
xml: [{
width: 12,
xml: <NPanel model={model} layout={$pt.createCellLayout('panel', layoutTemplate)}/>
}],
code: [modelCode, layoutCode, compCode],
index: 40
};
},
check: function () {
return {
id: 'form-panel-check',
title: 'Check',
desc: 'A check box can be added into panel title.',
index: 50,
children: $demo.convertToExampleList(check)
}
},
headButtons: function() {
var layoutTemplate = {
label: 'Panel Title',
comp: {
editLayout: {
name: {
label: 'Name'
}
},
headerButtons: {icon: 'pencil'}
}
};
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'panel',
template: layoutTemplate
});
return {
id: 'form-panel-header-buttons',
title: 'Header Buttons',
desc: ['Panel with header buttons.', 'Button also can be an array.'],
xml: [{
width: 12,
xml: <NPanel model={model} layout={$pt.createCellLayout('panel', layoutTemplate)}/>
}],
code: [modelCode, layoutCode, compCode],
index: 60
};
},
css: function () {
return $demo.convertCSSJSONToExample({
id: 'form-panel-css',
index: 1000,
css: {
comp: 'your-class-name'
}
});
}
};
return $demo.convertToExampleList(all);
};
var renderer = $pt.getService($demo, 'renderer');
renderer.formPanel = function () {
React.render(<ExampleList title='Form Panel'
formType='$pt.ComponentConstants.Panel'
items={painter()}/>, document.getElementById('main'));
};
}(this, jQuery));