Skip to content

Commit afe4e90

Browse files
jdlehmanjdlehman
committedApr 4, 2015
Fix Switcher bug that required more than one Switch
- Now a Switcher can have just one Switch in it
1 parent 2f0c5d0 commit afe4e90

File tree

2 files changed

+311
-3
lines changed

2 files changed

+311
-3
lines changed
 

‎dist/switcheroo.min.js

+305-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,305 @@
1-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.switcheroo=t(require("react")):e.switcheroo=t(e.React)}(this,function(e){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";t.Switcher=n(4),t.Switch=n(3)},function(t,n,o){t.exports=e},function(e,t,n){"use strict";var o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,o.value&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},a=n(1),u=function(e){function t(){o(this,t),null!=e&&e.apply(this,arguments)}return i(t,e),r(t,[{key:"render",value:function(){return!1}}]),t}(a.Component);e.exports=u},function(e,t,n){"use strict";var o=function(e){return e&&e.__esModule?e["default"]:e},r=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,o.value&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},u=n(1),s=o(u),p=function(e){function t(){r(this,t),null!=e&&e.apply(this,arguments)}return a(t,e),i(t,[{key:"componentDidMount",value:function(){"function"==typeof this.props.onShow&&this.props.onShow()}},{key:"componentWillUnmount",value:function(){"function"==typeof this.props.onHide&&this.props.onHide()}},{key:"render",value:function(){return s.createElement(this.props.handler,this.props.handlerProps)}}]),t}(u.Component);e.exports=p,p.displayName="Switch",p.propTypes={path:s.PropTypes.string.isRequired,handler:s.PropTypes.func.isRequired,handlerProps:s.PropTypes.object,onShow:s.PropTypes.func,onHide:s.PropTypes.func}},function(e,t,n){"use strict";var o=function(e){return e&&e.__esModule?e["default"]:e},r=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,o.value&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=function f(e,t,n){var o=Object.getOwnPropertyDescriptor(e,t);if(void 0===o){var r=Object.getPrototypeOf(e);return null===r?void 0:f(r,t,n)}if("value"in o)return o.value;var i=o.get;return void 0===i?void 0:i.call(n)},u=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},s=n(1),p=o(s),c=n(2),l=o(c),h=function(e){function t(e){r(this,t),a(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.getLocation=this.getLocation.bind(this),this.getHashLocation=this.getHashLocation.bind(this),this.getHistoryLocation=this.getHistoryLocation.bind(this),this.handleRouteChange=this.handleRouteChange.bind(this),this.getSwitch=this.getSwitch.bind(this),this.defaultComponent=p.createElement(this.props.defaultHandler||l,this.props.defaultHandlerProps),this.state={visibleComponent:null}}return u(t,e),i(t,[{key:"componentDidMount",value:function(){window.addEventListener("load",this.handleRouteChange),this.props.pushState?window.addEventListener("popstate",this.handleRouteChange):window.addEventListener("hashchange",this.handleRouteChange)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("load",this.handleRouteChange),this.props.pushState?window.removeEventListener("popstate",this.handleRouteChange):window.removeEventListener("hashchange",this.handleRouteChange)}},{key:"getLocation",value:function(){var e=this.props.pushState?this.getHistoryLocation():this.getHashLocation();return"/"!==e.charAt(0)?"/"+e:e}},{key:"getHashLocation",value:function(){return decodeURI(window.location.href.split("#")[1]||"")}},{key:"getHistoryLocation",value:function(){return decodeURI(window.location.pathname+window.location.search)}},{key:"getSwitch",value:function(e){return this.props.children.filter(function(t){return t.props.path===e})[0]}},{key:"handleRouteChange",value:function(e){var t=this.getLocation(),n=this.getSwitch(t);this.setState({visibleComponent:n}),"function"==typeof this.props.onChange&&this.props.onChange(!!n,t)}},{key:"render",value:function(){return this.state.visibleComponent||this.defaultComponent}}]),t}(s.Component);e.exports=h,h.displayName="Switcher",h.propTypes={children:p.PropTypes.arrayOf(p.PropTypes.element).isRequired,pushState:p.PropTypes.bool,defaultHandler:p.PropTypes.func,defaultHandlerProps:p.PropTypes.object,onChange:p.PropTypes.func},h.defaultProps={pushState:!1}}])});
1+
(function webpackUniversalModuleDefinition(root, factory) {
2+
if(typeof exports === 'object' && typeof module === 'object')
3+
module.exports = factory(require("react"));
4+
else if(typeof define === 'function' && define.amd)
5+
define(["react"], factory);
6+
else if(typeof exports === 'object')
7+
exports["switcheroo"] = factory(require("react"));
8+
else
9+
root["switcheroo"] = factory(root["React"]);
10+
})(this, function(__WEBPACK_EXTERNAL_MODULE_3__) {
11+
return /******/ (function(modules) { // webpackBootstrap
12+
/******/ // The module cache
13+
/******/ var installedModules = {};
14+
15+
/******/ // The require function
16+
/******/ function __webpack_require__(moduleId) {
17+
18+
/******/ // Check if module is in cache
19+
/******/ if(installedModules[moduleId])
20+
/******/ return installedModules[moduleId].exports;
21+
22+
/******/ // Create a new module (and put it into the cache)
23+
/******/ var module = installedModules[moduleId] = {
24+
/******/ exports: {},
25+
/******/ id: moduleId,
26+
/******/ loaded: false
27+
/******/ };
28+
29+
/******/ // Execute the module function
30+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
31+
32+
/******/ // Flag the module as loaded
33+
/******/ module.loaded = true;
34+
35+
/******/ // Return the exports of the module
36+
/******/ return module.exports;
37+
/******/ }
38+
39+
40+
/******/ // expose the modules object (__webpack_modules__)
41+
/******/ __webpack_require__.m = modules;
42+
43+
/******/ // expose the module cache
44+
/******/ __webpack_require__.c = installedModules;
45+
46+
/******/ // __webpack_public_path__
47+
/******/ __webpack_require__.p = "";
48+
49+
/******/ // Load entry module and return exports
50+
/******/ return __webpack_require__(0);
51+
/******/ })
52+
/************************************************************************/
53+
/******/ ([
54+
/* 0 */
55+
/***/ function(module, exports, __webpack_require__) {
56+
57+
'use strict';
58+
59+
exports.Switcher = __webpack_require__(1);
60+
exports.Switch = __webpack_require__(2);
61+
62+
/***/ },
63+
/* 1 */
64+
/***/ function(module, exports, __webpack_require__) {
65+
66+
'use strict';
67+
68+
var _interopRequire = function (obj) { return obj && obj.__esModule ? obj['default'] : obj; };
69+
70+
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
71+
72+
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (descriptor.value) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
73+
74+
var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
75+
76+
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; };
77+
78+
var _React$Component = __webpack_require__(3);
79+
80+
var React = _interopRequire(_React$Component);
81+
82+
var _NullComponent = __webpack_require__(4);
83+
84+
var NullComponent = _interopRequire(_NullComponent);
85+
86+
var Switcher = (function (_Component) {
87+
function Switcher(props) {
88+
_classCallCheck(this, Switcher);
89+
90+
_get(Object.getPrototypeOf(Switcher.prototype), 'constructor', this).call(this, props);
91+
// bind methods
92+
this.getLocation = this.getLocation.bind(this);
93+
this.getHashLocation = this.getHashLocation.bind(this);
94+
this.getHistoryLocation = this.getHistoryLocation.bind(this);
95+
this.handleRouteChange = this.handleRouteChange.bind(this);
96+
this.getSwitch = this.getSwitch.bind(this);
97+
98+
this.defaultComponent = React.createElement(this.props.defaultHandler || NullComponent, this.props.defaultHandlerProps);
99+
// set initial state
100+
this.state = {
101+
visibleComponent: null
102+
};
103+
}
104+
105+
_inherits(Switcher, _Component);
106+
107+
_createClass(Switcher, [{
108+
key: 'componentDidMount',
109+
value: function componentDidMount() {
110+
window.addEventListener('load', this.handleRouteChange);
111+
if (this.props.pushState) {
112+
window.addEventListener('popstate', this.handleRouteChange);
113+
} else {
114+
window.addEventListener('hashchange', this.handleRouteChange);
115+
}
116+
}
117+
}, {
118+
key: 'componentWillUnmount',
119+
value: function componentWillUnmount() {
120+
window.removeEventListener('load', this.handleRouteChange);
121+
if (this.props.pushState) {
122+
window.removeEventListener('popstate', this.handleRouteChange);
123+
} else {
124+
window.removeEventListener('hashchange', this.handleRouteChange);
125+
}
126+
}
127+
}, {
128+
key: 'getLocation',
129+
value: function getLocation() {
130+
var location = this.props.pushState ? this.getHistoryLocation() : this.getHashLocation();
131+
if (location.charAt(0) !== '/') {
132+
return '/' + location;
133+
} else {
134+
return location;
135+
}
136+
}
137+
}, {
138+
key: 'getHashLocation',
139+
value: function getHashLocation() {
140+
return decodeURI(window.location.href.split('#')[1] || '');
141+
}
142+
}, {
143+
key: 'getHistoryLocation',
144+
value: function getHistoryLocation() {
145+
return decodeURI(window.location.pathname + window.location.search);
146+
}
147+
}, {
148+
key: 'getSwitch',
149+
value: function getSwitch(path) {
150+
var children = [].concat(this.props.children);
151+
return children.filter(function (child) {
152+
return child.props.path === path;
153+
})[0];
154+
}
155+
}, {
156+
key: 'handleRouteChange',
157+
value: function handleRouteChange(e) {
158+
var newRoute = this.getLocation(),
159+
switchElement = this.getSwitch(newRoute);
160+
this.setState({
161+
visibleComponent: switchElement
162+
});
163+
164+
if (typeof this.props.onChange === 'function') {
165+
this.props.onChange(!!switchElement, newRoute);
166+
}
167+
}
168+
}, {
169+
key: 'render',
170+
value: function render() {
171+
return this.state.visibleComponent || this.defaultComponent;
172+
}
173+
}]);
174+
175+
return Switcher;
176+
})(_React$Component.Component);
177+
178+
module.exports = Switcher;
179+
180+
Switcher.displayName = 'Switcher';
181+
182+
Switcher.propTypes = {
183+
children: React.PropTypes.oneOfType([React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.element]).isRequired,
184+
pushState: React.PropTypes.bool,
185+
defaultHandler: React.PropTypes.func,
186+
defaultHandlerProps: React.PropTypes.object,
187+
onChange: React.PropTypes.func
188+
};
189+
190+
Switcher.defaultProps = {
191+
pushState: false
192+
};
193+
194+
/***/ },
195+
/* 2 */
196+
/***/ function(module, exports, __webpack_require__) {
197+
198+
'use strict';
199+
200+
var _interopRequire = function (obj) { return obj && obj.__esModule ? obj['default'] : obj; };
201+
202+
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
203+
204+
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (descriptor.value) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
205+
206+
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; };
207+
208+
var _React$Component = __webpack_require__(3);
209+
210+
var React = _interopRequire(_React$Component);
211+
212+
var Switch = (function (_Component) {
213+
function Switch() {
214+
_classCallCheck(this, Switch);
215+
216+
if (_Component != null) {
217+
_Component.apply(this, arguments);
218+
}
219+
}
220+
221+
_inherits(Switch, _Component);
222+
223+
_createClass(Switch, [{
224+
key: 'componentDidMount',
225+
value: function componentDidMount() {
226+
if (typeof this.props.onShow === 'function') {
227+
this.props.onShow();
228+
}
229+
}
230+
}, {
231+
key: 'componentWillUnmount',
232+
value: function componentWillUnmount() {
233+
if (typeof this.props.onHide === 'function') {
234+
this.props.onHide();
235+
}
236+
}
237+
}, {
238+
key: 'render',
239+
value: function render() {
240+
return React.createElement(this.props.handler, this.props.handlerProps);
241+
}
242+
}]);
243+
244+
return Switch;
245+
})(_React$Component.Component);
246+
247+
module.exports = Switch;
248+
249+
Switch.displayName = 'Switch';
250+
251+
Switch.propTypes = {
252+
path: React.PropTypes.string.isRequired,
253+
handler: React.PropTypes.func.isRequired,
254+
handlerProps: React.PropTypes.object,
255+
onShow: React.PropTypes.func,
256+
onHide: React.PropTypes.func
257+
};
258+
259+
/***/ },
260+
/* 3 */
261+
/***/ function(module, exports, __webpack_require__) {
262+
263+
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
264+
265+
/***/ },
266+
/* 4 */
267+
/***/ function(module, exports, __webpack_require__) {
268+
269+
'use strict';
270+
271+
var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
272+
273+
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (descriptor.value) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
274+
275+
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; };
276+
277+
var _Component2 = __webpack_require__(3);
278+
279+
var NullComponent = (function (_Component) {
280+
function NullComponent() {
281+
_classCallCheck(this, NullComponent);
282+
283+
if (_Component != null) {
284+
_Component.apply(this, arguments);
285+
}
286+
}
287+
288+
_inherits(NullComponent, _Component);
289+
290+
_createClass(NullComponent, [{
291+
key: 'render',
292+
value: function render() {
293+
return false;
294+
}
295+
}]);
296+
297+
return NullComponent;
298+
})(_Component2.Component);
299+
300+
module.exports = NullComponent;
301+
302+
/***/ }
303+
/******/ ])
304+
});
305+
;

‎modules/components/Switcher.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@ export default class Switcher extends Component {
5757
}
5858

5959
getSwitch(path) {
60-
return this.props.children.filter((child) => {
60+
var children = [].concat(this.props.children);
61+
return children.filter((child) => {
6162
return child.props.path === path;
6263
})[0];
6364
}
@@ -82,7 +83,10 @@ export default class Switcher extends Component {
8283
Switcher.displayName = 'Switcher';
8384

8485
Switcher.propTypes = {
85-
children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired,
86+
children: React.PropTypes.oneOfType([
87+
React.PropTypes.arrayOf(React.PropTypes.element),
88+
React.PropTypes.element
89+
]).isRequired,
8690
pushState: React.PropTypes.bool,
8791
defaultHandler: React.PropTypes.func,
8892
defaultHandlerProps: React.PropTypes.object,

0 commit comments

Comments
 (0)
Please sign in to comment.