mohiit1502/ag-grid-react-example
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

release 5.3.2

Browse Source
This commit is contained in:
ceolter
2016-09-02 16:43:20 +01:00
parent 5a8da199c2
commit 68ba430896
18 changed files with 156 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/ColDefFactory.jsx
View File

@@ -1,67 +0,0 @@
import SkillsCellRenderer from './SkillsCellRenderer.jsx';
import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx';
import RefData from './RefData';
import {reactCellRendererFactory} from 'ag-grid-react';
import {reactFilterFactory} from 'ag-grid-react';
import SkillsFilter from './SkillsFilter.jsx';
import ProficiencyFilter from './ProficiencyFilter.jsx';
export default class ColDefFactory {
createColDefs() {
var columnDefs = [
{headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
suppressMenu: true, pinned: true},
{
headerName: 'Employee',
children: [
{headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
width: 150, pinned: true},
{headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
// not bothering with React for country, as it's a simple HTML string
cellRenderer: countryCellRenderer, pinned: true,
filterParams: {cellRenderer: countryCellRenderer, cellHeight: 20}},
]
},
{
headerName: 'IT Skills',
children: [
{headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
// using ag-Grid's React cellRenderer factory
cellRenderer: reactCellRendererFactory(SkillsCellRenderer),
// using ag-Grid's React filter factory
filter: reactFilterFactory(SkillsFilter)
},
{headerName: "Proficiency", field: "proficiency", filter: 'number', width: 120, enableValue: true,
// using ag-Grid's React cellRenderer factory
cellRenderer: reactCellRendererFactory(ProficiencyCellRenderer),
// using ag-Grid's React filter factory
filter: reactFilterFactory(ProficiencyFilter)}
]
},
{
headerName: 'Contact',
children: [
{headerName: "Mobile", field: "mobile", width: 150, filter: 'text'},
{headerName: "Land-line", field: "landline", width: 150, filter: 'text'},
{headerName: "Address", field: "address", width: 500, filter: 'text'}
]
}
];
return columnDefs;
}
}
// this is a simple cell renderer, putting together static html, no
// need to use React for it.
function countryCellRenderer(params) {
if (params.value) {
var flag = "<img border='0' width='15' height='10' " +
"style='margin-bottom: 2px' src='http://flags.fmcdn.net/data/flags/mini/"
+ RefData.COUNTRY_CODES[params.value] + ".png'>";
return flag + " " + params.value;
} else {
return null;
}
}

34
src/ProficiencyCellRenderer.jsx
View File

@@ -1,34 +0,0 @@
import React from 'react';
import RefData from './RefData';
// cell renderer for the proficiency column. this is a very basic cell renderer,
// it is arguable that we should not of used React and just returned a string of
// html as a normal ag-Grid cellRenderer.
export default class ProficiencyCellRenderer extends React.Component {
render() {
var params = this.props.params;
var backgroundColor;
if (params.value < 20) {
backgroundColor = 'red';
} else if (params.value < 60) {
backgroundColor = '#ff9900';
} else {
backgroundColor = '#00A000';
}
return (
<div className="div-percent-bar" style={{ width: params.value + '%', backgroundColor: backgroundColor }}>
<div className="div-percent-value">{params.value}%</div>
</div>
);
}
}
// the grid will always pass in one props called 'params',
// which is the grid passing you the params for the cellRenderer.
// this piece is optional. the grid will always pass the 'params'
// props, so little need for adding this validation meta-data.
ProficiencyCellRenderer.propTypes = {
params: React.PropTypes.object
};

82
src/ProficiencyFilter.jsx
View File

