cluedin-widget/dist/cluedin_demo.js

This is the project for creating and managing widgets in CluedIn.

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'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
});
exports.default = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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 Loading = function (_Component) {
    _inherits(Loading, _Component);

    function Loading() {
        _classCallCheck(this, Loading);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(Loading).apply(this, arguments));
    }

    _createClass(Loading, [{
        key: 'render',
        value: function render() {
            var style = {
                width: '75px'
            };

            return _react2.default.createElement(
                'div',
                { className: 'cluedIn_loading' },
                _react2.default.createElement('img', { style: style,
                    src: 'http://s3-eu-west-1.amazonaws.com/cluedindev/cluedin_loading.gif',
                    alt: 'loading...' })
            );
        }
    }]);

    return Loading;
}(_react.Component);

exports.default = Loading;
;

},{"react":243}],2:[function(require,module,exports){
'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
});
exports.default = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _loading = require('./loading.jsx');

var _loading2 = _interopRequireDefault(_loading);

var _widgetMenu = require('./widgetMenu.jsx');

var _perfectScrollbar = require('perfect-scrollbar');

var _perfectScrollbar2 = _interopRequireDefault(_perfectScrollbar);

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 Widget = function (_Component) {
    _inherits(Widget, _Component);

    function Widget() {
        _classCallCheck(this, Widget);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(Widget).apply(this, arguments));
    }

    _createClass(Widget, [{
        key: 'render',
        value: function render() {
            var _props = this.props;
            var title = _props.title;
            var minHeight = _props.minHeight;
            var loading = _props.loading;
            var noScroll = _props.noScroll;
            var loadingHeight = _props.loadingHeight;
            var menu = _props.menu;

            var widgetClassName = "cluedIn_widget";
            var widgetContentStyle = {};
            var loadingHtml = undefined;
            var menuContent = undefined;

            if (loading) {
                minHeight = loadingHeight || '300px';
                loadingHtml = _react2.default.createElement(_loading2.default, null);
            }

            var widgetStyle = {
                minHeight: minHeight ? minHeight : 'auto'
            };

            if (noScroll) {
                widgetStyle.overflow = 'hidden';
                widgetContentStyle.overflow = 'hidden';
            }

            if (menu) {
                menuContent = _react2.default.createElement(_widgetMenu.WidgetMenu, { menu: menu });
            }

            if (title) {
                return _react2.default.createElement(
                    'div',
                    { style: widgetStyle, className: widgetClassName },
                    loadingHtml,
                    _react2.default.createElement(
                        'div',
                        { className: 'cluedIn_widget_title' },
                        title,
                        menuContent
                    ),
                    _react2.default.createElement(
                        'div',
                        { ref: 'widgetContent', style: widgetContentStyle, className: ' cluedIn_widget_content' },
                        this.props.children
                    )
                );
            } else {
                return _react2.default.createElement(
                    'div',
                    { ref: 'widgetContent', style: widgetStyle, className: ' cluedIn_widget' },
                    loadingHtml,
                    this.props.children
                );
            }
        }
    }, {
        key: 'componentDidUpdate',
        value: function componentDidUpdate() {
            var _props2 = this.props;
            var loading = _props2.loading;
            var noScroll = _props2.noScroll;

            if (loading) {
                return;
            }

            if (!noScroll && this.refs.widgetContent !== null) {
                _perfectScrollbar2.default.initialize(this.refs.widgetContent, {
                    scrollYMarginOffset: 20,
                    suppressScrollX: true
                });
            } else {
                _perfectScrollbar2.default.destroy(this.refs.widgetContent);
            }

            document.addEventListener('ps-y-reach-end', function () {
                console.log('lalallaal!');
            });
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            var noScroll = this.props.noScroll;

            if (!noScroll && this.refs.widgetContent !== null) {
                _perfectScrollbar2.default.destroy(this.refs.widgetContent);
            }
        }
    }]);

    return Widget;
}(_react.Component);

exports.default = Widget;

