blue-react 7.9.1 → 8.0.0-next.4

package/dist/components/Status.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Status;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Status(_ref) {
+  var alert = _ref.alert,
+      onUnsetAlert = _ref.onUnsetAlert,
+      _ref$successIcon = _ref.successIcon,
+      successIcon = _ref$successIcon === void 0 ? "✔" : _ref$successIcon,
+      _ref$infoIcon = _ref.infoIcon,
+      infoIcon = _ref$infoIcon === void 0 ? "ℹ️" : _ref$infoIcon,
+      _ref$warningIcon = _ref.warningIcon,
+      warningIcon = _ref$warningIcon === void 0 ? "⚠️" : _ref$warningIcon,
+      _ref$dangerIcon = _ref.dangerIcon,
+      dangerIcon = _ref$dangerIcon === void 0 ? "❌" : _ref$dangerIcon,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? null : _ref$status;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("blue-status-circle blue-loading blue-status-loading", {
+      "d-block": status === "loading" || alert && alert.status === "loading"
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "spinner-bounce-circle"
+  }, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("blue-status-circle blue-status-success", {
+      "d-flex": status === "success" || alert && alert.status === "success"
+    })
+  }, successIcon), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("blue-status-circle blue-status-info", {
+      "d-flex": status === "info" || alert && alert.status === "info"
+    })
+  }, infoIcon), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("blue-status-circle blue-status-warning", {
+      "d-flex": status === "warning" || alert && alert.status === "warning"
+    })
+  }, warningIcon), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("blue-status-circle blue-status-danger", {
+      "d-flex": status === "danger" || alert && alert.status === "danger"
+    })
+  }, dangerIcon), /*#__PURE__*/_react.default.createElement("div", {
+    className: "blue-status-alert alert"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "btn-close float-end mb-1",
+    "aria-label": "Close"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "alert-body"
+  })), alert && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("blue-status-alert alert d-block", alert.alertClassName, alert.status && "alert-".concat(alert.status))
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "btn-close float-end mb-1 d-inline-block",
+    "aria-label": "Close",
+    onClick: onUnsetAlert
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "alert-body"
+  }, alert.title && /*#__PURE__*/_react.default.createElement("h2", null, alert.title), alert.detailText && /*#__PURE__*/_react.default.createElement("span", null, alert.detailText))));
+}

package/dist/components/{DropdownMenuItem.js → StatusProvider.js}

@@ -5,13 +5,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = DropdownMenuItem;
+exports.StatusProvider = exports.useStatus = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Caret = _interopRequireDefault(require("./Caret"));
+var _Status = _interopRequireDefault(require("./Status"));
 
-var _Utilities = _interopRequireDefault(require("./Utilities"));
+var _excluded = ["children", "successIcon", "infoIcon", "warningIcon", "dangerIcon"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,60 +33,61 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-/**
- * @deprecated Use nested `MenuItem`s instead.
- * Dropdown with button for sidebar.
- */
-function DropdownMenuItem(props) {
-  var _useState = (0, _react.useState)(props.isActive || false),
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var StatusContext = /*#__PURE__*/(0, _react.createContext)({
+  setAlert: undefined,
+  setStatus: undefined
+});
+
+var StatusProvider = function StatusProvider(_ref) {
+  var children = _ref.children,
+      successIcon = _ref.successIcon,
+      infoIcon = _ref.infoIcon,
+      warningIcon = _ref.warningIcon,
+      dangerIcon = _ref.dangerIcon,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(null),
       _useState2 = _slicedToArray(_useState, 2),
-      active = _useState2[0],
-      setActive = _useState2[1];
+      alert = _useState2[0],
+      setAlert = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      showDropdown = _useState4[0],
-      setShowDropdown = _useState4[1];
+      status = _useState4[0],
+      setStatus = _useState4[1];
 
-  var handleClick = function handleClick() {
-    if (props.children) {
-      setShowDropdown(!showDropdown);
+  return /*#__PURE__*/_react.default.createElement(StatusContext.Provider, _extends({
+    value: {
+      setAlert: setAlert,
+      setStatus: setStatus
     }
-  };
-
-  var icon;
-
-  if (typeof props.icon === "string") {
-    // is className
-    icon = /*#__PURE__*/_react.default.createElement("span", {
-      className: props.icon + (props.children ? " blue-app-sidebar-dropdown-icon" : "")
-    });
-  } else {
-    // is element / component
-    icon = props.icon;
+  }, rest), children, /*#__PURE__*/_react.default.createElement(_Status.default, {
+    alert: alert || undefined,
+    onUnsetAlert: function onUnsetAlert() {
+      return setAlert(null);
+    },
+    successIcon: successIcon,
+    infoIcon: infoIcon,
+    warningIcon: warningIcon,
+    dangerIcon: dangerIcon,
+    status: status
+  }));
+};
+
+exports.StatusProvider = StatusProvider;
+
+var useStatus = function useStatus() {
+  var context = (0, _react.useContext)(StatusContext);
+
+  if (context === undefined) {
+    throw new Error("useStatus must be used within a StatusProvider");
   }
 
-  var id = {
-    id: "blue-action-menu-item-" + _Utilities.default.guid()
-  };
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "btn-group w-100"
-  }, /*#__PURE__*/_react.default.createElement("a", _extends({}, id, {
-    className: "blue-app-toggle-page blue-app-sidebar-btn btn pe-0 " + (active ? "active" : ""),
-    href: props.to
-  }), icon, /*#__PURE__*/_react.default.createElement("span", {
-    className: "blue-app-sidebar-label"
-  }, props.label)), /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: "btn blue-app-sidebar-btn w-auto ps-0",
-    onClick: handleClick
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "sr-only"
-  }, "Toggle Dropdown"), /*#__PURE__*/_react.default.createElement(_Caret.default, {
-    open: showDropdown,
-    mirrored: true,
-    className: "w-auto ps-5 mt-2"
-  }))), showDropdown && /*#__PURE__*/_react.default.createElement("div", {
-    className: "blue-app-sidebar-dropdown"
-  }, props.children));
-}
+  return context;
+};
+
+exports.useStatus = useStatus;

