quicksnack 3.1.0 → 3.3.1
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/components/Floater/Floater.d.ts +1 -1
- package/dist/components/Floater/Floater.js +10 -1
- package/dist/components/HorizontalScroller/HorizontalScroller.d.ts +2 -0
- package/dist/components/HorizontalScroller/HorizontalScroller.js +20 -0
- package/dist/components/Menu/SideBar.js +1 -1
- package/dist/components/Table/Table.d.ts +6 -2
- package/dist/components/Table/Table.js +11 -12
- package/dist/layouts/BasicLayout/BasicLayout.js +3 -5
- package/package.json +1 -1
|
@@ -32,8 +32,17 @@ var FloaterItem_1 = require("./FloaterItem");
|
|
|
32
32
|
var horizontalMargin = { laptop: -1 };
|
|
33
33
|
var verticalMargin = { mobile: -1, laptop: 0 };
|
|
34
34
|
var display = { mobile: "block", laptop: "flex" };
|
|
35
|
+
var hasElement = function (item) {
|
|
36
|
+
return !!item.element;
|
|
37
|
+
};
|
|
35
38
|
var Floater = function (_a) {
|
|
36
39
|
var items = _a.items, _b = _a.stretch, stretch = _b === void 0 ? false : _b, props = __rest(_a, ["items", "stretch"]);
|
|
37
|
-
return react_1.default.createElement(Box_1.Box, __assign({ mb: verticalMargin, mt: verticalMargin, ml: horizontalMargin, mr: horizontalMargin, display: display }, props), items
|
|
40
|
+
return react_1.default.createElement(Box_1.Box, __assign({ mb: verticalMargin, mt: verticalMargin, ml: horizontalMargin, mr: horizontalMargin, display: display }, props), items
|
|
41
|
+
.filter(Boolean)
|
|
42
|
+
.map(function (item, i) {
|
|
43
|
+
return hasElement(item)
|
|
44
|
+
? react_1.default.createElement(FloaterItem_1.FloaterItem, { key: i, stretch: item.stretch }, item.element)
|
|
45
|
+
: react_1.default.createElement(FloaterItem_1.FloaterItem, { key: i, stretch: stretch }, item);
|
|
46
|
+
}));
|
|
38
47
|
};
|
|
39
48
|
exports.Floater = Floater;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.HorizontalScroller = void 0;
|
|
11
|
+
var react_1 = __importDefault(require("react"));
|
|
12
|
+
var Box_1 = require("../Box/Box");
|
|
13
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
14
|
+
var Scroller = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n overflow-x: auto;\n overflow-y: hidden;\n"], ["\n overflow-x: auto;\n overflow-y: hidden;\n"])));
|
|
15
|
+
var HorizontalScroller = function (_a) {
|
|
16
|
+
var children = _a.children;
|
|
17
|
+
return (react_1.default.createElement(Scroller, null, children));
|
|
18
|
+
};
|
|
19
|
+
exports.HorizontalScroller = HorizontalScroller;
|
|
20
|
+
var templateObject_1;
|
|
@@ -27,5 +27,5 @@ exports.SideBar = void 0;
|
|
|
27
27
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
28
28
|
var Box_1 = require("../Box/Box");
|
|
29
29
|
var responsiveProps_1 = require("../../responsiveness/responsiveProps");
|
|
30
|
-
exports.SideBar = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n height:
|
|
30
|
+
exports.SideBar = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __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 \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 \n ", " \n"])), function (props) { return props.isOpen ? 'block' : 'none'; }, (0, responsiveProps_1.mq)("laptop", (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: static; \n display: block;\n width: ", "; \n "], ["\n position: static; \n display: block;\n width: ", "; \n "])), function (props) { return props.theme.spacing(props.width || 50); })));
|
|
31
31
|
var templateObject_1, templateObject_2;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Theme } from "../../UiProvider";
|
|
3
|
-
|
|
3
|
+
import { Responsive } from "../../responsiveness/responsiveProps";
|
|
4
|
+
interface TableProps {
|
|
5
|
+
tableLayout?: Responsive<"auto" | "fixed" | "initial" | "inherit">;
|
|
6
|
+
}
|
|
7
|
+
export declare const StyledTable: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, TableProps, never>;
|
|
4
8
|
declare const StyledTableRow: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
|
|
5
9
|
disableHover?: boolean | undefined;
|
|
6
10
|
}, never>;
|
|
@@ -11,7 +15,7 @@ interface HeadCellProps {
|
|
|
11
15
|
width?: number | string;
|
|
12
16
|
}
|
|
13
17
|
declare const StyledTableHeadCell: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, HeadCellProps, never>;
|
|
14
|
-
export declare const Table: React.FC & {
|
|
18
|
+
export declare const Table: React.FC<TableProps> & {
|
|
15
19
|
Row: typeof StyledTableRow;
|
|
16
20
|
Cell: typeof TableCell;
|
|
17
21
|
HeadCell: typeof StyledTableHeadCell;
|
|
@@ -52,22 +52,21 @@ exports.Table = exports.StyledTable = void 0;
|
|
|
52
52
|
var react_1 = __importDefault(require("react"));
|
|
53
53
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
54
54
|
var responsiveProps_1 = require("../../responsiveness/responsiveProps");
|
|
55
|
-
exports.StyledTable = styled_components_1.default.table(
|
|
56
|
-
|
|
55
|
+
exports.StyledTable = styled_components_1.default.table(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 4px;\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n \n ", " \n"], ["\n border-radius: 4px;\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n \n ", " \n"])), function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
|
|
56
|
+
"tableLayout": function (unit) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["table-layout: ", ";"], ["table-layout: ", ";"])), unit); },
|
|
57
|
+
}); });
|
|
58
|
+
var StyledTableRow = styled_components_1.default.tr(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n & > td {\n transition: background-color .1s ease, color .1s ease;\n }\n \n ", " \n"], ["\n & > td {\n transition: background-color .1s ease, color .1s ease;\n }\n \n ", " \n"])), function (props) { return Object.entries(props.theme.palette.pane).map(function (_a) {
|
|
57
59
|
var variant = _a[0], value = _a[1];
|
|
58
|
-
return "\n &:nth-child(odd) > td.".concat(variant, " { \n color: ").concat(value.main.idle.text, ";\n background-color: ").concat(value.main.idle.background, "; \n } \n &:nth-child(even) > td.").concat(variant, " { \n color: ").concat(value.alternate.idle.text, ";\n background-color: ").concat(value.alternate.idle.background, "; \n } \n \n \n ").concat(!props.disableHover && "\n &:nth-child(odd):hover > td.".concat(variant, " {\n color: ").concat(value.main.hover.text, ";\n background-color: ").concat(value.main.hover.background, "; \n }\n &:nth-child(even):hover > td.").concat(variant, " {\n color: ").concat(value.alternate.hover.text, ";\n background-color: ").concat(value.alternate.hover.background, "; \n }\n "), " \n
|
|
60
|
+
return "\n &:nth-child(odd) > td.".concat(variant, " { \n color: ").concat(value.main.idle.text, ";\n background-color: ").concat(value.main.idle.background, "; \n } \n &:nth-child(even) > td.").concat(variant, " { \n color: ").concat(value.alternate.idle.text, ";\n background-color: ").concat(value.alternate.idle.background, "; \n } \n \n \n ").concat(!props.disableHover && "\n &:nth-child(odd):hover > td.".concat(variant, " {\n color: ").concat(value.main.hover.text, ";\n background-color: ").concat(value.main.hover.background, "; \n }\n &:nth-child(even):hover > td.").concat(variant, " {\n color: ").concat(value.alternate.hover.text, ";\n background-color: ").concat(value.alternate.hover.background, "; \n }\n "), " \n ");
|
|
59
61
|
}); });
|
|
60
|
-
var StyledTableCell = styled_components_1.default.td(
|
|
61
|
-
width: function (unit) { return (0, styled_components_1.css)(
|
|
62
|
+
var StyledTableCell = styled_components_1.default.td(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-top: 1px solid rgba(34,36,38,.1);\n border-right: 1px solid rgba(34,36,38,.1); \n padding: ", ";\n \n &:last-of-type {\n border-right: 0;\n }\n \n ", "\n"], ["\n border-top: 1px solid rgba(34,36,38,.1);\n border-right: 1px solid rgba(34,36,38,.1); \n padding: ", ";\n \n &:last-of-type {\n border-right: 0;\n }\n \n ", "\n"])), function (props) { return props.theme.spacing(2, 3); }, function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
|
|
63
|
+
width: function (unit) { return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), unit); },
|
|
62
64
|
}); });
|
|
63
|
-
var StyledTableHeadCell = styled_components_1.default.th(
|
|
65
|
+
var StyledTableHeadCell = styled_components_1.default.th(templateObject_7 || (templateObject_7 = __makeTemplateObject([" \n border-right: 1px solid rgba(34,36,38,.1); \n text-align: left;\n padding: ", "; \n font-weight: 700;\n transition: background-color .1s ease, color .1s ease;\n\n &:last-of-type {\n border-right: 0;\n }\n \n ", "\n \n ", "\n \n ", " \n \n ", "\n"], [" \n border-right: 1px solid rgba(34,36,38,.1); \n text-align: left;\n padding: ", "; \n font-weight: 700;\n transition: background-color .1s ease, color .1s ease;\n\n &:last-of-type {\n border-right: 0;\n }\n \n ", "\n \n ", "\n \n ", " \n \n ", "\n"
|
|
64
66
|
// Wrapper to allow for dot notated components:
|
|
65
|
-
])), function (props) { return props.theme.spacing(2, 3); }, function (props) { return !!props.variant && (0, styled_components_1.css)(
|
|
67
|
+
])), function (props) { return props.theme.spacing(2, 3); }, function (props) { return !!props.variant && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n background-color: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n } \n "], ["\n color: ", ";\n background-color: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n } \n "])), props.theme.palette.pane[props.variant].main.idle.text, props.theme.palette.pane[props.variant].main.idle.background, props.theme.palette.pane[props.variant].main.hover.text, props.theme.palette.pane[props.variant].main.hover.background); }, function (props) { return props.width ? "width: ".concat(props.width, ";") : ''; }, function (props) { return props.sortable && "\n cursor: pointer;\n user-select: none;\n \n &:hover { \n background-color: ".concat(props.theme.palette.pane.basic.main.hover.background, "; \n } \n "); }, function (props) { return props.sortDirection && " \n position:relative;\n \n &:after {\n content: \" \";\n position: absolute; \n right: 15px;\n top: 50%;\n \n height: 0;\n width: 0;\n border: 5px solid transparent;\n \n ".concat(props.sortDirection === 'asc' ? "\n border-top-color: #000;\n transform: translateY(-25%);\n " : "\n border-bottom-color: #000;\n transform: translateY(-75%);\n ", " \n } \n "); });
|
|
66
68
|
// Wrapper to allow for dot notated components:
|
|
67
|
-
var Table = function (
|
|
68
|
-
var children = _a.children;
|
|
69
|
-
return (react_1.default.createElement(exports.StyledTable, null, children));
|
|
70
|
-
};
|
|
69
|
+
var Table = function (props) { return (react_1.default.createElement(exports.StyledTable, __assign({}, props))); };
|
|
71
70
|
exports.Table = Table;
|
|
72
71
|
var TableCell = function (_a) {
|
|
73
72
|
var variant = _a.variant, className = _a.className, rest = __rest(_a, ["variant", "className"]);
|
|
@@ -76,4 +75,4 @@ var TableCell = function (_a) {
|
|
|
76
75
|
exports.Table.Row = StyledTableRow;
|
|
77
76
|
exports.Table.HeadCell = StyledTableHeadCell;
|
|
78
77
|
exports.Table.Cell = TableCell;
|
|
79
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
78
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -25,17 +25,15 @@ var TopBar_1 = require("../../components/TopBar/TopBar");
|
|
|
25
25
|
var Box_1 = require("../../components/Box/Box");
|
|
26
26
|
var Footer_1 = require("../../components/Footer/Footer");
|
|
27
27
|
var constants_1 = require("../constants");
|
|
28
|
-
var responsiveProps_1 = require("../../responsiveness/responsiveProps");
|
|
29
|
-
var Button_1 = require("../../form/Button/Button");
|
|
30
28
|
var SideBar_1 = require("../../components/Menu/SideBar");
|
|
31
29
|
var Wrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject([" \n background-color: #F3F3F4;\n"], [" \n background-color: #F3F3F4;\n"])));
|
|
32
|
-
var
|
|
30
|
+
var ContentBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
33
31
|
var BasicLayout = function (_a) {
|
|
34
32
|
var sideBarProps = _a.sideBarProps, topBarProps = _a.topBarProps, footerProps = _a.footerProps, isLoading = _a.isLoading, loader = _a.loader, children = _a.children;
|
|
35
33
|
return (react_1.default.createElement(Wrapper, { flexGrow: 1, display: "flex", flexDirection: "column" },
|
|
36
|
-
react_1.default.createElement(Box_1.Box, { flexGrow: 1, flexShrink: 0
|
|
34
|
+
react_1.default.createElement(Box_1.Box, { flexGrow: 1, flexShrink: 0 },
|
|
37
35
|
sideBarProps && (react_1.default.createElement(SideBar_1.SideBar, __assign({}, sideBarProps))),
|
|
38
|
-
react_1.default.createElement(
|
|
36
|
+
react_1.default.createElement(ContentBox, { display: "flex", flexDirection: "column" },
|
|
39
37
|
react_1.default.createElement(TopBar_1.TopBar, __assign({}, topBarProps)),
|
|
40
38
|
react_1.default.createElement(Box_1.Box, { p: { laptop: constants_1.VerticalRhythmLaptop, mobile: constants_1.VerticalRhythmMobile }, flexGrow: 1 }, isLoading && loader
|
|
41
39
|
? loader
|