blue-react 6.9.2

package/dist/Intro.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+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; }; }();
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Utilities = require("./Utilities.js");
+
+var _Utilities2 = _interopRequireDefault(_Utilities);
+
+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; }
+
+/**
+ * Geeignet als Login-Bildschirm.
+ */
+
+var Intro = function (_React$Component) {
+    _inherits(Intro, _React$Component);
+
+    function Intro() {
+        _classCallCheck(this, Intro);
+
+        return _possibleConstructorReturn(this, (Intro.__proto__ || Object.getPrototypeOf(Intro)).apply(this, arguments));
+    }
+
+    _createClass(Intro, [{
+        key: "componentDidMount",
+        value: function componentDidMount() {
+            _Utilities2.default.registerFluentBtns();
+        }
+    }, {
+        key: "render",
+        value: function render() {
+            return _react2.default.createElement(
+                "div",
+                { className: "sign-in-screen" },
+                _react2.default.createElement(
+                    "div",
+                    { className: "sign-in-container mx-1" },
+                    _react2.default.createElement(
+                        "div",
+                        { className: "jumbotron" },
+                        _react2.default.createElement(
+                            "div",
+                            { className: "text-center" },
+                            _react2.default.createElement("img", { style: { maxWidth: this.props.logoMaxWidth }, src: this.props.logo }),
+                            _react2.default.createElement(
+                                "h2",
+                                { className: "mt-4 mb-3" },
+                                this.props.title
+                            )
+                        ),
+                        this.props.children
+                    )
+                )
+            );
+        }
+    }], [{
+        key: "defaultProps",
+        get: function get() {
+            return {
+                logoMaxWidth: "100px"
+            };
+        }
+    }]);
+
+    return Intro;
+}(_react2.default.Component);
+
+Intro.propTypes = {
+    /**
+     * Kann ein Bild sein. Wird im src-Attribute implementiert.
+     */
+    logo: _propTypes2.default.string,
+
+    /**
+     * Maximale Breite des Logos.
+     */
+    logoMaxWidth: _propTypes2.default.string,
+
+    /**
+     * Der Text, der unter dem Logo erscheint
+     */
+    title: _propTypes2.default.string,
+
+    /**
+     * Inhalt
+     */
+    children: _propTypes2.default.any
+};
+
+exports.default = Intro;

