blue-react 9.6.0 → 9.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ActionMenu.js +10 -30
- package/dist/components/Header.js +1 -6
- package/dist/components/Layout.js +0 -2
- package/dist/components/MenuItem.js +1 -1
- package/dist/components/SidebarToggler.js +1 -1
- package/dist/components/Utilities.js +4 -0
- package/dist/style.css +218 -244
- package/dist/style.min.css +4 -4
- package/dist/style.scss +1 -1
- package/dist/styles/_action-menu.scss +0 -14
- package/dist/styles/_hover.scss +2 -2
- package/dist/styles/_layout.scss +10 -15
- package/dist/styles/_router.scss +2 -1
- package/dist/styles/_sidebar.scss +1 -1
- package/dist/styles/_status.scss +2 -0
- package/dist/styles/_tooltips.scss +191 -189
- package/dist/styles/_variables.scss +16 -1
- package/dist/styles/mixins/_action-menu.scss +7 -8
- package/dist/styles/mixins/_misc.scss +4 -1
- package/dist/styles/mixins/_sidebar.scss +2 -2
- package/dist/types/components/Header.d.ts +2 -2
- package/dist/types/components/Utilities.d.ts +3 -0
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _MenuItem = _interopRequireDefault(require("./MenuItem"));
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _Outside = _interopRequireDefault(require("./Outside"));
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
@@ -58,44 +58,24 @@ function ActionMenu(props) {
|
|
|
58
58
|
setActionsToggledIn = _useState2[1];
|
|
59
59
|
|
|
60
60
|
var toggleActions = function toggleActions() {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
initToggleStatus();
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
var initToggleStatus = function initToggleStatus() {
|
|
67
|
-
setActionsToggledIn(_Utilities.default.hasClass(document.querySelector(".blue-actions"), "open"));
|
|
61
|
+
return setActionsToggledIn(!actionsToggledIn);
|
|
68
62
|
};
|
|
69
63
|
|
|
70
|
-
|
|
71
|
-
initToggleStatus();
|
|
72
|
-
var appWrapper = document.querySelector(".blue-wrapper");
|
|
64
|
+
var validChildren = _react.Children.toArray(children).filter(Boolean);
|
|
73
65
|
|
|
74
|
-
|
|
75
|
-
|
|
66
|
+
return /*#__PURE__*/_react.default.createElement(_Outside.default, {
|
|
67
|
+
className: "blue-actions navbar ".concat(className, " navbar-expand").concat(_break !== "none" ? "-".concat(_break) : "", " ").concat(_break, " ").concat(actionsToggledIn ? "open" : ""),
|
|
68
|
+
onClickOutside: function onClickOutside() {
|
|
69
|
+
setActionsToggledIn(false);
|
|
76
70
|
}
|
|
77
|
-
|
|
78
|
-
document.querySelectorAll(".blue-actions-menu .nav-link").forEach(function (link) {
|
|
79
|
-
link.addEventListener("click", function () {
|
|
80
|
-
if (actionsToggledIn) {
|
|
81
|
-
toggleActions();
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
});
|
|
85
|
-
}, []);
|
|
86
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
87
|
-
className: "blue-actions navbar ".concat(className, " navbar-expand").concat(_break !== "none" ? "-".concat(_break) : "", " ").concat(_break)
|
|
88
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
89
|
-
className: "blue-header-wrapper",
|
|
90
|
-
onClick: _Utilities.default.scrollToTop
|
|
91
|
-
}), /*#__PURE__*/_react.default.createElement("ul", {
|
|
71
|
+
}, /*#__PURE__*/_react.default.createElement("ul", {
|
|
92
72
|
className: "blue-actions-menu nav navbar-nav navbar-right"
|
|
93
|
-
}, !actionsToggledIn && !hideToggleAction
|
|
73
|
+
}, validChildren.length > 0 && !actionsToggledIn && !hideToggleAction && /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
|
|
94
74
|
className: "blue-actions-menu-toggle",
|
|
95
75
|
onClick: function onClick() {
|
|
96
76
|
return toggleActions();
|
|
97
77
|
},
|
|
98
78
|
icon: toggleIcon,
|
|
99
79
|
"aria-label": "Toggle menu"
|
|
100
|
-
})
|
|
80
|
+
}), children));
|
|
101
81
|
}
|
|
@@ -7,8 +7,6 @@ exports.default = Header;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
-
var _Utilities = _interopRequireDefault(require("./Utilities"));
|
|
11
|
-
|
|
12
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
11
|
|
|
14
12
|
/**
|
|
@@ -18,8 +16,5 @@ function Header(_ref) {
|
|
|
18
16
|
var children = _ref.children;
|
|
19
17
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
20
18
|
className: "blue-header blue-header-extension"
|
|
21
|
-
},
|
|
22
|
-
className: "blue-header-wrapper",
|
|
23
|
-
onClick: _Utilities.default.scrollToTop
|
|
24
|
-
}), children);
|
|
19
|
+
}, children);
|
|
25
20
|
}
|
|
@@ -275,8 +275,6 @@ var Layout = /*#__PURE__*/function (_Component) {
|
|
|
275
275
|
_this$props$pages;
|
|
276
276
|
|
|
277
277
|
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
|
|
278
|
-
className: "blue-wrapper"
|
|
279
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
280
278
|
id: this.props.id ? this.props.id : "",
|
|
281
279
|
style: this.props.style ? this.props.style : {},
|
|
282
280
|
className: "blue-layout" + (this.props.className ? " " + this.props.className : "") + (this.state.sidebarIn ? " open" : "") + (this.props.hideSidebarMenu ? " hasNoSidebarMenu" : " hasSidebarMenu") + (this.state.expandSidebar ? " expandSidebar" : "") + (this.props.disableHeaders ? " disableHeaders" : "") + (this.props.hideToggleExpandSidebar ? " hideToggleExpandSidebar" : ""),
|
|
@@ -99,7 +99,7 @@ function MenuItem(props) {
|
|
|
99
99
|
props.onShowDropdown(showDropdown);
|
|
100
100
|
}
|
|
101
101
|
}, [props.onShowDropdown, showDropdown]);
|
|
102
|
-
var className = "blue-menu-item btn" + (props.isActive ? " active" : "") + (props.className ? " " + props.className : "") + (props.children ? " blue-menu-item-dropdown-toggle" : "") + (props.highlighted ? " highlighted" : "");
|
|
102
|
+
var className = "blue-menu-item btn" + (props.isActive ? " active" : "") + (props.className ? " " + props.className : "") + (props.children ? " blue-menu-item-dropdown-toggle w-100" : "") + (props.highlighted ? " highlighted" : "");
|
|
103
103
|
var icon, iconForActive;
|
|
104
104
|
|
|
105
105
|
if (typeof props.icon === "string") {
|
|
@@ -20,7 +20,7 @@ function SidebarToggler(_ref) {
|
|
|
20
20
|
sidebarToggleIconComponent = _ref.sidebarToggleIconComponent,
|
|
21
21
|
onClick = _ref.onClick;
|
|
22
22
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
23
|
-
className: "blue-sidebar-toggler
|
|
23
|
+
className: "blue-sidebar-toggler position-fixed ".concat(className),
|
|
24
24
|
"data-tooltip": (0, _shared.getPhrase)("Toggle menu")
|
|
25
25
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
26
26
|
type: "button",
|
|
@@ -71,6 +71,10 @@ function hideSuccess() {
|
|
|
71
71
|
;
|
|
72
72
|
document.querySelector(".blue-status-success").style.display = "";
|
|
73
73
|
}
|
|
74
|
+
/**
|
|
75
|
+
* @deprecated Is handled inside of `ActioMenu` component now
|
|
76
|
+
*/
|
|
77
|
+
|
|
74
78
|
|
|
75
79
|
function toggleActions() {
|
|
76
80
|
toggleClass(document.querySelector(".blue-wrapper"), "active");
|