package/dist/components/Utilities.js

@@ -36,25 +36,25 @@ Utilities.toggleClass = function (element, className) {
 };
 
 Utilities.startLoading = function () {
-  document.querySelectorAll(".blue-app-loading")[0].style.display = "block";
+  document.querySelectorAll(".blue-loading")[0].style.display = "block";
 };
 
 Utilities.finishLoading = function () {
-  document.querySelectorAll(".blue-app-loading")[0].style.display = "";
+  document.querySelectorAll(".blue-loading")[0].style.display = "";
 };
 
 Utilities.showSuccess = function () {
-  document.querySelectorAll(".blue-app-status-success")[0].style.display = "flex";
+  document.querySelectorAll(".blue-status-success")[0].style.display = "flex";
 };
 
 Utilities.hideSuccess = function () {
-  document.querySelectorAll(".blue-app-status-success")[0].style.display = "";
+  document.querySelectorAll(".blue-status-success")[0].style.display = "";
 };
 
 Utilities.toggleActions = function () {
-  this.toggleClass(document.querySelector(".blue-app-wrapper"), "active");
-  this.toggleClass(document.querySelector(".blue-app-grid"), "wrapper-in");
-  var els = document.querySelectorAll(".blue-app-actions");
+  this.toggleClass(document.querySelector(".blue-wrapper"), "active");
+  this.toggleClass(document.querySelector(".blue-layout"), "wrapper-in");
+  var els = document.querySelectorAll(".blue-actions");
 
   for (var i = 0; i < els.length; i++) {
     this.toggleClass(els[i], "open");
@@ -63,8 +63,8 @@ Utilities.toggleActions = function () {
 
 Utilities.resetAlertMessage = function () {
   var alertClassName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "info";
-  var alertElement = document.querySelectorAll(".blue-app-status-alert")[0];
-  document.querySelectorAll(".blue-app-status-" + alertClassName)[0].style.display = "";
+  var alertElement = document.querySelectorAll(".blue-status-alert")[0];
+  document.querySelectorAll(".blue-status-" + alertClassName)[0].style.display = "";
   alertElement.style.display = "";
   this.removeClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
 };
@@ -75,13 +75,13 @@ Utilities.setAlertMessage = function (message) {
   var alertClassName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "info";
   var close = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
   var detailText = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
-  var alertElement = document.querySelectorAll(".blue-app-status-alert")[0];
+  var alertElement = document.querySelectorAll(".blue-status-alert")[0];
 
   if (alertClassName.indexOf("alert-") > -1) {
     alertClassName = alertClassName.replace("alert-", "");
   }
 
-  document.querySelectorAll(".blue-app-status-" + alertClassName)[0].style.display = "flex";
+  document.querySelectorAll(".blue-status-" + alertClassName)[0].style.display = "flex";
   alertElement.style.display = "block";
   this.addClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
   alertElement.querySelector(".alert-body").innerHTML = "<h2>" + message + "</h2>";
@@ -117,24 +117,6 @@ Utilities.scrollToTop = function () {
     top: 0
   });
 };
-/**
- * @deprecated Fluent buttons got removed from blue-react.
- */
-
-
-Utilities.fluentBtnsListener = function (event, btn) {};
-/**
- * @deprecated Fluent buttons got removed from blue-react.
- */
-
-
-Utilities.unregisterFluentBtns = function () {};
-/**
- * @deprecated Fluent buttons got removed from blue-react.
- */
-
-
-Utilities.registerFluentBtns = function () {};
 
 Utilities.fetchData = function (input) {
   var init = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;