@@ -1,82 +0,0 @@
import React from 'react';
import RefData from './RefData';
var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
// the proficiency filter component. this demonstrates how to integrate
// a React filter component with ag-Grid.
export default class ProficiencyFilter extends React.Component {
constructor() {
super();
this.state = {
selected: PROFICIENCY_NAMES[0]
};
}
// called by agGrid
init(params) {
this.filterChangedCallback = params.filterChangedCallback;
this.valueGetter = params.valueGetter;
}
// called by agGrid
doesFilterPass(params) {
var value = this.valueGetter(params);
var valueAsNumber = parseFloat(value);
switch (this.state.selected) {
case PROFICIENCY_NAMES[1] : return valueAsNumber >= 40;
case PROFICIENCY_NAMES[2] : return valueAsNumber >= 60;
case PROFICIENCY_NAMES[3] : return valueAsNumber >= 80;
default : return true;
}
};
// called by agGrid
isFilterActive() {
return this.state.selected !== PROFICIENCY_NAMES[0];
};
onButtonPressed(name) {
console.log(name);
this.setState({
selected: name
}, ()=> {
this.filterChangedCallback();
});
console.log(name);
}
render() {
var rows = [];
PROFICIENCY_NAMES.forEach( (name)=> {
var selected = this.state.selected === name;
rows.push(
<div key={name}>
<label style={{paddingLeft: 4}}>
<input type="radio" checked={selected} name={Math.random()} onChange={this.onButtonPressed.bind(this, name)}/>
{name}
</label>
</div>
);
});
return (
<div>
<div style={{textAlign: 'center', background: 'lightgray', width: '100%', display: 'block', borderBottom: '1px solid grey'}}>
<b>Custom Proficiency Filter</b>
</div>
{rows}
</div>
);
}
// these are other method that agGrid calls that we
// could of implemented, but they are optional and
// we have no use for them in this particular filter.
//getApi() {}
//afterGuiAttached(params) {}
//onNewRowsLoaded() {}
//onAnyFilterChanged() {}
}

113
src/RefData.js
View File

@@ -1,113 +0,0 @@
export default class RefData {}
RefData.FIRST_NAMES = [
"Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella",
"Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby",
"Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla"
];
RefData.LAST_NAMES = [
"Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell",
"Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane",
"Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner",
"Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane",
"Keating", "Keegan", "Kingston", "Kobe"
];
RefData.COUNTRY_CODES = {
Ireland: "ie",
Spain: "es",
"United Kingdom": "gb",
France: "fr",
Germany: "de",
Sweden: "se",
Italy: "it",
Greece: "gr",
Iceland: "is",
Portugal: "pt",
Malta: "mt",
Norway: "no",
Brazil: "br",
Argentina: "ar",
Colombia: "co",
Peru: "pe",
Venezuela: "ve",
Uruguay: "uy"
};
RefData.COUNTRIES = [
{country: "Ireland", continent: "Europe", language: "English"},
{country: "Spain", continent: "Europe", language: "Spanish"},
{country: "United Kingdom", continent: "Europe", language: "English"},
{country: "France", continent: "Europe", language: "French"},
{country: "Germany", continent: "Europe", language: "(other)"},
{country: "Sweden", continent: "Europe", language: "(other)"},
{country: "Norway", continent: "Europe", language: "(other)"},
{country: "Italy", continent: "Europe", language: "(other)"},
{country: "Greece", continent: "Europe", language: "(other)"},
{country: "Iceland", continent: "Europe", language: "(other)"},
{country: "Portugal", continent: "Europe", language: "Portuguese"},
{country: "Malta", continent: "Europe", language: "(other)"},
{country: "Brazil", continent: "South America", language: "Portuguese"},
{country: "Argentina", continent: "South America", language: "Spanish"},
{country: "Colombia", continent: "South America", language: "Spanish"},
{country: "Peru", continent: "South America", language: "Spanish"},
{country: "Venezuela", continent: "South America", language: "Spanish"},
{country: "Uruguay", continent: "South America", language: "Spanish"}
];
RefData.ADDRESSES = [
'1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763',
'3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215',
'3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186',
'2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634',
'2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597',
'6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911',
'2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959',
'7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160',
'3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609',
'4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673',
'5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245',
'8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767',
'2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206',
'7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348',
'874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207',
'8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213',
'9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161',
'3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526',
'3254 Silver Island Loop, Maunaloa, DE, 19869-3169, US, (302) 667-7671',
'1081 Middle Wood, Taylors Gut Landing, OR, 97266-2873, US, (541) 357-6310',
'1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883',
'9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192',
'7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838',
'1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730',
'126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956',
'6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257',
'960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219',
'6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427',
'2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355',
'5646 Quiet Shadow Chase, Tiger Tail, IA, 52283-5537, US, (712) 375-9225',
'5466 Foggy Mountain Dale, Sweet Home, MT, 59738-0251, US, (406) 881-1706',
'5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596',
'7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360',
'8359 Quaking Anchor Road, Gross, BC, V9O-0H5, CA, (250) 985-3859',
'5143 Amber Deer Hollow, New Deal, ND, 58446-0853, US, (701) 927-0322',
'6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239',
'7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092',
'9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973',
'3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349',
'4819 Honey Treasure Park, Alaska, NB, E1U-3I0, CA, (506) 656-9138',
'6187 Round Front, Land O Lakes, AK, 99873-6403, US, (907) 853-9063',
'9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024',
'6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288',
'237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157',
'446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553',
'2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445',
'365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958',
'1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888',
'6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018',
'7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433'];
RefData.IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows'];
RefData.IT_SKILLS_NAMES = ['Android', 'CSS', 'HTML 5', 'Mac', 'Windows'];

