1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | exports.__esModule = true;
|
6 | exports["default"] = void 0;
|
7 |
|
8 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9 |
|
10 | var _colorsUtils = require("../theme/colors-utils");
|
11 |
|
12 | var _ColorModeProvider = require("../ColorModeProvider");
|
13 |
|
14 | var _ThemeProvider = require("../ThemeProvider");
|
15 |
|
16 | 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; }
|
17 |
|
18 | 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; }
|
19 |
|
20 | var grayGhostStyle = {
|
21 | light: {
|
22 | color: "inherit",
|
23 | _hover: {
|
24 | bg: "gray.100"
|
25 | },
|
26 | _active: {
|
27 | bg: "gray.200"
|
28 | }
|
29 | },
|
30 | dark: {
|
31 | color: "whiteAlpha.900",
|
32 | _hover: {
|
33 | bg: "whiteAlpha.200"
|
34 | },
|
35 | _active: {
|
36 | bg: "whiteAlpha.300"
|
37 | }
|
38 | }
|
39 | };
|
40 |
|
41 | var ghostVariantProps = function ghostVariantProps(_ref) {
|
42 | var color = _ref.color,
|
43 | colorMode = _ref.colorMode,
|
44 | theme = _ref.theme;
|
45 |
|
46 | var _color = theme.colors[color] && theme.colors[color][200];
|
47 |
|
48 | var result;
|
49 |
|
50 | if (color === "gray") {
|
51 | result = grayGhostStyle;
|
52 | } else {
|
53 | result = {
|
54 | light: {
|
55 | color: color + ".500",
|
56 | bg: "transparent",
|
57 | _hover: {
|
58 | bg: color + ".50"
|
59 | },
|
60 | _active: {
|
61 | bg: color + ".100"
|
62 | }
|
63 | },
|
64 | dark: {
|
65 | color: color + ".200",
|
66 | bg: "transparent",
|
67 | _hover: {
|
68 | bg: (0, _colorsUtils.addOpacity)(_color, 0.12)
|
69 | },
|
70 | _active: {
|
71 | bg: (0, _colorsUtils.addOpacity)(_color, 0.24)
|
72 | }
|
73 | }
|
74 | };
|
75 | }
|
76 |
|
77 | return result[colorMode];
|
78 | };
|
79 |
|
80 |
|
81 | var outlineVariantProps = function outlineVariantProps(props) {
|
82 | var color = props.color,
|
83 | colorMode = props.colorMode;
|
84 | var borderColor = {
|
85 | light: "gray.200",
|
86 | dark: "whiteAlpha.300"
|
87 | };
|
88 | return _objectSpread({
|
89 | border: "1px",
|
90 | borderColor: color === "gray" ? borderColor[colorMode] : "current"
|
91 | }, ghostVariantProps(props));
|
92 | };
|
93 |
|
94 |
|
95 | var graySolidStyle = {
|
96 | light: {
|
97 | bg: "gray.100",
|
98 | _hover: {
|
99 | bg: "gray.200"
|
100 | },
|
101 | _active: {
|
102 | bg: "gray.300"
|
103 | }
|
104 | },
|
105 | dark: {
|
106 | bg: "whiteAlpha.200",
|
107 | _hover: {
|
108 | bg: "whiteAlpha.300"
|
109 | },
|
110 | _active: {
|
111 | bg: "whiteAlpha.400"
|
112 | }
|
113 | }
|
114 | };
|
115 |
|
116 | var solidVariantProps = function solidVariantProps(_ref2) {
|
117 | var color = _ref2.color,
|
118 | colorMode = _ref2.colorMode;
|
119 | var style = {
|
120 | light: {
|
121 | bg: color + ".500",
|
122 | color: "white",
|
123 | _hover: {
|
124 | bg: color + ".600"
|
125 | },
|
126 | _active: {
|
127 | bg: color + ".700"
|
128 | }
|
129 | },
|
130 | dark: {
|
131 | bg: color + ".200",
|
132 | color: "gray.800",
|
133 | _hover: {
|
134 | bg: color + ".300"
|
135 | },
|
136 | _active: {
|
137 | bg: color + ".400"
|
138 | }
|
139 | }
|
140 | };
|
141 |
|
142 | if (color === "gray") {
|
143 | style = graySolidStyle;
|
144 | }
|
145 |
|
146 | return style[colorMode];
|
147 | };
|
148 |
|
149 |
|
150 | var linkVariantProps = function linkVariantProps(_ref3) {
|
151 | var color = _ref3.color,
|
152 | colorMode = _ref3.colorMode;
|
153 | var _color = {
|
154 | light: color + ".500",
|
155 | dark: color + ".200"
|
156 | };
|
157 | var _activeColor = {
|
158 | light: color + ".700",
|
159 | dark: color + ".500"
|
160 | };
|
161 | return {
|
162 | p: 0,
|
163 | height: "auto",
|
164 | lineHeight: "normal",
|
165 | color: _color[colorMode],
|
166 | _hover: {
|
167 | textDecoration: "underline"
|
168 | },
|
169 | _active: {
|
170 | color: _activeColor[colorMode]
|
171 | }
|
172 | };
|
173 | };
|
174 |
|
175 |
|
176 | var disabledProps = {
|
177 | _disabled: {
|
178 | opacity: "40%",
|
179 | cursor: "not-allowed",
|
180 | boxShadow: "none"
|
181 | }
|
182 | };
|
183 |
|
184 | var sizes = {
|
185 | lg: {
|
186 | height: 12,
|
187 | minWidth: 12,
|
188 | fontSize: "lg",
|
189 | px: 6
|
190 | },
|
191 | md: {
|
192 | height: 10,
|
193 | minWidth: 10,
|
194 | fontSize: "md",
|
195 | px: 4
|
196 | },
|
197 | sm: {
|
198 | height: 8,
|
199 | minWidth: 8,
|
200 | fontSize: "sm",
|
201 | px: 3
|
202 | },
|
203 | xs: {
|
204 | height: 6,
|
205 | minWidth: 6,
|
206 | fontSize: "xs",
|
207 | px: 2
|
208 | }
|
209 | };
|
210 |
|
211 | var sizeProps = function sizeProps(_ref4) {
|
212 | var size = _ref4.size;
|
213 | return sizes[size];
|
214 | };
|
215 |
|
216 |
|
217 | var focusProps = {
|
218 | _focus: {
|
219 | boxShadow: "outline"
|
220 | }
|
221 | };
|
222 |
|
223 | var unstyledStyle = {
|
224 | userSelect: "inherit",
|
225 | bg: "none",
|
226 | border: 0,
|
227 | color: "inherit",
|
228 | display: "inline",
|
229 | font: "inherit",
|
230 | lineHeight: "inherit",
|
231 | m: 0,
|
232 | p: 0,
|
233 | textAlign: "inherit"
|
234 | };
|
235 |
|
236 | var variantProps = function variantProps(props) {
|
237 | switch (props.variant) {
|
238 | case "solid":
|
239 | return solidVariantProps(props);
|
240 |
|
241 | case "ghost":
|
242 | return ghostVariantProps(props);
|
243 |
|
244 | case "link":
|
245 | return linkVariantProps(props);
|
246 |
|
247 | case "outline":
|
248 | return outlineVariantProps(props);
|
249 |
|
250 | case "unstyled":
|
251 | return unstyledStyle;
|
252 |
|
253 | default:
|
254 | return {};
|
255 | }
|
256 | };
|
257 |
|
258 |
|
259 | var baseProps = {
|
260 | display: "inline-flex",
|
261 | appearance: "none",
|
262 | alignItems: "center",
|
263 | justifyContent: "center",
|
264 | transition: "all 250ms",
|
265 | userSelect: "none",
|
266 | position: "relative",
|
267 | whiteSpace: "nowrap",
|
268 | verticalAlign: "middle",
|
269 | lineHeight: "1.2",
|
270 | outline: "none"
|
271 | };
|
272 |
|
273 | var useButtonStyle = function useButtonStyle(props) {
|
274 | var _useColorMode = (0, _ColorModeProvider.useColorMode)(),
|
275 | colorMode = _useColorMode.colorMode;
|
276 |
|
277 | var theme = (0, _ThemeProvider.useTheme)();
|
278 |
|
279 | var _props = _objectSpread({}, props, {
|
280 | colorMode: colorMode,
|
281 | theme: theme
|
282 | });
|
283 |
|
284 | return _objectSpread({}, baseProps, {}, sizeProps(_props), {}, focusProps, {}, disabledProps, {}, variantProps(_props));
|
285 | };
|
286 |
|
287 | var _default = useButtonStyle;
|
288 | exports["default"] = _default; |
\ | No newline at end of file |