Skip to content

Commit

Permalink
Fix export problem and make Switcher default export
Browse files Browse the repository at this point in the history
- upgrade to babel6 is stricter about destructuring exports
- upgrade examples
  • Loading branch information
jdlehman committed Dec 23, 2015
1 parent b6db783 commit 9d97f19
Show file tree
Hide file tree
Showing 16 changed files with 380 additions and 149 deletions.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

`switcheroo` allows you to specify a React container component that renders a single child component based on a property of `window.location` (`hash`, `pathname`, etc.), using `window.location.hash` by default.

The `Switcher` container component provided by `switcheroo` can accept any React elements, as long as they have a `path` property. `switcheroo` is very configurable, and you can read about the properties the [`Switcher`](docs/components/Switcher.md) and children elements (that we will refer to as ["Switches"](docs/components/Switch.md)) take in the [docs](docs/components).
The `Switcher` container component provided by `switcheroo` can accept any React elements, as long as they have a `path` property. `switcheroo` is very configurable, and you can read about the properties the [`Switcher`](docs/Switcher.md) and children elements (that we will refer to as ["Switches"](docs/Switch.md)) take in the [docs](docs/).

## Installation

Expand All @@ -31,17 +31,17 @@ You can try out `switcheroo` now on [jsbin](https://jsbin.com/qusomol/1/edit?js,
## Features

- Router agnostic. You can use any router, even [react-router](https://github.com/rackt/react-router), in conjunction with `switcheroo`
- Any React component can be used as a ["Switch"](docs/components/Switch.md) without any modification, other than defining a `path` property on it.
- Any React component can be used as a ["Switch"](docs/Switch.md) without any modification, other than defining a `path` property on it.
- Supports hashChange and pushState
- Provides callbacks including when the path [changes](docs/components/Switcher.md#onchange)
- Supports [React animations](https://facebook.github.io/react/docs/animation.html) via [`wrapper`](docs/components/Switcher.md#wrapper) prop
- Provides callbacks including when the path [changes](docs/Switcher.md#onchange)
- Supports [React animations](https://facebook.github.io/react/docs/animation.html) via [`wrapper`](docs/Switcher.md#wrapper) prop
- Highly configurable via props
- Lightweight ~4k gzipped

## Example Usage

```js
import {Switcher} from 'switcheroo';
import Switcher from 'switcheroo';

<Switcher>
<HomeComponent path="/" />
Expand Down
234 changes: 233 additions & 1 deletion dist/switcheroo.min.js
Original file line number Diff line number Diff line change
@@ -1 +1,233 @@
!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(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";t.Switcher=o(1)},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(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&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}();Object.defineProperty(t,"__esModule",{value:!0});var p=o(3),c=n(p),h=o(2),u=function(e){function t(e){r(this,t);var o=i(this,Object.getPrototypeOf(t).call(this,e));l.call(o);var n=o.getLocation(),a=o.getSwitch(n);return o.state={visibleSwitch:a},o}return a(t,e),s(t,[{key:"componentDidMount",value:function(){this.props.load&&window.addEventListener("load",this.handleRouteChange),this.props.pushState&&window.addEventListener("popstate",this.handleRouteChange),this.props.hashChange&&window.addEventListener("hashchange",this.handleRouteChange)}},{key:"componentWillReceiveProps",value:function(e){var t=this.getLocation(),o=this.getSwitch(t);this.setState({visibleSwitch:o})}},{key:"componentWillUnmount",value:function(){this.props.load&&window.removeEventListener("load",this.handleRouteChange),this.props.pushState&&window.removeEventListener("popstate",this.handleRouteChange),this.props.hashChange&&window.removeEventListener("hashchange",this.handleRouteChange)}},{key:"render",value:function(){return this.props.wrapper?c["default"].createElement(this.props.wrapper,this.props,this.state.visibleSwitch):this.state.visibleSwitch}}]),t}(p.Component);u.displayName="Switcher",u.propTypes={children:p.PropTypes.oneOfType([p.PropTypes.arrayOf(p.PropTypes.element),p.PropTypes.element]).isRequired,pushState:p.PropTypes.bool,hashChange:p.PropTypes.bool,load:p.PropTypes.bool,onChange:p.PropTypes.func,wrapper:p.PropTypes.node,location:p.PropTypes.string,basePath:p.PropTypes.string},u.defaultProps={pushState:!1,hashChange:!0,load:!0,location:"hash",basePath:""};var l=function(){var e=this;this.getLocation=function(){var t=decodeURI(window.location[e.props.location].slice(1).split("?")[0]);return"/"!==t.charAt(0)?"/"+t:t},this.getSwitch=function(t){var o=[].concat(e.props.children),n=(0,h.removeTrailingSlash)(t);return o.filter(function(t){var o=[].concat(t.props.path).map(function(t){return(0,h.removeTrailingSlash)(e.props.basePath+t)+"/?"}),r=new RegExp("^"+o.join("|")+"$");return r.test(n)})[0]||null},this.handleRouteChange=function(t){var o=e.getLocation(),n=e.getSwitch(o);"function"==typeof e.props.onChange&&e.props.onChange(!!n,o),e.setState({visibleSwitch:n})}};t["default"]=u},function(e,t){"use strict";function o(e){return"/"===e?e:"/"!==e.slice(-1)?e:e.slice(0,-1)}Object.defineProperty(t,"__esModule",{value:!0}),t.removeTrailingSlash=o},function(t,o){t.exports=e}])});
(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["switcheroo"] = factory(require("react"));
else
root["switcheroo"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
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';

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 ("value" in descriptor) 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; }; })();

Object.defineProperty(exports, "__esModule", {
value: true
});

var _react = __webpack_require__(1);

var _react2 = _interopRequireDefault(_react);

var _helpers = __webpack_require__(2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(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) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Switcher = (function (_Component) {
_inherits(Switcher, _Component);

function Switcher(props) {
_classCallCheck(this, Switcher);

var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Switcher).call(this, props));

_initialiseProps.call(_this);

var currentPath = _this.getLocation();
var switchElement = _this.getSwitch(currentPath);
_this.state = {
visibleSwitch: switchElement
};
return _this;
}

_createClass(Switcher, [{
key: 'componentDidMount',
value: function componentDidMount() {
if (this.props.load) {
window.addEventListener('load', this.handleRouteChange);
}
if (this.props.pushState) {
window.addEventListener('popstate', this.handleRouteChange);
}
if (this.props.hashChange) {
window.addEventListener('hashchange', this.handleRouteChange);
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var currentPath = this.getLocation();
var switchElement = this.getSwitch(currentPath);

this.setState({
visibleSwitch: switchElement
});
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (this.props.load) {
window.removeEventListener('load', this.handleRouteChange);
}
if (this.props.pushState) {
window.removeEventListener('popstate', this.handleRouteChange);
}
if (this.props.hashChange) {
window.removeEventListener('hashchange', this.handleRouteChange);
}
}
}, {
key: 'render',
value: function render() {
if (this.props.wrapper) {
return _react2.default.createElement(this.props.wrapper, this.props, this.state.visibleSwitch);
} else {
return this.state.visibleSwitch;
}
}
}]);

return Switcher;
})(_react.Component);

Switcher.displayName = 'Switcher';
Switcher.propTypes = {
children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.element), _react.PropTypes.element]).isRequired,
pushState: _react.PropTypes.bool,
hashChange: _react.PropTypes.bool,
load: _react.PropTypes.bool,
onChange: _react.PropTypes.func,
wrapper: _react.PropTypes.node,
location: _react.PropTypes.string,
basePath: _react.PropTypes.string
};
Switcher.defaultProps = {
pushState: false,
hashChange: true,
load: true,
location: 'hash',
basePath: ''
};

var _initialiseProps = function _initialiseProps() {
var _this2 = this;

this.getLocation = function () {
var location = decodeURI(window.location[_this2.props.location].slice(1).split('?')[0]);
if (location.charAt(0) !== '/') {
return '/' + location;
} else {
return location;
}
};

this.getSwitch = function (path) {
var children = [].concat(_this2.props.children);
var consistentPath = (0, _helpers.removeTrailingSlash)(path);
return children.filter(function (child) {
var childPaths = [].concat(child.props.path).map(function (childPath) {
return (0, _helpers.removeTrailingSlash)(_this2.props.basePath + childPath) + '/?';
});
var regex = new RegExp('^' + childPaths.join('|') + '$');
return regex.test(consistentPath);
})[0] || null;
};

this.handleRouteChange = function (ev) {
var currentPath = _this2.getLocation();
var switchElement = _this2.getSwitch(currentPath);

if (typeof _this2.props.onChange === 'function') {
_this2.props.onChange(!!switchElement, currentPath);
}

_this2.setState({
visibleSwitch: switchElement
});
};
};

exports.default = Switcher;

/***/ },
/* 1 */
/***/ function(module, exports) {

module.exports = __WEBPACK_EXTERNAL_MODULE_1__;

/***/ },
/* 2 */
/***/ function(module, exports) {

'use strict';

Object.defineProperty(exports, "__esModule", {
value: true
});
exports.removeTrailingSlash = removeTrailingSlash;
function removeTrailingSlash(path) {
if (path === '/') {
return path;
} else {
return path.slice(-1) !== '/' ? path : path.slice(0, -1);
}
}

/***/ }
/******/ ])
});
;
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion examples/animation/components/LeftContent.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Switcher} from 'switcheroo';
import Switcher from 'switcheroo';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import Panel from './Panel';

Expand Down
2 changes: 1 addition & 1 deletion examples/animation/components/Overlay.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, {Component} from 'react';
import {VelocityTransitionGroup} from 'velocity-react';
import {Switcher} from 'switcheroo';
import Switcher from 'switcheroo';

export default class Overlay extends Component {
closeOverlay(e) {
Expand Down
2 changes: 1 addition & 1 deletion examples/animation/components/RightContent.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Switcher} from 'switcheroo';
import Switcher from 'switcheroo';
import Panel from './Panel';

export default class RightContent extends Component {
Expand Down
Loading

0 comments on commit 9d97f19

Please sign in to comment.