44
src/RowDataFactory.js
View File

@@ -1,44 +0,0 @@
import RefData from './RefData';
export default class RowDataFactory {
createRowData() {
var rowData = [];
for (var i = 0; i < 1000; i++) {
var countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length];
rowData.push({
name: RefData.FIRST_NAMES[i % RefData.FIRST_NAMES.length] + ' ' + RefData.LAST_NAMES[i % RefData.LAST_NAMES.length],
skills: {
android: Math.random() < 0.4,
html5: Math.random() < 0.4,
mac: Math.random() < 0.4,
windows: Math.random() < 0.4,
css: Math.random() < 0.4
},
address: RefData.ADDRESSES[i % RefData.ADDRESSES.length],
years: Math.round(Math.random() * 100),
proficiency: Math.round(Math.random() * 100),
country: countryData.country,
continent: countryData.continent,
language: countryData.language,
mobile: this.createRandomPhoneNumber(),
landline: this.createRandomPhoneNumber()
});
}
return rowData;
}
createRandomPhoneNumber() {
var result = '+';
for (var i = 0; i < 12; i++) {
result += Math.round(Math.random() * 10);
if (i === 2 || i === 5 || i === 8) {
result += ' ';
}
}
return result;
}
}

26
src/SkillsCellRenderer.jsx
View File

@@ -1,26 +0,0 @@
import React from 'react';
import RefData from './RefData';
export default class SkillsCellRenderer extends React.Component {
render() {
var skills = [];
var rowData = this.props.params.data;
RefData.IT_SKILLS.forEach( (skill) => {
if (rowData && rowData.skills && rowData.skills[skill]) {
skills.push(<img key={skill} src={'images/skills/' + skill + '.png'} width={16} title={skill} />);
}
});
return <span>{skills}</span>;
}
}
// the grid will always pass in one props called 'params',
// which is the grid passing you the params for the cellRenderer.
// this piece is optional. the grid will always pass the 'params'
// props, so little need for adding this validation meta-data.
SkillsCellRenderer.propTypes = {
params: React.PropTypes.object
};

98
src/SkillsFilter.jsx
View File

