@semcore/button 4.2.1 → 4.2.3
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/CHANGELOG.md +8 -2
- package/lib/cjs/Button.js +54 -40
- package/lib/cjs/Button.js.map +1 -1
- package/lib/es6/Button.js +53 -36
- package/lib/es6/Button.js.map +1 -1
- package/package.json +2 -2
- package/src/Button.jsx +13 -9
package/CHANGELOG.md
CHANGED
|
@@ -2,11 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [4.2.
|
|
5
|
+
## [4.2.3] - 2022-10-26
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- Lazy checks for necessity of `aria-label` in non production environment.
|
|
10
|
+
|
|
11
|
+
## [4.2.2] - 2022-10-20
|
|
6
12
|
|
|
7
13
|
### Changed
|
|
8
14
|
|
|
9
|
-
- Version patch update due to children dependencies update (`@semcore/utils` [3.39.0 ~> 3.39.
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.39.0 ~> 3.39.1]).
|
|
10
16
|
|
|
11
17
|
## [4.2.0] - 2022-10-10
|
|
12
18
|
|
package/lib/cjs/Button.js
CHANGED
|
@@ -13,6 +13,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
|
|
|
13
13
|
|
|
14
14
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
15
15
|
|
|
16
|
+
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
17
|
+
|
|
16
18
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
17
19
|
|
|
18
20
|
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
@@ -35,12 +37,10 @@ var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addo
|
|
|
35
37
|
|
|
36
38
|
var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
|
|
37
39
|
|
|
38
|
-
var _reactToText = _interopRequireDefault(require("@semcore/utils/lib/reactToText"));
|
|
39
|
-
|
|
40
|
-
var _getOriginChildren = _interopRequireDefault(require("@semcore/utils/lib/getOriginChildren"));
|
|
41
|
-
|
|
42
40
|
var _SpinButton = _interopRequireDefault(require("./SpinButton"));
|
|
43
41
|
|
|
42
|
+
var _hasLabels = _interopRequireDefault(require("@semcore/utils/lib/hasLabels"));
|
|
43
|
+
|
|
44
44
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
45
45
|
|
|
46
46
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -58,36 +58,36 @@ var style = (
|
|
|
58
58
|
/*__reshadow_css_start__*/
|
|
59
59
|
_core.sstyled.insert(
|
|
60
60
|
/*__inner_css_start__*/
|
|
61
|
-
":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.
|
|
61
|
+
":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.___SButton_1dydh_gg_ {\n position: relative;\n display: inline-block;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin: 0;\n white-space: nowrap;\n font-family: Inter, sans-serif;\n line-height: normal;\n text-decoration: none;\n text-align: center;\n vertical-align: middle;\n border: 1px solid transparent;\n outline: 0;\n box-shadow: none;\n cursor: pointer;\n box-sizing: border-box;\n overflow: visible;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n font-weight: 500;\n color: #6c6e79\n}\n\n.___SButton_1dydh_gg_::-moz-focus-inner {\n padding: 0;\n border: none;\n }\n\n.___SButton_1dydh_gg_:active,\n .___SButton_1dydh_gg_:hover,\n .___SButton_1dydh_gg_:focus {\n outline: 0;\n text-decoration: none;\n }\n\n.___SButton_1dydh_gg_.__disabled_1dydh_gg_ {\n opacity: 0.3;\n cursor: default;\n pointer-events: none; /* Disable link interactions */\n}\n\n.___SButton_1dydh_gg_.__keyboardFocused_1dydh_gg_ {\n box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n z-index: 1;\n}\n\n.___SButton_1dydh_gg_._size_m_1dydh_gg_ {\n height: 28px;\n min-width: 28px;\n border-radius: 6px;\n font-size: 14px;\n}\n\n.___SButton_1dydh_gg_._size_l_1dydh_gg_ {\n height: 40px;\n min-width: 40px;\n border-radius: 6px;\n font-size: 16px;\n}\n\n.___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_ {\n color: #ffffff;\n background-color: #008ff8\n}\n\n.___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_:hover {\n background-color: #006dca;\n }\n\n.___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_.__active_1dydh_gg_ {\n background-color: #044792;\n }\n\n.___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_ {\n color: #ffffff;\n background-color: #009f81\n}\n\n.___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_:hover {\n background-color: #007c65;\n }\n\n.___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_.__active_1dydh_gg_ {\n background-color: #055345;\n }\n\n.___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_ {\n background-color: #ff642d;\n color: #ffffff\n}\n\n.___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_:hover {\n background-color: #c33909;\n }\n\n.___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_.__active_1dydh_gg_ {\n background-color: #8b1500;\n }\n\n.___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_ {\n background-color: #ff4953;\n color: #ffffff\n}\n\n.___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_:hover {\n background-color: #d1002f;\n }\n\n.___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_.__active_1dydh_gg_ {\n background-color: #8e0016;\n }\n\n.___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_ {\n background-color: #fff;\n color: #191b23\n}\n\n.___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_:hover {\n background-color: #f4f5f9;\n }\n\n.___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_.__active_1dydh_gg_ {\n background-color: #e0e1e9;\n }\n\n.___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_ {\n color: #6c6e79;\n border-color: #c4c7cf;\n background-color: rgba(138, 142, 155, 0.1)\n}\n\n.___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_:hover {\n background-color: rgba(138, 142, 155, 0.2);\n color: #191b23;\n }\n\n.___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_.__active_1dydh_gg_ {\n background-color: rgba(138, 142, 155, 0.3);\n color: #191b23;\n }\n\n.___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_ {\n background-color: rgba(0, 143, 248, 0.05);\n color: #008ff8;\n border-color: #008ff8\n}\n\n.___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_:hover {\n background-color: rgba(0, 109, 202, 0.2);\n }\n\n.___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_.__active_1dydh_gg_ {\n background-color: rgba(0, 109, 202, 0.3);\n }\n\n.___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_ {\n background-color: rgba(255, 255, 255, 0.05);\n color: #fff;\n border-color: #fff\n}\n\n.___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n.___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_.__active_1dydh_gg_ {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n.___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_ {\n color: #006dca;\n background-color: transparent\n}\n\n.___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_:hover {\n background-color: rgba(0, 143, 248, 0.2);\n }\n\n.___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_.__active_1dydh_gg_ {\n background-color: rgba(0, 143, 248, 0.3);\n }\n\n.___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_ {\n color: #6c6e79;\n background-color: transparent\n}\n\n.___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_:hover {\n background-color: rgba(138, 142, 155, 0.2);\n color: #191b23;\n }\n\n.___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_.__active_1dydh_gg_ {\n background-color: rgba(138, 142, 155, 0.3);\n color: #191b23;\n }\n\n.___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_ {\n color: #fff;\n background-color: transparent\n}\n\n.___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n.___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_.__active_1dydh_gg_ {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n.___SButton_1dydh_gg_._neighborLocation_right_1dydh_gg_ {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_ {\n border-radius: 0;\n margin-left: -1px\n}\n\n.___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-info_1dydh_gg_,\n .___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-success_1dydh_gg_,\n .___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-warning_1dydh_gg_,\n .___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-danger_1dydh_gg_ {\n border-left-color: rgba(255, 255, 255, 0.5);\n }\n\n.___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-invert_1dydh_gg_ {\n border-left-color: rgba(0, 0, 0, 0.5);\n }\n\n.___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_ {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px\n}\n\n.___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-info_1dydh_gg_,\n .___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-success_1dydh_gg_,\n .___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-warning_1dydh_gg_,\n .___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-danger_1dydh_gg_ {\n border-left-color: rgba(255, 255, 255, 0.5);\n }\n\n.___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-invert_1dydh_gg_ {\n border-left-color: rgba(0, 0, 0, 0.5);\n }\n\n.___SSpin_1dydh_gg_ {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.___SInner_1dydh_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n\n.___SInner_1dydh_gg_.__loading_1dydh_gg_ {\n visibility: hidden;\n}\n\n.___SText_1dydh_gg_ {\n display: inline-flex;\n}\n\n.___SText_1dydh_gg_._size_m_1dydh_gg_ {\n margin-left: 8px;\n margin-right: 8px;\n line-height: 1.42;\n}\n\n.___SText_1dydh_gg_._size_l_1dydh_gg_ {\n margin-left: 12px;\n margin-right: 12px;\n line-height: 1.5;\n}\n\n.___SAddon_1dydh_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.___SAddon_1dydh_gg_._size_m_1dydh_gg_:not(:only-child):first-child {\n margin-left: 8px;\n }\n\n.___SAddon_1dydh_gg_._size_m_1dydh_gg_:not(:only-child):last-child {\n margin-right: 8px;\n }\n\n.___SAddon_1dydh_gg_._size_m_1dydh_gg_:only-child {\n margin-left: -4px;\n margin-right: -4px;\n }\n\n.___SAddon_1dydh_gg_._size_l_1dydh_gg_:not(:only-child):first-child {\n margin-left: 8px;\n }\n\n.___SAddon_1dydh_gg_._size_l_1dydh_gg_:not(:only-child):last-child {\n margin-right: 8px;\n }\n\n.___SAddon_1dydh_gg_._size_l_1dydh_gg_:only-child {\n margin-left: -4px;\n margin-right: -4px;\n }\n"
|
|
62
62
|
/*__inner_css_end__*/
|
|
63
|
-
, "
|
|
63
|
+
, "1dydh_gg_")
|
|
64
64
|
/*__reshadow_css_end__*/
|
|
65
65
|
, {
|
|
66
|
-
"__SButton": "
|
|
67
|
-
"_disabled": "
|
|
68
|
-
"_keyboardFocused": "
|
|
69
|
-
"_size_m": "
|
|
70
|
-
"_size_l": "
|
|
71
|
-
"_theme_primary-info": "_theme_primary-
|
|
72
|
-
"_active": "
|
|
73
|
-
"_theme_primary-success": "_theme_primary-
|
|
74
|
-
"_theme_primary-warning": "_theme_primary-
|
|
75
|
-
"_theme_primary-danger": "_theme_primary-
|
|
76
|
-
"_theme_primary-invert": "_theme_primary-
|
|
77
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
78
|
-
"_theme_secondary-info": "_theme_secondary-
|
|
79
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
80
|
-
"_theme_tertiary-info": "_theme_tertiary-
|
|
81
|
-
"_theme_tertiary-muted": "_theme_tertiary-
|
|
82
|
-
"_theme_tertiary-invert": "_theme_tertiary-
|
|
83
|
-
"_neighborLocation_right": "
|
|
84
|
-
"_neighborLocation_both": "
|
|
85
|
-
"_neighborLocation_left": "
|
|
86
|
-
"__SSpin": "
|
|
87
|
-
"__SInner": "
|
|
88
|
-
"_loading": "
|
|
89
|
-
"__SText": "
|
|
90
|
-
"__SAddon": "
|
|
66
|
+
"__SButton": "___SButton_1dydh_gg_",
|
|
67
|
+
"_disabled": "__disabled_1dydh_gg_",
|
|
68
|
+
"_keyboardFocused": "__keyboardFocused_1dydh_gg_",
|
|
69
|
+
"_size_m": "_size_m_1dydh_gg_",
|
|
70
|
+
"_size_l": "_size_l_1dydh_gg_",
|
|
71
|
+
"_theme_primary-info": "_theme_primary-info_1dydh_gg_",
|
|
72
|
+
"_active": "__active_1dydh_gg_",
|
|
73
|
+
"_theme_primary-success": "_theme_primary-success_1dydh_gg_",
|
|
74
|
+
"_theme_primary-warning": "_theme_primary-warning_1dydh_gg_",
|
|
75
|
+
"_theme_primary-danger": "_theme_primary-danger_1dydh_gg_",
|
|
76
|
+
"_theme_primary-invert": "_theme_primary-invert_1dydh_gg_",
|
|
77
|
+
"_theme_secondary-muted": "_theme_secondary-muted_1dydh_gg_",
|
|
78
|
+
"_theme_secondary-info": "_theme_secondary-info_1dydh_gg_",
|
|
79
|
+
"_theme_secondary-invert": "_theme_secondary-invert_1dydh_gg_",
|
|
80
|
+
"_theme_tertiary-info": "_theme_tertiary-info_1dydh_gg_",
|
|
81
|
+
"_theme_tertiary-muted": "_theme_tertiary-muted_1dydh_gg_",
|
|
82
|
+
"_theme_tertiary-invert": "_theme_tertiary-invert_1dydh_gg_",
|
|
83
|
+
"_neighborLocation_right": "_neighborLocation_right_1dydh_gg_",
|
|
84
|
+
"_neighborLocation_both": "_neighborLocation_both_1dydh_gg_",
|
|
85
|
+
"_neighborLocation_left": "_neighborLocation_left_1dydh_gg_",
|
|
86
|
+
"__SSpin": "___SSpin_1dydh_gg_",
|
|
87
|
+
"__SInner": "___SInner_1dydh_gg_",
|
|
88
|
+
"_loading": "__loading_1dydh_gg_",
|
|
89
|
+
"__SText": "___SText_1dydh_gg_",
|
|
90
|
+
"__SAddon": "___SAddon_1dydh_gg_"
|
|
91
91
|
});
|
|
92
92
|
var MAP_USE_DEFAULT_THEME = {
|
|
93
93
|
primary: 'info',
|
|
@@ -102,8 +102,17 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
102
102
|
var _super = _createSuper(RootButton);
|
|
103
103
|
|
|
104
104
|
function RootButton() {
|
|
105
|
+
var _this;
|
|
106
|
+
|
|
105
107
|
(0, _classCallCheck2["default"])(this, RootButton);
|
|
106
|
-
|
|
108
|
+
|
|
109
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
110
|
+
args[_key] = arguments[_key];
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
114
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "containerRef", /*#__PURE__*/_react["default"].createRef());
|
|
115
|
+
return _this;
|
|
107
116
|
}
|
|
108
117
|
|
|
109
118
|
(0, _createClass2["default"])(RootButton, [{
|
|
@@ -122,10 +131,19 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
122
131
|
size: size
|
|
123
132
|
};
|
|
124
133
|
}
|
|
134
|
+
}, {
|
|
135
|
+
key: "componentDidMount",
|
|
136
|
+
value: function componentDidMount() {
|
|
137
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
138
|
+
_logger["default"].warn(!(0, _hasLabels["default"])(this.containerRef.current), "'aria-label' or 'aria-labelledby' are required props for buttons without text content", this.asProps['data-ui-name'] || Button.displayName);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
125
141
|
}, {
|
|
126
142
|
key: "render",
|
|
127
143
|
value: function render() {
|
|
128
|
-
var _ref = this.asProps
|
|
144
|
+
var _ref = this.asProps,
|
|
145
|
+
_this2 = this;
|
|
146
|
+
|
|
129
147
|
var SButton = _flexBox.Box;
|
|
130
148
|
var SInner = _flexBox.Box;
|
|
131
149
|
var SSpin = _flexBox.Box;
|
|
@@ -141,13 +159,8 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
141
159
|
size = _this$asProps.size,
|
|
142
160
|
neighborLocation = _this$asProps.neighborLocation,
|
|
143
161
|
addonLeft = _this$asProps.addonLeft,
|
|
144
|
-
addonRight = _this$asProps.addonRight
|
|
145
|
-
ariaLabel = _this$asProps['aria-label'];
|
|
162
|
+
addonRight = _this$asProps.addonRight;
|
|
146
163
|
var useTheme = use && theme ? "".concat(use, "-").concat(theme) : false;
|
|
147
|
-
var isTextInside = (0, _reactToText["default"])((0, _getOriginChildren["default"])(Children));
|
|
148
|
-
|
|
149
|
-
_logger["default"].warn(!isTextInside && !ariaLabel, 'aria-label is required', this.asProps['data-ui-name'] || Button.displayName);
|
|
150
|
-
|
|
151
164
|
return /*#__PURE__*/_react["default"].createElement(_neighborLocation["default"].Detect, {
|
|
152
165
|
neighborLocation: neighborLocation
|
|
153
166
|
}, function (neighborLocation) {
|
|
@@ -159,7 +172,8 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
159
172
|
"disabled": disabled,
|
|
160
173
|
"neighborLocation": neighborLocation,
|
|
161
174
|
"use:theme": useTheme,
|
|
162
|
-
"role": "button"
|
|
175
|
+
"role": "button",
|
|
176
|
+
"ref": _this2.containerRef
|
|
163
177
|
}, _ref))), /*#__PURE__*/_react["default"].createElement(SInner, _ref4.cn("SInner", {
|
|
164
178
|
"tag": "span",
|
|
165
179
|
"loading": loading
|
package/lib/cjs/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["MAP_USE_DEFAULT_THEME","primary","secondary","tertiary","RootButton","size","asProps","
|
|
1
|
+
{"version":3,"file":"Button.js","names":["MAP_USE_DEFAULT_THEME","primary","secondary","tertiary","RootButton","React","createRef","size","asProps","process","env","NODE_ENV","logger","warn","hasLabels","containerRef","current","Button","displayName","SButton","Box","SInner","SSpin","Children","styles","use","theme","loading","disabled","neighborLocation","addonLeft","addonRight","useTheme","sstyled","addonTextChildren","Text","Addon","Component","keyboardFocusEnhance","style","props","SText","SAddon","createComponent"],"sources":["../../src/Button.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport SpinButton from './SpinButton';\n\nimport style from './style/button.shadow.css';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\n\nexport const MAP_USE_DEFAULT_THEME = {\n primary: 'info',\n secondary: 'muted',\n tertiary: 'info',\n};\n\nclass RootButton extends Component {\n static displayName = 'Button';\n static enhance = [keyboardFocusEnhance()];\n static style = style;\n static defaultProps = {\n use: 'secondary',\n size: 'm',\n };\n containerRef = React.createRef();\n\n getTextProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getAddonProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n componentDidMount() {\n if (process.env.NODE_ENV !== 'production') {\n logger.warn(\n !hasLabels(this.containerRef.current),\n `'aria-label' or 'aria-labelledby' are required props for buttons without text content`,\n this.asProps['data-ui-name'] || Button.displayName,\n );\n }\n }\n\n render() {\n const SButton = Root;\n const SInner = Box;\n const SSpin = Box;\n const {\n Children,\n styles,\n use,\n theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],\n loading,\n disabled = loading,\n size,\n neighborLocation,\n addonLeft,\n addonRight,\n } = this.asProps;\n const useTheme = use && theme ? `${use}-${theme}` : false;\n\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SButton\n render={Box}\n type=\"button\"\n tag=\"button\"\n disabled={disabled}\n neighborLocation={neighborLocation}\n use:theme={useTheme}\n role=\"button\"\n ref={this.containerRef}\n >\n <SInner tag=\"span\" loading={loading}>\n {addonLeft ? <Button.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Button.Text, Button.Addon)}\n {addonRight ? <Button.Addon tag={addonRight} /> : null}\n </SInner>\n {loading && (\n <SSpin tag=\"span\">\n <SpinButton centered size={size} theme={useTheme} />\n </SSpin>\n )}\n </SButton>,\n )\n }\n </NeighborLocation.Detect>\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Button = createComponent(RootButton, {\n Text,\n Addon,\n});\n\nexport default Button;\n"],"mappings":"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"}
|
package/lib/es6/Button.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
2
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
3
4
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
4
5
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
6
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
@@ -24,8 +25,6 @@ import NeighborLocation from '@semcore/neighbor-location';
|
|
|
24
25
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
25
26
|
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
26
27
|
import logger from '@semcore/utils/lib/logger';
|
|
27
|
-
import reactToText from '@semcore/utils/lib/reactToText';
|
|
28
|
-
import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
|
|
29
28
|
import SpinButton from './SpinButton';
|
|
30
29
|
|
|
31
30
|
/*__reshadow-styles__:"./style/button.shadow.css"*/
|
|
@@ -33,37 +32,38 @@ var style = (
|
|
|
33
32
|
/*__reshadow_css_start__*/
|
|
34
33
|
_sstyled.insert(
|
|
35
34
|
/*__inner_css_start__*/
|
|
36
|
-
":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.
|
|
35
|
+
":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.___SButton_1dydh_gg_ {\n position: relative;\n display: inline-block;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin: 0;\n white-space: nowrap;\n font-family: Inter, sans-serif;\n line-height: normal;\n text-decoration: none;\n text-align: center;\n vertical-align: middle;\n border: 1px solid transparent;\n outline: 0;\n box-shadow: none;\n cursor: pointer;\n box-sizing: border-box;\n overflow: visible;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n font-weight: 500;\n color: #6c6e79\n}\n\n.___SButton_1dydh_gg_::-moz-focus-inner {\n padding: 0;\n border: none;\n }\n\n.___SButton_1dydh_gg_:active,\n .___SButton_1dydh_gg_:hover,\n .___SButton_1dydh_gg_:focus {\n outline: 0;\n text-decoration: none;\n }\n\n.___SButton_1dydh_gg_.__disabled_1dydh_gg_ {\n opacity: 0.3;\n cursor: default;\n pointer-events: none; /* Disable link interactions */\n}\n\n.___SButton_1dydh_gg_.__keyboardFocused_1dydh_gg_ {\n box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n z-index: 1;\n}\n\n.___SButton_1dydh_gg_._size_m_1dydh_gg_ {\n height: 28px;\n min-width: 28px;\n border-radius: 6px;\n font-size: 14px;\n}\n\n.___SButton_1dydh_gg_._size_l_1dydh_gg_ {\n height: 40px;\n min-width: 40px;\n border-radius: 6px;\n font-size: 16px;\n}\n\n.___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_ {\n color: #ffffff;\n background-color: #008ff8\n}\n\n.___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_:hover {\n background-color: #006dca;\n }\n\n.___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_.__active_1dydh_gg_ {\n background-color: #044792;\n }\n\n.___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_ {\n color: #ffffff;\n background-color: #009f81\n}\n\n.___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_:hover {\n background-color: #007c65;\n }\n\n.___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_.__active_1dydh_gg_ {\n background-color: #055345;\n }\n\n.___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_ {\n background-color: #ff642d;\n color: #ffffff\n}\n\n.___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_:hover {\n background-color: #c33909;\n }\n\n.___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_.__active_1dydh_gg_ {\n background-color: #8b1500;\n }\n\n.___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_ {\n background-color: #ff4953;\n color: #ffffff\n}\n\n.___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_:hover {\n background-color: #d1002f;\n }\n\n.___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_.__active_1dydh_gg_ {\n background-color: #8e0016;\n }\n\n.___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_ {\n background-color: #fff;\n color: #191b23\n}\n\n.___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_:hover {\n background-color: #f4f5f9;\n }\n\n.___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_.__active_1dydh_gg_ {\n background-color: #e0e1e9;\n }\n\n.___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_ {\n color: #6c6e79;\n border-color: #c4c7cf;\n background-color: rgba(138, 142, 155, 0.1)\n}\n\n.___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_:hover {\n background-color: rgba(138, 142, 155, 0.2);\n color: #191b23;\n }\n\n.___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_.__active_1dydh_gg_ {\n background-color: rgba(138, 142, 155, 0.3);\n color: #191b23;\n }\n\n.___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_ {\n background-color: rgba(0, 143, 248, 0.05);\n color: #008ff8;\n border-color: #008ff8\n}\n\n.___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_:hover {\n background-color: rgba(0, 109, 202, 0.2);\n }\n\n.___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_.__active_1dydh_gg_ {\n background-color: rgba(0, 109, 202, 0.3);\n }\n\n.___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_ {\n background-color: rgba(255, 255, 255, 0.05);\n color: #fff;\n border-color: #fff\n}\n\n.___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n.___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_.__active_1dydh_gg_ {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n.___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_ {\n color: #006dca;\n background-color: transparent\n}\n\n.___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_:hover {\n background-color: rgba(0, 143, 248, 0.2);\n }\n\n.___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_.__active_1dydh_gg_ {\n background-color: rgba(0, 143, 248, 0.3);\n }\n\n.___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_ {\n color: #6c6e79;\n background-color: transparent\n}\n\n.___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_:hover {\n background-color: rgba(138, 142, 155, 0.2);\n color: #191b23;\n }\n\n.___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_.__active_1dydh_gg_ {\n background-color: rgba(138, 142, 155, 0.3);\n color: #191b23;\n }\n\n.___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_ {\n color: #fff;\n background-color: transparent\n}\n\n.___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n.___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_:active,\n .___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_.__active_1dydh_gg_ {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n.___SButton_1dydh_gg_._neighborLocation_right_1dydh_gg_ {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_ {\n border-radius: 0;\n margin-left: -1px\n}\n\n.___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-info_1dydh_gg_,\n .___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-success_1dydh_gg_,\n .___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-warning_1dydh_gg_,\n .___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-danger_1dydh_gg_ {\n border-left-color: rgba(255, 255, 255, 0.5);\n }\n\n.___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-invert_1dydh_gg_ {\n border-left-color: rgba(0, 0, 0, 0.5);\n }\n\n.___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_ {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px\n}\n\n.___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-info_1dydh_gg_,\n .___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-success_1dydh_gg_,\n .___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-warning_1dydh_gg_,\n .___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-danger_1dydh_gg_ {\n border-left-color: rgba(255, 255, 255, 0.5);\n }\n\n.___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-invert_1dydh_gg_ {\n border-left-color: rgba(0, 0, 0, 0.5);\n }\n\n.___SSpin_1dydh_gg_ {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n}\n\n.___SInner_1dydh_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n\n.___SInner_1dydh_gg_.__loading_1dydh_gg_ {\n visibility: hidden;\n}\n\n.___SText_1dydh_gg_ {\n display: inline-flex;\n}\n\n.___SText_1dydh_gg_._size_m_1dydh_gg_ {\n margin-left: 8px;\n margin-right: 8px;\n line-height: 1.42;\n}\n\n.___SText_1dydh_gg_._size_l_1dydh_gg_ {\n margin-left: 12px;\n margin-right: 12px;\n line-height: 1.5;\n}\n\n.___SAddon_1dydh_gg_ {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.___SAddon_1dydh_gg_._size_m_1dydh_gg_:not(:only-child):first-child {\n margin-left: 8px;\n }\n\n.___SAddon_1dydh_gg_._size_m_1dydh_gg_:not(:only-child):last-child {\n margin-right: 8px;\n }\n\n.___SAddon_1dydh_gg_._size_m_1dydh_gg_:only-child {\n margin-left: -4px;\n margin-right: -4px;\n }\n\n.___SAddon_1dydh_gg_._size_l_1dydh_gg_:not(:only-child):first-child {\n margin-left: 8px;\n }\n\n.___SAddon_1dydh_gg_._size_l_1dydh_gg_:not(:only-child):last-child {\n margin-right: 8px;\n }\n\n.___SAddon_1dydh_gg_._size_l_1dydh_gg_:only-child {\n margin-left: -4px;\n margin-right: -4px;\n }\n"
|
|
37
36
|
/*__inner_css_end__*/
|
|
38
|
-
, "
|
|
37
|
+
, "1dydh_gg_")
|
|
39
38
|
/*__reshadow_css_end__*/
|
|
40
39
|
, {
|
|
41
|
-
"__SButton": "
|
|
42
|
-
"_disabled": "
|
|
43
|
-
"_keyboardFocused": "
|
|
44
|
-
"_size_m": "
|
|
45
|
-
"_size_l": "
|
|
46
|
-
"_theme_primary-info": "_theme_primary-
|
|
47
|
-
"_active": "
|
|
48
|
-
"_theme_primary-success": "_theme_primary-
|
|
49
|
-
"_theme_primary-warning": "_theme_primary-
|
|
50
|
-
"_theme_primary-danger": "_theme_primary-
|
|
51
|
-
"_theme_primary-invert": "_theme_primary-
|
|
52
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
53
|
-
"_theme_secondary-info": "_theme_secondary-
|
|
54
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
55
|
-
"_theme_tertiary-info": "_theme_tertiary-
|
|
56
|
-
"_theme_tertiary-muted": "_theme_tertiary-
|
|
57
|
-
"_theme_tertiary-invert": "_theme_tertiary-
|
|
58
|
-
"_neighborLocation_right": "
|
|
59
|
-
"_neighborLocation_both": "
|
|
60
|
-
"_neighborLocation_left": "
|
|
61
|
-
"__SSpin": "
|
|
62
|
-
"__SInner": "
|
|
63
|
-
"_loading": "
|
|
64
|
-
"__SText": "
|
|
65
|
-
"__SAddon": "
|
|
40
|
+
"__SButton": "___SButton_1dydh_gg_",
|
|
41
|
+
"_disabled": "__disabled_1dydh_gg_",
|
|
42
|
+
"_keyboardFocused": "__keyboardFocused_1dydh_gg_",
|
|
43
|
+
"_size_m": "_size_m_1dydh_gg_",
|
|
44
|
+
"_size_l": "_size_l_1dydh_gg_",
|
|
45
|
+
"_theme_primary-info": "_theme_primary-info_1dydh_gg_",
|
|
46
|
+
"_active": "__active_1dydh_gg_",
|
|
47
|
+
"_theme_primary-success": "_theme_primary-success_1dydh_gg_",
|
|
48
|
+
"_theme_primary-warning": "_theme_primary-warning_1dydh_gg_",
|
|
49
|
+
"_theme_primary-danger": "_theme_primary-danger_1dydh_gg_",
|
|
50
|
+
"_theme_primary-invert": "_theme_primary-invert_1dydh_gg_",
|
|
51
|
+
"_theme_secondary-muted": "_theme_secondary-muted_1dydh_gg_",
|
|
52
|
+
"_theme_secondary-info": "_theme_secondary-info_1dydh_gg_",
|
|
53
|
+
"_theme_secondary-invert": "_theme_secondary-invert_1dydh_gg_",
|
|
54
|
+
"_theme_tertiary-info": "_theme_tertiary-info_1dydh_gg_",
|
|
55
|
+
"_theme_tertiary-muted": "_theme_tertiary-muted_1dydh_gg_",
|
|
56
|
+
"_theme_tertiary-invert": "_theme_tertiary-invert_1dydh_gg_",
|
|
57
|
+
"_neighborLocation_right": "_neighborLocation_right_1dydh_gg_",
|
|
58
|
+
"_neighborLocation_both": "_neighborLocation_both_1dydh_gg_",
|
|
59
|
+
"_neighborLocation_left": "_neighborLocation_left_1dydh_gg_",
|
|
60
|
+
"__SSpin": "___SSpin_1dydh_gg_",
|
|
61
|
+
"__SInner": "___SInner_1dydh_gg_",
|
|
62
|
+
"_loading": "__loading_1dydh_gg_",
|
|
63
|
+
"__SText": "___SText_1dydh_gg_",
|
|
64
|
+
"__SAddon": "___SAddon_1dydh_gg_"
|
|
66
65
|
});
|
|
66
|
+
import hasLabels from '@semcore/utils/lib/hasLabels';
|
|
67
67
|
export var MAP_USE_DEFAULT_THEME = {
|
|
68
68
|
primary: 'info',
|
|
69
69
|
secondary: 'muted',
|
|
@@ -76,9 +76,19 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
76
76
|
var _super = _createSuper(RootButton);
|
|
77
77
|
|
|
78
78
|
function RootButton() {
|
|
79
|
+
var _this;
|
|
80
|
+
|
|
79
81
|
_classCallCheck(this, RootButton);
|
|
80
82
|
|
|
81
|
-
|
|
83
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
84
|
+
args[_key] = arguments[_key];
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
88
|
+
|
|
89
|
+
_defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/React.createRef());
|
|
90
|
+
|
|
91
|
+
return _this;
|
|
82
92
|
}
|
|
83
93
|
|
|
84
94
|
_createClass(RootButton, [{
|
|
@@ -97,10 +107,19 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
97
107
|
size: size
|
|
98
108
|
};
|
|
99
109
|
}
|
|
110
|
+
}, {
|
|
111
|
+
key: "componentDidMount",
|
|
112
|
+
value: function componentDidMount() {
|
|
113
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
114
|
+
logger.warn(!hasLabels(this.containerRef.current), "'aria-label' or 'aria-labelledby' are required props for buttons without text content", this.asProps['data-ui-name'] || Button.displayName);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
100
117
|
}, {
|
|
101
118
|
key: "render",
|
|
102
119
|
value: function render() {
|
|
103
|
-
var _ref = this.asProps
|
|
120
|
+
var _ref = this.asProps,
|
|
121
|
+
_this2 = this;
|
|
122
|
+
|
|
104
123
|
var SButton = Box;
|
|
105
124
|
var SInner = Box;
|
|
106
125
|
var SSpin = Box;
|
|
@@ -116,11 +135,8 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
116
135
|
size = _this$asProps.size,
|
|
117
136
|
neighborLocation = _this$asProps.neighborLocation,
|
|
118
137
|
addonLeft = _this$asProps.addonLeft,
|
|
119
|
-
addonRight = _this$asProps.addonRight
|
|
120
|
-
ariaLabel = _this$asProps['aria-label'];
|
|
138
|
+
addonRight = _this$asProps.addonRight;
|
|
121
139
|
var useTheme = use && theme ? "".concat(use, "-").concat(theme) : false;
|
|
122
|
-
var isTextInside = reactToText(getOriginChildren(Children));
|
|
123
|
-
logger.warn(!isTextInside && !ariaLabel, 'aria-label is required', this.asProps['data-ui-name'] || Button.displayName);
|
|
124
140
|
return /*#__PURE__*/React.createElement(NeighborLocation.Detect, {
|
|
125
141
|
neighborLocation: neighborLocation
|
|
126
142
|
}, function (neighborLocation) {
|
|
@@ -132,7 +148,8 @@ var RootButton = /*#__PURE__*/function (_Component) {
|
|
|
132
148
|
"disabled": disabled,
|
|
133
149
|
"neighborLocation": neighborLocation,
|
|
134
150
|
"use:theme": useTheme,
|
|
135
|
-
"role": "button"
|
|
151
|
+
"role": "button",
|
|
152
|
+
"ref": _this2.containerRef
|
|
136
153
|
}, _ref))), /*#__PURE__*/React.createElement(SInner, _ref4.cn("SInner", {
|
|
137
154
|
"tag": "span",
|
|
138
155
|
"loading": loading
|
package/lib/es6/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","keyboardFocusEnhance","addonTextChildren","logger","
|
|
1
|
+
{"version":3,"file":"Button.js","names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","keyboardFocusEnhance","addonTextChildren","logger","SpinButton","hasLabels","MAP_USE_DEFAULT_THEME","primary","secondary","tertiary","RootButton","createRef","size","asProps","process","env","NODE_ENV","warn","containerRef","current","Button","displayName","SButton","SInner","SSpin","Children","styles","use","theme","loading","disabled","neighborLocation","addonLeft","addonRight","useTheme","Text","Addon","style","props","SText","SAddon"],"sources":["../../src/Button.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport SpinButton from './SpinButton';\n\nimport style from './style/button.shadow.css';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\n\nexport const MAP_USE_DEFAULT_THEME = {\n primary: 'info',\n secondary: 'muted',\n tertiary: 'info',\n};\n\nclass RootButton extends Component {\n static displayName = 'Button';\n static enhance = [keyboardFocusEnhance()];\n static style = style;\n static defaultProps = {\n use: 'secondary',\n size: 'm',\n };\n containerRef = React.createRef();\n\n getTextProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getAddonProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n componentDidMount() {\n if (process.env.NODE_ENV !== 'production') {\n logger.warn(\n !hasLabels(this.containerRef.current),\n `'aria-label' or 'aria-labelledby' are required props for buttons without text content`,\n this.asProps['data-ui-name'] || Button.displayName,\n );\n }\n }\n\n render() {\n const SButton = Root;\n const SInner = Box;\n const SSpin = Box;\n const {\n Children,\n styles,\n use,\n theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],\n loading,\n disabled = loading,\n size,\n neighborLocation,\n addonLeft,\n addonRight,\n } = this.asProps;\n const useTheme = use && theme ? `${use}-${theme}` : false;\n\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SButton\n render={Box}\n type=\"button\"\n tag=\"button\"\n disabled={disabled}\n neighborLocation={neighborLocation}\n use:theme={useTheme}\n role=\"button\"\n ref={this.containerRef}\n >\n <SInner tag=\"span\" loading={loading}>\n {addonLeft ? <Button.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Button.Text, Button.Addon)}\n {addonRight ? <Button.Addon tag={addonRight} /> : null}\n </SInner>\n {loading && (\n <SSpin tag=\"span\">\n <SpinButton centered size={size} theme={useTheme} />\n </SSpin>\n )}\n </SButton>,\n )\n }\n </NeighborLocation.Detect>\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Button = createComponent(RootButton, {\n Text,\n Addon,\n});\n\nexport default Button;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/button",
|
|
3
3
|
"description": "Semrush Button Component",
|
|
4
|
-
"version": "4.2.
|
|
4
|
+
"version": "4.2.3",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@semcore/utils": "^3.
|
|
12
|
+
"@semcore/utils": "^3.40.0",
|
|
13
13
|
"@semcore/spin": "^4",
|
|
14
14
|
"@semcore/neighbor-location": "^3",
|
|
15
15
|
"@semcore/flex-box": "^4"
|
package/src/Button.jsx
CHANGED
|
@@ -5,11 +5,10 @@ import NeighborLocation from '@semcore/neighbor-location';
|
|
|
5
5
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
6
|
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
7
7
|
import logger from '@semcore/utils/lib/logger';
|
|
8
|
-
import reactToText from '@semcore/utils/lib/reactToText';
|
|
9
|
-
import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
|
|
10
8
|
import SpinButton from './SpinButton';
|
|
11
9
|
|
|
12
10
|
import style from './style/button.shadow.css';
|
|
11
|
+
import hasLabels from '@semcore/utils/lib/hasLabels';
|
|
13
12
|
|
|
14
13
|
export const MAP_USE_DEFAULT_THEME = {
|
|
15
14
|
primary: 'info',
|
|
@@ -25,6 +24,7 @@ class RootButton extends Component {
|
|
|
25
24
|
use: 'secondary',
|
|
26
25
|
size: 'm',
|
|
27
26
|
};
|
|
27
|
+
containerRef = React.createRef();
|
|
28
28
|
|
|
29
29
|
getTextProps() {
|
|
30
30
|
const { size } = this.asProps;
|
|
@@ -40,6 +40,16 @@ class RootButton extends Component {
|
|
|
40
40
|
};
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
+
componentDidMount() {
|
|
44
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
45
|
+
logger.warn(
|
|
46
|
+
!hasLabels(this.containerRef.current),
|
|
47
|
+
`'aria-label' or 'aria-labelledby' are required props for buttons without text content`,
|
|
48
|
+
this.asProps['data-ui-name'] || Button.displayName,
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
43
53
|
render() {
|
|
44
54
|
const SButton = Root;
|
|
45
55
|
const SInner = Box;
|
|
@@ -55,16 +65,9 @@ class RootButton extends Component {
|
|
|
55
65
|
neighborLocation,
|
|
56
66
|
addonLeft,
|
|
57
67
|
addonRight,
|
|
58
|
-
'aria-label': ariaLabel,
|
|
59
68
|
} = this.asProps;
|
|
60
69
|
const useTheme = use && theme ? `${use}-${theme}` : false;
|
|
61
|
-
const isTextInside = reactToText(getOriginChildren(Children));
|
|
62
70
|
|
|
63
|
-
logger.warn(
|
|
64
|
-
!isTextInside && !ariaLabel,
|
|
65
|
-
'aria-label is required',
|
|
66
|
-
this.asProps['data-ui-name'] || Button.displayName,
|
|
67
|
-
);
|
|
68
71
|
return (
|
|
69
72
|
<NeighborLocation.Detect neighborLocation={neighborLocation}>
|
|
70
73
|
{(neighborLocation) =>
|
|
@@ -77,6 +80,7 @@ class RootButton extends Component {
|
|
|
77
80
|
neighborLocation={neighborLocation}
|
|
78
81
|
use:theme={useTheme}
|
|
79
82
|
role="button"
|
|
83
|
+
ref={this.containerRef}
|
|
80
84
|
>
|
|
81
85
|
<SInner tag="span" loading={loading}>
|
|
82
86
|
{addonLeft ? <Button.Addon tag={addonLeft} /> : null}
|