package/dist/MenuItem.js

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: 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; };
+
+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; }; }();
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Utilities = require("./Utilities.js");
+
+var _Utilities2 = _interopRequireDefault(_Utilities);
+
+var _Caret = require("./Caret");
+
+var _Caret2 = _interopRequireDefault(_Caret);
+
+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; }
+
+/**
+ * List-Item und Link für die Sidebar.
+ */
+var MenuItem = function (_React$Component) {
+    _inherits(MenuItem, _React$Component);
+
+    function MenuItem() {
+        _classCallCheck(this, MenuItem);
+
+        var _this = _possibleConstructorReturn(this, (MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call(this));
+
+        _this.state = {
+            showDropdown: false,
+            active: false
+        };
+
+        window.addEventListener("hashchange", function (event) {
+            _this.checkActive();
+        });
+        return _this;
+    }
+
+    _createClass(MenuItem, [{
+        key: "componentWillMount",
+        value: function componentWillMount() {
+            this.checkActive();
+        }
+    }, {
+        key: "onClick",
+        value: function onClick(event) {
+            if (this.props.onClick) {
+                this.props.onClick(event);
+            }
+
+            if (this.props.children) {
+                this.setState({ showDropdown: !this.state.showDropdown });
+            }
+
+            // When user clicks again on active menu item, scroll to top of page
+            if (this.props.href && this.props.href == location.hash) {
+                _Utilities2.default.scrollToTop();
+            }
+        }
+    }, {
+        key: "checkActive",
+        value: function checkActive() {
+            this.setState({
+                active: location.hash.indexOf(this.props.href) > -1 || (this.props.isHome && (location.hash == "" || location.hash == "#/") ? true : false)
+            });
+        }
+    }, {
+        key: "render",
+        value: function render() {
+            var _this2 = this;
+
+            var className = "blue-app-toggle-page blue-app-sidebar-btn btn" + (this.props.isActive ? " active" : "") + (this.props.className ? " " + this.props.className : "") + (this.props.children ? " blue-app-sidebar-dropdown-toggle" : "");
+
+            var icon = void 0;
+
+            if (typeof this.props.icon === "string") {
+                // is className
+                icon = _react2.default.createElement("span", { className: this.props.icon + (this.props.children ? " blue-app-sidebar-dropdown-icon" : "") });
+            } else {
+                // is element / component
+                icon = this.props.icon;
+            }
+
+            var props = {
+                id: "blue-action-menu-item-" + _Utilities2.default.guid()
+            };
+
+            Object.keys(this.props).map(function (key) {
+                if (key != "isActive" && key != "isHome" && key != "children" && key != "dropdownClassName") {
+                    props[key] = _this2.props[key];
+                }
+            });
+
+            return _react2.default.createElement(
+                "div",
+                null,
+                _react2.default.createElement(
+                    "a",
+                    _extends({}, props, {
+                        className: className + (this.props.isActive || this.state.active ? " active" : "") + (this.props.label ? " has-label" : ""),
+                        onClick: function onClick(event) {
+                            return _this2.onClick(event);
+                        }
+                    }),
+                    icon,
+                    " ",
+                    _react2.default.createElement(
+                        "span",
+                        { className: "blue-app-sidebar-label" },
+                        this.props.label
+                    ),
+                    this.props.children && _react2.default.createElement(_Caret2.default, {
+                        open: this.state.showDropdown,
+                        mirrored: true,
+                        className: "blue-app-sidebar-dropdown-caret mt-2"
+                    })
+                ),
+                this.state.showDropdown && _react2.default.createElement(
+                    "div",
+                    { className: "blue-app-sidebar-dropdown " + this.props.dropdownClassName },
+                    this.props.children
+                )
+            );
+        }
+    }], [{
+        key: "defaultProps",
+        get: function get() {
+            return {
+                href: "javascript:void(0)",
+                isActive: false,
+                dropdownClassName: ""
+            };
+        }
+    }]);
+
+    return MenuItem;
+}(_react2.default.Component);
+
+MenuItem.propTypes = {
+    /**
+     * Setzt to-Property der NavLink-Komponente aus React Router.
+     */
+    to: _propTypes2.default.string,
+
+    /**
+     * Kann als Alternative zu to benutzt werden.
+     */
+    href: _propTypes2.default.string,
+
+    /**
+     * onClick Event
+     */
+    onClick: _propTypes2.default.func,
+
+    /**
+     * Klasse eines Icons oder Element, z.B. von blueicon-colored.
+     */
+    icon: _propTypes2.default.any,
+
+    /**
+     * Beschriftung des Links
+     */
+    label: _propTypes2.default.any,
+
+    /**
+     * Soll Item als "aktiv" markiert werden? Ist die to-Property gesetzt, wird Item automatisch als "aktiv" markiert, wenn entsprechende Seite aktiv ist.
+     */
+    isActive: _propTypes2.default.bool,
+
+    /**
+     * Als MenuItem für Startseite deklariert.
+     */
+    isHome: _propTypes2.default.bool,
+
+    /**
+     * Ergänzung der Klasse vom Dropdown-Menü.
+     */
+    dropdownClassName: _propTypes2.default.string,
+
+    /**
+     * Werden in einem Dropdown-Menü angezeigt.
+     */
+    children: _propTypes2.default.any
+};
+
+exports.default = MenuItem;

package/dist/Page.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+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; }; }();
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Header = require("./Header.js");
+
+var _Header2 = _interopRequireDefault(_Header);
+
+var _Body = require("./Body.js");
+
+var _Body2 = _interopRequireDefault(_Body);
+
+var _Utilities = require("./Utilities.js");
+
+var _Utilities2 = _interopRequireDefault(_Utilities);
+
+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 Page = function (_React$Component) {
+    _inherits(Page, _React$Component);
+
+    function Page() {
+        _classCallCheck(this, Page);
+
+        return _possibleConstructorReturn(this, (Page.__proto__ || Object.getPrototypeOf(Page)).apply(this, arguments));
+    }
+
+    _createClass(Page, [{
+        key: "componentDidMount",
+        value: function componentDidMount() {
+            _Utilities2.default.registerFluentBtns();
+        }
+    }, {
+        key: "render",
+        value: function render() {
+            return _react2.default.createElement(
+                "div",
+                null,
+                this.props.children
+            );
+        }
+    }]);
+
+    return Page;
+}(_react2.default.Component);
+
+Page.Header = _Header2.default;
+Page.Body = _Body2.default;
+
+exports.default = Page;