@@ -1,98 +0,0 @@
import React from 'react';
import RefData from './RefData';
// the skills filter component. this can be laid out much better in a 'React'
// way. there are design patterns you can apply to layout out your React classes.
// however, i'm not worried, as the intention here is to show you ag-Grid
// working with React, and that's all. i'm not looking for any awards for my
// React design skills.
export default class SkillsFilter extends React.Component {
constructor() {
super();
this.state = {
skills: RefData.IT_SKILLS,
skillNames: RefData.IT_SKILLS_NAMES,
android: false,
css: false,
html5: false,
mac: false,
windows: false
};
}
// called by agGrid
init(params) {
this.filterChangedCallback = params.filterChangedCallback;
}
// called by agGrid
doesFilterPass(params) {
var rowSkills = params.data.skills;
var passed = true;
this.state.skills.forEach( (skill) => {
if (this.state[skill]) {
if (!rowSkills[skill]) {
passed = false;
}
}
});
return passed;
};
// called by agGrid
isFilterActive() {
var somethingSelected = this.state.android || this.state.css ||
this.state.html5 || this.state.mac || this.state.windows;
return somethingSelected;
};
onSkillChanged(skill, event) {
var newValue = event.target.checked;
var newModel = {};
newModel[skill] = newValue;
this.setState(newModel, ()=> {this.filterChangedCallback();} );
}
render() {
var skillsTemplates = [];
this.state.skills.forEach( (skill, index) => {
var skillName = this.state.skillNames[index];
var template = (
<label key={skill} style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
<span>
<div style={{textAlign: 'center'}}>{skillName}</div>
<div>
<input type="checkbox" onClick={this.onSkillChanged.bind(this, skill)}/>
<img src={'images/skills/'+skill+'.png'} width={30}/>
</div>
</span>
</label>
);
skillsTemplates.push(template);
});
return (
<div style={{width: 380}}>
<div style={{textAlign: 'center', background: 'lightgray', width: '100%', display: 'block', borderBottom: '1px solid grey'}}>
<b>Custom Skills Filter</b>
</div>
{skillsTemplates}
</div>
);
}
// these are other method that agGrid calls that we
// could of implemented, but they are optional and
// we have no use for them in this particular filter.
//getApi() {}
//afterGuiAttached(params) {}
//onNewRowsLoaded() {}
//onAnyFilterChanged() {}
}

18
src/index.js
View File

@@ -1,18 +0,0 @@
'use strict';
import ReactDOM from 'react-dom';
import React from 'react';
import MyApp from './myApp.jsx';
// is there a better way of doing this?
import 'ag-grid-root/dist/styles/ag-grid.css';
import 'ag-grid-root/dist/styles/theme-fresh.css';
// waiting for dom to load before booting react. we could alternatively
// put the index.js reference at the end fo the index.html, but i prefer this way.
document.addEventListener('DOMContentLoaded', ()=> {
var container = document.getElementById('myAppContainer');
ReactDOM.render(
React.createElement(MyApp),
container
);
});

28
src/myApp.css
View File