Widget.propTypes = {
    title: _react2.default.PropTypes.string
};

},{"./loading.jsx":1,"./widgetMenu.jsx":3,"perfect-scrollbar":31,"react":243}],3:[function(require,module,exports){
'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
});
exports.WidgetMenu = exports.WidgetLink = exports.WidgetAction = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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 WidgetAction = exports.WidgetAction = function (_Component) {
    _inherits(WidgetAction, _Component);

    function WidgetAction() {
        _classCallCheck(this, WidgetAction);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(WidgetAction).apply(this, arguments));
    }

    _createClass(WidgetAction, [{
        key: 'render',
        value: function render() {
            var _props = this.props;
            var title = _props.title;
            var onClick = _props.onClick;
            var icon = _props.icon;

            var iconHtml = undefined;
            if (icon) {
                iconHtml = _react2.default.createElement('i', { className: icon });
            }
            return _react2.default.createElement(
                'li',
                { onClick: onClick, className: 'cluedIn_widget_menu_action' },
                _react2.default.createElement(
                    'a',
                    null,
                    iconHtml,
                    title
                )
            );
        }
    }]);

    return WidgetAction;
}(_react.Component);

var WidgetLink = exports.WidgetLink = function (_Component2) {
    _inherits(WidgetLink, _Component2);

    function WidgetLink() {
        _classCallCheck(this, WidgetLink);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(WidgetLink).apply(this, arguments));
    }

    _createClass(WidgetLink, [{
        key: 'render',
        value: function render() {
            var _props2 = this.props;
            var title = _props2.title;
            var url = _props2.url;

            return _react2.default.createElement(
                'li',
                { className: 'cluedIn_widget_menu_link' },
                _react2.default.createElement(
                    'a',
                    { href: url },
                    title
                )
            );
        }
    }]);

    return WidgetLink;
}(_react.Component);

var WidgetMenu = exports.WidgetMenu = function (_Component3) {
    _inherits(WidgetMenu, _Component3);

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

        var _this3 = _possibleConstructorReturn(this, Object.getPrototypeOf(WidgetMenu).call(this, props));

        _this3.state = { active: false };
        return _this3;
    }

    _createClass(WidgetMenu, [{
        key: 'isMounted',
        value: function isMounted() {
            try {
                (0, _reactDom.findDOMNode)(this);
                return true;
            } catch (e) {
                // Error: Invariant Violation: Component (with keys: props,context,state,refs,_reactInternalInstance) contains `render` method but is not mounted in the DOM
                return false;
            }
        }
    }, {
        key: 'componentDidMount',
        value: function componentDidMount() {
            if (this.isMounted()) {
                window.addEventListener('click', this._onWindowClick.bind(this));
            }
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            window.removeEventListener('click', this._onWindowClick.bind(this));
        }
    }, {
        key: 'isActive',
        value: function isActive() {
            return typeof this.props.active === 'boolean' ? this.props.active : this.state.active;
        }
    }, {
        key: 'hide',
        value: function hide() {
            this.setState({
                active: false
            });
            if (this.props.onHide) {
                this.props.onHide();
            }
        }
    }, {
        key: 'show',
        value: function show() {
            this.setState({
                active: true
            });
            if (this.props.onShow) {
                this.props.onShow();
            }
        }
    }, {
        key: '_onWindowClick',
        value: function _onWindowClick(event) {
            var dropdown_element = (0, _reactDom.findDOMNode)(this);
            if (event.target !== dropdown_element && !dropdown_element.contains(event.target) && this.isActive()) {
                this.hide();
            }
        }
    }, {
        key: '_onToggleClick',
        value: function _onToggleClick(event) {
            event.preventDefault();
            if (this.isActive()) {
                this.hide();
            } else {
                this.show();
            }
        }
    }, {
        key: 'render',
        value: function render() {
            var menu = this.props.menu;

            var active = this.isActive();

            var widgetMenuContent = menu.map(function (a, i) {
                return _react2.default.createElement(
                    'div',
                    { key: i },
                    _react2.default.createElement(WidgetAction, a)
                );
            });

            var dropdownClasses = (0, _classnames2.default)({
                cluedIn_widget_menu: true,
                'cluedIn_widget_menu_active': active
            });

            return _react2.default.createElement(
                'div',
                { className: dropdownClasses },
                _react2.default.createElement(
                    'div',
                    { onClick: this._onToggleClick.bind(this), className: 'cluedIn_widget_buttonArea' },
                    _react2.default.createElement(
                        'div',
                        { className: 'cluedIn_widget_button' },
                        _react2.default.createElement(
                            'a',
                            null,
                            _react2.default.createElement('i', { className: 'fa fa-ellipsis-v' })
                        )
                    )
                ),
                _react2.default.createElement(
                    'div',
                    { className: 'cluedIn_widget_dropdown' },
                    _react2.default.createElement(
                        'ul',
                        null,
                        widgetMenuContent
                    )
                )
            );
        }
    }]);

    return WidgetMenu;
}(_react.Component);

},{"classnames":10,"react":243,"react-dom":53}],4:[function(require,module,exports){
"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
});
exports.default = undefined;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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 DemoPage = function (_Component) {
    _inherits(DemoPage, _Component);

    function DemoPage() {
        _classCallCheck(this, DemoPage);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(DemoPage).apply(this, arguments));
    }

    _createClass(DemoPage, [{
        key: "render",
        value: function render() {
            var _props = this.props;
            var title = _props.title;
            var purpose = _props.purpose;

            return _react2.default.createElement(
                "div",
                { className: "DemoPage" },
                _react2.default.createElement(
                    "h1",
                    { className: "DemoPageTitle" },
                    title
                ),
                _react2.default.createElement(
                    "div",
                    { className: "DemoPagePurpose" },
                    _react2.default.createElement(
                        "p",
                        null,
                        purpose
                    )
                ),
                _react2.default.createElement(
                    "div",
                    { className: "DemoPageContent" },
                    this.props.children
                )
            );
        }
    }]);

    return DemoPage;
}(_react.Component);

