Basic structure of a react SDK and start of an implementation.
						commit
						c42733ec95
					
				| 
						 | 
				
			
			@ -0,0 +1,177 @@
 | 
			
		|||
 | 
			
		||||
                                 Apache License
 | 
			
		||||
                           Version 2.0, January 2004
 | 
			
		||||
                        http://www.apache.org/licenses/
 | 
			
		||||
 | 
			
		||||
   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
 | 
			
		||||
 | 
			
		||||
   1. Definitions.
 | 
			
		||||
 | 
			
		||||
      "License" shall mean the terms and conditions for use, reproduction,
 | 
			
		||||
      and distribution as defined by Sections 1 through 9 of this document.
 | 
			
		||||
 | 
			
		||||
      "Licensor" shall mean the copyright owner or entity authorized by
 | 
			
		||||
      the copyright owner that is granting the License.
 | 
			
		||||
 | 
			
		||||
      "Legal Entity" shall mean the union of the acting entity and all
 | 
			
		||||
      other entities that control, are controlled by, or are under common
 | 
			
		||||
      control with that entity. For the purposes of this definition,
 | 
			
		||||
      "control" means (i) the power, direct or indirect, to cause the
 | 
			
		||||
      direction or management of such entity, whether by contract or
 | 
			
		||||
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
 | 
			
		||||
      outstanding shares, or (iii) beneficial ownership of such entity.
 | 
			
		||||
 | 
			
		||||
      "You" (or "Your") shall mean an individual or Legal Entity
 | 
			
		||||
      exercising permissions granted by this License.
 | 
			
		||||
 | 
			
		||||
      "Source" form shall mean the preferred form for making modifications,
 | 
			
		||||
      including but not limited to software source code, documentation
 | 
			
		||||
      source, and configuration files.
 | 
			
		||||
 | 
			
		||||
      "Object" form shall mean any form resulting from mechanical
 | 
			
		||||
      transformation or translation of a Source form, including but
 | 
			
		||||
      not limited to compiled object code, generated documentation,
 | 
			
		||||
      and conversions to other media types.
 | 
			
		||||
 | 
			
		||||
      "Work" shall mean the work of authorship, whether in Source or
 | 
			
		||||
      Object form, made available under the License, as indicated by a
 | 
			
		||||
      copyright notice that is included in or attached to the work
 | 
			
		||||
      (an example is provided in the Appendix below).
 | 
			
		||||
 | 
			
		||||
      "Derivative Works" shall mean any work, whether in Source or Object
 | 
			
		||||
      form, that is based on (or derived from) the Work and for which the
 | 
			
		||||
      editorial revisions, annotations, elaborations, or other modifications
 | 
			
		||||
      represent, as a whole, an original work of authorship. For the purposes
 | 
			
		||||
      of this License, Derivative Works shall not include works that remain
 | 
			
		||||
      separable from, or merely link (or bind by name) to the interfaces of,
 | 
			
		||||
      the Work and Derivative Works thereof.
 | 
			
		||||
 | 
			
		||||
      "Contribution" shall mean any work of authorship, including
 | 
			
		||||
      the original version of the Work and any modifications or additions
 | 
			
		||||
      to that Work or Derivative Works thereof, that is intentionally
 | 
			
		||||
      submitted to Licensor for inclusion in the Work by the copyright owner
 | 
			
		||||
      or by an individual or Legal Entity authorized to submit on behalf of
 | 
			
		||||
      the copyright owner. For the purposes of this definition, "submitted"
 | 
			
		||||
      means any form of electronic, verbal, or written communication sent
 | 
			
		||||
      to the Licensor or its representatives, including but not limited to
 | 
			
		||||
      communication on electronic mailing lists, source code control systems,
 | 
			
		||||
      and issue tracking systems that are managed by, or on behalf of, the
 | 
			
		||||
      Licensor for the purpose of discussing and improving the Work, but
 | 
			
		||||
      excluding communication that is conspicuously marked or otherwise
 | 
			
		||||
      designated in writing by the copyright owner as "Not a Contribution."
 | 
			
		||||
 | 
			
		||||
      "Contributor" shall mean Licensor and any individual or Legal Entity
 | 
			
		||||
      on behalf of whom a Contribution has been received by Licensor and
 | 
			
		||||
      subsequently incorporated within the Work.
 | 
			
		||||
 | 
			
		||||
   2. Grant of Copyright License. Subject to the terms and conditions of
 | 
			
		||||
      this License, each Contributor hereby grants to You a perpetual,
 | 
			
		||||
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 | 
			
		||||
      copyright license to reproduce, prepare Derivative Works of,
 | 
			
		||||
      publicly display, publicly perform, sublicense, and distribute the
 | 
			
		||||
      Work and such Derivative Works in Source or Object form.
 | 
			
		||||
 | 
			
		||||
   3. Grant of Patent License. Subject to the terms and conditions of
 | 
			
		||||
      this License, each Contributor hereby grants to You a perpetual,
 | 
			
		||||
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 | 
			
		||||
      (except as stated in this section) patent license to make, have made,
 | 
			
		||||
      use, offer to sell, sell, import, and otherwise transfer the Work,
 | 
			
		||||
      where such license applies only to those patent claims licensable
 | 
			
		||||
      by such Contributor that are necessarily infringed by their
 | 
			
		||||
      Contribution(s) alone or by combination of their Contribution(s)
 | 
			
		||||
      with the Work to which such Contribution(s) was submitted. If You
 | 
			
		||||
      institute patent litigation against any entity (including a
 | 
			
		||||
      cross-claim or counterclaim in a lawsuit) alleging that the Work
 | 
			
		||||
      or a Contribution incorporated within the Work constitutes direct
 | 
			
		||||
      or contributory patent infringement, then any patent licenses
 | 
			
		||||
      granted to You under this License for that Work shall terminate
 | 
			
		||||
      as of the date such litigation is filed.
 | 
			
		||||
 | 
			
		||||
   4. Redistribution. You may reproduce and distribute copies of the
 | 
			
		||||
      Work or Derivative Works thereof in any medium, with or without
 | 
			
		||||
      modifications, and in Source or Object form, provided that You
 | 
			
		||||
      meet the following conditions:
 | 
			
		||||
 | 
			
		||||
      (a) You must give any other recipients of the Work or
 | 
			
		||||
          Derivative Works a copy of this License; and
 | 
			
		||||
 | 
			
		||||
      (b) You must cause any modified files to carry prominent notices
 | 
			
		||||
          stating that You changed the files; and
 | 
			
		||||
 | 
			
		||||
      (c) You must retain, in the Source form of any Derivative Works
 | 
			
		||||
          that You distribute, all copyright, patent, trademark, and
 | 
			
		||||
          attribution notices from the Source form of the Work,
 | 
			
		||||
          excluding those notices that do not pertain to any part of
 | 
			
		||||
          the Derivative Works; and
 | 
			
		||||
 | 
			
		||||
      (d) If the Work includes a "NOTICE" text file as part of its
 | 
			
		||||
          distribution, then any Derivative Works that You distribute must
 | 
			
		||||
          include a readable copy of the attribution notices contained
 | 
			
		||||
          within such NOTICE file, excluding those notices that do not
 | 
			
		||||
          pertain to any part of the Derivative Works, in at least one
 | 
			
		||||
          of the following places: within a NOTICE text file distributed
 | 
			
		||||
          as part of the Derivative Works; within the Source form or
 | 
			
		||||
          documentation, if provided along with the Derivative Works; or,
 | 
			
		||||
          within a display generated by the Derivative Works, if and
 | 
			
		||||
          wherever such third-party notices normally appear. The contents
 | 
			
		||||
          of the NOTICE file are for informational purposes only and
 | 
			
		||||
          do not modify the License. You may add Your own attribution
 | 
			
		||||
          notices within Derivative Works that You distribute, alongside
 | 
			
		||||
          or as an addendum to the NOTICE text from the Work, provided
 | 
			
		||||
          that such additional attribution notices cannot be construed
 | 
			
		||||
          as modifying the License.
 | 
			
		||||
 | 
			
		||||
      You may add Your own copyright statement to Your modifications and
 | 
			
		||||
      may provide additional or different license terms and conditions
 | 
			
		||||
      for use, reproduction, or distribution of Your modifications, or
 | 
			
		||||
      for any such Derivative Works as a whole, provided Your use,
 | 
			
		||||
      reproduction, and distribution of the Work otherwise complies with
 | 
			
		||||
      the conditions stated in this License.
 | 
			
		||||
 | 
			
		||||
   5. Submission of Contributions. Unless You explicitly state otherwise,
 | 
			
		||||
      any Contribution intentionally submitted for inclusion in the Work
 | 
			
		||||
      by You to the Licensor shall be under the terms and conditions of
 | 
			
		||||
      this License, without any additional terms or conditions.
 | 
			
		||||
      Notwithstanding the above, nothing herein shall supersede or modify
 | 
			
		||||
      the terms of any separate license agreement you may have executed
 | 
			
		||||
      with Licensor regarding such Contributions.
 | 
			
		||||
 | 
			
		||||
   6. Trademarks. This License does not grant permission to use the trade
 | 
			
		||||
      names, trademarks, service marks, or product names of the Licensor,
 | 
			
		||||
      except as required for reasonable and customary use in describing the
 | 
			
		||||
      origin of the Work and reproducing the content of the NOTICE file.
 | 
			
		||||
 | 
			
		||||
   7. Disclaimer of Warranty. Unless required by applicable law or
 | 
			
		||||
      agreed to in writing, Licensor provides the Work (and each
 | 
			
		||||
      Contributor provides its Contributions) on an "AS IS" BASIS,
 | 
			
		||||
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
 | 
			
		||||
      implied, including, without limitation, any warranties or conditions
 | 
			
		||||
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
 | 
			
		||||
      PARTICULAR PURPOSE. You are solely responsible for determining the
 | 
			
		||||
      appropriateness of using or redistributing the Work and assume any
 | 
			
		||||
      risks associated with Your exercise of permissions under this License.
 | 
			
		||||
 | 
			
		||||
   8. Limitation of Liability. In no event and under no legal theory,
 | 
			
		||||
      whether in tort (including negligence), contract, or otherwise,
 | 
			
		||||
      unless required by applicable law (such as deliberate and grossly
 | 
			
		||||
      negligent acts) or agreed to in writing, shall any Contributor be
 | 
			
		||||
      liable to You for damages, including any direct, indirect, special,
 | 
			
		||||
      incidental, or consequential damages of any character arising as a
 | 
			
		||||
      result of this License or out of the use or inability to use the
 | 
			
		||||
      Work (including but not limited to damages for loss of goodwill,
 | 
			
		||||
      work stoppage, computer failure or malfunction, or any and all
 | 
			
		||||
      other commercial damages or losses), even if such Contributor
 | 
			
		||||
      has been advised of the possibility of such damages.
 | 
			
		||||
 | 
			
		||||
   9. Accepting Warranty or Additional Liability. While redistributing
 | 
			
		||||
      the Work or Derivative Works thereof, You may choose to offer,
 | 
			
		||||
      and charge a fee for, acceptance of support, warranty, indemnity,
 | 
			
		||||
      or other liability obligations and/or rights consistent with this
 | 
			
		||||
      License. However, in accepting such obligations, You may act only
 | 
			
		||||
      on Your own behalf and on Your sole responsibility, not on behalf
 | 
			
		||||
      of any other Contributor, and only if You agree to indemnify,
 | 
			
		||||
      defend, and hold each Contributor harmless for any liability
 | 
			
		||||
      incurred by, or claims asserted against, such Contributor by reason
 | 
			
		||||
      of your accepting any such warranty or additional liability.
 | 
			
		||||
 | 
			
		||||
   END OF TERMS AND CONDITIONS
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,4 @@
 | 
			
		|||