@@ -1,28 +0,0 @@
.ag-cell {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
label {
font-weight: normal !important;
}
.div-percent-bar {
display: inline-block;
height: 100%;
position: relative;
}
.div-percent-value {
position: absolute;
padding-left: 4px;
font-weight: bold;
font-size: 13px;
}
.div-outer-div {
display: inline-block;
height: 100%;
width: 100%;
}

187
src/myApp.jsx
View File

@@ -1,187 +0,0 @@
import ReactDOM from 'react-dom';
import React from 'react';
import {AgGridReact} from 'ag-grid-react';
import RefData from './RefData';
import RowDataFactory from './RowDataFactory';
import ColDefFactory from './ColDefFactory.jsx';
import './myApp.css';
// take this line out if you do not want to use ag-Grid-Enterprise
import 'ag-grid-enterprise';
export default class MyApp extends React.Component {
constructor() {
super();
this.state = {
quickFilterText: null,
showGrid: true,
showToolPanel: false,
columnDefs: new ColDefFactory().createColDefs(),
rowData: new RowDataFactory().createRowData(),
icons: {
columnRemoveFromGroup: '<i class="fa fa-remove"/>',
filter: '<i class="fa fa-filter"/>',
sortAscending: '<i class="fa fa-long-arrow-down"/>',
sortDescending: '<i class="fa fa-long-arrow-up"/>',
groupExpanded: '<i class="fa fa-minus-square-o"/>',
groupContracted: '<i class="fa fa-plus-square-o"/>',
columnGroupOpened: '<i class="fa fa-minus-square-o"/>',
columnGroupClosed: '<i class="fa fa-plus-square-o"/>'
}
};
// the grid options are optional, because you can provide every property
// to the grid via standard React properties. however, the react interface
// doesn't block you from using the standard JavaScript interface if you
// wish. Maybe you have the gridOptions stored as JSON on your server? If
// you do, the providing the gridOptions as a standalone object is just
// what you want!
this.gridOptions = {
// this is how you listen for events using gridOptions
onModelUpdated: function() {
console.log('event onModelUpdated received');
},
// this is a simple property
rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios
};
}
onShowGrid(show) {
this.setState({
showGrid: show
});
}
onToggleToolPanel(event) {
this.setState({showToolPanel: event.target.checked});
}
onGridReady(params) {
this.api = params.api;
this.columnApi = params.columnApi;
}
selectAll() {
this.api.selectAll();
}
deselectAll() {
this.api.deselectAll();
}
setCountryVisible(visible) {
this.columnApi.setColumnVisible('country', visible);
}
onQuickFilterText(event) {
this.setState({quickFilterText: event.target.value});
}
onCellClicked(event) {
console.log('onCellClicked: ' + event.data.name + ', col ' + event.colIndex);
}
onRowSelected(event) {
console.log('onRowSelected: ' + event.node.data.name);
}
onRefreshData() {
var newRowData = new RowDataFactory().createRowData();
this.setState({
rowData: newRowData
});
}
render() {
var gridTemplate;
var bottomHeaderTemplate;
var topHeaderTemplate;
topHeaderTemplate = (
<div>
<div style={{float: 'right'}}>
<input type="text" onChange={this.onQuickFilterText.bind(this)} placeholder="Type text to filter..."/>
<button id="btDestroyGrid" disabled={!this.state.showGrid} onClick={this.onShowGrid.bind(this, false)}>Destroy Grid</button>
<button id="btCreateGrid" disabled={this.state.showGrid} onClick={this.onShowGrid.bind(this, true)}>Create Grid</button>
</div>
<div style={{padding: '4px'}}>
<b>Employees Skills and Contact Details</b> <span id="rowCount"/>
</div>
</div>
);
// showing the bottom header and grid is optional, so we put in a switch
if (this.state.showGrid) {
bottomHeaderTemplate = (
<div>
<div style={{padding: 4}} className={'toolbar'}>
<span>
Grid API:
<button onClick={this.selectAll.bind(this)}>Select All</button>
<button onClick={this.deselectAll.bind(this)}>Clear Selection</button>
</span>
<span style={{marginLeft: 20}}>
Column API:
<button onClick={this.setCountryVisible.bind(this, false)}>Hide Country Column</button>
<button onClick={this.setCountryVisible.bind(this, true)}>Show Country Column</button>
</span>
</div>
<div style={{clear: 'both'}}></div>
<div style={{padding: 4}} className={'toolbar'}>
<label>
<input type="checkbox" onChange={this.onToggleToolPanel.bind(this)}/>
Show Tool Panel
</label>
<button onClick={this.onRefreshData.bind(this)}>Refresh Data</button>
</div>
<div style={{clear: 'both'}}></div>
</div>
);
gridTemplate = (
<div style={{height: 400}} className="ag-fresh">
<AgGridReact
// gridOptions is optional - it's possible to provide
// all values as React props
gridOptions={this.gridOptions}
// listening for events
onGridReady={this.onGridReady.bind(this)}
onRowSelected={this.onRowSelected.bind(this)}
onCellClicked={this.onCellClicked.bind(this)}
// binding to simple properties
showToolPanel={this.state.showToolPanel}
quickFilterText={this.state.quickFilterText}
// binding to an object property
icons={this.state.icons}
// binding to array properties
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
// no binding, just providing harde coded strings for the properties
rowSelection="multiple"
enableColResize="true"
enableSorting="true"
enableFilter="true"
groupHeaders="true"
rowHeight="22"
debug="true"
/>
</div>
);
}
return <div style={{width: '800px'}}>
<div style={{padding: '4px'}}>
{topHeaderTemplate}
{bottomHeaderTemplate}
{gridTemplate}
</div>
</div>;
}
}