From 3a8b10469c9b68e1dce913cb9cb5b3445876fb29 Mon Sep 17 00:00:00 2001 From: Jonny Buchanan Date: Wed, 8 Apr 2015 12:02:24 +0100 Subject: [PATCH] Implement example of non-GET form submission and redisplay with changes from https://github.com/rackt/react-router/pull/828 --- README.md | 2 + demo/ReactRouter-0.13.2+828.js | 3420 ++++++++++++++++++++++++++++++++ demo/index.html | 80 +- dist/react-router-form.js | 9 +- src/index.js | 14 +- 5 files changed, 3468 insertions(+), 57 deletions(-) create mode 100644 demo/ReactRouter-0.13.2+828.js diff --git a/README.md b/README.md index 481f6a9..ba044f3 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ ## React Router `
` +## Note: this branch depends on changes to React Router implemented in [pull request #828](https://github.com/rackt/react-router/pull/828) + A `` component for use with [react-router](https://github.com/rackt/react-router) which does for `` what react-router's diff --git a/demo/ReactRouter-0.13.2+828.js b/demo/ReactRouter-0.13.2+828.js new file mode 100644 index 0000000..ae117b9 --- /dev/null +++ b/demo/ReactRouter-0.13.2+828.js @@ -0,0 +1,3420 @@ +(function webpackUniversalModuleDefinition(root, factory) { + if(typeof exports === 'object' && typeof module === 'object') + module.exports = factory(require("react")); + else if(typeof define === 'function' && define.amd) + define(["react"], factory); + else if(typeof exports === 'object') + exports["ReactRouter"] = factory(require("react")); + else + root["ReactRouter"] = factory(root["React"]); +})(this, function(__WEBPACK_EXTERNAL_MODULE_21__) { +return /******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + "use strict"; + + exports.DefaultRoute = __webpack_require__(2); + exports.Link = __webpack_require__(4); + exports.NotFoundRoute = __webpack_require__(1); + exports.Redirect = __webpack_require__(7); + exports.Route = __webpack_require__(3); + exports.RouteHandler = __webpack_require__(5); + + exports.HashLocation = __webpack_require__(6); + exports.HistoryLocation = __webpack_require__(10); + exports.RefreshLocation = __webpack_require__(8); + exports.StaticLocation = __webpack_require__(9); + exports.TestLocation = __webpack_require__(11); + + exports.ImitateBrowserBehavior = __webpack_require__(13); + exports.ScrollToTopBehavior = __webpack_require__(12); + + exports.History = __webpack_require__(14); + exports.Navigation = __webpack_require__(15); + exports.State = __webpack_require__(17); + + exports.createRoute = __webpack_require__(16).createRoute; + exports.createDefaultRoute = __webpack_require__(16).createDefaultRoute; + exports.createNotFoundRoute = __webpack_require__(16).createNotFoundRoute; + exports.createRedirect = __webpack_require__(16).createRedirect; + exports.createRoutesFromReactChildren = __webpack_require__(18); + exports.create = __webpack_require__(19); + exports.run = __webpack_require__(20); + +/***/ }, +/* 1 */ +/***/ function(module, exports, __webpack_require__) { + + "use strict"; + + var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; + + var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; + + var PropTypes = __webpack_require__(23); + var RouteHandler = __webpack_require__(5); + var Route = __webpack_require__(3); + + /** + * A is a special kind of that + * renders when the beginning of its parent's path matches + * but none of its siblings do, including any . + * Only one such route may be used at any given level in the + * route hierarchy. + */ + + var NotFoundRoute = (function (_Route) { + function NotFoundRoute() { + _classCallCheck(this, NotFoundRoute); + + if (_Route != null) { + _Route.apply(this, arguments); + } + } + + _inherits(NotFoundRoute, _Route); + + return NotFoundRoute; + })(Route); + + // TODO: Include these in the above class definition + // once we can use ES7 property initializers. + // https://github.com/babel/babel/issues/619 + + NotFoundRoute.propTypes = { + name: PropTypes.string, + path: PropTypes.falsy, + children: PropTypes.falsy, + handler: PropTypes.func.isRequired + }; + + NotFoundRoute.defaultProps = { + handler: RouteHandler + }; + + module.exports = NotFoundRoute; + +/***/ }, +/* 2 */ +/***/ function(module, exports, __webpack_require__) { + + "use strict"; + + var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; + + var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; + + var PropTypes = __webpack_require__(23); + var RouteHandler = __webpack_require__(5); + var Route = __webpack_require__(3); + + /** + * A component is a special kind of that + * renders when its parent matches but none of its siblings do. + * Only one such route may be used at any given level in the + * route hierarchy. + */ + + var DefaultRoute = (function (_Route) { + function DefaultRoute() { + _classCallCheck(this, DefaultRoute); + + if (_Route != null) { + _Route.apply(this, arguments); + } + } + + _inherits(DefaultRoute, _Route); + + return DefaultRoute; + })(Route); + + // TODO: Include these in the above class definition + // once we can use ES7 property initializers. + // https://github.com/babel/babel/issues/619 + + DefaultRoute.propTypes = { + name: PropTypes.string, + path: PropTypes.falsy, + children: PropTypes.falsy, + handler: PropTypes.func.isRequired + }; + + DefaultRoute.defaultProps = { + handler: RouteHandler + }; + + module.exports = DefaultRoute; + +/***/ }, +/* 3 */ +/***/ function(module, exports, __webpack_require__) { + + "use strict"; + + var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); + + var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; + + var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; + + var React = __webpack_require__(21); + var invariant = __webpack_require__(35); + var PropTypes = __webpack_require__(23); + var RouteHandler = __webpack_require__(5); + + /** + * components specify components that are rendered to the page when the + * URL matches a given pattern. + * + * Routes are arranged in a nested tree structure. When a new URL is requested, + * the tree is searched depth-first to find a route whose path matches the URL. + * When one is found, all routes in the tree that lead to it are considered + * "active" and their components are rendered into the DOM, nested in the same + * order as they are in the tree. + * + * The preferred way to configure a router is using JSX. The XML-like syntax is + * a great way to visualize how routes are laid out in an application. + * + * var routes = [ + * + * + * + * + * + * ]; + * + * Router.run(routes, function (Handler) { + * React.render(, document.body); + * }); + * + * Handlers for Route components that contain children can render their active + * child route using a element. + * + * var App = React.createClass({ + * render: function () { + * return ( + *
+ * + *
+ * ); + * } + * }); + * + * If no handler is provided for the route, it will render a matched child route. + */ + + var Route = (function (_React$Component) { + function Route() { + _classCallCheck(this, Route); + + if (_React$Component != null) { + _React$Component.apply(this, arguments); + } + } + + _inherits(Route, _React$Component); + + _createClass(Route, { + render: { + value: function render() { + invariant(false, "%s elements are for router configuration only and should not be rendered", this.constructor.name); + } + } + }); + + return Route; + })(React.Component); + + // TODO: Include these in the above class definition + // once we can use ES7 property initializers. + // https://github.com/babel/babel/issues/619 + + Route.propTypes = { + name: PropTypes.string, + path: PropTypes.string, + handler: PropTypes.func, + ignoreScrollBehavior: PropTypes.bool + }; + + Route.defaultProps = { + handler: RouteHandler + }; + + module.exports = Route; + +/***/ }, +/* 4 */ +/***/ function(module, exports, __webpack_require__) { + + "use strict"; + + var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); + + var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; + + var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; + + var React = __webpack_require__(21); + var assign = __webpack_require__(33); + var PropTypes = __webpack_require__(23); + + function isLeftClickEvent(event) { + return event.button === 0; + } + + function isModifiedEvent(event) { + return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey); + } + + /** + * components are used to create an element that links to a route. + * When that route is active, the link gets an "active" class name (or the + * value of its `activeClassName` prop). + * + * For example, assuming you have the following route: + * + * + * + * You could use the following component to link to that route: + * + * + * + * In addition to params, links may pass along query string parameters + * using the `query` prop. + * + * + */ + + var Link = (function (_React$Component) { + function Link() { + _classCallCheck(this, Link); + + if (_React$Component != null) { + _React$Component.apply(this, arguments); + } + } + + _inherits(Link, _React$Component); + + _createClass(Link, { + handleClick: { + value: function handleClick(event) { + var allowTransition = true; + var clickResult; + + if (this.props.onClick) clickResult = this.props.onClick(event); + + if (isModifiedEvent(event) || !isLeftClickEvent(event)) { + return; + }if (clickResult === false || event.defaultPrevented === true) allowTransition = false; + + event.preventDefault(); + + if (allowTransition) this.context.router.transitionTo(this.props.to, this.props.params, this.props.query); + } + }, + getHref: { + + /** + * Returns the value of the "href" attribute to use on the DOM element. + */ + + value: function getHref() { + return this.context.router.makeHref(this.props.to, this.props.params, this.props.query); + } + }, + getClassName: { + + /** + * Returns the value of the "class" attribute to use on the DOM element, which contains + * the value of the activeClassName property when this is active. + */ + + value: function getClassName() { + var className = this.props.className; + + if (this.getActiveState()) className += " " + this.props.activeClassName; + + return className; + } + }, + getActiveState: { + value: function getActiveState() { + return this.context.router.isActive(this.props.to, this.props.params, this.props.query); + } + }, + render: { + value: function render() { + var props = assign({}, this.props, { + href: this.getHref(), + className: this.getClassName(), + onClick: this.handleClick.bind(this) + }); + + if (props.activeStyle && this.getActiveState()) props.style = props.activeStyle; + + return React.DOM.a(props, this.props.children); + } + } + }); + + return Link; + })(React.Component); + + // TODO: Include these in the above class definition + // once we can use ES7 property initializers. + // https://github.com/babel/babel/issues/619 + + Link.contextTypes = { + router: PropTypes.router.isRequired + }; + + Link.propTypes = { + activeClassName: PropTypes.string.isRequired, + to: PropTypes.oneOfType([PropTypes.string, PropTypes.route]).isRequired, + params: PropTypes.object, + query: PropTypes.object, + activeStyle: PropTypes.object, + onClick: PropTypes.func + }; + + Link.defaultProps = { + activeClassName: "active", + className: "" + }; + + module.exports = Link; + +/***/ }, +/* 5 */ +/***/ function(module, exports, __webpack_require__) { + + "use strict"; + + var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); + + var _inherits = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }; + + var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; + + var React = __webpack_require__(21); + var ContextWrapper = __webpack_require__(22); + var assign = __webpack_require__(33); + var PropTypes = __webpack_require__(23); + + var REF_NAME = "__routeHandler__"; + + /** + * A component renders the active child route handler + * when routes are nested. + */ + + var RouteHandler = (function (_React$Component) { + function RouteHandler() { + _classCallCheck(this, RouteHandler); + + if (_React$Component != null) { + _React$Component.apply(this, arguments); + } + } + + _inherits(RouteHandler, _React$Component); + + _createClass(RouteHandler, { + getChildContext: { + value: function getChildContext() { + return { + routeDepth: this.context.routeDepth + 1 + }; + } + }, + componentDidMount: { + value: function componentDidMount() { + this._updateRouteComponent(this.refs[REF_NAME]); + } + }, + componentDidUpdate: { + value: function componentDidUpdate() { + this._updateRouteComponent(this.refs[REF_NAME]); + } + }, + componentWillUnmount: { + value: function componentWillUnmount() { + this._updateRouteComponent(null); + } + }, + _updateRouteComponent: { + value: function _updateRouteComponent(component) { + this.context.router.setRouteComponentAtDepth(this.getRouteDepth(), component); + } + }, + getRouteDepth: { + value: function getRouteDepth() { + return this.context.routeDepth; + } + }, + createChildRouteHandler: { + value: function createChildRouteHandler(props) { + var route = this.context.router.getRouteAtDepth(this.getRouteDepth()); + return route ? React.createElement(route.handler, assign({}, props || this.props, { ref: REF_NAME })) : null; + } + }, + render: { + value: function render() { + var handler = this.createChildRouteHandler(); + // - +