Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Examples update - interactive + development and production modes #20

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Examples update - interactive + development and production modes #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a75c047
Messages: Support React elements in the message (empty tags)
rxaviers Jul 8, 2015
dad9707
Messages: Support React elements in the message (start-end tags)
rxaviers Jul 8, 2015
dc1de21
Include Rafael Xavier de Souza as co-author
rxaviers Jul 8, 2015
c0a8dce
WIP Examples
rxaviers Jul 12, 2015
87e8b1a
fix
rxaviers Jul 14, 2015
9ecd325
fix
rxaviers Jul 16, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2015 Kris Borchers
Copyright (c) 2015 Kris Borchers, Rafael Xavier de Souza @rxaviers

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
13 changes: 11 additions & 2 deletions examples/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,14 @@ Install
These instructions assume you have node and npm installed. For help, see the [npm docs](https://docs.npmjs.com/getting-started/installing-node)

1. Run `npm install`
2. Run `npm run-script build` to generate the built JS file
3. Open browser and navigate to `react-globalize/examples/index.html`

Development
-----------

1. Run `npm run start` to start a server with live reload support.

Production
----------

1. Run `npm run build` to generate the distribution JS file
1. Open browser and navigate to `react-globalize/examples/dist/index.html`
201 changes: 201 additions & 0 deletions examples/components/currency.jsx
View file
Open in desktop
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
Open in desktop
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