exports.default = DemoPage;
;

},{"react":243}],5:[function(require,module,exports){
"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
});
exports.default = undefined;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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 DemoPanel = function (_Component) {
    _inherits(DemoPanel, _Component);

    function DemoPanel() {
        _classCallCheck(this, DemoPanel);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(DemoPanel).apply(this, arguments));
    }

    _createClass(DemoPanel, [{
        key: "render",
        value: function render() {
            var _props = this.props;
            var title = _props.title;
            var properties = _props.properties;

            return _react2.default.createElement(
                "div",
                { className: "DemoPanel" },
                _react2.default.createElement(
                    "div",
                    { className: "DemoPanelTitle" },
                    title
                ),
                _react2.default.createElement(
                    "div",
                    { className: "DemoPanelContent" },
                    this.props.children
                ),
                _react2.default.createElement(
                    "div",
                    { className: "DemoPanelProperties" },
                    _react2.default.createElement(
                        "div",
                        null,
                        "Properties:"
                    ),
                    _react2.default.createElement(
                        "div",
                        null,
                        properties
                    )
                )
            );
        }
    }]);

    return DemoPanel;
}(_react.Component);

exports.default = DemoPanel;
;

},{"react":243}],6:[function(require,module,exports){
'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
});
exports.default = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _widget = require('../../core/components/generics/widget.jsx');

var _widget2 = _interopRequireDefault(_widget);

var _DemoPage = require('./demo/DemoPage.jsx');

var _DemoPage2 = _interopRequireDefault(_DemoPage);

var _DemoPanel = require('./demo/DemoPanel.jsx');

var _DemoPanel2 = _interopRequireDefault(_DemoPanel);

var _config = require('../config');

var _config2 = _interopRequireDefault(_config);

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 widgetDemoConfig = _config2.default['Widget'];

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

    function DemoWidget() {
        _classCallCheck(this, DemoWidget);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(DemoWidget).apply(this, arguments));
    }

    _createClass(DemoWidget, [{
        key: 'render',
        value: function render() {

            var content = widgetDemoConfig.useCases.map(function (usercase, index) {
                return _react2.default.createElement(
                    'div',
                    { className: 'cluedIn_col s12', key: index },
                    _react2.default.createElement(
                        _DemoPanel2.default,
                        { title: usercase.name, properties: JSON.stringify(usercase.parameters) },
                        _react2.default.createElement(_widget2.default, usercase.parameters)
                    )
                );
            });

            return _react2.default.createElement(
                _DemoPage2.default,
                { title: widgetDemoConfig.name, purpose: widgetDemoConfig.purpose },
                _react2.default.createElement(
                    'div',
                    { className: 'cluedIn_row' },
                    content
                )
            );
        }
    }]);

    return DemoWidget;
}(_react.Component);

