Skip to content

Commit a4f1864

Browse files
Frédéric Misereyrxaviers
Frédéric Miserey
authored and
rxaviers
committed
Examples: Update tooling and modernize code
Ref globalizejs#76
1 parent 3a3a7a5 commit a4f1864

8 files changed

Lines changed: 130 additions & 76 deletions

File tree

‎examples/.babelrc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
"react",
4+
"es2015"
5+
],
6+
"plugins": [
7+
"transform-class-properties",
8+
"transform-object-rest-spread"
9+
]
10+
}

‎examples/components/currency.js‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
var FormatCurrency = require('../react-globalize').FormatCurrency;
2-
var React = require('react');
1+
import React from "react";
2+
import { FormatCurrency } from "../react-globalize";
33

4-
module.exports = React.createClass({
5-
getInitialState: function() {
6-
return {
7-
locale: "en"
8-
};
9-
},
10-
handleChange: function( event ) {
4+
class LocalizedCurrencies extends React.PureComponent {
5+
state = {
6+
locale: "en",
7+
};
8+
handleChange = (event) => {
119
this.setState({
12-
locale: event.target.value
10+
locale: event.target.value,
1311
});
14-
},
15-
render: function() {
12+
}
13+
render() {
1614
return (
1715
<div>
1816
<div>
@@ -48,4 +46,5 @@ module.exports = React.createClass({
4846
</div>
4947
);
5048
}
51-
});
49+
}
50+
export default LocalizedCurrencies;

‎examples/components/dates.js‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
var FormatDate = require('../react-globalize').FormatDate;
2-
var React = require('react');
1+
import React from "react";
2+
import { FormatDate } from "../react-globalize";
33

4-
module.exports = React.createClass({
5-
getInitialState: function() {
6-
return {
7-
locale: "en"
8-
};
9-
},
10-
handleChange: function( event ) {
4+
class LocalizedDates extends React.Component {
5+
state = {
6+
locale: "en",
7+
};
8+
handleChange = (event) => {
119
this.setState({
12-
locale: event.target.value
10+
locale: event.target.value,
1311
});
14-
},
15-
render: function() {
12+
}
13+
render() {
1614
return (
1715
<div>
1816
<div>
@@ -36,4 +34,5 @@ module.exports = React.createClass({
3634
</div>
3735
);
3836
}
39-
});
37+
}
38+
export default LocalizedDates;

‎examples/components/messages.js‎

Lines changed: 37 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
1-
var FormatMessage = require('../react-globalize').FormatMessage;
2-
var React = require('react');
3-
var Globalize = require('globalize');
1+
import React from "react";
2+
import Globalize from "globalize";
3+
import { FormatMessage } from "../react-globalize";
44

5-
module.exports = React.createClass({
6-
getInitialState: function() {
7-
return {
8-
locale: "en"
9-
};
10-
},
11-
handleChange: function( event ) {
5+
6+
class LocalizedMessages extends React.Component {
7+
state = {
8+
locale: "en",
9+
};
10+
handleChange = (event) => {
1211
this.setState({
13-
locale: event.target.value
12+
locale: event.target.value,
1413
});
15-
},
16-
render: function() {
14+
}
15+
render() {
1716
return (
1817
<div>
1918
<div>
@@ -42,9 +41,29 @@ module.exports = React.createClass({
4241
Bye
4342
</FormatMessage>
4443
<h3>Variable Replacement</h3>
45-
["Wolfgang", "Amadeus", "Mozart"] - <FormatMessage locale={this.state.locale} path="variables/hello" variables={["Wolfgang", "Amadeus", "Mozart"]} />
46-
<br/>
47-
{JSON.stringify({first:"Wolfgang", middle:"Amadeus", last:"Mozart"})} - <FormatMessage locale={this.state.locale} path="variables/hey" variables={{first:"Wolfgang", middle:"Amadeus", last:"Mozart"}} />
44+
[&quot;Wolfgang&quot;, &quot;Amadeus&quot;, &quot;Mozart&quot;] - <FormatMessage locale={this.state.locale} path="variables/hello" variables={["Wolfgang", "Amadeus", "Mozart"]} />
45+
<br />
46+
{ JSON.stringify({ first: "Wolfgang", middle: "Amadeus", last: "Mozart" }) } - <FormatMessage locale={this.state.locale} path="variables/hey" variables={{ first: "Wolfgang", middle: "Amadeus", last: "Mozart" }} />
47+
<h3>Element Replacement</h3>
48+
<FormatMessage
49+
locale={this.state.locale}
50+
elements={
51+
// eslint-disable-next-line jsx-a11y/anchor-has-content, react/self-closing-comp
52+
{ reactGlobalizeLink: <a href="https://github.com/jquery-support/react-globalize"></a> }
53+
}
54+
>
55+
For more information, see [reactGlobalizeLink]React Globalize[/reactGlobalizeLink]
56+
</FormatMessage>
57+
<br />
58+
<FormatMessage
59+
locale={this.state.locale}
60+
elements={
61+
// eslint-disable-next-line react/self-closing-comp
62+
{ strong: <strong></strong> }
63+
}
64+
>
65+
Use Element Replacement to localize messages with [strong]markup[/strong] too.
66+
</FormatMessage>
4867
<h3>Gender Inflection</h3>
4968
{JSON.stringify({guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"male"})} - <FormatMessage locale={this.state.locale} path="party" variables={{guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"male"}} />
5069
<br/>
@@ -72,4 +91,5 @@ module.exports = React.createClass({
7291
</div>
7392
);
7493
}
75-
});
94+
}
95+
export default LocalizedMessages;

‎examples/components/numbers.js‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
var FormatNumber = require('../react-globalize').FormatNumber;
2-
var React = require('react');
1+
import React from "react";
2+
import { FormatNumber } from "../react-globalize";
33

4-
module.exports = React.createClass({
5-
getInitialState: function() {
6-
return {
7-
locale: "en"
8-
};
9-
},
10-
handleChange: function( event ) {
4+
class LocalizedNumbers extends React.Component {
5+
state = {
6+
locale: "en",
7+
};
8+
handleChange = (event) => {
119
this.setState({
12-
locale: event.target.value
10+
locale: event.target.value,
1311
});
14-
},
15-
render: function() {
12+
}
13+
render() {
1614
return (
1715
<div>
1816
<div>
@@ -38,4 +36,5 @@ module.exports = React.createClass({
3836
</div>
3937
);
4038
}
41-
});
39+
}
40+
export default LocalizedNumbers;

‎examples/index.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -89,20 +89,21 @@ var messages = {
8989
};
9090

9191
Globalize.load(
92-
require( 'cldr-data/main/en/ca-gregorian' ),
93-
require( 'cldr-data/main/en/timeZoneNames' ),
94-
require( 'cldr-data/main/en/numbers' ),
95-
require( 'cldr-data/main/en/currencies' ),
96-
require( 'cldr-data/main/pt/ca-gregorian' ),
97-
require( 'cldr-data/main/pt/timeZoneNames' ),
98-
require( 'cldr-data/main/pt/numbers' ),
99-
require( 'cldr-data/main/pt/currencies' ),
100-
require( 'cldr-data/supplemental/currencyData' ),
101-
require( 'cldr-data/supplemental/plurals' ),
102-
require( 'cldr-data/supplemental/likelySubtags' ),
103-
require( 'cldr-data/supplemental/timeData' ),
104-
require( 'cldr-data/supplemental/weekData' )
92+
require("cldr-data/main/en/ca-gregorian"),
93+
require("cldr-data/main/en/timeZoneNames"),
94+
require("cldr-data/main/en/numbers"),
95+
require("cldr-data/main/en/currencies"),
96+
require("cldr-data/main/pt/ca-gregorian"),
97+
require("cldr-data/main/pt/timeZoneNames"),
98+
require("cldr-data/main/pt/numbers"),
99+
require("cldr-data/main/pt/currencies"),
100+
require("cldr-data/supplemental/currencyData"),
101+
require("cldr-data/supplemental/plurals"),
102+
require("cldr-data/supplemental/likelySubtags"),
103+
require("cldr-data/supplemental/timeData"),
104+
require("cldr-data/supplemental/weekData"),
105105
);
106+
106107
Globalize.loadMessages(messages);
107108

108109
React.render(

‎examples/package.json‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1-
21
{
32
"name": "react-globalize-example",
43
"description": "Examples demonstrating use of the components",
54
"main": "index.js",
65
"devDependencies": {
7-
"browserify": "^6.3.3",
8-
"reactify": "^0.17.1"
6+
"babel-core": "^6.26.0",
7+
"babel-loader": "^7.1.2",
8+
"babel-plugin-transform-class-properties": "^6.24.1",
9+
"babel-preset-react": "^6.24.1",
10+
"imports-loader": "^0.7.1",
11+
"webpack": "^3.6.0"
912
},
1013
"dependencies": {
11-
"cldr-data": "~26.0.9",
12-
"react": "~0.13.1",
13-
"globalize": "~1.0.0-alpha.18"
14+
"cldr-data": ">=31",
15+
"globalize": "^1.3.0",
16+
"react": "^15.6.0 || ^16.0.0",
17+
"react-dom": "^15.6.0 || ^16.0.0"
1418
},
1519
"scripts": {
16-
"build": "mkdir -p react-globalize && cp ../dist/*.js react-globalize/ && browserify --debug --transform reactify index.js > app.js"
20+
"build": "mkdir -p react-globalize && cp ../dist/*.umd.js react-globalize/index.js && webpack"
1721
}
1822
}

‎examples/webpack.config.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
module.exports = {
2+
entry: [
3+
"./index.js"
4+
],
5+
output: {
6+
filename: "./app.js"
7+
},
8+
module: {
9+
rules: [
10+
{
11+
test: /\.(js|jsx)$/,
12+
exclude: /node_modules/,
13+
loader: require.resolve("babel-loader")
14+
},
15+
{
16+
test: /\.(js|jsx)$/,
17+
include: /node_modules/,
18+
use: "imports-loader?define=>false"
19+
}
20+
]
21+
}
22+
};

0 commit comments

Comments
 (0)