@semcore/button 4.2.2 → 4.2.4
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 +12 -0
- 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,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.2.4] - 2022-11-30
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.40.0 ~> 3.41.0]).
|
|
10
|
+
|
|
11
|
+
## [4.2.3] - 2022-10-26
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Lazy checks for necessity of `aria-label` in non production environment.
|
|
16
|
+
|
|
5
17
|
## [4.2.2] - 2022-10-20
|
|
6
18
|
|
|
7
19
|
### Changed
|
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
|
-
"
|
|
61
|
+
".___SButton_4jd6d_gg_{position:relative;display:inline-block;align-items:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:Inter,sans-serif;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-weight:500;color:#6c6e79}.___SButton_4jd6d_gg_::-moz-focus-inner{padding:0;border:none}.___SButton_4jd6d_gg_:active,.___SButton_4jd6d_gg_:focus,.___SButton_4jd6d_gg_:hover{outline:0;text-decoration:none}.___SButton_4jd6d_gg_.__disabled_4jd6d_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SButton_4jd6d_gg_.__keyboardFocused_4jd6d_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2);z-index:1}.___SButton_4jd6d_gg_._size_m_4jd6d_gg_{height:28px;min-width:28px;border-radius:6px;font-size:14px}.___SButton_4jd6d_gg_._size_l_4jd6d_gg_{height:40px;min-width:40px;border-radius:6px;font-size:16px}.___SButton_4jd6d_gg_._theme_primary-info_4jd6d_gg_{color:#ffffff;background-color:#008ff8}.___SButton_4jd6d_gg_._theme_primary-info_4jd6d_gg_:hover{background-color:#006dca}.___SButton_4jd6d_gg_._theme_primary-info_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_primary-info_4jd6d_gg_.__active_4jd6d_gg_{background-color:#044792}.___SButton_4jd6d_gg_._theme_primary-success_4jd6d_gg_{color:#ffffff;background-color:#009f81}.___SButton_4jd6d_gg_._theme_primary-success_4jd6d_gg_:hover{background-color:#007c65}.___SButton_4jd6d_gg_._theme_primary-success_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_primary-success_4jd6d_gg_.__active_4jd6d_gg_{background-color:#055345}.___SButton_4jd6d_gg_._theme_primary-warning_4jd6d_gg_{background-color:#ff642d;color:#ffffff}.___SButton_4jd6d_gg_._theme_primary-warning_4jd6d_gg_:hover{background-color:#c33909}.___SButton_4jd6d_gg_._theme_primary-warning_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_primary-warning_4jd6d_gg_.__active_4jd6d_gg_{background-color:#8b1500}.___SButton_4jd6d_gg_._theme_primary-danger_4jd6d_gg_{background-color:#ff4953;color:#ffffff}.___SButton_4jd6d_gg_._theme_primary-danger_4jd6d_gg_:hover{background-color:#d1002f}.___SButton_4jd6d_gg_._theme_primary-danger_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_primary-danger_4jd6d_gg_.__active_4jd6d_gg_{background-color:#8e0016}.___SButton_4jd6d_gg_._theme_primary-invert_4jd6d_gg_{background-color:#fff;color:#191b23}.___SButton_4jd6d_gg_._theme_primary-invert_4jd6d_gg_:hover{background-color:#f4f5f9}.___SButton_4jd6d_gg_._theme_primary-invert_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_primary-invert_4jd6d_gg_.__active_4jd6d_gg_{background-color:#e0e1e9}.___SButton_4jd6d_gg_._theme_secondary-muted_4jd6d_gg_{color:#6c6e79;border-color:#c4c7cf;background-color:rgba(138,142,155,.1)}.___SButton_4jd6d_gg_._theme_secondary-muted_4jd6d_gg_:hover{background-color:rgba(138,142,155,.2);color:#191b23}.___SButton_4jd6d_gg_._theme_secondary-muted_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_secondary-muted_4jd6d_gg_.__active_4jd6d_gg_{background-color:rgba(138,142,155,.3);color:#191b23}.___SButton_4jd6d_gg_._theme_secondary-info_4jd6d_gg_{background-color:rgba(0,143,248,.05);color:#008ff8;border-color:#008ff8}.___SButton_4jd6d_gg_._theme_secondary-info_4jd6d_gg_:hover{background-color:rgba(0,109,202,.2)}.___SButton_4jd6d_gg_._theme_secondary-info_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_secondary-info_4jd6d_gg_.__active_4jd6d_gg_{background-color:rgba(0,109,202,.3)}.___SButton_4jd6d_gg_._theme_secondary-invert_4jd6d_gg_{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}.___SButton_4jd6d_gg_._theme_secondary-invert_4jd6d_gg_:hover{background-color:hsla(0,0%,100%,.1)}.___SButton_4jd6d_gg_._theme_secondary-invert_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_secondary-invert_4jd6d_gg_.__active_4jd6d_gg_{background-color:hsla(0,0%,100%,.3)}.___SButton_4jd6d_gg_._theme_tertiary-info_4jd6d_gg_{color:#006dca;background-color:transparent}.___SButton_4jd6d_gg_._theme_tertiary-info_4jd6d_gg_:hover{background-color:rgba(0,143,248,.2)}.___SButton_4jd6d_gg_._theme_tertiary-info_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_tertiary-info_4jd6d_gg_.__active_4jd6d_gg_{background-color:rgba(0,143,248,.3)}.___SButton_4jd6d_gg_._theme_tertiary-muted_4jd6d_gg_{color:#6c6e79;background-color:transparent}.___SButton_4jd6d_gg_._theme_tertiary-muted_4jd6d_gg_:hover{background-color:rgba(138,142,155,.2);color:#191b23}.___SButton_4jd6d_gg_._theme_tertiary-muted_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_tertiary-muted_4jd6d_gg_.__active_4jd6d_gg_{background-color:rgba(138,142,155,.3);color:#191b23}.___SButton_4jd6d_gg_._theme_tertiary-invert_4jd6d_gg_{color:#fff;background-color:transparent}.___SButton_4jd6d_gg_._theme_tertiary-invert_4jd6d_gg_:hover{background-color:hsla(0,0%,100%,.1)}.___SButton_4jd6d_gg_._theme_tertiary-invert_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_tertiary-invert_4jd6d_gg_.__active_4jd6d_gg_{background-color:hsla(0,0%,100%,.3)}.___SButton_4jd6d_gg_._neighborLocation_right_4jd6d_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SButton_4jd6d_gg_._neighborLocation_both_4jd6d_gg_{border-radius:0;margin-left:-1px}.___SButton_4jd6d_gg_._neighborLocation_both_4jd6d_gg_._theme_primary-danger_4jd6d_gg_,.___SButton_4jd6d_gg_._neighborLocation_both_4jd6d_gg_._theme_primary-info_4jd6d_gg_,.___SButton_4jd6d_gg_._neighborLocation_both_4jd6d_gg_._theme_primary-success_4jd6d_gg_,.___SButton_4jd6d_gg_._neighborLocation_both_4jd6d_gg_._theme_primary-warning_4jd6d_gg_{border-left-color:hsla(0,0%,100%,.5)}.___SButton_4jd6d_gg_._neighborLocation_both_4jd6d_gg_._theme_primary-invert_4jd6d_gg_{border-left-color:rgba(0,0,0,.5)}.___SButton_4jd6d_gg_._neighborLocation_left_4jd6d_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SButton_4jd6d_gg_._neighborLocation_left_4jd6d_gg_._theme_primary-danger_4jd6d_gg_,.___SButton_4jd6d_gg_._neighborLocation_left_4jd6d_gg_._theme_primary-info_4jd6d_gg_,.___SButton_4jd6d_gg_._neighborLocation_left_4jd6d_gg_._theme_primary-success_4jd6d_gg_,.___SButton_4jd6d_gg_._neighborLocation_left_4jd6d_gg_._theme_primary-warning_4jd6d_gg_{border-left-color:hsla(0,0%,100%,.5)}.___SButton_4jd6d_gg_._neighborLocation_left_4jd6d_gg_._theme_primary-invert_4jd6d_gg_{border-left-color:rgba(0,0,0,.5)}.___SSpin_4jd6d_gg_{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}.___SInner_4jd6d_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SInner_4jd6d_gg_.__loading_4jd6d_gg_{visibility:hidden}.___SText_4jd6d_gg_{display:inline-flex}.___SText_4jd6d_gg_._size_m_4jd6d_gg_{margin-left:8px;margin-right:8px;line-height:1.42}.___SText_4jd6d_gg_._size_l_4jd6d_gg_{margin-left:12px;margin-right:12px;line-height:1.5}.___SAddon_4jd6d_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_4jd6d_gg_._size_m_4jd6d_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_4jd6d_gg_._size_m_4jd6d_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_4jd6d_gg_._size_m_4jd6d_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SAddon_4jd6d_gg_._size_l_4jd6d_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_4jd6d_gg_._size_l_4jd6d_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_4jd6d_gg_._size_l_4jd6d_gg_:only-child{margin-left:-4px;margin-right:-4px}"
|
|
62
62
|
/*__inner_css_end__*/
|
|
63
|
-
, "
|
|
63
|
+
, "4jd6d_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_4jd6d_gg_",
|
|
67
|
+
"_disabled": "__disabled_4jd6d_gg_",
|
|
68
|
+
"_keyboardFocused": "__keyboardFocused_4jd6d_gg_",
|
|
69
|
+
"_size_m": "_size_m_4jd6d_gg_",
|
|
70
|
+
"_size_l": "_size_l_4jd6d_gg_",
|
|
71
|
+
"_theme_primary-info": "_theme_primary-info_4jd6d_gg_",
|
|
72
|
+
"_active": "__active_4jd6d_gg_",
|
|
73
|
+
"_theme_primary-success": "_theme_primary-success_4jd6d_gg_",
|
|
74
|
+
"_theme_primary-warning": "_theme_primary-warning_4jd6d_gg_",
|
|
75
|
+
"_theme_primary-danger": "_theme_primary-danger_4jd6d_gg_",
|
|
76
|
+
"_theme_primary-invert": "_theme_primary-invert_4jd6d_gg_",
|
|
77
|
+
"_theme_secondary-muted": "_theme_secondary-muted_4jd6d_gg_",
|
|
78
|
+
"_theme_secondary-info": "_theme_secondary-info_4jd6d_gg_",
|
|
79
|
+
"_theme_secondary-invert": "_theme_secondary-invert_4jd6d_gg_",
|
|
80
|
+
"_theme_tertiary-info": "_theme_tertiary-info_4jd6d_gg_",
|
|
81
|
+
"_theme_tertiary-muted": "_theme_tertiary-muted_4jd6d_gg_",
|
|
82
|
+
"_theme_tertiary-invert": "_theme_tertiary-invert_4jd6d_gg_",
|
|
83
|
+
"_neighborLocation_right": "_neighborLocation_right_4jd6d_gg_",
|
|
84
|
+
"_neighborLocation_both": "_neighborLocation_both_4jd6d_gg_",
|
|
85
|
+
"_neighborLocation_left": "_neighborLocation_left_4jd6d_gg_",
|
|
86
|
+
"__SSpin": "___SSpin_4jd6d_gg_",
|
|
87
|
+
"__SInner": "___SInner_4jd6d_gg_",
|
|
88
|
+
"_loading": "__loading_4jd6d_gg_",
|
|
89
|
+
"__SText": "___SText_4jd6d_gg_",
|
|
90
|
+
"__SAddon": "___SAddon_4jd6d_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
|
-
"
|
|
35
|
+
".___SButton_4jd6d_gg_{position:relative;display:inline-block;align-items:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:Inter,sans-serif;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-weight:500;color:#6c6e79}.___SButton_4jd6d_gg_::-moz-focus-inner{padding:0;border:none}.___SButton_4jd6d_gg_:active,.___SButton_4jd6d_gg_:focus,.___SButton_4jd6d_gg_:hover{outline:0;text-decoration:none}.___SButton_4jd6d_gg_.__disabled_4jd6d_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SButton_4jd6d_gg_.__keyboardFocused_4jd6d_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2);z-index:1}.___SButton_4jd6d_gg_._size_m_4jd6d_gg_{height:28px;min-width:28px;border-radius:6px;font-size:14px}.___SButton_4jd6d_gg_._size_l_4jd6d_gg_{height:40px;min-width:40px;border-radius:6px;font-size:16px}.___SButton_4jd6d_gg_._theme_primary-info_4jd6d_gg_{color:#ffffff;background-color:#008ff8}.___SButton_4jd6d_gg_._theme_primary-info_4jd6d_gg_:hover{background-color:#006dca}.___SButton_4jd6d_gg_._theme_primary-info_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_primary-info_4jd6d_gg_.__active_4jd6d_gg_{background-color:#044792}.___SButton_4jd6d_gg_._theme_primary-success_4jd6d_gg_{color:#ffffff;background-color:#009f81}.___SButton_4jd6d_gg_._theme_primary-success_4jd6d_gg_:hover{background-color:#007c65}.___SButton_4jd6d_gg_._theme_primary-success_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_primary-success_4jd6d_gg_.__active_4jd6d_gg_{background-color:#055345}.___SButton_4jd6d_gg_._theme_primary-warning_4jd6d_gg_{background-color:#ff642d;color:#ffffff}.___SButton_4jd6d_gg_._theme_primary-warning_4jd6d_gg_:hover{background-color:#c33909}.___SButton_4jd6d_gg_._theme_primary-warning_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_primary-warning_4jd6d_gg_.__active_4jd6d_gg_{background-color:#8b1500}.___SButton_4jd6d_gg_._theme_primary-danger_4jd6d_gg_{background-color:#ff4953;color:#ffffff}.___SButton_4jd6d_gg_._theme_primary-danger_4jd6d_gg_:hover{background-color:#d1002f}.___SButton_4jd6d_gg_._theme_primary-danger_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_primary-danger_4jd6d_gg_.__active_4jd6d_gg_{background-color:#8e0016}.___SButton_4jd6d_gg_._theme_primary-invert_4jd6d_gg_{background-color:#fff;color:#191b23}.___SButton_4jd6d_gg_._theme_primary-invert_4jd6d_gg_:hover{background-color:#f4f5f9}.___SButton_4jd6d_gg_._theme_primary-invert_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_primary-invert_4jd6d_gg_.__active_4jd6d_gg_{background-color:#e0e1e9}.___SButton_4jd6d_gg_._theme_secondary-muted_4jd6d_gg_{color:#6c6e79;border-color:#c4c7cf;background-color:rgba(138,142,155,.1)}.___SButton_4jd6d_gg_._theme_secondary-muted_4jd6d_gg_:hover{background-color:rgba(138,142,155,.2);color:#191b23}.___SButton_4jd6d_gg_._theme_secondary-muted_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_secondary-muted_4jd6d_gg_.__active_4jd6d_gg_{background-color:rgba(138,142,155,.3);color:#191b23}.___SButton_4jd6d_gg_._theme_secondary-info_4jd6d_gg_{background-color:rgba(0,143,248,.05);color:#008ff8;border-color:#008ff8}.___SButton_4jd6d_gg_._theme_secondary-info_4jd6d_gg_:hover{background-color:rgba(0,109,202,.2)}.___SButton_4jd6d_gg_._theme_secondary-info_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_secondary-info_4jd6d_gg_.__active_4jd6d_gg_{background-color:rgba(0,109,202,.3)}.___SButton_4jd6d_gg_._theme_secondary-invert_4jd6d_gg_{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}.___SButton_4jd6d_gg_._theme_secondary-invert_4jd6d_gg_:hover{background-color:hsla(0,0%,100%,.1)}.___SButton_4jd6d_gg_._theme_secondary-invert_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_secondary-invert_4jd6d_gg_.__active_4jd6d_gg_{background-color:hsla(0,0%,100%,.3)}.___SButton_4jd6d_gg_._theme_tertiary-info_4jd6d_gg_{color:#006dca;background-color:transparent}.___SButton_4jd6d_gg_._theme_tertiary-info_4jd6d_gg_:hover{background-color:rgba(0,143,248,.2)}.___SButton_4jd6d_gg_._theme_tertiary-info_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_tertiary-info_4jd6d_gg_.__active_4jd6d_gg_{background-color:rgba(0,143,248,.3)}.___SButton_4jd6d_gg_._theme_tertiary-muted_4jd6d_gg_{color:#6c6e79;background-color:transparent}.___SButton_4jd6d_gg_._theme_tertiary-muted_4jd6d_gg_:hover{background-color:rgba(138,142,155,.2);color:#191b23}.___SButton_4jd6d_gg_._theme_tertiary-muted_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_tertiary-muted_4jd6d_gg_.__active_4jd6d_gg_{background-color:rgba(138,142,155,.3);color:#191b23}.___SButton_4jd6d_gg_._theme_tertiary-invert_4jd6d_gg_{color:#fff;background-color:transparent}.___SButton_4jd6d_gg_._theme_tertiary-invert_4jd6d_gg_:hover{background-color:hsla(0,0%,100%,.1)}.___SButton_4jd6d_gg_._theme_tertiary-invert_4jd6d_gg_:active,.___SButton_4jd6d_gg_._theme_tertiary-invert_4jd6d_gg_.__active_4jd6d_gg_{background-color:hsla(0,0%,100%,.3)}.___SButton_4jd6d_gg_._neighborLocation_right_4jd6d_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SButton_4jd6d_gg_._neighborLocation_both_4jd6d_gg_{border-radius:0;margin-left:-1px}.___SButton_4jd6d_gg_._neighborLocation_both_4jd6d_gg_._theme_primary-danger_4jd6d_gg_,.___SButton_4jd6d_gg_._neighborLocation_both_4jd6d_gg_._theme_primary-info_4jd6d_gg_,.___SButton_4jd6d_gg_._neighborLocation_both_4jd6d_gg_._theme_primary-success_4jd6d_gg_,.___SButton_4jd6d_gg_._neighborLocation_both_4jd6d_gg_._theme_primary-warning_4jd6d_gg_{border-left-color:hsla(0,0%,100%,.5)}.___SButton_4jd6d_gg_._neighborLocation_both_4jd6d_gg_._theme_primary-invert_4jd6d_gg_{border-left-color:rgba(0,0,0,.5)}.___SButton_4jd6d_gg_._neighborLocation_left_4jd6d_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SButton_4jd6d_gg_._neighborLocation_left_4jd6d_gg_._theme_primary-danger_4jd6d_gg_,.___SButton_4jd6d_gg_._neighborLocation_left_4jd6d_gg_._theme_primary-info_4jd6d_gg_,.___SButton_4jd6d_gg_._neighborLocation_left_4jd6d_gg_._theme_primary-success_4jd6d_gg_,.___SButton_4jd6d_gg_._neighborLocation_left_4jd6d_gg_._theme_primary-warning_4jd6d_gg_{border-left-color:hsla(0,0%,100%,.5)}.___SButton_4jd6d_gg_._neighborLocation_left_4jd6d_gg_._theme_primary-invert_4jd6d_gg_{border-left-color:rgba(0,0,0,.5)}.___SSpin_4jd6d_gg_{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}.___SInner_4jd6d_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SInner_4jd6d_gg_.__loading_4jd6d_gg_{visibility:hidden}.___SText_4jd6d_gg_{display:inline-flex}.___SText_4jd6d_gg_._size_m_4jd6d_gg_{margin-left:8px;margin-right:8px;line-height:1.42}.___SText_4jd6d_gg_._size_l_4jd6d_gg_{margin-left:12px;margin-right:12px;line-height:1.5}.___SAddon_4jd6d_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_4jd6d_gg_._size_m_4jd6d_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_4jd6d_gg_._size_m_4jd6d_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_4jd6d_gg_._size_m_4jd6d_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SAddon_4jd6d_gg_._size_l_4jd6d_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_4jd6d_gg_._size_l_4jd6d_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_4jd6d_gg_._size_l_4jd6d_gg_:only-child{margin-left:-4px;margin-right:-4px}"
|
|
37
36
|
/*__inner_css_end__*/
|
|
38
|
-
, "
|
|
37
|
+
, "4jd6d_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_4jd6d_gg_",
|
|
41
|
+
"_disabled": "__disabled_4jd6d_gg_",
|
|
42
|
+
"_keyboardFocused": "__keyboardFocused_4jd6d_gg_",
|
|
43
|
+
"_size_m": "_size_m_4jd6d_gg_",
|
|
44
|
+
"_size_l": "_size_l_4jd6d_gg_",
|
|
45
|
+
"_theme_primary-info": "_theme_primary-info_4jd6d_gg_",
|
|
46
|
+
"_active": "__active_4jd6d_gg_",
|
|
47
|
+
"_theme_primary-success": "_theme_primary-success_4jd6d_gg_",
|
|
48
|
+
"_theme_primary-warning": "_theme_primary-warning_4jd6d_gg_",
|
|
49
|
+
"_theme_primary-danger": "_theme_primary-danger_4jd6d_gg_",
|
|
50
|
+
"_theme_primary-invert": "_theme_primary-invert_4jd6d_gg_",
|
|
51
|
+
"_theme_secondary-muted": "_theme_secondary-muted_4jd6d_gg_",
|
|
52
|
+
"_theme_secondary-info": "_theme_secondary-info_4jd6d_gg_",
|
|
53
|
+
"_theme_secondary-invert": "_theme_secondary-invert_4jd6d_gg_",
|
|
54
|
+
"_theme_tertiary-info": "_theme_tertiary-info_4jd6d_gg_",
|
|
55
|
+
"_theme_tertiary-muted": "_theme_tertiary-muted_4jd6d_gg_",
|
|
56
|
+
"_theme_tertiary-invert": "_theme_tertiary-invert_4jd6d_gg_",
|
|
57
|
+
"_neighborLocation_right": "_neighborLocation_right_4jd6d_gg_",
|
|
58
|
+
"_neighborLocation_both": "_neighborLocation_both_4jd6d_gg_",
|
|
59
|
+
"_neighborLocation_left": "_neighborLocation_left_4jd6d_gg_",
|
|
60
|
+
"__SSpin": "___SSpin_4jd6d_gg_",
|
|
61
|
+
"__SInner": "___SInner_4jd6d_gg_",
|
|
62
|
+
"_loading": "__loading_4jd6d_gg_",
|
|
63
|
+
"__SText": "___SText_4jd6d_gg_",
|
|
64
|
+
"__SAddon": "___SAddon_4jd6d_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.4",
|
|
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}
|