exports.default = DemoWidget;
;

},{"../../core/components/generics/widget.jsx":2,"../config":7,"./demo/DemoPage.jsx":4,"./demo/DemoPanel.jsx":5,"react":243}],7:[function(require,module,exports){
'use strict';

module.exports = {
    'Widget': {
        name: 'Widget Component',
        purpose: 'The widget is used to segment information in CluedIn. It provides a default structure for the end-users to have a consistent way to show segmented data in CluedIn',
        useCases: [{
            name: 'Widget with Title',
            parameters: {
                title: 'This is a widget',
                menu: [{
                    type: 'Action', icon: 'fa fa-trash-o', title: 'Boom!', onClick: function onClick() {
                        alert('boom!');
                    }
                }, {
                    type: 'Action', title: 'Bim!', onClick: function onClick() {
                        alert('bim!');
                    }
                }, {
                    type: 'Action', title: 'Bam!', onClick: function onClick() {
                        alert('bam!');
                    }
                }]
            }
        }, { name: 'Widget with Loading', parameters: { loading: true } }]
    }
};

},{}],8:[function(require,module,exports){
'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactRouter = require('react-router');

var _widget = require('./components/widget.jsx');

var _widget2 = _interopRequireDefault(_widget);

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

var App = _react2.default.createClass({
    displayName: 'App',
    render: function render() {
        var menu = _react2.default.createElement(
            'ul',
            null,
            _react2.default.createElement(
                'li',
                null,
                _react2.default.createElement(
                    _reactRouter.Link,
                    { to: '/', activeClassName: 'active' },
                    'Home'
                )
            ),
            _react2.default.createElement(
                'li',
                null,
                _react2.default.createElement(
                    _reactRouter.Link,
                    { to: '/widget', activeClassName: 'active' },
                    'Widget Demo'
                )
            )
        );

        return _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
                'div',
                null,
                menu
            ),
            _react2.default.createElement(
                'div',
                null,
                this.props.children
            )
        );
    }
});

var Home = _react2.default.createClass({
    displayName: 'Home',
    render: function render() {
        return _react2.default.createElement(
            'div',
            null,
            'Home!'
        );
    }
});

