quicksnack 3.6.2 → 3.6.3
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.
|
@@ -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,7 +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;
|
|
4
6
|
minWidth?: number;
|
|
5
7
|
};
|
|
6
|
-
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>;
|
|
7
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,28 @@ 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"));
|
|
30
45
|
exports.SIDEBAR_COLLAPSED_WIDTH = 15;
|
|
31
|
-
exports.
|
|
32
|
-
|
|
46
|
+
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
|
|
47
|
+
? 'transform: translateX(0);'
|
|
48
|
+
: (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'; })));
|
|
49
|
+
var SideBar = function (props) {
|
|
50
|
+
var _a = react_1.default.useState(false), isOpen = _a[0], setIsOpen = _a[1];
|
|
51
|
+
var handleMouseEnter = react_1.default.useCallback(function () {
|
|
52
|
+
setIsOpen(true);
|
|
53
|
+
}, []);
|
|
54
|
+
var handleMouseLeave = react_1.default.useCallback(function () {
|
|
55
|
+
setIsOpen(false);
|
|
56
|
+
}, []);
|
|
57
|
+
return react_1.default.createElement(exports.StyledSidebar, __assign({ isDesktopMenuOpen: isOpen }, props, { onMouseOver: handleMouseEnter, onMouseOut: handleMouseLeave }));
|
|
58
|
+
};
|
|
59
|
+
exports.SideBar = SideBar;
|
|
60
|
+
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
|