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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9 |
|
10 | var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
11 |
|
12 | var _core = require("@emotion/core");
|
13 |
|
14 | var _Icon = _interopRequireDefault(require("../Icon"));
|
15 |
|
16 | var _PseudoBox = _interopRequireDefault(require("../PseudoBox"));
|
17 |
|
18 | var _ColorModeProvider = require("../ColorModeProvider");
|
19 |
|
20 |
|
21 | var baseProps = {
|
22 | display: "inline-flex",
|
23 | alignItems: "center",
|
24 | justifyContent: "center",
|
25 | rounded: "md",
|
26 | transition: "all 0.2s",
|
27 | flex: "0 0 auto",
|
28 | _hover: {
|
29 | bg: "blackAlpha.100"
|
30 | },
|
31 | _active: {
|
32 | bg: "blackAlpha.200"
|
33 | },
|
34 | _disabled: {
|
35 | cursor: "not-allowed"
|
36 | },
|
37 | _focus: {
|
38 | boxShadow: "outline"
|
39 | }
|
40 | };
|
41 | var sizes = {
|
42 | lg: {
|
43 | button: "40px",
|
44 | icon: "16px"
|
45 | },
|
46 | md: {
|
47 | button: "32px",
|
48 | icon: "12px"
|
49 | },
|
50 | sm: {
|
51 | button: "24px",
|
52 | icon: "10px"
|
53 | }
|
54 | };
|
55 |
|
56 | var CloseButton = function CloseButton(_ref) {
|
57 | var _ref$size = _ref.size,
|
58 | size = _ref$size === void 0 ? "md" : _ref$size,
|
59 | _ref$type = _ref.type,
|
60 | type = _ref$type === void 0 ? "button" : _ref$type,
|
61 | isDisabled = _ref.isDisabled,
|
62 | color = _ref.color,
|
63 | _ref$ariaLabel = _ref["aria-label"],
|
64 | ariaLabel = _ref$ariaLabel === void 0 ? "Close" : _ref$ariaLabel,
|
65 | rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["size", "type", "isDisabled", "color", "aria-label"]);
|
66 |
|
67 | var _useColorMode = (0, _ColorModeProvider.useColorMode)(),
|
68 | colorMode = _useColorMode.colorMode;
|
69 |
|
70 | var hoverColor = {
|
71 | light: "blackAlpha.100",
|
72 | dark: "whiteAlpha.100"
|
73 | };
|
74 | var activeColor = {
|
75 | light: "blackAlpha.200",
|
76 | dark: "whiteAlpha.200"
|
77 | };
|
78 | var buttonSize = sizes[size] && sizes[size]["button"];
|
79 | var iconSize = sizes[size] && sizes[size]["icon"];
|
80 | return (0, _core.jsx)(_PseudoBox["default"], (0, _extends2["default"])({
|
81 | as: "button",
|
82 | outline: "none",
|
83 | "aria-disabled": isDisabled,
|
84 | disabled: isDisabled,
|
85 | "aria-label": ariaLabel,
|
86 | size: buttonSize,
|
87 | _hover: {
|
88 | bg: hoverColor[colorMode]
|
89 | },
|
90 | _active: {
|
91 | bg: activeColor[colorMode]
|
92 | },
|
93 | type: type
|
94 | }, baseProps, rest), (0, _core.jsx)(_Icon["default"], {
|
95 | color: color,
|
96 | focusable: "false",
|
97 | name: "close",
|
98 | "aria-hidden": true,
|
99 | size: iconSize
|
100 | }));
|
101 | };
|
102 |
|
103 | var _default = CloseButton;
|
104 | exports["default"] = _default; |
\ | No newline at end of file |