_reactDom2.default.render(_react2.default.createElement(
    _reactRouter.Router,
    { history: _reactRouter.browserHistory },
    _react2.default.createElement(
        _reactRouter.Route,
        { path: '/', component: App },
        _react2.default.createElement(_reactRouter.IndexRoute, { component: Home }),
        _react2.default.createElement(_reactRouter.Route, { path: 'widget', component: _widget2.default })
    )
), document.getElementById('app'));

},{"./components/widget.jsx":6,"react":243,"react-dom":53,"react-router":81}],9:[function(require,module,exports){
// shim for using process in browser

var process = module.exports = {};
var queue = [];
var draining = false;
var currentQueue;
var queueIndex = -1;

function cleanUpNextTick() {
    draining = false;
    if (currentQueue.length) {
        queue = currentQueue.concat(queue);
    } else {
        queueIndex = -1;
    }
    if (queue.length) {
        drainQueue();
    }
}

function drainQueue() {
    if (draining) {
        return;
    }
    var timeout = setTimeout(cleanUpNextTick);
    draining = true;

    var len = queue.length;
    while(len) {
        currentQueue = queue;
        queue = [];
        while (++queueIndex < len) {
            if (currentQueue) {
                currentQueue[queueIndex].run();
            }
        }
        queueIndex = -1;
        len = queue.length;
    }
    currentQueue = null;
    draining = false;
    clearTimeout(timeout);
}

process.nextTick = function (fun) {
    var args = new Array(arguments.length - 1);
    if (arguments.length > 1) {
        for (var i = 1; i < arguments.length; i++) {
            args[i - 1] = arguments[i];
        }
    }
    queue.push(new Item(fun, args));
    if (queue.length === 1 && !draining) {
        setTimeout(drainQueue, 0);
    }
};

// v8 likes predictible objects
function Item(fun, array) {
    this.fun = fun;
    this.array = array;
}
Item.prototype.run = function () {
    this.fun.apply(null, this.array);
};
process.title = 'browser';
process.browser = true;
process.env = {};
process.argv = [];
process.version = ''; // empty string to avoid regexp issues
process.versions = {};

function noop() {}

process.on = noop;
process.addListener = noop;
process.once = noop;
process.off = noop;
process.removeListener = noop;
process.removeAllListeners = noop;
process.emit = noop;

process.binding = function (name) {
    throw new Error('process.binding is not supported');
};

process.cwd = function () { return '/' };
process.chdir = function (dir) {
    throw new Error('process.chdir is not supported');
};
process.umask = function() { return 0; };

},{}],10:[function(require,module,exports){
/*!
  Copyright (c) 2016 Jed Watson.
  Licensed under the MIT License (MIT), see
  http://jedwatson.github.io/classnames
*/
/* global define */

(function () {
	'use strict';

	var hasOwn = {}.hasOwnProperty;

	function classNames () {
		var classes = [];

		for (var i = 0; i < arguments.length; i++) {
			var arg = arguments[i];
			if (!arg) continue;

			var argType = typeof arg;

			if (argType === 'string' || argType === 'number') {
				classes.push(arg);
			} else if (Array.isArray(arg)) {
				classes.push(classNames.apply(null, arg));
			} else if (argType === 'object') {
				for (var key in arg) {
					if (hasOwn.call(arg, key) && arg[key]) {
						classes.push(key);
					}
				}
			}
		}

		return classes.join(' ');
	}

	if (typeof module !== 'undefined' && module.exports) {
		module.exports = classNames;
	} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
		// register as 'classnames', consistent with npm package name
		define('classnames', [], function () {
			return classNames;
		});
	} else {
		window.classNames = classNames;
	}
}());

},{}],11:[function(require,module,exports){
var pSlice = Array.prototype.slice;
var objectKeys = require('./lib/keys.js');
var isArguments = require('./lib/is_arguments.js');

var deepEqual = module.exports = function (actual, expected, opts) {
  if (!opts) opts = {};
  // 7.1. All identical values are equivalent, as determined by ===.
  if (actual === expected) {
    return true;

  } else if (actual instanceof Date && expected instanceof Date) {
    return actual.getTime() === expected.getTime();

  // 7.3. Other pairs that do not both pass typeof value == 'object',
  // equivalence is determined by ==.
  } else if (!actual || !expected || typeof actual != 'object' && typeof expected != 'object') {
    return opts.strict ? actual === expected : actual == expected;

  // 7.4. For all other Object pairs, including Array objects, equivalence is
  // determined by having the same number of owned properties (as verified
  // with Object.prototype.hasOwnProperty.call), the same set of keys
  // (although not necessarily the same order), equivalent values for every
  // corresponding key, and an identical 'prototype' property. Note: this
  // accounts for both named and indexed properties on Arrays.
  } else {
    return objEquiv(actual, expected, opts);
  }
}

function isUndefinedOrNull(value) {
  return value === null || value === undefined;
}

function isBuffer (x) {
  if (!x || typeof x !== 'object' || typeof x.length !== 'number') return false;
  if (typeof x.copy !== 'function' || typeof x.slice !== 'function') {
    return false;
  }
  if (x.length > 0 && typeof x[0] !== 'number') return false;
  return true;
}

function objEquiv(a, b, opts) {
  var i, key;
  if (isUndefinedOrNull(a) || isUndefinedOrNull(b))
    return false;
  // an identical 'prototype' property.
  if (a.prototype !== b.prototype) return false;
  //~~~I've managed to break Object.keys through screwy arguments passing.
  //   Converting to array solves the problem.
  if (isArguments(a)) {
    if (!isArguments(b)) {
      return false;
    }
    a = pSlice.call(a);
    b = pSlice.call(b);
    return deepEqual(a, b, opts);
  }
  if (isBuffer(a)) {
    if (!isBuffer(b)) {
      return false;
    }
    if (a.length !== b.length) return false;
    for (i = 0; i < a.length; i++) {
      if (a[i] !== b[i]) return false;
    }
    return true;
  }
  try {
    var ka = objectKeys(a),
        kb = objectKeys(b);
  } catch (e) {//happens when one is a string literal and the other isn't
    return false;
  }
  // having the same number of owned properties (keys incorporates
  // hasOwnProperty)
  if (ka.length != kb.length)
    return false;
  //the same set of keys (although not necessarily the same order),
  ka.sort();
  kb.sort();
  //~~~cheap key test
  for (i = ka.length - 1; i >= 0; i--) {
    if (ka[i] != kb[i])
      return false;
  }
  //equivalent values for every corresponding key, and
  //~~~possibly expensive deep test
  for (i = ka.length - 1; i >= 0; i--) {
    key = ka[i];
    if (!deepEqual(a[key], b[key], opts)) return false;
  }
  return typeof a === typeof b;
}

},{"./lib/is_arguments.js":12,"./lib/keys.js":13}],12:[function(require,module,exports){
var supportsArgumentsClass = (function(){
  return Object.prototype.toString.call(arguments)
})() == '[object Arguments]';

exports = module.exports = supportsArgumentsClass ? supported : unsupported;

exports.supported = supported;
function supported(object) {
  return Object.prototype.toString.call(object) == '[object Arguments]';
};

exports.unsupported = unsupported;
function unsupported(object){
  return object &&
    typeof object == 'object' &&
    typeof object.length == 'number' &&
    Object.prototype.hasOwnProperty.call(object, 'callee') &&
    !Object.prototype.propertyIsEnumerable.call(object, 'callee') ||
    false;
};

},{}],13:[function(require,module,exports){
exports = module.exports = typeof Object.keys === 'function'
  ? Object.keys : shim;

exports.shim = shim;
function shim (obj) {
  var keys = [];
  for (var key in obj) keys.push(key);
  return keys;
}

},{}],14:[function(require,module,exports){
/**
 * Indicates that navigation was caused by a call to history.push.
 */
'use strict';

exports.__esModule = true;
var PUSH = 'PUSH';

exports.PUSH = PUSH;
/**
 * Indicates that navigation was caused by a call to history.replace.
 */
var REPLACE = 'REPLACE';

exports.REPLACE = REPLACE;
/**
 * Indicates that navigation was caused by some other action such
 * as using a browser's back/forward buttons and/or manually manipulating
 * the URL in a browser's location bar. This is the default.
 *
 * See https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
 * for more information.
 */
var POP = 'POP';

exports.POP = POP;
exports['default'] = {
  PUSH: PUSH,
  REPLACE: REPLACE,
  POP: POP
};
},{}],15:[function(require,module,exports){
"use strict";

exports.__esModule = true;
var _slice = Array.prototype.slice;
exports.loopAsync = loopAsync;

function loopAsync(turns, work, callback) {
  var currentTurn = 0,
      isDone = false;
  var sync = false,
      hasNext = false,
      doneArgs = undefined;

  function done() {
    isDone = true;
    if (sync) {
      // Iterate instead of recursing if possible.
      doneArgs = [].concat(_slice.call(arguments));
      return;
    }

    callback.apply(this, arguments);
  }

  function next() {
    if (isDone) {
      return;
    }

    hasNext = true;
    if (sync) {
      // Iterate instead of recursing if possible.
      return;
    }

    sync = true;

    while (!isDone && currentTurn < turns && hasNext) {
      hasNext = false;
      work.call(this, currentTurn++, next, done);
    }

    sync = false;

    if (isDone) {
      // This means the loop finished synchronously.
      callback.apply(this, doneArgs);
      return;
    }

    if (currentTurn >= turns && hasNext) {
      isDone = true;
      callback();
    }
  }

  next();
}
},{}],16:[function(require,module,exports){
(function (process){
/*eslint-disable no-empty */
'use strict';

exports.__esModule = true;
exports.saveState = saveState;
exports.readState = readState;

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

var _warning = require('warning');

var _warning2 = _interopRequireDefault(_warning);

var KeyPrefix = '@@History/';
var QuotaExceededErrors = ['QuotaExceededError', 'QUOTA_EXCEEDED_ERR'];

var SecurityError = 'SecurityError';

function createKey(key) {
  return KeyPrefix + key;
}

function saveState(key, state) {
  try {
    if (state == null) {
      window.sessionStorage.removeItem(createKey(key));
    } else {
      window.sessionStorage.setItem(createKey(key), JSON.stringify(state));
    }
  } catch (error) {
    if (error.name === SecurityError) {
      // Blocking cookies in Chrome/Firefox/Safari throws SecurityError on any
      // attempt to access window.sessionStorage.
      process.env.NODE_ENV !== 'production' ? _warning2['default'](false, '[history] Unable to save state; sessionStorage is not available due to security settings') : undefined;

      return;
    }

    if (QuotaExceededErrors.indexOf(error.name) >= 0 && window.sessionStorage.length === 0) {
      // Safari "private mode" throws QuotaExceededError.
      process.env.NODE_ENV !== 'production' ? _warning2['default'](false, '[history] Unable to save state; sessionStorage is not available in Safari private mode') : undefined;

      return;
    }

    throw error;
  }
}

function readState(key) {
  var json = undefined;
  try {
    json = window.sessionStorage.getItem(createKey(key));
  } catch (error) {
    if (error.name === SecurityError) {
      // Blocking cookies in Chrome/Firefox/Safari throws SecurityError on any
      // attempt to access window.sessionStorage.
      process.env.NODE_ENV !== 'production' ? _warning2['default'](false, '[history] Unable to read state; sessionStorage is not available due to security settings') : undefined;

      return null;
    }
  }

  if (json) {
    try {
      return JSON.parse(json);
    } catch (error) {
      // Ignore invalid JSON.
    }
  }

  return null;
}
}).call(this,require('_process'))
},{"_process":9,"warning":245}],17:[function(require,module,exports){
'use strict';

exports.__esModule = true;
exports.addEventListener = addEventListener;
exports.removeEventListener = removeEventListener;
exports.getHashPath = getHashPath;
exports.replaceHashPath = replaceHashPath;
exports.getWindowPath = getWindowPath;
exports.go = go;
exports.getUserConfirmation = getUserConfirmation;
exports.supportsHistory = supportsHistory;
exports.supportsGoWithoutReloadUsingHash = supportsGoWithoutReloadUsingHash;

function addEventListener(node, event, listener) {
  if (node.addEventListener) {
    node.addEventListener(event, listener, false);
  } else {
    node.attachEvent('on' + event, listener);
  }
}

function removeEventListener(node, event, listener) {
  if (node.removeEventListener) {
    node.removeEventListener(event, listener, false);
  } else {
    node.detachEvent('on' + event, listener);
  }
}

function getHashPath() {
  // We can't use window.location.hash here because it's not
  // consistent across browsers - Firefox will pre-decode it!
  return window.location.href.split('#')[1] || '';
}

function replaceHashPath(path) {
  window.location.replace(window.location.pathname + window.location.search + '#' + path);
}

function getWindowPath() {
  return window.location.pathname + window.location.search + window.location.hash;
}

function go(n) {
  if (n) window.history.go(n);
}

function getUserConfirmation(message, callback) {
  callback(window.confirm(message));
}

/**
 * Returns true if the HTML5 history API is supported. Taken from Modernizr.
 *
 * https://github.com/Modernizr/Modernizr/blob/master/LICENSE
 * https://github.com/Modernizr/Modernizr/blob/master/feature-detects/history.js
 * changed to avoid false negatives for Windows Phones: https://github.com/rackt/react-router/issues/586
 */

function supportsHistory() {
  var ua = navigator.userAgent;
  if ((ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) && ua.indexOf('Mobile Safari') !== -1 && ua.indexOf('Chrome') === -1 && ua.indexOf('Windows Phone') === -1) {
    return false;
  }
  return window.history && 'pushState' in window.history;
}

/**
 * Returns false if using go(n) with hash history causes a full page reload.
 */

function supportsGoWithoutReloadUsingHash() {
  var ua = navigator.userAgent;
  return ua.indexOf('Firefox') === -1;
}
},{}],18:[function(require,module,exports){
'use strict';

exports.__esModule = true;
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
exports.canUseDOM = canUseDOM;
},{}],19:[function(require,module,exports){
(function (process){
'use strict';

exports.__esModule = true;
exports.extractPath = extractPath;
exports.parsePath = parsePath;

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

var _warning = require('warning');

var _warning2 = _interopRequireDefault(_warning);

function extractPath(string) {
  var match = string.match(/^https?:\/\/[^\/]*/);

  if (match == null) return string;

  return string.substring(match[0].length);
}

function parsePath(path) {
  var pathname = extractPath(path);
  var search = '';
  var hash = '';

  process.env.NODE_ENV !== 'production' ? _warning2['default'](path === pathname, 'A path must be pathname + search + hash only, not a fully qualified URL like "%s"', path) : undefined;

  var hashIndex = pathname.indexOf('#');
  if (hashIndex !== -1) {
    hash = pathname.substring(hashIndex);
    pathname = pathname.substring(0, hashIndex);
  }

  var searchIndex = pathname.indexOf('?');
  if (searchIndex !== -1) {
    search = pathname.substring(searchIndex);
    pathname = pathname.substring(0, searchIndex);
  }

  if (pathname === '') pathname = '/';

  return {
    pathname: pathname,
    search: search,
    hash: hash
  };
}
}).call(this,require('_process'))
},{"_process":9,"warning":245}],20:[function(require,module,exports){
(function (process){
'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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

var _invariant = require('invariant');

var _invariant2 = _interopRequireDefault(_invariant);

var _Actions = require('./Actions');

var _PathUtils = require('./PathUtils');

var _ExecutionEnvironment = require('./ExecutionEnvironment');

var _DOMUtils = require('./DOMUtils');

var _DOMStateStorage = require('./DOMStateStorage');

var _createDOMHistory = require('./createDOMHistory');

var _createDOMHistory2 = _interopRequireDefault(_createDOMHistory);

/**
 * Creates and returns a history object that uses HTML5's history API
 * (pushState, replaceState, and the popstate event) to manage history.
 * This is the recommended method of managing history in browsers because
 * it provides the cleanest URLs.
 *
 * Note: In browsers that do not support the HTML5 history API full
 * page reloads will be used to preserve URLs.
 */
function createBrowserHistory() {
  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

  !_ExecutionEnvironment.canUseDOM ? process.env.NODE_ENV !== 'production' ? _invariant2['default'](false, 'Browser history needs a DOM') : _invariant2['default'](false) : undefined;

  var forceRefresh = options.forceRefresh;

  var isSupported = _DOMUtils.supportsHistory();
  var useRefresh = !isSupported || forceRefresh;

  function getCurrentLocation(historyState) {
    historyState = historyState || window.history.state || {};

    var path = _DOMUtils.getWindowPath();
    var _historyState = historyState;
    var key = _historyState.key;

    var state = undefined;
    if (key) {
      state = _DOMStateStorage.readState(key);
    } else {
      state = null;
      key = history.createKey();

      if (isSupported) window.history.replaceState(_extends({}, historyState, { key: key }), null, path);
    }

    var location = _PathUtils.parsePath(path);

    return history.createLocation(_extends({}, location, { state: state }), undefined, key);
  }

  function startPopStateListener(_ref) {
    var transitionTo = _ref.transitionTo;

    function popStateListener(event) {
      if (event.state === undefined) return; // Ignore extraneous popstate events in WebKit.

      transitionTo(getCurrentLocation(event.state));
    }

    _DOMUtils.addEventListener(window, 'popstate', popStateListener);

    return function () {
      _DOMUtils.removeEventListener(window, 'popstate', popStateListener);
    };
  }

  function finishTransition(location) {
    var basename = location.basename;
    var pathname = location.pathname;
    var search = location.search;
    var hash = location.hash;
    var state = location.state;
    var action = location.action;
    var key = location.key;

    if (action === _Actions.POP) return; // Nothing to do.

    _DOMStateStorage.saveState(key, state);

    var path = (basename || '') + pathname + search + hash;
    var historyState = {
      key: key
    };

    if (action === _Actions.PUSH) {
      if (useRefresh) {
        window.location.href = path;
        return false; // Prevent location update.
      } else {
          window.history.pushState(historyState, null, path);
        }
    } else {
      // REPLACE
      if (useRefresh) {
        window.location.replace(path);
        return false; // Prevent location update.
      } else {
          window.history.replaceState(historyState, null, path);
        }
    }
  }

  var h