matrix-react-sdk
 | 
			
		||||
================
 | 
			
		||||
 | 
			
		||||
This is a react-based SDK for inserting a Matrix chat client into a web page
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,11 @@
 | 
			
		|||
<!doctype html>
 | 
			
		||||
<html lang="en">
 | 
			
		||||
  <head>
 | 
			
		||||
    <meta charset="utf-8">
 | 
			
		||||
    <title>Matrix Flux</title>
 | 
			
		||||
  </head>
 | 
			
		||||
  <body>
 | 
			
		||||
    <section id="matrixchat"></section>
 | 
			
		||||
    <script src="bundle.js"></script>
 | 
			
		||||
  </body>
 | 
			
		||||
</html>
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,12 @@
 | 
			
		|||
var React = require("react");
 | 
			
		||||
// In normal usage of the module:
 | 
			
		||||
//var MatrixReactSdk = require("matrix-react-sdk");
 | 
			
		||||
// Or to import the source directly from the file system:
 | 
			
		||||
// (This is useful for debugging the SDK as ut seems source
 | 
			
		||||
// maps cannot pass through two stages).
 | 
			
		||||
var MatrixReactSdk = require("../../src/index");
 | 
			
		||||
 | 
			
		||||
React.render(
 | 
			
		||||
    <MatrixReactSdk.MatrixChat />,
 | 
			
		||||
    document.getElementById('matrixchat')
 | 
			
		||||
);
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,19 @@
 | 
			
		|||
{
 | 
			
		||||
  "name": "matrix-react-example",
 | 
			
		||||
  "version": "0.0.1",
 | 
			
		||||
  "description": "Example usage of matrix-react-sdk",
 | 
			
		||||
  "author": "matrix.org",
 | 
			
		||||
  "license": "Apache 2",
 | 
			
		||||
  "devDependencies": {
 | 
			
		||||
    "browserify": "^10.2.3",
 | 
			
		||||
    "envify": "^3.4.0",
 | 
			
		||||
    "matrix-react-sdk": "../",
 | 
			
		||||
    "reactify": "^1.1.1",
 | 
			
		||||
    "uglifyify": "^3.0.1",
 | 
			
		||||
    "watchify": "^3.2.1"
 | 
			
		||||
  },
 | 
			
		||||
  "scripts": {
 | 
			
		||||
    "build": "browserify -t [ envify --NODE_ENV production ] -t reactify -g uglifyify lib/index.jsx -o bundle.js",
 | 
			
		||||
    "start": "watchify -v -d -t reactify lib/index.jsx -o bundle.js"
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,21 @@
 | 
			
		|||
{
 | 
			
		||||
  "name": "matrix-react-sdk",
 | 
			
		||||
  "version": "0.0.1",
 | 
			
		||||
  "description": "SDK for matrix.org using React",
 | 
			
		||||
  "author": "matrix.org",
 | 
			
		||||
  "license": "Apache 2",
 | 
			
		||||
  "main": "build/index.js",
 | 
			
		||||
  "scripts": {
 | 
			
		||||
    "build": "jsx src/ build",
 | 
			
		||||
    "start": "jsx -w src/ build --source-map-inline"
 | 
			
		||||
  },
 | 
			
		||||
  "dependencies": {
 | 
			
		||||
    "react-loader": "^1.4.0",
 | 
			
		||||
    "flux": "^2.0.3",
 | 
			
		||||
    "matrix-js-sdk": "0.0.4",
 | 
			
		||||
    "react": "^0.13.0"
 | 
			
		||||
  },
 | 
			
		||||
  "devDependencies": {
 | 
			
		||||
    "react-tools": "^0.13.3"
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,15 @@
 | 
			
		|||
// A thing that holds your Matrix Client
 | 
			
		||||
var Matrix = require("matrix-js-sdk");
 | 
			
		||||
 | 
			
		||||
var matrixClient = null;
 | 
			
		||||
 | 
			
		||||
module.exports = {
 | 
			
		||||
    get: function() {
 | 
			
		||||
        return matrixClient;
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    replaceUsingUrl: function(hs_url) {
 | 
			
		||||
        matrixClient = Matrix.createClient(hs_url);
 | 
			
		||||
    }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1 @@
 | 
			
		|||
module.exports = new require("flux").Dispatcher();
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1 @@
 | 
			
		|||
module.exports.MatrixChat = require("./pages/MatrixChat");
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,31 @@
 | 
			
		|||
var React = require('react');
 | 
			
		||||
 | 
			
		||||
var MatrixClientPeg = require("../MatrixClientPeg.js");
 | 
			
		||||
 | 
			
		||||
module.exports = React.createClass({
 | 
			
		||||
    getDefaultProps: function() {
 | 
			
		||||
        return {
 | 
			
		||||
            default_url: 'https://matrix.org/'
 | 
			
		||||
        };
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    getInitialState: function() {
 | 
			
		||||
        return {
 | 
			
		||||
            hs_url: this.props.default_url
 | 
			
		||||
        }
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    hsChanged: function(ev) {
 | 
			
		||||
        this.state.hs_url = ev.target.value;
 | 
			
		||||
        MatrixClientPeg.replaceUsingUrl(this.state.hs_url);
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    render: function() {
 | 
			
		||||
        return (
 | 
			
		||||
            <div className="HomeServerTextBox">
 | 
			
		||||
                Home Server URL: 
 | 
			
		||||
                <input type="text" value={this.state.hs_url} onChange={this.hsChanged} />
 | 
			
		||||
            </div>
 | 
			
		||||
        );
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,12 @@
 | 
			
		|||
var React = require('react');
 | 
			
		||||
 | 
			
		||||
module.exports = React.createClass({
 | 
			
		||||
    render: function() {
 | 
			
		||||
        return (
 | 
			
		||||
            <div>
 | 
			
		||||
                {this.props.event.content.body}
 | 
			
		||||
            </div>
 | 
			
		||||
        );
 | 
			
		||||
    },
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,26 @@
 | 
			
		|||
var React = require('react');
 | 
			
		||||
var Message = require('../molecules/Message');
 | 
			
		||||
 | 
			
		||||
module.exports = React.createClass({
 | 
			
		||||
    getInitialState: function() {
 | 
			
		||||
        return {
 | 
			
		||||
            messages: [ { foo: "bar"} ]
 | 
			
		||||
        }
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    render: function() {
 | 
			
		||||
        var messageItems = this.state.messages.map(function(ev) {
 | 
			
		||||
            return (
 | 
			
		||||
                <Message ev={ev} />
 | 
			
		||||
            );
 | 
			
		||||
        });
 | 
			
		||||
        return (
 | 
			
		||||
            <div>
 | 
			
		||||
                <ul className="message-list" ref="messageList">
 | 
			
		||||
                    {messageItems}
 | 
			
		||||
                </ul>
 | 
			
		||||
            </div>
 | 
			
		||||
        );
 | 
			
		||||
    },
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,13 @@
 | 
			
		|||
var React = require('react');
 | 
			
		||||
 | 
			
		||||
module.exports = React.createClass({
 | 
			
		||||
    render: function() {
 | 
			
		||||
        return (
 | 
			
		||||
            <div>
 | 
			
		||||
                <ul>
 | 
			
		||||
                </ul>
 | 
			
		||||
            </div>
 | 
			
		||||
        );
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,26 @@
 | 
			
		|||
var React = require('react');
 | 
			
		||||
 | 
			
		||||
var ThreadSection = require('../organisms/ThreadSection');
 | 
			
		||||
var MessageSection = require('../organisms/MessageSection');
 | 
			
		||||
 | 
			
		||||
var Login = require('../templates/Login');
 | 
			
		||||
 | 
			
		||||
var mxCli = require("../MatrixClientPeg").get();
 | 
			
		||||
 | 
			
		||||
module.exports = React.createClass({
 | 
			
		||||
    render: function() {
 | 
			
		||||
        if (mxCli && mxCli.credentials) {
 | 
			
		||||
            return (
 | 
			
		||||
                <div>
 | 
			
		||||
                    <ThreadSection />
 | 
			
		||||
                    <MessageSection />
 | 
			
		||||
                </div>
 | 
			
		||||
            );
 | 
			
		||||
        } else {
 | 
			
		||||
            return (
 | 
			
		||||
                <Login />
 | 
			
		||||
            );
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,38 @@
 | 
			
		|||
var React = require('react');
 | 
			
		||||
var MatrixClientPeg = require("../MatrixClientPeg");
 | 
			
		||||
 | 
			
		||||
var HomeServerTextBox = require("../molecules/HomeServerTextBox");
 | 
			
		||||
var Loader = require("react-loader");
 | 
			
		||||
 | 
			
		||||
module.exports = React.createClass({
 | 
			
		||||
    getInitialState: function() {
 | 
			
		||||
        return {
 | 
			
		||||
            step: 'choose_hs'
 | 
			
		||||
        };
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    setStep: function(step) {
 | 
			
		||||
        this.setState({ step: step });
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    onHSChosen: function(ev) {
 | 
			
		||||
        this.setStep("fetch_stages");
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    render: function() {
 | 
			
		||||
        switch (this.state.step) {
 | 
			
		||||
            case 'choose_hs':
 | 
			
		||||
                return (
 | 
			
		||||
                    <div>
 | 
			
		||||
                        <div>Please log in:</div>
 | 
			
		||||
                        <HomeServerTextBox />
 | 
			
		||||
                        <button onClick={this.onHSChosen}>Continue</button>
 | 
			
		||||
                    </div>
 | 
			
		||||
                );
 | 
			
		||||
            case 'fetch_stages':
 | 
			
		||||
                return (
 | 
			
		||||
                    <Loader />
 | 
			
		||||
                );
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
});
 | 
			
		||||
		Loading…
	
		Reference in New Issue