quicksnack 3.6.1 → 3.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/UiStateProvider.d.ts +9 -0
- package/dist/UiStateProvider.js +43 -0
- package/dist/UiWrapper.js +3 -1
- package/dist/components/Menu/MenuSlideOpenIndicator.js +1 -1
- package/dist/components/Menu/SideBar.d.ts +5 -1
- package/dist/components/Menu/SideBar.js +26 -3
- package/dist/layouts/BasicLayout/BasicLayout.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface UiStateProps {
|
|
3
|
+
isSideMenuOpen: boolean;
|
|
4
|
+
closeSideMenu: () => void;
|
|
5
|
+
openSideMenu: () => void;
|
|
6
|
+
}
|
|
7
|
+
export declare const useUiStateContext: () => UiStateProps;
|
|
8
|
+
export declare const UiStateProvider: React.FC;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
+
exports.UiStateProvider = exports.useUiStateContext = void 0;
|
|
23
|
+
var react_1 = __importStar(require("react"));
|
|
24
|
+
var noop = function () { };
|
|
25
|
+
var UiState = react_1.default.createContext({
|
|
26
|
+
isSideMenuOpen: false,
|
|
27
|
+
closeSideMenu: noop,
|
|
28
|
+
openSideMenu: noop
|
|
29
|
+
});
|
|
30
|
+
var useUiStateContext = function () { return (0, react_1.useContext)(UiState); };
|
|
31
|
+
exports.useUiStateContext = useUiStateContext;
|
|
32
|
+
var UiStateProvider = function (_a) {
|
|
33
|
+
var children = _a.children;
|
|
34
|
+
var _b = react_1.default.useState(false), isSideMenuOpen = _b[0], setIsSideMenuOpen = _b[1];
|
|
35
|
+
var handleCloseSideMenu = react_1.default.useCallback(function () { return setIsSideMenuOpen(false); }, []);
|
|
36
|
+
var handleOpenSideMenu = react_1.default.useCallback(function () { return setIsSideMenuOpen(true); }, []);
|
|
37
|
+
return (react_1.default.createElement(UiState.Provider, { value: {
|
|
38
|
+
isSideMenuOpen: isSideMenuOpen,
|
|
39
|
+
closeSideMenu: handleCloseSideMenu,
|
|
40
|
+
openSideMenu: handleOpenSideMenu
|
|
41
|
+
} }, children));
|
|
42
|
+
};
|
|
43
|
+
exports.UiStateProvider = UiStateProvider;
|
package/dist/UiWrapper.js
CHANGED
|
@@ -11,11 +11,13 @@ exports.UiWrapper = void 0;
|
|
|
11
11
|
var react_1 = __importDefault(require("react"));
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var UiProvider_1 = require("./UiProvider");
|
|
14
|
+
var UiStateProvider_1 = require("./UiStateProvider");
|
|
14
15
|
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; });
|
|
15
16
|
var UiWrapper = function (_a) {
|
|
16
17
|
var theme = _a.theme, children = _a.children;
|
|
17
18
|
return (react_1.default.createElement(UiProvider_1.UiProvider, { theme: theme },
|
|
18
|
-
react_1.default.createElement(
|
|
19
|
+
react_1.default.createElement(UiStateProvider_1.UiStateProvider, null,
|
|
20
|
+
react_1.default.createElement(Wrapper, null, children))));
|
|
19
21
|
};
|
|
20
22
|
exports.UiWrapper = UiWrapper;
|
|
21
23
|
var templateObject_1;
|
|
@@ -13,7 +13,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
13
13
|
var responsiveProps_1 = require("../../responsiveness/responsiveProps");
|
|
14
14
|
var SideBar_1 = require("./SideBar");
|
|
15
15
|
var Box_1 = require("../Box/Box");
|
|
16
|
-
var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: none;\n ", "\n \n height: 100%;\n flex-direction: row;\n align-items: center;\n padding: ", "; \n \n ", ":hover & {\n display:none;\n }\n"], ["\n display: none;\n ", "\n \n height: 100%;\n flex-direction: row;\n align-items: center;\n padding: ", "; \n \n ", ":hover & {\n display:none;\n }\n"])), (0, responsiveProps_1.mq)("laptop", "display: flex;"), function (props) { return props.theme.spacing(0, 5); }, SideBar_1.
|
|
16
|
+
var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: none;\n ", "\n \n height: 100%;\n flex-direction: row;\n align-items: center;\n padding: ", "; \n \n ", ":hover & {\n display:none;\n }\n"], ["\n display: none;\n ", "\n \n height: 100%;\n flex-direction: row;\n align-items: center;\n padding: ", "; \n \n ", ":hover & {\n display:none;\n }\n"])), (0, responsiveProps_1.mq)("laptop", "display: flex;"), function (props) { return props.theme.spacing(0, 5); }, SideBar_1.StyledSidebar);
|
|
17
17
|
var MenuSlideOpenIndicator = function (_a) {
|
|
18
18
|
var children = _a.children;
|
|
19
19
|
return (react_1.default.createElement(StyledBox, null, children));
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
export declare const SIDEBAR_COLLAPSED_WIDTH = 15;
|
|
2
3
|
declare type SideBarProps = {
|
|
4
|
+
isDesktopMenuOpen?: boolean;
|
|
3
5
|
isMobileMenuOpen?: boolean;
|
|
6
|
+
minWidth?: number;
|
|
4
7
|
};
|
|
5
|
-
export declare const
|
|
8
|
+
export declare const StyledSidebar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box/Box").BoxProps & SideBarProps, never>;
|
|
9
|
+
export declare const SideBar: React.FC<SideBarProps>;
|
|
6
10
|
export {};
|
|
@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
6
17
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
18
|
if (k2 === undefined) k2 = k;
|
|
8
19
|
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
@@ -22,11 +33,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
33
|
__setModuleDefault(result, mod);
|
|
23
34
|
return result;
|
|
24
35
|
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
25
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.SideBar = exports.SIDEBAR_COLLAPSED_WIDTH = void 0;
|
|
40
|
+
exports.SideBar = exports.StyledSidebar = exports.SIDEBAR_COLLAPSED_WIDTH = void 0;
|
|
27
41
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
28
42
|
var Box_1 = require("../Box/Box");
|
|
29
43
|
var responsiveProps_1 = require("../../responsiveness/responsiveProps");
|
|
44
|
+
var react_1 = __importDefault(require("react"));
|
|
45
|
+
var UiStateProvider_1 = require("../../UiStateProvider");
|
|
30
46
|
exports.SIDEBAR_COLLAPSED_WIDTH = 15;
|
|
31
|
-
exports.
|
|
32
|
-
|
|
47
|
+
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
|
|
48
|
+
? 'transform: translateX(0);'
|
|
49
|
+
: (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'; })));
|
|
50
|
+
var SideBar = function (props) {
|
|
51
|
+
var _a = (0, UiStateProvider_1.useUiStateContext)(), closeSideMenu = _a.closeSideMenu, openSideMenu = _a.openSideMenu, isSideMenuOpen = _a.isSideMenuOpen;
|
|
52
|
+
return react_1.default.createElement(exports.StyledSidebar, __assign({ isDesktopMenuOpen: isSideMenuOpen }, props, { onMouseEnter: openSideMenu, onMouseLeave: closeSideMenu }));
|
|
53
|
+
};
|
|
54
|
+
exports.SideBar = SideBar;
|
|
55
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -35,7 +35,7 @@ var BasicLayout = function (_a) {
|
|
|
35
35
|
return (react_1.default.createElement(Wrapper, { flexGrow: 1, display: "flex", flexDirection: "column" },
|
|
36
36
|
react_1.default.createElement(WrapperInner, { flexGrow: 1, flexShrink: 0 },
|
|
37
37
|
sideBarProps && (react_1.default.createElement(SidebarWrapper, null,
|
|
38
|
-
react_1.default.createElement(SideBar_1.SideBar, __assign({}, sideBarProps
|
|
38
|
+
react_1.default.createElement(SideBar_1.SideBar, __assign({}, sideBarProps)))),
|
|
39
39
|
react_1.default.createElement(ContentBox, { display: "flex", flexDirection: "column" },
|
|
40
40
|
react_1.default.createElement(TopBar_1.TopBar, __assign({}, topBarProps)),
|
|
41
41
|
react_1.default.createElement(Box_1.Box, { p: { laptop: constants_1.VerticalRhythmLaptop, mobile: constants_1.VerticalRhythmMobile }, pl: { laptop: constants_1.VerticalRhythmLaptop + SideBar_1.SIDEBAR_COLLAPSED_WIDTH }, flexGrow: 1 }, isLoading && loader
|