quicksnack 1.23.0 → 1.24.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.
|
@@ -2,6 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { Button } from "../../form/Button/Button";
|
|
3
3
|
interface Props {
|
|
4
4
|
buttonProps: React.ComponentProps<typeof Button>;
|
|
5
|
+
align?: 'left' | 'right';
|
|
5
6
|
}
|
|
6
7
|
export declare const DropdownMenu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
|
|
7
8
|
export declare const DropdownMenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -33,21 +33,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
33
33
|
__setModuleDefault(result, mod);
|
|
34
34
|
return result;
|
|
35
35
|
};
|
|
36
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
-
};
|
|
39
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
37
|
exports.Dropdown = exports.DropdownMenuItem = exports.DropdownMenu = void 0;
|
|
41
38
|
var react_1 = __importStar(require("react"));
|
|
42
39
|
var Button_1 = require("../../form/Button/Button");
|
|
43
|
-
var styled_components_1 =
|
|
40
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
44
41
|
var SlideInFromTop_1 = require("../../animation/SlideInFromTop/SlideInFromTop");
|
|
45
42
|
var Wrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
46
|
-
var Dropper = styled_components_1.default.span(
|
|
47
|
-
exports.DropdownMenu = styled_components_1.default.ul(
|
|
48
|
-
exports.DropdownMenuItem = styled_components_1.default.li(
|
|
43
|
+
var Dropper = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 4px;\n border: 1px solid rgba(34,36,38,.15);\n position: absolute;\n box-shadow: 0 8px 8px 0 rgba(34,36,38,.15); \n \n ", " \n"], ["\n border-radius: 4px;\n border: 1px solid rgba(34,36,38,.15);\n position: absolute;\n box-shadow: 0 8px 8px 0 rgba(34,36,38,.15); \n \n ", " \n"])), function (props) { return props.align === 'right' ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["right: 0;"], ["right: 0;"]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["left: 0;"], ["left: 0;"]))); });
|
|
44
|
+
exports.DropdownMenu = styled_components_1.default.ul(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n list-style: none;\n margin: 0;\n padding: ", "; \n"], ["\n list-style: none;\n margin: 0;\n padding: ", "; \n"])), function (props) { return props.theme.spacing(2, 0); });
|
|
45
|
+
exports.DropdownMenuItem = styled_components_1.default.li(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n cursor: pointer;\n padding: ", ";\n &:hover {\n background-color: #ddd;\n }\n"], ["\n cursor: pointer;\n padding: ", ";\n &:hover {\n background-color: #ddd;\n }\n"])), function (props) { return props.theme.spacing(0, 3); });
|
|
49
46
|
var Dropdown = function (_a) {
|
|
50
|
-
var buttonProps = _a.buttonProps, children = _a.children;
|
|
47
|
+
var buttonProps = _a.buttonProps, align = _a.align, children = _a.children;
|
|
51
48
|
var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
|
|
52
49
|
var handleOpen = (0, react_1.useCallback)(function () { return setIsOpen(true); }, [setIsOpen]);
|
|
53
50
|
var handleClose = (0, react_1.useCallback)(function () { return setIsOpen(false); }, [setIsOpen]);
|
|
@@ -62,7 +59,7 @@ var Dropdown = function (_a) {
|
|
|
62
59
|
return (react_1.default.createElement(Wrapper, null,
|
|
63
60
|
react_1.default.createElement(Button_1.Button, __assign({}, buttonProps, { onClick: handleOpen })),
|
|
64
61
|
isOpen && (react_1.default.createElement(SlideInFromTop_1.SlideInFromTop, { speed: '.1s' },
|
|
65
|
-
react_1.default.createElement(Dropper,
|
|
62
|
+
react_1.default.createElement(Dropper, { align: align || 'left' }, children)))));
|
|
66
63
|
};
|
|
67
64
|
exports.Dropdown = Dropdown;
|
|
68
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
65
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|