ecki/modernjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better ExpandedCard

Browse Source
This commit is contained in:
Federico Kereki
2018-06-23 22:49:17 -03:00
parent f59aacc8f8
commit 4801b33e96
10 changed files with 192 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chapter06/src/App.js
+1 -1
View File
@@ -1,5 +1,5 @@
import React from "react";
import { RegionsInformationTable } from "./regionsInformationTable";
import { RegionsInformationTable } from "./components/regionsInformationTable";
class App extends React.PureComponent {
render() {
chapter06/src/countryFilterBar/index.js → chapter06/src/components/countryFilterBar/index.js
+3 -1
View File
@@ -1,5 +1,7 @@
import React from "react";
import PropTypes from "prop-types";
import "../general.css";
export class CountryFilterBar extends React.PureComponent {
static propTypes = {
list: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -12,7 +14,7 @@ export class CountryFilterBar extends React.PureComponent {
render() {
return (
<div>
<div className="bordered">
Country:&nbsp;
<select onChange={this.onSelect.bind(this)}>
<option value="">Select a country:</option>
chapter06/src/components/expandableCard.1/index.js
+24
View File
@@ -0,0 +1,24 @@
import React from "react";
import PropTypes from "prop-types";
import "../general.css";
export class ExpandableCard extends React.PureComponent {
static propTypes = {
name: PropTypes.string.isRequired,
cities: PropTypes.number.isRequired,
population: PropTypes.number.isRequired
};
render() {
return (
<div className="bordered">
NAME:{this.props.name}
<br />
CITIES:{this.props.cities}
<br />
POPULATION:{this.props.population}
</div>
);
}
}
chapter06/src/components/expandableCard.2/expandableCard.css
+3
View File
@@ -0,0 +1,3 @@
.toggle {
float: right;
}
chapter06/src/components/expandableCard.2/index.js
+49
View File
@@ -0,0 +1,49 @@
import React from "react";
import PropTypes from "prop-types";
import "../general.css";
import "./expandableCard.css";
export class ExpandableCard extends React.PureComponent {
static propTypes = {
children: PropTypes.arrayOf(PropTypes.element).isRequired,
title: PropTypes.string.isRequired
};
state = {
open: false
};
toggle() {
this.setState(state => ({ open: !state.open }));
}
render() {
if (this.state.open) {
return (
<div className="bordered">
{this.props.title}{" "}
<div
className="toggle"
onClick={this.toggle.bind(this)}
>
&#x25B3;
</div>
<div>{this.props.children}</div>
</div>
);
} else {
return (
<div className="bordered">
{this.props.title}{" "}
<div
className="toggle"
onClick={this.toggle.bind(this)}
>
&#x25BD;
</div>
</div>
);
}
}
}
chapter06/src/components/general.css
+5
View File
@@ -0,0 +1,5 @@
.bordered {
border: 1px solid blue;
padding: 2px;
margin: 4px;
}
chapter06/src/components/regionsInformationTable/index.js
+68
View File
@@ -0,0 +1,68 @@
import React from "react";
import { CountryFilterBar } from "../countryFilterBar";
import { ResultsDataTable } from "../resultsDataTable.2";
export class RegionsInformationTable extends React.PureComponent {
state = {
countries: [
{ code: "AR", name: "Argentine" },
{ code: "BR", name: "Brazil" },
{ code: "PY", name: "Paraguay" },
{ code: "UY", name: "Uruguay" }
],
regions: []
};
update(country: string) {
console.log(`Country ... ${country}`);
this.setState(() => ({
regions: [
{
id: "UY/5",
name: "Durazno",
cities: 8,
pop: 60000
},
{
id: "UY/7",
name: "Florida",
cities: 20,
pop: 67000
},
{
id: "UY/9",
name: "Maldonado",
cities: 17,
pop: 165000
},
{
id: "UY/10",
name: "Montevideo",
cities: 1,
pop: 1320000
},
{
id: "UY/11",
name: "Paysandu",
cities: 16,
pop: 114000
}
]
}));
}
render() {
return (
<div>
<CountryFilterBar
list={this.state.countries}
onSelect={this.update.bind(this)}
/>
<ResultsDataTable results={this.state.regions} />
</div>
);
}
}
chapter06/src/components/resultsDataTable.1/index.js
+30
View File
@@ -0,0 +1,30 @@
import React from "react";
import PropTypes from "prop-types";
import { ExpandableCard } from "../expandableCard.1";
import "../general.css";
export class ResultsDataTable extends React.PureComponent {
static propTypes = {
results: PropTypes.arrayOf(PropTypes.object).isRequired
};
render() {
if (this.props.results.length === 0) {
return <div className="bordered">No regions.</div>;
} else {
return (
<div className="bordered">
{this.props.results.map(x => (
<ExpandableCard
key={x.id}
name={x.name}
cities={x.cities}
population={x.pop}
/>
))}
</div>
);
}
}
}
chapter06/src/resultsDataTable/index.js → chapter06/src/components/resultsDataTable.2/index.js
+9 -7
View File
@@ -1,6 +1,9 @@
import React from "react";
import PropTypes from "prop-types";
import { ExpandableCard } from "../expandableCard.2";
import "../general.css";
export class ResultsDataTable extends React.PureComponent {
static propTypes = {
results: PropTypes.arrayOf(PropTypes.object).isRequired
@@ -8,16 +11,15 @@ export class ResultsDataTable extends React.PureComponent {
render() {
if (this.props.results.length === 0) {
return "No regions can be shown.";
return <div className="bordered">No regions.</div>;
} else {
return (
<div>
<div className="bordered">
{this.props.results.map(x => (
<div key={x.id}>
{x.name}
{x.cities}
{x.pop}
</div>
<ExpandableCard key={x.id} title={x.name}>
<div>CITIES:{x.cities}</div>
<div>POPULATION:{x.pop}</div>
</ExpandableCard>
))}
</div>
);
chapter06/src/regionsInformationTable/index.js
-40
View File
@@ -1,40 +0,0 @@
import React from "react";
import { CountryFilterBar } from "../countryFilterBar";
import { ResultsDataTable } from "../resultsDataTable";
export class RegionsInformationTable extends React.PureComponent {
state = {
countries: [
{ code: "AR", name: "Argentine" },
{ code: "BR", name: "Brazil" },
{ code: "PY", name: "Paraguay" },
{ code: "UY", name: "Uruguay" }
],
regions: [
{ id: "UY/5", name: "Durazno", cities: 8, pop: 60000 },
{ id: "UY/7", name: "Florida", cities: 20, pop: 67000 },
{ id: "UY/9", name: "Maldonado", cities: 17, pop: 165000 },
{ id: "UY/10", name: "Montevideo", cities: 1, pop: 1320000 },
{ id: "UY/11", name: "Paysandu", cities: 16, pop: 114000 }
]
};
update(country: string) {
// get a new list of regions when the country changes
console.log(`Country ... ${country}`);
}
render() {
return (
<div>
<CountryFilterBar
list={this.state.countries}
onSelect={this.update.bind(this)}
/>
<ResultsDataTable results={this.state.regions} />
</div>
);
}
}