Skip to content

Commit

Permalink
WIP Examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@rxaviers
rxaviers committed Jul 12, 2015
1 parent f1eb8f6 commit bfd2211
Show file tree
Hide file tree
Showing 9 changed files with 858 additions and 10 deletions.
201 changes: 201 additions & 0 deletions examples/components/currency.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
var React = require("react");
var ReactGlobalize = require("react-globalize");
var FormatCurrency = ReactGlobalize.FormatCurrency;
var FormatMessage = ReactGlobalize.FormatMessage;

var LocalizedCurrencies = React.createClass({
getInitialState: function() {
return {
valueA: 150,
valueB: 1,
valueC: -1000,
valueD: 1.491
}
},
handleSubmit: function(event) {
event.preventDefault();
},
handleValueA: function(event) {
this.setState({
valueA: event.target.value
});
},
handleValueB: function(event) {
this.setState({
valueB: event.target.value
});
},
handleValueC: function(event) {
this.setState({
valueC: event.target.value
});
},
handleValueD: function(event) {
this.setState({
valueD: event.target.value
});
},
render: function() {
console.log("render");
return (
<div>
<h1>Currencies</h1>
<table>
<thead>
<tr>
<th><FormatMessage>Description</FormatMessage></th>
<th><FormatMessage>Options</FormatMessage></th>
<th><FormatMessage>Value</FormatMessage></th>
<th><FormatMessage>Currency</FormatMessage></th>
<th><FormatMessage>Localized Value</FormatMessage></th>
</tr>
</thead>
<tbody>
<tr>
<td rowSpan={3}>
<p>Formatting currencies using symbols, the default</p>
</td>
<td rowSpan={3}>
<p>{"{}"}</p>
</td>
<td rowSpan={3}>
<form action="#" onSubmit={this.handleSubmit}>
<input type="number" value={this.state.valueA} onChange={this.handleValueA} />
</form>
</td>
<td>
<p>USD</p>
</td>
<td>
<FormatCurrency currency="USD">{+this.state.valueA}</FormatCurrency>
</td>
</tr>
<tr>
<td>
<p>EUR</p>
</td>
<td>
<FormatCurrency currency="EUR">{+this.state.valueA}</FormatCurrency>
</td>
</tr>
<tr>
<td>
<p>CNY</p>
</td>
<td>
<FormatCurrency currency="CNY">{+this.state.valueA}</FormatCurrency>
</td>
</tr>
<tr>
<td rowSpan={3}>
<p>Formatting currencies in their full names</p>
</td>
<td rowSpan={3}>
<p>{"{style: \"name\"}"}</p>
</td>
<td rowSpan={3}>
<form action="#" onSubmit={this.handleSubmit}>
<input type="number" value={this.state.valueB} onChange={this.handleValueB} />
</form>
</td>
<td>
<p>USD</p>
</td>
<td>
<FormatCurrency currency="USD" options={{style: "name"}}>{+this.state.valueB}</FormatCurrency>
</td>
</tr>
<tr>
<td>
<p>EUR</p>
</td>
<td>
<FormatCurrency currency="EUR" options={{style: "name"}}>{+this.state.valueB}</FormatCurrency>
</td>
</tr>
<tr>
<td>
<p>CNY</p>
</td>
<td>
<FormatCurrency currency="CNY" options={{style: "name"}}>{+this.state.valueB}</FormatCurrency>
</td>
</tr>
<tr>
<td rowSpan={3}>
<p>Formatting currencies in the accounting form</p>
</td>
<td rowSpan={3}>
<p>{"{style: \"accounting\"}"}</p>
</td>
<td rowSpan={3}>
<form action="#" onSubmit={this.handleSubmit}>
<input type="number" value={this.state.valueC} onChange={this.handleValueC} />
</form>
</td>
<td>
<p>USD</p>
</td>
<td>
<FormatCurrency currency="USD" options={{style: "accounting"}}>{+this.state.valueC}</FormatCurrency>
</td>
</tr>
<tr>
<td>
<p>EUR</p>
</td>
<td>
<FormatCurrency currency="EUR" options={{style: "accounting"}}>{+this.state.valueC}</FormatCurrency>
</td>
</tr>
<tr>
<td>
<p>CNY</p>
</td>
<td>
<FormatCurrency currency="CNY" options={{style: "accounting"}}>{+this.state.valueC}</FormatCurrency>
</td>
</tr>
<tr>
<td rowSpan={3}>
<p>Formatting currencies specifying the rounding method</p>
</td>
<td rowSpan={3}>
<p>{"{round: \"ceil\"}"}</p>
</td>
<td rowSpan={3}>
<form action="#" onSubmit={this.handleSubmit}>
<input type="number" value={this.state.valueD} onChange={this.handleValueD} />
</form>
</td>
<td>
<p>USD</p>
</td>
<td>
<FormatCurrency currency="USD" options={{round: "ceil"}}>{+this.state.valueD}</FormatCurrency>
</td>
</tr>
<tr>
<td>
<p>EUR</p>
</td>
<td>
<FormatCurrency currency="EUR" options={{round: "ceil"}}>{+this.state.valueD}</FormatCurrency>
</td>
</tr>
<tr>
<td>
<p>CNY</p>
</td>
<td>
<FormatCurrency currency="CNY" options={{round: "ceil"}}>{+this.state.valueD}</FormatCurrency>
</td>
</tr>
</tbody>
</table>
</div>
);
}
});

module.exports = LocalizedCurrencies;
90 changes: 90 additions & 0 deletions examples/components/dates.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
var React = require("react");
var ReactGlobalize = require("react-globalize");
var FormatMessage = ReactGlobalize.FormatMessage;
var FormatDate = ReactGlobalize.FormatDate;

var LocalizedDates = React.createClass({
getInitialState: function() {
setInterval(function() {
this.updateDate();
}.bind(this), 1000);
return {
date: new Date()
}
},
updateDate: function() {
this.setState({
date: new Date()
});
},
render: function() {
var date = this.state.date;
return (
<div>
<h1>Dates</h1>
<table>
<thead>
<tr>
<th><FormatMessage>Description</FormatMessage></th>
<th><FormatMessage>Options</FormatMessage></th>
<th><FormatMessage>Localized Now</FormatMessage></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Formatting dates using the default options</p>
</td>
<td>
<p>{"{}"}</p>
</td>
<td>
<FormatDate>{date}</FormatDate>
</td>
</tr>
<tr>
<td rowSpan={3}>
<p>Formatting dates using presets</p>
</td>
<td>
<p>{"{date: \"medium\"}"}</p>
</td>
<td>
<FormatDate options={{date: "medium"}}>{date}</FormatDate>
</td>
</tr>
<tr>
<td>
<p>{"{time: \"medium\"}"}</p>
</td>
<td>
<FormatDate options={{time: "medium"}}>{date}</FormatDate>
</td>
</tr>
<tr>
<td>
<p>{"{datetime: \"medium\"}"}</p>
</td>
<td>
<FormatDate options={{datetime: "medium"}}>{date}</FormatDate>
</td>
</tr>
<tr>
<td>
<p>Formatting dates selecting the fields individually</p>
</td>
<td>
<p>{"{skeleton: \"GyMMMdhms\"}"}</p>
</td>
<td>
<FormatDate options={{skeleton: "GyMMMdhms"}}>{date}</FormatDate>
</td>
</tr>
</tbody>
</table>
</div>
);
}
});

module.exports = LocalizedDates;
Loading

0 comments on commit bfd2211

Please sign in to comment.