package/dist/Search.js

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+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; }; }();
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Utilities = require("./Utilities");
+
+var _Utilities2 = _interopRequireDefault(_Utilities);
+
+var _MenuItem = require("./MenuItem");
+
+var _MenuItem2 = _interopRequireDefault(_MenuItem);
+
+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; }
+
+/**
+ * Eine Suchleiste, die zur Seitenleiste hinzugefügt werden kann.
+ */
+var Search = function (_React$Component) {
+    _inherits(Search, _React$Component);
+
+    function Search() {
+        _classCallCheck(this, Search);
+
+        var _this = _possibleConstructorReturn(this, (Search.__proto__ || Object.getPrototypeOf(Search)).call(this));
+
+        _this.state = {
+            value: "",
+            focus: false
+        };
+
+        _this.SearchControlId = "blue-app-search-control-" + _Utilities2.default.guid();
+        return _this;
+    }
+
+    _createClass(Search, [{
+        key: "componentWillMount",
+        value: function componentWillMount() {
+            this.setState({ value: this.props.value });
+        }
+    }, {
+        key: "componentDidUpdate",
+        value: function componentDidUpdate(prevProps) {
+            if (prevProps.value !== this.props.value) {
+                this.componentWillMount();
+            }
+        }
+    }, {
+        key: "toggleSidebar",
+        value: function toggleSidebar() {
+            if (this.props.sidebar) {
+                document.dispatchEvent(window.toggleSidebarEvent);
+            }
+        }
+    }, {
+        key: "render",
+        value: function render() {
+            var _this2 = this;
+
+            return _react2.default.createElement(
+                "form",
+                {
+                    className: "blue-app-search " + (this.props.body ? "blue-app-search-body " : "") + (this.state.focus ? "focus" : ""),
+                    onSubmit: function onSubmit(event) {
+                        event.preventDefault();
+                        _this2.toggleSidebar();
+                        _this2.props.onSubmit(event);
+                    }
+                },
+                _react2.default.createElement(
+                    "div",
+                    { className: "blue-app-search-input-group input-group" },
+                    _react2.default.createElement(
+                        "div",
+                        {
+                            className: "input-group-prepend",
+                            onClick: function onClick() {
+                                return document.getElementById(_this2.SearchControlId).focus();
+                            }
+                        },
+                        _react2.default.createElement(
+                            "span",
+                            { className: "input-group-text" },
+                            _react2.default.createElement("span", { className: "bi-magnifying_glass" })
+                        )
+                    ),
+                    _react2.default.createElement("input", {
+                        type: "search",
+                        value: this.state.value,
+                        onChange: function onChange(event) {
+                            _this2.setState({ value: event.target.value });
+                            _this2.props.onChange(event);
+                        },
+                        id: this.SearchControlId,
+                        className: "blue-app-search-control form-control default input-lg",
+                        placeholder: this.props.placeholder,
+                        autoFocus: this.props.autoFocus,
+                        style: {
+                            zIndex: this.props.body ? "0" : ""
+                        },
+                        onFocus: function onFocus() {
+                            return _this2.setState({ focus: true });
+                        },
+                        onBlur: function onBlur() {
+                            return _this2.setState({ focus: false });
+                        }
+                    }),
+                    this.props.reset && this.state.value.length > 0 && _react2.default.createElement(
+                        "div",
+                        { className: "input-group-btn" },
+                        _react2.default.createElement(
+                            "button",
+                            {
+                                type: "button",
+                                className: "blue-app-search-reset-btn btn btn-link btn-lg",
+                                onClick: function onClick() {
+                                    _this2.setState({ value: "" }, function () {
+                                        document.getElementById(_this2.SearchControlId).focus();
+                                    });
+                                    _this2.props.onChange({
+                                        target: {
+                                            value: ""
+                                        }
+                                    });
+                                }
+                            },
+                            _react2.default.createElement("span", { className: "bi-navigate_cross" })
+                        )
+                    )
+                ),
+                this.props.sidebar && _react2.default.createElement(_MenuItem2.default, {
+                    href: "javascript:void(0)",
+                    className: "blue-app-search-btn",
+                    icon: "bi-magnifying_glass blue-app-search-btn-icon",
+                    onClick: function onClick() {
+                        _this2.toggleSidebar();
+                        setTimeout(function () {
+                            document.querySelector(".blue-app-search-control").select();
+                        }, 200);
+                    }
+                })
+            );
+        }
+    }], [{
+        key: "defaultProps",
+        get: function get() {
+            return {
+                sidebar: false,
+                body: false,
+                reset: false,
+                value: "",
+                onChange: function onChange(event) {},
+                onSubmit: function onSubmit(event) {},
+                placeholder: "",
+                autoFocus: false
+            };
+        }
+    }]);
+
+    return Search;
+}(_react2.default.Component);
+
+Search.propTypes = {
+    /**
+     * Wird Komponente in der Sidebar genutzt?
+     */
+    sidebar: _propTypes2.default.bool,
+
+    /**
+     * Wird Komponente im Body genutzt?
+     */
+    body: _propTypes2.default.bool,
+
+    /**
+     * Erlaube Zurücksetzen?
+     */
+    reset: _propTypes2.default.bool,
+
+    value: _propTypes2.default.string,
+    onChange: _propTypes2.default.func,
+    onSubmit: _propTypes2.default.func,
+    placeholder: _propTypes2.default.string,
+    autoFocus: _propTypes2.default.bool
+};
+
+exports.default = Search;