blue-react 6.9.2

package/README.md

@@ -0,0 +1,36 @@
+<p align="center">
+<img src="https://raw.githubusercontent.com/bruegmann/blue-react/master/public/logo192.png" alt="Blue Icon" width="64px" height="64px">
+</p>
+
+# Blue React
+
+[![npm version](https://img.shields.io/npm/v/blue-react/legacy)](https://www.npmjs.com/package/blue-react)
+
+[Checkout the docs](https://bruegmann.github.io/blue-react) to find out how to use Blue React.
+
+
+## Developing
+
+This project is built with [CRA](https://create-react-app.dev/). To start developing, just and install everything with `npm i` and run:
+```
+npm start
+```
+
+## Create a new release
+
+This is how to manually create a release:\
+By running
+```
+npm publish --tag v6.9
+```
+the missing files in `./dist` will be created, the docs will be generated and the NPM package will be released.
+
+To publish changes on the documentary, run:
+```
+npm run deploy
+```
+
+To run both of them:
+```
+npm run release
+```

package/dist/ActionMenu.js

@@ -0,0 +1,122 @@
+"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);
+
+var _ActionMenuItem = require("./ActionMenuItem.js");
+
+var _ActionMenuItem2 = _interopRequireDefault(_ActionMenuItem);
+
+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; }
+
+/**
+ * <span class="badge badge-secondary">Deprecated</span> Use <strong>Actions</strong> instead.<br>
+ * Das Action-Menü an der oberen rechten Ecke einer Seite. Hier können Aktionen platziert werden, die im Kontext der aktuellen Seite stehen.
+ */
+var ActionMenu = function (_React$Component) {
+    _inherits(ActionMenu, _React$Component);
+
+    function ActionMenu() {
+        _classCallCheck(this, ActionMenu);
+
+        var _this = _possibleConstructorReturn(this, (ActionMenu.__proto__ || Object.getPrototypeOf(ActionMenu)).call(this));
+
+        _this.state = {
+            actionsToggledIn: null
+        };
+        return _this;
+    }
+
+    _createClass(ActionMenu, [{
+        key: "componentDidMount",
+        value: function componentDidMount() {
+            var _this2 = this;
+
+            this.initToggleStatus();
+
+            document.querySelector(".blue-app-wrapper").onclick = function (event) {
+                _this2.toggleActions();
+            };
+
+            document.querySelectorAll(".blue-app-actions-menu .nav-link").forEach(function (link) {
+                link.addEventListener("click", function () {
+                    if (_this2.state.actionsToggledIn) {
+                        _this2.toggleActions();
+                    }
+                });
+            });
+        }
+    }, {
+        key: "toggleActions",
+        value: function toggleActions() {
+            _Utilities2.default.toggleActions();
+            this.initToggleStatus();
+        }
+    }, {
+        key: "initToggleStatus",
+        value: function initToggleStatus() {
+            this.setState({
+                actionsToggledIn: _Utilities2.default.hasClass(document.querySelector(".blue-app-actions"), "open")
+            });
+        }
+    }, {
+        key: "render",
+        value: function render() {
+            var _this3 = this;
+
+            return _react2.default.createElement(
+                "ul",
+                { className: "blue-app-actions-menu nav navbar-nav navbar-right fluent-btn" },
+                _react2.default.createElement("div", { className: "fluent-btn-ball" }),
+                !this.state.actionsToggledIn && !this.props.hideToggleAction ? _react2.default.createElement(_ActionMenuItem2.default, {
+                    className: "blue-app-actions-menu-toggle p-3",
+                    onClick: function onClick() {
+                        return _this3.toggleActions();
+                    },
+                    icon: this.state.actionsToggledIn ? "bi-navigate_cross" : "bi-iconmonstr-menu-7"
+                }) : "",
+                this.props.children
+            );
+        }
+    }], [{
+        key: "defaultProps",
+        get: function get() {
+            return {
+                hideToggleAction: false
+            };
+        }
+    }]);
+
+    return ActionMenu;
+}(_react2.default.Component);
+
+ActionMenu.propTypes = {
+    /**
+     * Versteckt die drei Punkte in mobiler Ansicht.
+     * Das kann nützlich sein, wenn mehrere ActionMenus genutzt werden, aber nicht überall der Toggle angezeigt werden soll.
+     */
+    hideToggleAction: _propTypes2.default.bool
+};
+
+exports.default = ActionMenu;

package/dist/ActionMenuItem.js

@@ -0,0 +1,110 @@
+"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);
+
+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 das Action-Menü.
+ */
+var ActionMenuItem = function (_React$Component) {
+    _inherits(ActionMenuItem, _React$Component);
+
+    function ActionMenuItem() {
+        _classCallCheck(this, ActionMenuItem);
+
+        return _possibleConstructorReturn(this, (ActionMenuItem.__proto__ || Object.getPrototypeOf(ActionMenuItem)).apply(this, arguments));
+    }
+
+    _createClass(ActionMenuItem, [{
+        key: "render",
+        value: function render() {
+            var _this2 = this;
+
+            var props = {};
+
+            Object.keys(this.props).map(function (key) {
+                if (key != "navItemClassName" && key != "icon" && key != "label") {
+                    props[key] = _this2.props[key];
+                }
+            });
+
+            return _react2.default.createElement(
+                "li",
+                { className: "nav-item " + this.props.navItemClassName },
+                _react2.default.createElement(
+                    "a",
+                    _extends({}, props, { href: this.props.href, className: "nav-link blue-app-actions-menu-item " + this.props.className }),
+                    _react2.default.createElement("span", { className: this.props.icon }),
+                    this.props.label && _react2.default.createElement(
+                        "span",
+                        { className: "blue-app-actions-label" },
+                        this.props.icon && _react2.default.createElement(
+                            "span",
+                            null,
+                            "\xA0"
+                        ),
+                        this.props.label
+                    )
+                )
+            );
+        }
+    }], [{
+        key: "defaultProps",
+        get: function get() {
+            return {
+                navItemClassName: "",
+                className: "",
+                href: "javascript:void(0)"
+            };
+        }
+    }]);
+
+    return ActionMenuItem;
+}(_react2.default.Component);
+
+ActionMenuItem.propTypes = {
+    /**
+     * Extends className of the <code>.nav-item</code> element.
+     */
+    navItemClassName: _propTypes2.default.string,
+
+    /**
+     * Extends className of the <code>.nav-link</code> element.
+     */
+    className: _propTypes2.default.string,
+
+    href: _propTypes2.default.string,
+
+    /**
+     * className for the icon.
+     */
+    icon: _propTypes2.default.string,
+
+    /**
+     * Label for the link.
+     */
+    label: _propTypes2.default.any
+};
+
+exports.default = ActionMenuItem;

package/dist/ActionMenuSwitch.js

@@ -0,0 +1,98 @@
+"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 _Switch = require("./Switch");
+
+var _Switch2 = _interopRequireDefault(_Switch);
+
+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; }
+
+/**
+ * <span class="badge badge-secondary">Deprecated</span> When using <strong>Actions</strong>, please use <strong>SwitchMenuItem</strong> instead.<br>
+ * Switch für das Action-Menü.
+ */
+var ActionMenuSwitch = function (_React$Component) {
+    _inherits(ActionMenuSwitch, _React$Component);
+
+    function ActionMenuSwitch() {
+        _classCallCheck(this, ActionMenuSwitch);
+
+        return _possibleConstructorReturn(this, (ActionMenuSwitch.__proto__ || Object.getPrototypeOf(ActionMenuSwitch)).apply(this, arguments));
+    }
+
+    _createClass(ActionMenuSwitch, [{
+        key: "render",
+        value: function render() {
+            var _this2 = this;
+
+            return _react2.default.createElement(
+                "li",
+                { className: "nav-item" },
+                _react2.default.createElement(
+                    "a",
+                    {
+                        href: "javascript:void(0)",
+                        className: "nav-link blue-app-actions-menu-item",
+                        onClick: function onClick() {
+                            console.log("click");
+                            _this2.props.onChange();
+                        }
+                    },
+                    _react2.default.createElement(_Switch2.default, _extends({}, this.props, {
+                        elementType: "span"
+                    })),
+                    this.props.label && _react2.default.createElement(
+                        "span",
+                        { className: "blue-app-actions-label" },
+                        "\xA0",
+                        this.props.label
+                    )
+                )
+            );
+        }
+    }], [{
+        key: "defaultProps",
+        get: function get() {
+            return {
+                className: "",
+                href: "javascript:void(0)"
+            };
+        }
+    }]);
+
+    return ActionMenuSwitch;
+}(_react2.default.Component);
+
+ActionMenuSwitch.propTypes = {
+    className: _propTypes2.default.string,
+    checked: _propTypes2.default.bool,
+    onChange: _propTypes2.default.func,
+
+    /**
+     * Beschriftung des Controls
+     */
+    label: _propTypes2.default.any
+};
+
+exports.default = ActionMenuSwitch;

package/dist/Actions.js

@@ -0,0 +1,178 @@
+"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 _Utilities = require("./Utilities.js");
+
+var _Utilities2 = _interopRequireDefault(_Utilities);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+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; }
+
+function collapseSection(element) {
+    /* Source of these functions: https://css-tricks.com/using-css-transitions-auto-dimensions/ */
+    var sectionHeight = element.scrollHeight;
+    var elementTransition = element.style.transition;
+    element.style.transition = '';
+
+    requestAnimationFrame(function () {
+        element.style.height = sectionHeight + 'px';
+        element.style.transition = elementTransition;
+        requestAnimationFrame(function () {
+            element.style.height = 84 + 'px';
+        });
+    });
+    element.setAttribute('data-collapsed', 'true');
+}
+
+function expandSection(element) {
+    var sectionHeight = element.scrollHeight;
+    element.style.height = sectionHeight + 'px';
+
+    var fun = function fun(e) {
+        element.removeEventListener('transitionend', fun);
+        element.style.height = null;
+    };
+    element.addEventListener('transitionend', fun);
+    element.setAttribute('data-collapsed', 'false');
+}
+
+/**
+ * The new actions menu, better optimized for mobile devices.<br>
+ * <strong>Important:</strong> If you use <code>&lt;Actions /&gt;</code> on a page, make sure also to set <strong>hasActions</strong> prop from
+ * <strong>Page</strong> component to <code>true</code>.
+ */
+
+var Actions = function (_React$Component) {
+    _inherits(Actions, _React$Component);
+
+    function Actions(props) {
+        _classCallCheck(this, Actions);
+
+        var _this = _possibleConstructorReturn(this, (Actions.__proto__ || Object.getPrototypeOf(Actions)).call(this, props));
+
+        _this.state = {
+            open: props.open
+        };
+
+        _this.id = "Actions-" + _Utilities2.default.guid();
+
+        _this.toggle = _this.toggle.bind(_this);
+        return _this;
+    }
+
+    _createClass(Actions, [{
+        key: "componentDidUpdate",
+        value: function componentDidUpdate(prevProps) {
+            if (prevProps.open !== this.props.open) {
+                this.setState({ open: this.props.open });
+            }
+        }
+    }, {
+        key: "toggle",
+        value: function toggle() {
+            var open = !this.state.open;
+            var element = document.getElementById(this.id);
+
+            // expandSection(element);
+
+            this.setState({ open: open }, function () {
+                if (open) {
+                    expandSection(element);
+                } else {
+                    collapseSection(element);
+                }
+            });
+
+            if (this.props.onToggle) {
+                this.props.onToggle(open);
+            }
+        }
+    }, {
+        key: "render",
+        value: function render() {
+            return _react2.default.createElement(
+                "div",
+                {
+                    id: this.id,
+                    className: "blue-actions " + this.props.className + " " + (this.state.open ? "open" : "closed") + (" break-" + this.props.break)
+                },
+                _react2.default.createElement("div", { className: "blue-actions-indicator d-" + this.props.break + "-none", onClick: this.toggle }),
+                _react2.default.createElement(
+                    "div",
+                    { className: "blue-actions-controls" },
+                    this.props.children
+                ),
+                _react2.default.createElement(
+                    "div",
+                    { className: "blue-actions-featured d-" + this.props.break + "-none" },
+                    _react2.default.createElement(
+                        "div",
+                        { className: "fluent-btn" },
+                        _react2.default.createElement("div", { className: "fluent-btn-ball" }),
+                        this.props.featured
+                    )
+                )
+            );
+        }
+    }], [{
+        key: "defaultProps",
+        get: function get() {
+            return {
+                className: "",
+                open: false,
+                break: "md"
+            };
+        }
+    }]);
+
+    return Actions;
+}(_react2.default.Component);
+
+Actions.propTypes = {
+    /**
+     * Content that will appear on the menu when it's expanded.
+     */
+    children: _propTypes2.default.any,
+
+    /**
+     * Extends the <code>className</code> of <code>.blue-actions</code>.
+     */
+    className: _propTypes2.default.string,
+
+    /**
+     * Content that will appear when the menu is shrunken.
+     */
+    featured: _propTypes2.default.any,
+    open: _propTypes2.default.bool,
+
+    /**
+     * Will fire when the state of <code>open</code> will change inside of the component.<br>
+     * <strong>Example:</strong> <code>onToggle={open => this.setState({ open })}</code>
+     */
+    onToggle: _propTypes2.default.func,
+
+    /**
+     * <code>sm</code>, <code>md</code>, <code>lg</code> or <code>xl</code>
+     */
+    break: _propTypes2.default.string
+};
+
+exports.default = Actions;

package/dist/Body.js

@@ -0,0 +1,89 @@
+"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);
+
+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; }
+
+/**
+ * Enthält den Inhalt einer Seite.
+ */
+var Body = function (_React$Component) {
+    _inherits(Body, _React$Component);
+
+    function Body() {
+        _classCallCheck(this, Body);
+
+        return _possibleConstructorReturn(this, (Body.__proto__ || Object.getPrototypeOf(Body)).apply(this, arguments));
+    }
+
+    _createClass(Body, [{
+        key: "render",
+        value: function render() {
+            var pageBodyClassName = "blue-app-page";
+
+            return _react2.default.createElement(
+                "div",
+                { id: this.props.id,
+                    className: this.props.className ? pageBodyClassName + " " + this.props.className : pageBodyClassName + (this.props.hasActions ? " has-actions" : "") + (" break-" + this.props.break),
+                    onClick: this.props.onClick
+                },
+                _react2.default.createElement(
+                    "div",
+                    { className: this.props.containerClass },
+                    this.props.children
+                )
+            );
+        }
+    }], [{
+        key: "defaultProps",
+        get: function get() {
+            return {
+                containerClass: "container-fluid",
+                hasActions: false,
+                break: "md"
+            };
+        }
+    }]);
+
+    return Body;
+}(_react2.default.Component);
+
+Body.propTypes = {
+    id: _propTypes2.default.string,
+    className: _propTypes2.default.string,
+
+    /**
+     * Setzt die Klasse für den Container. Mehr Infos unter https://getbootstrap.com/docs/4.0/layout/overview/#containers
+     */
+    containerClass: _propTypes2.default.string,
+
+    /**
+     * Set <code>true</code> if this page uses <code>/lt;Actions /&gt;</code>, so this component will get enough padding to avoid overlapping of the content.
+     */
+    hasActions: _propTypes2.default.bool,
+
+    /**
+     * <code>sm</code>, <code>md</code>, <code>lg</code> or <code>xl</code>
+     */
+    break: _propTypes2.default.string
+};
+
+exports.default = Body;