componentes-sinco 1.1.3 → 1.1.4

package/dist/index.cjs

@@ -92,6 +92,7 @@ __export(index_exports, {
   MultiSelect: () => MultiSelect,
   PageHeader: () => PageHeader,
   SCActivityCalendar: () => SCActivityCalendar,
+  SCAppBar: () => SCAppBar,
   SCAutocomplete: () => SCAutocomplete,
   SCCalendarSwipeable: () => SCCalendarSwipeable,
   SCCard: () => SCCard,
@@ -5388,12 +5389,89 @@ var SCSnackBar = ({
   ));
 };
 
+// src/Components/SCAppBar.tsx
+var import_react54 = __toESM(require("react"), 1);
+var import_material37 = require("@mui/material");
+var import_Grid10 = __toESM(require("@mui/material/Grid"), 1);
+var import_es5 = require("dayjs/locale/es");
+var import_Menu = __toESM(require("@mui/icons-material/Menu"), 1);
+var import_ArrowBack = __toESM(require("@mui/icons-material/ArrowBack"), 1);
+var import_icons_material14 = require("@mui/icons-material");
+var SCAppBar = ({
+  background = "linear-gradient(180deg, #BBE9FC, #FFFFFF)",
+  contenidoExtra,
+  options,
+  fnVolver,
+  visibleVolver = true,
+  visibleConexion = true,
+  visibleMenu = true
+}) => {
+  const [isOnline, setIsOnline] = (0, import_react54.useState)(window.navigator.onLine);
+  const [anchorEl, setAnchorEl] = (0, import_react54.useState)(null);
+  const openMenu = Boolean(anchorEl);
+  const handleMenuClick = (event2) => {
+    setAnchorEl(event2.currentTarget);
+  };
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+  (0, import_react54.useEffect)(() => {
+    const handleOnline = () => {
+      console.log("tiene internet");
+      setIsOnline(true);
+    };
+    const handleOffline = () => {
+      console.log(" no tiene internet");
+      setIsOnline(false);
+    };
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+  return /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement(import_Grid10.default, { sx: { display: "flex", flexDirection: "column", background } }, /* @__PURE__ */ import_react54.default.createElement(import_Grid10.default, { size: 12, sx: { display: "flex", flexDirection: "row", alignItems: "center", padding: "0px 16px", justifyContent: "space-between" } }, visibleVolver && /* @__PURE__ */ import_react54.default.createElement(import_material37.IconButton, { size: "medium", onClick: fnVolver }, /* @__PURE__ */ import_react54.default.createElement(import_ArrowBack.default, { color: "action" })), /* @__PURE__ */ import_react54.default.createElement(import_Grid10.default, { sx: { display: "flex", flexDirection: "row", alignItems: "center" } }, visibleConexion && /* @__PURE__ */ import_react54.default.createElement(import_Grid10.default, { sx: { display: "flex", flexDirection: "row", alignItems: "center" } }, isOnline ? /* @__PURE__ */ import_react54.default.createElement(import_icons_material14.Wifi, { color: "action", sx: { marginRight: "8px" } }) : /* @__PURE__ */ import_react54.default.createElement(import_icons_material14.WifiOff, { color: "action", sx: { marginRight: "8px" } }), /* @__PURE__ */ import_react54.default.createElement(
+    import_material37.Badge,
+    {
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      variant: "dot",
+      sx: {
+        position: "relative",
+        top: "-3px",
+        left: "-4px"
+      },
+      color: isOnline ? "success" : "error"
+    }
+  ), /* @__PURE__ */ import_react54.default.createElement(import_material37.Typography, { variant: "caption", color: "text.secondary" }, isOnline ? "Online" : "Offline")), visibleMenu && /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement(import_material37.IconButton, { size: "medium", onClick: handleMenuClick }, /* @__PURE__ */ import_react54.default.createElement(import_Menu.default, { color: "action" })), /* @__PURE__ */ import_react54.default.createElement(
+    import_material37.Menu,
+    {
+      anchorEl,
+      open: openMenu,
+      onClose: handleMenuClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      sx: { zIndex: "2000" }
+    },
+    options.map((option, index) => /* @__PURE__ */ import_react54.default.createElement(import_material37.MenuItem, { onClick: option.fn, disabled: option.disabled, key: index }, /* @__PURE__ */ import_react54.default.createElement(import_material37.Typography, { variant: "body2" }, option.name)))
+  )))), /* @__PURE__ */ import_react54.default.createElement(import_material37.Box, { sx: { padding: "0px 16px" } }, contenidoExtra)));
+};
+
 // src/Theme/index.ts
 var import_styles3 = require("@mui/material/styles");
 
 // src/Theme/components.ts
-var import_react54 = __toESM(require("react"), 1);
-var import_icons_material14 = require("@mui/icons-material");
+var import_react55 = __toESM(require("react"), 1);
+var import_icons_material15 = require("@mui/icons-material");
 var components = {
   MuiSelect: {
     styleOverrides: {
@@ -6090,10 +6168,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: import_react54.default.createElement(import_icons_material14.CheckCircleRounded),
-        error: import_react54.default.createElement(import_icons_material14.ErrorRounded),
-        warning: import_react54.default.createElement(import_icons_material14.WarningRounded),
-        info: import_react54.default.createElement(import_icons_material14.InfoRounded)
+        success: import_react55.default.createElement(import_icons_material15.CheckCircleRounded),
+        error: import_react55.default.createElement(import_icons_material15.ErrorRounded),
+        warning: import_react55.default.createElement(import_icons_material15.WarningRounded),
+        info: import_react55.default.createElement(import_icons_material15.InfoRounded)
       }
     },
     variants: [
@@ -7146,6 +7224,7 @@ var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme)
   MultiSelect,
   PageHeader,
   SCActivityCalendar,
+  SCAppBar,
   SCAutocomplete,
   SCCalendarSwipeable,
   SCCard,