diff options
| author | Florian Dold <florian.dold@gmail.com> | 2017-05-03 15:35:00 +0200 |
|---|---|---|
| committer | Florian Dold <florian.dold@gmail.com> | 2017-05-03 15:35:00 +0200 |
| commit | de98e0b232509d5f40c135d540a70e415272ff85 (patch) | |
| tree | a79222a5b58484ab3b80d18efcaaa7ccc4769b33 /node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src | |
| parent | e0c9d480a73fa629c1e4a47d3e721f1d2d345406 (diff) | |
node_modules
Diffstat (limited to 'node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src')
5 files changed, 161 insertions, 0 deletions
diff --git a/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/components/App.tsx b/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/components/App.tsx new file mode 100644 index 000000000..e74cc9538 --- /dev/null +++ b/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/components/App.tsx @@ -0,0 +1,45 @@ +import React from 'react';
+import FBEmitter from "fbemitter";
+
+import GreetingStore from '../stores/GreetingStore';
+import GreetingState from '../types/GreetingState';
+import WhoToGreet from './WhoToGreet';
+import Greeting from './Greeting';
+
+class App extends React.Component<{}, GreetingState> {
+ eventSubscription: FBEmitter.EventSubscription;
+ constructor(props: {}) {
+ super(props);
+ this.state = this.getStateFromStores();
+ }
+ private onChange = () => {
+ this.setState(this.getStateFromStores());
+ }
+
+ public componentWillMount() {
+ this.eventSubscription = GreetingStore.addChangeListener(this.onChange);
+ }
+
+ public componentWillUnmount() {
+ this.eventSubscription.remove();
+ }
+
+ render() {
+ const { greetings, newGreeting } = this.state;
+ return (
+ <div className="container-fluid">
+ <h1>Hello People!</h1>
+
+ <WhoToGreet newGreeting={ newGreeting } />
+
+ { greetings.map((g, index) => <Greeting key={ index } targetOfGreeting={ g } />) }
+ </div>
+ );
+ }
+
+ private getStateFromStores() {
+ return GreetingStore.getState();
+ }
+}
+
+export default App;
diff --git a/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/components/Greeting.tsx b/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/components/Greeting.tsx new file mode 100644 index 000000000..7150537c7 --- /dev/null +++ b/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/components/Greeting.tsx @@ -0,0 +1,37 @@ +import React from 'react';
+
+import * as GreetingActions from '../actions/GreetingActions';
+
+interface Props {
+ key: number;
+ targetOfGreeting: string;
+}
+
+class Greeting extends React.Component<Props, any> {
+ constructor(props: Props) {
+ super(props);
+ }
+
+ static propTypes: React.ValidationMap<Props> = {
+ targetOfGreeting: React.PropTypes.string.isRequired
+ }
+
+ render() {
+ return (
+ <p>
+ Hello { this.props.targetOfGreeting }!
+
+ <button className="btn btn-default btn-danger"
+ onClick={ this._onClick }>
+ Remove
+ </button>
+ </p>
+ );
+ }
+
+ _onClick = (_event: React.MouseEvent<HTMLButtonElement>) => {
+ GreetingActions.removeGreeting(this.props.targetOfGreeting);
+ }
+}
+
+export default Greeting;
diff --git a/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/components/WhoToGreet.tsx b/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/components/WhoToGreet.tsx new file mode 100644 index 000000000..9f3deda94 --- /dev/null +++ b/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/components/WhoToGreet.tsx @@ -0,0 +1,53 @@ +import React from 'react';
+
+import * as GreetingActions from '../actions/GreetingActions';
+
+interface Props {
+ newGreeting: string;
+}
+
+class WhoToGreet extends React.Component<Props, any> {
+ constructor(props: Props) {
+ super(props);
+ }
+
+ static propTypes: React.ValidationMap<Props> = {
+ newGreeting: React.PropTypes.string.isRequired
+ }
+
+ render() {
+ return (
+ <form role="form">
+ <div className="form-group">
+ <input type="text" className="form-control" placeholder="Who would you like to greet?"
+ value={ this.props.newGreeting }
+ onChange={ this._handleNewGreetingChange } />
+ <button type="submit" className="btn btn-default btn-primary"
+ onClick={ this._onSubmit }
+ disabled={ this._preventSubmission }>
+ Add greeting
+ </button>
+ </div>
+ </form>
+ );
+ }
+
+ get _preventSubmission() {
+ return !this.props.newGreeting;
+ }
+
+ _handleNewGreetingChange = (event: React.FormEvent<HTMLInputElement>) => {
+ const newGreeting = (event.target as HTMLInputElement).value;
+ GreetingActions.newGreetingChanged(newGreeting);
+ }
+
+ _onSubmit = (event: React.FormEvent<HTMLButtonElement>) => {
+ event.preventDefault();
+
+ if (!this._preventSubmission) {
+ GreetingActions.addGreeting(this.props.newGreeting);
+ }
+ }
+}
+
+export default WhoToGreet;
diff --git a/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/index.html b/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/index.html new file mode 100644 index 000000000..a3f53185a --- /dev/null +++ b/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/index.html @@ -0,0 +1,19 @@ +<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <title>TypeScript, Babel, React, Flux, and Karma</title>
+
+ <!-- inject:css -->
+ <!-- endinject -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+ </head>
+ <body>
+ <div id="content"></div>
+ <!-- inject:js -->
+ <!-- endinject -->
+ </body>
+</html>
diff --git a/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/main.tsx b/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/main.tsx new file mode 100644 index 000000000..7e957bd47 --- /dev/null +++ b/node_modules/ts-loader/examples/webpack2-gulp-react-flux-babel-karma/src/main.tsx @@ -0,0 +1,7 @@ +import 'babel-polyfill';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './components/App';
+
+ReactDOM.render(<App />, document.getElementById('content'));
|