Skip to content

Commit bfd2211

Browse files
rxaviersrxaviers
committed
WIP Examples
1 parent f1eb8f6 commit bfd2211

9 files changed

+858
-10
lines changed

‎examples/components/currency.jsx

+201
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
var React = require("react");
2+
var ReactGlobalize = require("react-globalize");
3+
var FormatCurrency = ReactGlobalize.FormatCurrency;
4+
var FormatMessage = ReactGlobalize.FormatMessage;
5+
6+
var LocalizedCurrencies = React.createClass({
7+
getInitialState: function() {
8+
return {
9+
valueA: 150,
10+
valueB: 1,
11+
valueC: -1000,
12+
valueD: 1.491
13+
}
14+
},
15+
handleSubmit: function(event) {
16+
event.preventDefault();
17+
},
18+
handleValueA: function(event) {
19+
this.setState({
20+
valueA: event.target.value
21+
});
22+
},
23+
handleValueB: function(event) {
24+
this.setState({
25+
valueB: event.target.value
26+
});
27+
},
28+
handleValueC: function(event) {
29+
this.setState({
30+
valueC: event.target.value
31+
});
32+
},
33+
handleValueD: function(event) {
34+
this.setState({
35+
valueD: event.target.value
36+
});
37+
},
38+
render: function() {
39+
console.log("render");
40+
return (
41+
<div>
42+
<h1>Currencies</h1>
43+
<table>
44+
<thead>
45+
<tr>
46+
<th><FormatMessage>Description</FormatMessage></th>
47+
<th><FormatMessage>Options</FormatMessage></th>
48+
<th><FormatMessage>Value</FormatMessage></th>
49+
<th><FormatMessage>Currency</FormatMessage></th>
50+
<th><FormatMessage>Localized Value</FormatMessage></th>
51+
</tr>
52+
</thead>
53+
<tbody>
54+
<tr>
55+
<td rowSpan={3}>
56+
<p>Formatting currencies using symbols, the default</p>
57+
</td>
58+
<td rowSpan={3}>
59+
<p>{"{}"}</p>
60+
</td>
61+
<td rowSpan={3}>
62+
<form action="#" onSubmit={this.handleSubmit}>
63+
<input type="number" value={this.state.valueA} onChange={this.handleValueA} />
64+
</form>
65+
</td>
66+
<td>
67+
<p>USD</p>
68+
</td>
69+
<td>
70+
<FormatCurrency currency="USD">{+this.state.valueA}</FormatCurrency>
71+
</td>
72+
</tr>
73+
<tr>
74+
<td>
75+
<p>EUR</p>
76+
</td>
77+
<td>
78+
<FormatCurrency currency="EUR">{+this.state.valueA}</FormatCurrency>
79+
</td>
80+
</tr>
81+
<tr>
82+
<td>
83+
<p>CNY</p>
84+
</td>
85+
<td>
86+
<FormatCurrency currency="CNY">{+this.state.valueA}</FormatCurrency>
87+
</td>
88+
</tr>
89+
<tr>
90+
<td rowSpan={3}>
91+
<p>Formatting currencies in their full names</p>
92+
</td>
93+
<td rowSpan={3}>
94+
<p>{"{style: \"name\"}"}</p>
95+
</td>
96+
<td rowSpan={3}>
97+
<form action="#" onSubmit={this.handleSubmit}>
98+
<input type="number" value={this.state.valueB} onChange={this.handleValueB} />
99+
</form>
100+
</td>
101+
<td>
102+
<p>USD</p>
103+
</td>
104+
<td>
105+
<FormatCurrency currency="USD" options={{style: "name"}}>{+this.state.valueB}</FormatCurrency>
106+
</td>
107+
</tr>
108+
<tr>
109+
<td>
110+
<p>EUR</p>
111+
</td>
112+
<td>
113+
<FormatCurrency currency="EUR" options={{style: "name"}}>{+this.state.valueB}</FormatCurrency>
114+
</td>
115+
</tr>
116+
<tr>
117+
<td>
118+
<p>CNY</p>
119+
</td>
120+
<td>
121+
<FormatCurrency currency="CNY" options={{style: "name"}}>{+this.state.valueB}</FormatCurrency>
122+
</td>
123+
</tr>
124+
<tr>
125+
<td rowSpan={3}>
126+
<p>Formatting currencies in the accounting form</p>
127+
</td>
128+
<td rowSpan={3}>
129+
<p>{"{style: \"accounting\"}"}</p>
130+
</td>
131+
<td rowSpan={3}>
132+
<form action="#" onSubmit={this.handleSubmit}>
133+
<input type="number" value={this.state.valueC} onChange={this.handleValueC} />
134+
</form>
135+
</td>
136+
<td>
137+
<p>USD</p>
138+
</td>
139+
<td>
140+
<FormatCurrency currency="USD" options={{style: "accounting"}}>{+this.state.valueC}</FormatCurrency>
141+
</td>
142+
</tr>
143+
<tr>
144+
<td>
145+
<p>EUR</p>
146+
</td>
147+
<td>
148+
<FormatCurrency currency="EUR" options={{style: "accounting"}}>{+this.state.valueC}</FormatCurrency>
149+
</td>
150+
</tr>
151+
<tr>
152+
<td>
153+
<p>CNY</p>
154+
</td>
155+
<td>
156+
<FormatCurrency currency="CNY" options={{style: "accounting"}}>{+this.state.valueC}</FormatCurrency>
157+
</td>
158+
</tr>
159+
<tr>
160+
<td rowSpan={3}>
161+
<p>Formatting currencies specifying the rounding method</p>
162+
</td>
163+
<td rowSpan={3}>
164+
<p>{"{round: \"ceil\"}"}</p>
165+
</td>
166+
<td rowSpan={3}>
167+
<form action="#" onSubmit={this.handleSubmit}>
168+
<input type="number" value={this.state.valueD} onChange={this.handleValueD} />
169+
</form>
170+
</td>
171+
<td>
172+
<p>USD</p>
173+
</td>
174+
<td>
175+
<FormatCurrency currency="USD" options={{round: "ceil"}}>{+this.state.valueD}</FormatCurrency>
176+
</td>
177+
</tr>
178+
<tr>
179+
<td>
180+
<p>EUR</p>
181+
</td>
182+
<td>
183+
<FormatCurrency currency="EUR" options={{round: "ceil"}}>{+this.state.valueD}</FormatCurrency>
184+
</td>
185+
</tr>
186+
<tr>
187+
<td>
188+
<p>CNY</p>
189+
</td>
190+
<td>
191+
<FormatCurrency currency="CNY" options={{round: "ceil"}}>{+this.state.valueD}</FormatCurrency>
192+
</td>
193+
</tr>
194+
</tbody>
195+
</table>
196+
</div>
197+
);
198+
}
199+
});
200+
201+
module.exports = LocalizedCurrencies;

