nest-parrot
Version:
Parrot built on react
645 lines (636 loc) • 26.3 kB
JSX
(function (context, $) {
var $demo = $pt.getService(context, '$demo');
var painter = function () {
var cell = [
{
id: 'layout-cell-component',
title: 'Component',
desc: 'Cell has options to describe the inner component.',
children: [
{
id: 'layout-cell-getComponentOption',
title: '#getComponentOption',
pattern: '#getComponentOption(key, defaultValue) : *',
desc: <span>Get component option by given key.<br/>
eg. Definition as <code>{"{comp: {'option-a': some-value}}"}</code>,<br/>
call <code>cell.getComponentOption('option-a');</code>, returns <code>some-value</code>.<br/>
Returns <code>defaultValue</code> if given option key is not defined or null.<br/>
Returns whole <code>comp</code> JSON if no parameter passed.</span>
}, {
id: 'layout-cell-getComponentType',
title: '#getComponentType',
pattern: '#getComponentType() : JSON',
desc: <span>Get componen type of cell.<br/>
eg. Definition as <code>{"{comp: {type: 'text'}}"}</code>,<br/>
call <code>cell.getComponentType();</code>, returns <code>{"{type: 'text', popover: true, label: true}"}</code>.<br/>
<code>popover: true</code> and <code>label: true</code> will be appended if definition is string type.
Or define as JSON, then returns JSON directly.<br/>
Returns <code>{"{type: $pt.ComponentConstants.Text, popover: true, label: true}"}</code> if no type defined.</span>
}, {
id: 'layout-cell-getId',
title: '#getId',
pattern: '#getId() : string',
desc: <span>Get id of cell. The parameter id in constructor.</span>
}, {
id: 'layout-cell-getLabel',
title: '#getLabel',
pattern: '#getLabel() : string',
desc: <span>Get label of cell.<br/>
eg. Definition as <code>{"{label: 'some-label'}"}</code>,<br/>
call <code>cell.getLabel();</code>, returns <code>some-label</code>.</span>
}
]
}, {
id: 'layout-cell-data',
title: 'Data',
desc: 'Cell has options to describe how to bind with data model.',
children: [
{
id: 'layout-cell-getDataId',
title: '#getDataId',
pattern: '#getDataId() : string',
desc: <span>Get data id of cell.<br/>
eg. Definition as <code>{"{dataId: some-id}"}</code>,<br/>
call <code>cell.getDataId();</code>, returns <code>some-id</code>.<br/>
Returns <code>id</code> if no data id defined in cell.</span>
}
]
}, {
id: 'layout-cell-position',
title: 'Position',
desc: 'Cell has a position to render it in its parent.',
children: [
{
id: 'layout-cell-getCard',
title: '#getCard',
pattern: '#getCard() : string',
desc: <span>Get card id of cell.<br/>
eg. Definition as <code>{"{pos: {card: 'your-card-id'}}"}</code>,<br/>
call <code>cell.getCard();</code>, returns <code>your-card-id</code>.<br/>
Returns <code>CardLayout.DEFAULT_KEY</code> if no card defined in cell.</span>
}, {
id: 'layout-cell-getColumnIndex',
title: '#getColumnIndex',
pattern: '#getColumnIndex() : number',
desc: <span>Get column index of cell.<br/>
eg. Definition as <code>{"{pos: {col: column-index}}"}</code>,<br/>
call <code>cell.getColumnIndex();</code>, returns <code>column-index</code>.<br/>
Returns <code>CellLayout.DEFAULT_COLUMN</code> if no column index defined in cell.</span>
}, {
id: 'layout-cell-getRowIndex',
title: '#getRowIndex',
pattern: '#getRowIndex() : number',
desc: <span>Get row index of cell.<br/>
eg. Definition as <code>{"{pos: {row: row-index}}"}</code>,<br/>
call <code>cell.getRowIndex();</code>, returns <code>row-index</code>.<br/>
Returns <code>CellLayout.DEFAULT_ROW</code> if no row index defined in cell.</span>
}, {
id: 'layout-cell-getSection',
title: '#getSection',
pattern: '#getSection() : string',
desc: <span>Get section id of cell.<br/>
eg. Definition as <code>{"{pos: {section: 'your-section-id'}}"}</code>,<br/>
call <code>cell.getSection();</code>, returns <code>your-section-id</code>.<br/>
Returns <code>SectionLayout.DEFAULT_KEY</code> if no section defined in cell.</span>
}, {
id: 'layout-cell-getWidth',
title: '#getWidth',
pattern: '#getWidth() : number',
desc: <span>Get wdith of cell.<br/>
eg. Definition as <code>{"{pos: {width: some-width}}"}</code>,<br/>
call <code>cell.getWidth();</code>, returns <code>some-width</code>.<br/>
Returns <code>CellLayout.DEFAULT_WIDTH</code> if no width defined in cell.</span>
}
]
}, {
id: 'layout-cell-css',
title: 'Style',
desc: 'Cell has its additional CSS styles.',
children: [
{
id: 'layout-cell-getAdditionalCSS',
title: '#getAdditionalCSS',
pattern: '#getAdditionalCSS(key: string, originalCSS: string) : string',
desc: <span>Get additional CSS class.<br/>
eg. Definition as <code>{"{css: {line: 'your-class-name'}}"}</code>,<br/>
call <code>cell.getAdditionalCSS('line');</code>, returns <code>your-class-name</code>,<br/>
or call <code>cell.getAdditionalCSS('line', 'org-class-name');</code>, returns <code>your-class-name
org-class-name</code>.</span>
}, {
id: 'layout-cell-getCellCSS',
title: '#getCellCSS',
pattern: '#getCellCSS(originalCSS) : string',
desc: <span>Shortcut to get CSS class of <code>cell</code>.<br/>
eg. Definition as <code>{"{css: {cell: 'your-class-name'}}"}</code>,<br/>
see <code>#getAdditionalCSS</code>.</span>
}, {
id: 'layout-cell-getComponentCSS',
title: '#getComponentCSS',
pattern: '#getComponentCSS(originalCSS) : string',
desc: <span>Shortcut to get CSS class of <code>comp</code>.<br/>
eg. Definition as <code>{"{css: {comp: 'your-class-name'}}"}</code>,<br/>
see <code>#getAdditionalCSS</code>.</span>
}, {
id: 'layout-cell-getLabelCSS',
title: '#getLabelCSS',
pattern: '#getLabelCSS(originalCSS) : string',
desc: <span>Shortcut to get CSS class of <code>label</code>.<br/>
eg. Definition as <code>{"{css: {label: 'your-class-name'}}"}</code>,<br/>
see <code>#getAdditionalCSS</code>.</span>
}, , {
id: 'layout-cell-isAdditionalCSSDefined',
title: '#isAdditionalCSSDefined',
pattern: '#isAdditionalCSSDefined(key: string) : boolean',
desc: <span>Check if there is additional CSS defined for given key. Or check any additional CSS defined if no key passed.</span>
}
]
}, {
id: 'layout-cell-event',
title: 'Event',
desc: 'Cell has its event monitors.',
children: [
{
id: 'layout-cell-getEventMonitor',
title: '#getEventMonitor',
pattern: '#getEventMonitor(key) : function|JSON',
desc: <span>Get event mointor of cell.<br/>
eg. Definition as <code>{"{evt: {keyUp: function() {}}}"}</code>,<br/>
call <code>cell.getEventMonitor('keyUp');</code>, returns function.<br/>
Returns whole event JSON if no key passed.</span>
}
]
}, {
id: 'layout-cell-constants',
title: 'Constants',
desc: <span><code>
CellLayout.DEFAULT_ROW = 9999;<br/>
CellLayout.DEFAULT_COLUMN = 9999;<br/>
CellLayout.DEFAULT_WIDTH = 3;<br/>
</code></span>
}
];
var row = [
{
id: 'layout-row-addCell',
title: '#addCell',
pattern: '#addCell(cell: CellLayout) : RowLayout',
desc: <span>Add cell into row. Returns row layout itself.</span>
}, {
id: 'layout-row-getCells',
title: '#getCells',
pattern: '#getCells() : CellLayout[]',
desc: <span>Get all cells, sorted.</span>
}, {
id: 'layout-row-getRowIndex',
title: '#getRowIndex',
pattern: '#getRowIndex() : number',
desc: <span>Get row index.</span>
}
];
var section = [
{
id: 'layout-section-section',
title: 'Section',
desc: 'Section has options to describe itself.',
children: [
{
id: 'layout-section-getId',
title: '#getId',
pattern: '#getId() : string',
desc: <span>Get id of section. The parameter id in constructor.</span>
}, {
id: 'layout-section-getLabel',
title: '#getLabel',
pattern: '#getLabel() : string',
desc: <span>Get label of section title.<br/>
eg. Definition as <code>{"{label: 'some-label'}"}</code>,<br/>
call <code>section.getLabel();</code>, returns <code>some-label</code>.</span>
}, {
id: 'layout-section-getParentCard',
title: '#getParentCard',
pattern: '#getParentCard() : CardLayout',
desc: <span>Get parent card layout. section always in a card.</span>
}, {
id: 'layout-section-getVisible',
title: '#getVisible',
pattern: '#getVisible() : boolean|JSON',
desc: <span>Get visible defition of section. see Form Cell for more information.</span>
}
]
}, {
id: 'layout-section-cells',
title: 'Cell',
desc: 'Section contains a set of cells.',
children: [
{
id: 'layout-section-addCell',
title: '#addCell',
pattern: '#addCell(cell: CellLayout) : SectionLayout',
desc: <span>Add cell into section. Returns section layout itself.<br/>
Section will use the row index of cell to put cell into row, or create a RowLayout if not found.</span>
}, {
id: 'layout-section-getCell',
title: '#getCell',
pattern: '#getCell(id: string) : CellLayout',
desc: <span>Get cell by given id.</span>
}, {
id: 'layout-section-getCells',
title: '#getCells',
pattern: '#getCells() : JSON',
desc: <span>Get all cells.</span>
}, {
id: 'layout-section-getRows',
title: '#getRows',
pattern: '#getRows() : RowLayout[]',
desc: <span>Get all rows. Sorted.</span>
}, {
id: 'layout-section-hasCell',
title: '#hasCell',
pattern: '#hasCell() : boolean',
desc: <span>Check there is cell or not in current section.</span>
}
]
}, {
id: 'layout-section-checkInTitle',
title: 'Check Box in Title',
desc: 'Section allows an additional check box in title, see Form Panel for more explaination.',
children: [
{
id: 'layout-section-getCheckInTitleCollapsible',
title: '#getCheckInTitleCollapsible',
pattern: '#getCheckInTitleCollapsible() : string',
desc: <span>Get the check box in section title is related to collapsible or not, and its relation mode.
eg. Definition as <code>{"{checkInTitle: {collapsible: 'your-mode'}}"}</code></span>
}, {
id: 'layout-section-getCheckInTitleDataId',
title: '#getCheckInTitleDataId',
pattern: '#getCheckInTitleDataId() : string',
desc: <span>Get data id of the check box in section title.
eg. Definition as <code>{"{checkInTitle: {data: 'data-id'}}"}</code></span>
}, {
id: 'layout-section-getCheckInTitleLabel',
title: '#getCheckInTitleLabel',
pattern: '#getCheckInTitleLabel() : string',
desc: <span>Get label of the check box in section title.
eg. Definition as <code>{"{checkInTitle: {label: 'some-label'}}"}</code></span>
}, {
id: 'layout-section-getCheckInTitleOption',
title: '#getCheckInTitleOption',
pattern: '#getCheckInTitleOption() : JSON',
desc: <span>Get other options of the check box in section title.
eg. Definition as <code>{"{checkInTitle: {collapsible: 'your-mode', data: 'data-id', 'other-option': 'other-value'}}"}</code>, <br/>
call this method, return a JSON which already removed <code>collapsible</code>, <code>data</code> and <code>label</code>, other properties are kept.</span>
}, {
id: 'layout-section-getCheckInTitleValue',
title: '#getCheckInTitleValue',
pattern: '#getCheckInTitleValue() : string',
desc: <span>Get value of the check box in section title by data id defined.</span>
}, {
id: 'layout-section-hasCheckInTitle',
title: '#hasCheckInTitle',
pattern: '#hasCheckInTitle() : boolean',
desc: <span>Check there is check box in section title or not.</span>
}
]
}, {
id: 'layout-section-style',
title: 'Style',
desc: 'Style and CSS of section, see Form Panel for more explaination.',
children: [
{
id: 'layout-section-getCollapsedLabel',
title: '#getCollapsedLabel',
pattern: '#getCollapsedLabel() : boolean',
desc: <span>Get label when section is collapsed in section title.
eg. Definition as <code>{"{collapsedLabel: something}"}</code></span>
}, {
id: 'layout-section-getExpandedLabel',
title: '#getExpandedLabel',
pattern: '#getExpandedLabel() : boolean',
desc: <span>Get label when section is expanded in section title.
eg. Definition as <code>{"{getExpandedLabel: something}"}</code></span>
}, {
id: 'layout-section-getStyle',
title: '#getStyle',
pattern: '#getStyle() : boolean',
desc: <span>Get style of section.
eg. Definition as <code>{"{style: 'some-style'}"}</code></span>
}, {
id: 'layout-section-isCollapsible',
title: '#isCollapsible',
pattern: '#isCollapsible() : boolean',
desc: <span>Check the section is collapsible or not.
eg. Definition as <code>{"{isCollapsible: boolean}"}</code></span>
}, {
id: 'layout-section-isExpanded',
title: '#isExpanded',
pattern: '#isExpanded() : boolean',
desc: <span>Check the section is initial expanded or not.
eg. Definition as <code>{"{isExpanded: boolean}"}</code></span>
}
]
}, {
id: 'layout-section-position',
title: 'Position',
desc: 'Section also can be a cell in its parent.',
children: [
{
id: 'layout-section-getColumnIndex',
title: '#getColumnIndex',
pattern: '#getColumnIndex() : number',
desc: <span>Get column index of section.
eg. Definition as <code>{"{col: column-index}"}</code>, <br/>
call <code>section.getColumnIndex();</code>, returns <code>column-index</code>.<br/>
Returns <code>SectionLayout.DEFAULT_COLUMN_INDEX</code> if no column index defined in section.</span>
}, {
id: 'layout-section-getRowIndex',
title: '#getRowIndex',
pattern: '#getRowIndex() : number',
desc: <span>Get row index of section.
eg. Definition as <code>{"{row: row-index}"}</code>, <br/>
call <code>section.getRowIndex();</code>, returns <code>row-index</code>.<br/>
Returns <code>SectionLayout.DEFAULT_ROW_INDEX</code> if no row index defined in section.</span>
}, {
id: 'layout-section-getWidth',
title: '#getWidth',
pattern: '#getWidth() : number',
desc: <span>Get width of section.
eg. Definition as <code>{"{width: some-width}"}</code>, <br/>
call <code>section.getWidth();</code>, returns <code>some-width</code>.<br/>
Returns <code>SectionLayout.DEFAULT_WIDTH</code> if no width defined in section.</span>
}
]
}, {
id: 'layout-section-constants',
title: 'Constants',
desc: <span><code>
SectionLayout.DEFAULT_ROW_INDEX = 9999;<br/>
SectionLayout.DEFAULT_COLUMN_INDEX = 9999;<br/>
SectionLayout.DEFAULT_WIDTH = 12;<br/>
SectionLayout.DEFAULT_KEY = '_defaultSection';<br/>
</code></span>
}
];
var card = [
{
id: 'layout-card-card',
title: 'Card',
desc: 'Card has options to describe itself. see Form Tab and Form Button for more information.',
children: [
{
id: 'layout-card-getBadgeId',
title: '#getBadgeId',
pattern: '#getBadgeId() : string',
desc: <span>Get badge id of card.
eg. Definition as <code>{"{badge: 'badge-id'}"}</code>.</span>
}, {
id: 'layout-card-getBadgeRender',
title: '#getBadgeRender',
pattern: '#getBadgeRender() : string',
desc: <span>Get badge renderer of card.
eg. Definition as <code>{"{badgeRender: function}"}</code>.</span>
}, {
id: 'layout-card-getFinishButton',
title: '#getFinishButton',
pattern: '#getFinishButton() : JSON',
desc: <span>Get finish button of card.
eg. Definition as <code>{"{finishButton: a-button}"}</code>.</span>
}, {
id: 'layout-card-getIcon',
title: '#getIcon',
pattern: '#getIcon() : string',
desc: <span>Get icon of card.
eg. Definition as <code>{"{icon: 'icon-name'}"}</code>.</span>
}, {
id: 'layout-card-getId',
title: '#getId',
pattern: '#getId() : string',
desc: <span>Get id of card. The parameter id in constructor.</span>
}, {
id: 'layout-card-getIndex',
title: '#getIndex',
pattern: '#getIndex() : string',
desc: <span>Get index of card.
eg. Definition as <code>{"{index: some-index}"}</code>.<br/>
Index is the card order of a set of cards. Returns <code>CardLayout.DEFAULT_CARD_INDEX</code> if not defined.</span>
}, {
id: 'layout-card-getLabel',
title: '#getLabel',
pattern: '#getLabel() : string',
desc: <span>Get label of card title.
eg. Definition as <code>{"{label: 'some-label'}"}</code>.</span>
}, {
id: 'layout-card-getLeftButtons',
title: '#getLeftButtons',
pattern: '#getLeftButtons() : JSON|JSON[]',
desc: <span>Get left buttons of card.
eg. Definition as <code>{"{leftButtons: some-buttons}"}</code>.</span>
}, {
id: 'layout-card-getRightButtons',
title: '#getRightButtons',
pattern: '#getRightButtons() : JSON|JSON[]',
desc: <span>Get right buttons of card.
eg. Definition as <code>{"{rightButtons: some-buttons}"}</code>.</span>
}, {
id: 'layout-card-hasBadge',
title: '#hasBadge',
pattern: '#hasBadge() : boolean',
desc: <span>Check there is badge defined for card or not.</span>
}, {
id: 'layout-card-isActive',
title: '#isActive',
pattern: '#isActive() : boolean',
desc: <span>Check the card is initial active or not.</span>
}, {
id: 'layout-card-isBackable',
title: '#isBackable',
pattern: '#isBackable() : boolean',
desc: <span>Check the card is backable or not. false means can be back via previous button when already forwarded.</span>
}, {
id: 'layout-card-setActive',
title: '#setActive',
pattern: '#setActive(active: boolean) : CardLayout',
desc: <span>Set card as initial active. Returns card layout itself.</span>
}
]
}, {
id: 'layout-card-sections',
title: 'Section',
desc: 'Card contains a set of sections.',
children: [
{
id: 'layout-card-addCell',
title: '#addCell',
pattern: '#addCell(cell: CellLayout) : CardLayout',
desc: <span>Add cell into card. Returns card layout itself.<br/>
Card will use the section of cell to put cell into section, or create a SectionLayout if not found.</span>
}, {
id: 'layout-card-getCell',
title: '#getCell',
pattern: '#getCell(id: string) : CellLayout',
desc: <span>Get cell by given id.</span>
}, {
id: 'layout-card-getCells',
title: '#getCells',
pattern: '#getCells() : JSON',
desc: <span>Get all cells.</span>
}, {
id: 'layout-card-getSections',
title: '#getSections',
pattern: '#getSections() : SectionLayout[]',
desc: <span>Get all setions. Sorted.</span>
}, {
id: 'layout-card-hasCell',
title: '#hasCell',
pattern: '#hasCell() : boolean',
desc: <span>Check there is cell defined for card or not.</span>
}
]
}, {
id: 'layout-card-constants',
title: 'Constants',
desc: <span><code>
CardLayout.DEFAULT_CARD_INDEX = 9999;<br/>
CardLayout.DEFAULT_KEY = '_defaultCard';<br/>
</code></span>
}
];
var form = [
{
id: 'layout-form-getCards',
title: '#getCards',
pattern: '#getCards() : CardLayout[]',
desc: <span>Get all cards. Sorted.</span>
}, {
id: 'layout-form-getCell',
title: '#getCell',
pattern: '#getCell(id: string) : CellLayout',
desc: <span>Get cell by given id.</span>
}, {
id: 'layout-form-getCells',
title: '#getCells',
pattern: '#getCells() : JSON',
desc: <span>Get all cells.</span>
}, {
id: 'layout-form-isCardButtonShown',
title: '#isCardButtonShown',
pattern: '#isCardButtonShown() : boolean',
desc: <span>Check if show card buttons or not. <br/>
eg. Definition as <code>{"{_cardButtonShown: boolean}"}</code>.<br/>
Note it only controls the next and previous button which provided by Form component, the customized buttons always be shown.</span>
}, {
id: 'layout-form-isFreeCard',
title: '#isFreeCard',
pattern: '#isFreeCard() : boolean',
desc: <span>Check if is a free card or not. <br/>
eg. Definition as <code>{"{_freeCard: boolean}"}</code>.<br/>
Cancel the wizard card mode if set to true, default is false.</span>
}
];
var helper = [
{
id: 'layout-helper-classSet',
title: '#classSet',
pattern: '#classSet(JSON|string[]) : string',
desc: <span>Copy from <code>React.addons.classSet</code> since it will be deprecated.<br/>
Transform JSON or string array to CSS class string. For JSON, keys which has true value will be transformed.</span>
}, {
id: 'layout-helper-setDefaultCellWidth',
title: '#setDefaultCellWidth',
pattern: '#setDefaultCellWidth(width: number) : string',
desc:
<span>Set default cell width. Default is 3, width must be 1 to 12, will not check the parameter.</span>
}, {
id: 'layout-helper-setDefaultSectionWidth',
title: '#setDefaultSectionWidth',
pattern: '#setDefaultSectionWidth(width: number) : string',
desc: <span>Set default section width. Default is 3, width must be 1 to 12, will not check the parameter.</span>
}, {
id: 'layout-helper-registerComponent',
title: '#registerComponent',
pattern: '#registerComponent(id: string, component: *) : LayoutHelper',
desc: <span>Register component to component central. If meet the duplicated <code>id</code>, register into an array.</span>
}, {
id: 'layout-helper-unregisterComponent',
title: '#unregisterComponent',
pattern: '#unregisterComponent(id: string, component: *) : LayoutHelper',
desc: <span>Unregister component from component central. If no <code>component</code> passed, unregister all components with give id.</span>
}, {
id: 'layout-helper-getComponent',
title: '#getComponent',
pattern: '#getComponent(id: string) : ReactComponent|ReactComponent[]',
desc: <span>Get component which was registered in central. Return array or single component.</span>
}, {
id: 'layout-helper-forceUpdate',
title: '#forceUpdate',
pattern: '#forceUpdate(id: string) : LayoutHelper',
desc: <span>Force update component which was registered in central if it has #forceUpdate() method.</span>
}
];
var items = [
{
id: 'layout-cell',
title: 'CellLayout',
pattern: '$pt.createCellLayout(id: string, cell: JSON) : CellLayout',
desc: <span>Create a cell layout by given id and cell definition.</span>,
children: cell
}, {
id: 'layout-row',
title: 'RowLayout',
pattern: '$pt.createCellLayout(rowIndex: number, cells: JSON|JSON[]) : RowLayout',
desc: <span>Create a row layout by given rows index and cells definition. Cells is optional.</span>,
children: row
}, {
id: 'layout-section',
title: 'SectionLayout',
pattern: '$pt.createSectionLayout(section: JSON, id: string, parentCard: CardLayout) : SectionLayout',
desc: <span>Create a section layout by given id, parent card id and section definition.
Cells in section is defined in <code>{'{layout: {}}'}</code> of parameter <code>section</code>.<br/>
Note section always in a card.</span>,
children: section
}, {
id: 'layout-card',
title: 'CardLayout',
pattern: '$pt.createCardLayout(card: JSON, id: string) : CardLayout',
desc: <span>Create a card layout by given id and card definition.
Sections in card is defined in <code>{'{_sections: {}}'}</code> of parameter <code>card</code>.<br/>
Note component cannot be defined in card directly, always under hierarchy Card/Section/Component.</span>,
children: card
}, {
id: 'layout-form',
title: 'FormLayout',
pattern: '$pt.createFormLayout(layout: JSON[, layout: JSON...]) : FormLayout',
desc: <span>Create a form layout by given form definition.
Cards in form is defined in <code>{'{_cards: {}}'}</code> of parameter <code>layout</code>.<br/>
Sections in form is defined in <code>{'{_sections: {}}'}</code> of parameter <code>layout</code>.<br/>
Cells in form is defined in <code>{'{some-key: {}}'}</code> of parameter <code>layout</code>.<br/>
Note:<br/>
1. If <code>_cards</code> defined, <code>_sections</code> will be skipped automatically.<br/>
2. Default card will be created only if no <code>_cards</code> defined.<br/>
3. Default section will be created only if no <code>_sections</code> defined. This rule is for each card.<br/>
4. Cells can be defined in <code>{'{_sections: {some-section-key: {layout: {some-cell-key: {}}}}}'}</code>, or
define in form JSON directly by define <code>{'{pos: {card: some-card-key, section: some-section-key}}'}</code>.
<code>card</code> and <code>section</code> in <code>pos</code> are not required,
if not defined, will be assigned to default card or default section.</span>,
children: form
}, {
id: 'layout-helper',
title: 'Helper',
pattern: '$pt.LayoutHelper',
desc: <span>A set of helper functions.</span>,
children: helper
},
{
id: 'layout-component-constants',
title: 'Component Constants',
desc: <Code
code={$demo.convertJSON({variable: '$pt.ComponentConstants', json: $pt.ComponentConstants})}/>
}
];
return items;
};
var renderer = $pt.getService($demo, 'renderer');
renderer.layout = function () {
React.render(<APIList title='Layout' items={painter()}/>, document.getElementById('main'));
};
}(this, jQuery));