quicksnack 3.6.3 → 3.7.0

package/dist/UiStateProvider.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface UiStateProps {
+    isSideMenuOpen: boolean;
+    closeSideMenu: () => void;
+    openSideMenu: () => void;
+}
+export declare const useUiStateContext: () => UiStateProps;
+export declare const UiStateProvider: React.FC;
+export {};

package/dist/UiStateProvider.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UiStateProvider = exports.useUiStateContext = void 0;
+var react_1 = __importStar(require("react"));
+var noop = function () { };
+var UiState = react_1.default.createContext({
+    isSideMenuOpen: false,
+    closeSideMenu: noop,
+    openSideMenu: noop
+});
+var useUiStateContext = function () { return (0, react_1.useContext)(UiState); };
+exports.useUiStateContext = useUiStateContext;
+var UiStateProvider = function (_a) {
+    var children = _a.children;
+    var _b = react_1.default.useState(false), isSideMenuOpen = _b[0], setIsSideMenuOpen = _b[1];
+    var handleCloseSideMenu = react_1.default.useCallback(function () { return setIsSideMenuOpen(false); }, []);
+    var handleOpenSideMenu = react_1.default.useCallback(function () { return setIsSideMenuOpen(true); }, []);
+    return (react_1.default.createElement(UiState.Provider, { value: {
+            isSideMenuOpen: isSideMenuOpen,
+            closeSideMenu: handleCloseSideMenu,
+            openSideMenu: handleOpenSideMenu
+        } }, children));
+};
+exports.UiStateProvider = UiStateProvider;

package/dist/UiWrapper.js

@@ -11,11 +11,13 @@ exports.UiWrapper = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var UiProvider_1 = require("./UiProvider");
+var UiStateProvider_1 = require("./UiStateProvider");
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n  color: ", ";\n  font-size: 14px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n  color: ", ";\n  font-size: 14px;\n"])), function (props) { return props.theme.palette.common.black; });
 var UiWrapper = function (_a) {
     var theme = _a.theme, children = _a.children;
     return (react_1.default.createElement(UiProvider_1.UiProvider, { theme: theme },
-        react_1.default.createElement(Wrapper, null, children)));
+        react_1.default.createElement(UiStateProvider_1.UiStateProvider, null,
+            react_1.default.createElement(Wrapper, null, children))));
 };
 exports.UiWrapper = UiWrapper;
 var templateObject_1;

package/dist/components/Menu/SideBar.js

@@ -42,19 +42,14 @@ var styled_components_1 = __importStar(require("styled-components"));
 var Box_1 = require("../Box/Box");
 var responsiveProps_1 = require("../../responsiveness/responsiveProps");
 var react_1 = __importDefault(require("react"));
+var UiStateProvider_1 = require("../../UiStateProvider");
 exports.SIDEBAR_COLLAPSED_WIDTH = 15;
 exports.StyledSidebar = (0, styled_components_1.default)(Box_1.Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  float: left;\n    \n  height: 100%;\n  width: 100%;  \n    \n  background-color: #243646;\n    \n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \n  z-index: 900;\n       \n  display: ", ";     \n  pointer-events: auto;\n     \n  ", "  \n"], ["\n  float: left;\n    \n  height: 100%;\n  width: 100%;  \n    \n  background-color: #243646;\n    \n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  \n  z-index: 900;\n       \n  display: ", ";     \n  pointer-events: auto;\n     \n  ", "  \n"])), function (props) { return props.isMobileMenuOpen ? 'block' : 'none'; }, (0, responsiveProps_1.mq)("laptop", (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: static;    \n    display: block;\n    width: auto;\n    min-width: ", ";\n    box-shadow: 2px 0px 6px -1px rgba(0,0,0,0.74);\n        \n    transition: transform .1s ease-out;\n    transform: ", "; \n             \n    & > ul {\n      opacity: ", ";\n    }                              \n  "], ["\n    position: static;    \n    display: block;\n    width: auto;\n    min-width: ", ";\n    box-shadow: 2px 0px 6px -1px rgba(0,0,0,0.74);\n        \n    transition: transform .1s ease-out;\n    transform: ", "; \n             \n    & > ul {\n      opacity: ", ";\n    }                              \n  "])), function (props) { var _a; return props.theme.spacing((_a = props.minWidth) !== null && _a !== void 0 ? _a : 75); }, function (props) { return props.isDesktopMenuOpen
     ? 'transform: translateX(0);'
     : (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["translateX(calc(-100% + ", "));"], ["translateX(calc(-100% + ", "));"])), function (props) { return props.theme.spacing(exports.SIDEBAR_COLLAPSED_WIDTH); }); }, function (props) { return props.isDesktopMenuOpen ? '1' : '0'; })));
 var SideBar = function (props) {
-    var _a = react_1.default.useState(false), isOpen = _a[0], setIsOpen = _a[1];
-    var handleMouseEnter = react_1.default.useCallback(function () {
-        setIsOpen(true);
-    }, []);
-    var handleMouseLeave = react_1.default.useCallback(function () {
-        setIsOpen(false);
-    }, []);
-    return react_1.default.createElement(exports.StyledSidebar, __assign({ isDesktopMenuOpen: isOpen }, props, { onMouseOver: handleMouseEnter, onMouseOut: handleMouseLeave }));
+    var _a = (0, UiStateProvider_1.useUiStateContext)(), closeSideMenu = _a.closeSideMenu, openSideMenu = _a.openSideMenu, isSideMenuOpen = _a.isSideMenuOpen;
+    return react_1.default.createElement(exports.StyledSidebar, __assign({ isDesktopMenuOpen: isSideMenuOpen }, props, { onMouseEnter: openSideMenu, onMouseLeave: closeSideMenu }));
 };
 exports.SideBar = SideBar;
 var templateObject_1, templateObject_2, templateObject_3;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quicksnack",
   "description": "Quickly create beautiful admin layouts using react",
-  "version": "3.6.3",
+  "version": "3.7.0",
   "private": false,
   "files": [
     "dist/**"