‎examples/components/dates.jsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
var React = require("react");
2+
var ReactGlobalize = require("react-globalize");
3+
var FormatMessage = ReactGlobalize.FormatMessage;
4+
var FormatDate = ReactGlobalize.FormatDate;
5+
6+
var LocalizedDates = React.createClass({
7+
getInitialState: function() {
8+
setInterval(function() {
9+
this.updateDate();
10+
}.bind(this), 1000);
11+
return {
12+
date: new Date()
13+
}
14+
},
15+
updateDate: function() {
16+
this.setState({
17+
date: new Date()
18+
});
19+
},
20+
render: function() {
21+
var date = this.state.date;
22+
return (
23+
<div>
24+
<h1>Dates</h1>
25+
<table>
26+
<thead>
27+
<tr>
28+
<th><FormatMessage>Description</FormatMessage></th>
29+
<th><FormatMessage>Options</FormatMessage></th>
30+
<th><FormatMessage>Localized Now</FormatMessage></th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
<tr>
35+
<td>
36+
<p>Formatting dates using the default options</p>
37+
</td>
38+
<td>
39+
<p>{"{}"}</p>
40+
</td>
41+
<td>
42+
<FormatDate>{date}</FormatDate>
43+
</td>
44+
</tr>
45+
<tr>
46+
<td rowSpan={3}>
47+
<p>Formatting dates using presets</p>
48+
</td>
49+
<td>
50+
<p>{"{date: \"medium\"}"}</p>
51+
</td>
52+
<td>
53+
<FormatDate options={{date: "medium"}}>{date}</FormatDate>
54+
</td>
55+
</tr>
56+
<tr>
57+
<td>
58+
<p>{"{time: \"medium\"}"}</p>
59+
</td>
60+
<td>
61+
<FormatDate options={{time: "medium"}}>{date}</FormatDate>
62+
</td>
63+
</tr>
64+
<tr>
65+
<td>
66+
<p>{"{datetime: \"medium\"}"}</p>
67+
</td>
68+
<td>
69+
<FormatDate options={{datetime: "medium"}}>{date}</FormatDate>
70+
</td>
71+
</tr>
72+
<tr>
73+
<td>
74+
<p>Formatting dates selecting the fields individually</p>
75+
</td>
76+
<td>
77+
<p>{"{skeleton: \"GyMMMdhms\"}"}</p>
78+
</td>
79+
<td>
80+
<FormatDate options={{skeleton: "GyMMMdhms"}}>{date}</FormatDate>
81+
</td>
82+
</tr>
83+
</tbody>
84+
</table>
85+
</div>
86+
);
87+
}
88+
});
89+
90+
module.exports = LocalizedDates;

0 commit comments

Comments
 (0)