1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | exports.__esModule = true;
|
6 | exports.useMenuItemStyle = exports.useMenuListStyle = void 0;
|
7 |
|
8 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9 |
|
10 | var _ThemeProvider = require("../ThemeProvider");
|
11 |
|
12 | var _ColorModeProvider = require("../ColorModeProvider");
|
13 |
|
14 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
15 |
|
16 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
17 |
|
18 | var useMenuListStyle = function useMenuListStyle() {
|
19 | var _useColorMode = (0, _ColorModeProvider.useColorMode)(),
|
20 | colorMode = _useColorMode.colorMode;
|
21 |
|
22 | var elevation = {
|
23 | light: {
|
24 | bg: "#fff",
|
25 | shadow: "sm"
|
26 | },
|
27 | dark: {
|
28 | bg: "gray.700",
|
29 | shadow: "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px"
|
30 | }
|
31 | };
|
32 | return _objectSpread({
|
33 | color: "inherit",
|
34 | borderWidth: "1px"
|
35 | }, elevation[colorMode]);
|
36 | };
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | exports.useMenuListStyle = useMenuListStyle;
|
45 | var baseProps = {
|
46 | width: "full",
|
47 | flex: " 0 0 auto",
|
48 | userSelect: "none",
|
49 | transition: "background-color 220ms, color 220ms"
|
50 | };
|
51 |
|
52 | var interactionProps = function interactionProps(_ref) {
|
53 | var colorMode = _ref.colorMode;
|
54 | var _focusColor = {
|
55 | light: "gray.100",
|
56 | dark: "whiteAlpha.100"
|
57 | };
|
58 | var _activeColor = {
|
59 | light: "gray.200",
|
60 | dark: "whiteAlpha.200"
|
61 | };
|
62 | return {
|
63 | _active: {
|
64 | bg: _activeColor[colorMode]
|
65 | },
|
66 | _focus: {
|
67 | bg: _focusColor[colorMode],
|
68 | outline: 0
|
69 | },
|
70 | _disabled: {
|
71 | opacity: 0.4,
|
72 | cursor: "not-allowed"
|
73 | }
|
74 | };
|
75 | };
|
76 |
|
77 | var useMenuItemStyle = function useMenuItemStyle() {
|
78 | var theme = (0, _ThemeProvider.useTheme)();
|
79 |
|
80 | var _useColorMode2 = (0, _ColorModeProvider.useColorMode)(),
|
81 | colorMode = _useColorMode2.colorMode;
|
82 |
|
83 | var props = {
|
84 | theme: theme,
|
85 | colorMode: colorMode
|
86 | };
|
87 | return _objectSpread({}, baseProps, {}, interactionProps(props));
|
88 | };
|
89 |
|
90 | exports.useMenuItemStyle = useMenuItemStyle; |
\ | No newline at end of file |