@semcore/button 16.0.13-prerelease.9 → 16.1.0-prerelease.0
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 +3 -3
- package/lib/cjs/component/AbstractButton/AbstractButton.js +165 -100
- package/lib/cjs/component/AbstractButton/AbstractButton.js.map +1 -1
- package/lib/cjs/component/AbstractButton/AbstractButton.type.js.map +1 -1
- package/lib/cjs/component/AbstractButton/SpinButton.js +10 -9
- package/lib/cjs/component/AbstractButton/SpinButton.js.map +1 -1
- package/lib/cjs/component/Button/Button.js +63 -54
- package/lib/cjs/component/Button/Button.js.map +1 -1
- package/lib/cjs/component/Button/Button.type.js.map +1 -1
- package/lib/cjs/component/Button/button.shadow.css +79 -79
- package/lib/cjs/component/ButtonLink/ButtonLink.js +59 -51
- package/lib/cjs/component/ButtonLink/ButtonLink.js.map +1 -1
- package/lib/cjs/component/ButtonLink/buttonLink.shadow.css +13 -13
- package/lib/cjs/index.js +7 -7
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/component/AbstractButton/AbstractButton.js +164 -97
- package/lib/es6/component/AbstractButton/AbstractButton.js.map +1 -1
- package/lib/es6/component/AbstractButton/AbstractButton.type.js.map +1 -1
- package/lib/es6/component/AbstractButton/SpinButton.js +7 -6
- package/lib/es6/component/AbstractButton/SpinButton.js.map +1 -1
- package/lib/es6/component/Button/Button.js +56 -47
- package/lib/es6/component/Button/Button.js.map +1 -1
- package/lib/es6/component/Button/Button.type.js.map +1 -1
- package/lib/es6/component/Button/button.shadow.css +79 -79
- package/lib/es6/component/ButtonLink/ButtonLink.js +52 -44
- package/lib/es6/component/ButtonLink/ButtonLink.js.map +1 -1
- package/lib/es6/component/ButtonLink/buttonLink.shadow.css +13 -13
- package/lib/esm/component/AbstractButton/AbstractButton.mjs +136 -98
- package/lib/esm/component/AbstractButton/SpinButton.mjs +6 -6
- package/lib/esm/component/Button/Button.mjs +56 -47
- package/lib/esm/component/Button/button.shadow.css +79 -79
- package/lib/esm/component/ButtonLink/ButtonLink.mjs +50 -44
- package/lib/esm/component/ButtonLink/buttonLink.shadow.css +13 -13
- package/lib/types/component/AbstractButton/AbstractButton.d.ts +6 -5
- package/lib/types/component/AbstractButton/AbstractButton.type.d.ts +4 -2
- package/lib/types/component/Button/Button.type.d.ts +18 -2
- package/package.json +9 -6
- package/src/component/AbstractButton/AbstractButton.tsx +77 -58
- package/src/component/AbstractButton/AbstractButton.type.ts +4 -2
- package/src/component/Button/Button.tsx +1 -1
- package/src/component/Button/Button.type.ts +14 -1
- package/src/component/Button/button.shadow.css +79 -79
- package/src/component/ButtonLink/ButtonLink.tsx +1 -1
- package/src/component/ButtonLink/buttonLink.shadow.css +13 -13
|
@@ -1,79 +1,87 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.ButtonLink = void 0;
|
|
8
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
12
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
8
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
14
|
var _core = require("@semcore/core");
|
|
10
|
-
var _baseComponents = require("@semcore/base-components");
|
|
11
15
|
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/resolveColorEnhance"));
|
|
16
|
+
var _flexBox = require("@semcore/flex-box");
|
|
12
17
|
var _react = _interopRequireDefault(require("react"));
|
|
13
|
-
var
|
|
18
|
+
var _AbstractButton2 = require("../AbstractButton/AbstractButton");
|
|
14
19
|
/*!__reshadow-styles__:"./buttonLink.shadow.css"*/
|
|
15
|
-
|
|
20
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SButton_1ncd1_gg_{display:inline-flex;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, rgb(35, 95, 226));line-height:normal;position:relative;cursor:pointer;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;background:0 0;transition:color .15s ease-in-out}.___SButton_1ncd1_gg_:active{text-decoration:none}@media (hover:hover){.___SButton_1ncd1_gg_:hover{text-decoration:none}}.___SButton_1ncd1_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_1ncd1_gg_.__active_1ncd1_gg_,.___SButton_1ncd1_gg_:active{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}@media (hover:hover){.___SButton_1ncd1_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}}.___SButton_1ncd1_gg_.__active_1ncd1_gg_ .___SText_1ncd1_gg_,.___SButton_1ncd1_gg_:active .___SText_1ncd1_gg_{border-color:currentColor}@media (hover:hover){.___SButton_1ncd1_gg_:hover .___SText_1ncd1_gg_{border-color:currentColor}}.___SButton_1ncd1_gg_.__enableVisited_1ncd1_gg_:visited{color:var(--intergalactic-text-link-visited, rgb(128, 41, 236))}@media (hover:hover){.___SButton_1ncd1_gg_.__enableVisited_1ncd1_gg_:visited:hover{color:var(--intergalactic-text-link-visited, rgb(128, 41, 236))}}.___SButton_1ncd1_gg_ .___SText_1ncd1_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_1ncd1_gg_.__disabled_1ncd1_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_{color:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_{color:var(--intergalactic-text-hint, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_{color:var(--intergalactic-text-hint, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_.__active_1ncd1_gg_,.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_:active{color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}@media (hover:hover){.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_:hover{color:var(--intergalactic-text-hint-hover-active, rgba(0, 3, 0, 0.605))}}.___SButton_1ncd1_gg_._use_secondary_1ncd1_gg_ .___SText_1ncd1_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_1ncd1_gg_,.___SInner_1ncd1_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_1ncd1_gg_{height:100%;width:100%}.___SAddon_1ncd1_gg_{vertical-align:middle;pointer-events:none}.___SButton_1ncd1_gg_ .___SAddon_1ncd1_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_1ncd1_gg_ .___SAddon_1ncd1_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_1ncd1_gg_.__text-color_1ncd1_gg_{color:var(--text-color_1ncd1)}.___SButton_1ncd1_gg_.__text-color_1ncd1_gg_.__active_1ncd1_gg_,.___SButton_1ncd1_gg_.__text-color_1ncd1_gg_:active{color:var(--text-color_1ncd1);filter:brightness(.8)}@media (hover:hover){.___SButton_1ncd1_gg_.__text-color_1ncd1_gg_:hover{color:var(--text-color_1ncd1);filter:brightness(.8)}}.___SButton_1ncd1_gg_._size_100_1ncd1_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_1ncd1_gg_._size_200_1ncd1_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_1ncd1_gg_._size_300_1ncd1_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_1ncd1_gg_._size_400_1ncd1_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_1ncd1_gg_._size_500_1ncd1_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_1ncd1_gg_._size_600_1ncd1_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_1ncd1_gg_._size_700_1ncd1_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_1ncd1_gg_._size_800_1ncd1_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_1ncd1_gg_,.___SText_1ncd1_gg_{transition:none}}", /*__inner_css_end__*/"1ncd1_gg_"),
|
|
16
21
|
/*__reshadow_css_end__*/
|
|
17
22
|
{
|
|
18
|
-
"__SButton": "
|
|
19
|
-
"_disabled": "
|
|
20
|
-
"__SInner": "
|
|
21
|
-
"__SAddon": "
|
|
22
|
-
"_size_100": "
|
|
23
|
-
"_size_200": "
|
|
24
|
-
"_size_300": "
|
|
25
|
-
"_size_400": "
|
|
26
|
-
"_size_500": "
|
|
27
|
-
"_size_600": "
|
|
28
|
-
"_size_700": "
|
|
29
|
-
"_size_800": "
|
|
30
|
-
"__SText": "
|
|
31
|
-
"_active": "
|
|
32
|
-
"_enableVisited": "
|
|
33
|
-
"_use_secondary": "
|
|
34
|
-
"_text-color": "__text-
|
|
35
|
-
"--text-color": "--text-
|
|
23
|
+
"__SButton": "___SButton_1ncd1_gg_",
|
|
24
|
+
"_disabled": "__disabled_1ncd1_gg_",
|
|
25
|
+
"__SInner": "___SInner_1ncd1_gg_",
|
|
26
|
+
"__SAddon": "___SAddon_1ncd1_gg_",
|
|
27
|
+
"_size_100": "_size_100_1ncd1_gg_",
|
|
28
|
+
"_size_200": "_size_200_1ncd1_gg_",
|
|
29
|
+
"_size_300": "_size_300_1ncd1_gg_",
|
|
30
|
+
"_size_400": "_size_400_1ncd1_gg_",
|
|
31
|
+
"_size_500": "_size_500_1ncd1_gg_",
|
|
32
|
+
"_size_600": "_size_600_1ncd1_gg_",
|
|
33
|
+
"_size_700": "_size_700_1ncd1_gg_",
|
|
34
|
+
"_size_800": "_size_800_1ncd1_gg_",
|
|
35
|
+
"__SText": "___SText_1ncd1_gg_",
|
|
36
|
+
"_active": "__active_1ncd1_gg_",
|
|
37
|
+
"_enableVisited": "__enableVisited_1ncd1_gg_",
|
|
38
|
+
"_use_secondary": "_use_secondary_1ncd1_gg_",
|
|
39
|
+
"_text-color": "__text-color_1ncd1_gg_",
|
|
40
|
+
"--text-color": "--text-color_1ncd1"
|
|
36
41
|
});
|
|
37
|
-
|
|
38
|
-
resolveColor: (0, _resolveColorEnhance
|
|
42
|
+
var enhance = {
|
|
43
|
+
resolveColor: (0, _resolveColorEnhance["default"])()
|
|
39
44
|
};
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
resolveColor
|
|
45
|
-
} = this.asProps;
|
|
46
|
-
return resolveColor(color);
|
|
45
|
+
var RootButtonLink = /*#__PURE__*/function (_AbstractButton) {
|
|
46
|
+
function RootButtonLink() {
|
|
47
|
+
(0, _classCallCheck2["default"])(this, RootButtonLink);
|
|
48
|
+
return (0, _callSuper2["default"])(this, RootButtonLink, arguments);
|
|
47
49
|
}
|
|
48
|
-
|
|
49
|
-
(0,
|
|
50
|
-
|
|
51
|
-
(
|
|
52
|
-
|
|
50
|
+
(0, _inherits2["default"])(RootButtonLink, _AbstractButton);
|
|
51
|
+
return (0, _createClass2["default"])(RootButtonLink, [{
|
|
52
|
+
key: "getTextColor",
|
|
53
|
+
value: function getTextColor() {
|
|
54
|
+
var _ref5 = this.asProps,
|
|
55
|
+
color = _ref5.color,
|
|
56
|
+
resolveColor = _ref5.resolveColor;
|
|
57
|
+
return resolveColor(color);
|
|
58
|
+
}
|
|
59
|
+
}]);
|
|
60
|
+
}(_AbstractButton2.AbstractButton);
|
|
61
|
+
(0, _defineProperty2["default"])(RootButtonLink, "displayName", 'ButtonLink');
|
|
62
|
+
(0, _defineProperty2["default"])(RootButtonLink, "enhance", Object.values(enhance));
|
|
63
|
+
(0, _defineProperty2["default"])(RootButtonLink, "style", style);
|
|
64
|
+
(0, _defineProperty2["default"])(RootButtonLink, "defaultProps", {
|
|
53
65
|
use: 'primary'
|
|
54
66
|
});
|
|
55
67
|
function Text(props) {
|
|
56
68
|
var _ref = arguments[0],
|
|
57
69
|
_ref3;
|
|
58
|
-
|
|
59
|
-
return _ref3 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}, _ref)
|
|
63
|
-
}));
|
|
70
|
+
var SText = _flexBox.Box;
|
|
71
|
+
return _ref3 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SText, _ref3.cn("SText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
72
|
+
"tag": 'span'
|
|
73
|
+
}, _ref))));
|
|
64
74
|
}
|
|
65
75
|
function Addon(props) {
|
|
66
76
|
var _ref2 = arguments[0],
|
|
67
77
|
_ref4;
|
|
68
|
-
|
|
69
|
-
return _ref4 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}, _ref2)
|
|
73
|
-
}));
|
|
78
|
+
var SAddon = _flexBox.Box;
|
|
79
|
+
return _ref4 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref4.cn("SAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
80
|
+
"tag": 'span'
|
|
81
|
+
}, _ref2))));
|
|
74
82
|
}
|
|
75
|
-
|
|
76
|
-
Text,
|
|
77
|
-
Addon
|
|
83
|
+
var ButtonLink = exports.ButtonLink = (0, _core.createComponent)(RootButtonLink, {
|
|
84
|
+
Text: Text,
|
|
85
|
+
Addon: Addon
|
|
78
86
|
});
|
|
79
87
|
//# sourceMappingURL=ButtonLink.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonLink.js","names":["_core","require","
|
|
1
|
+
{"version":3,"file":"ButtonLink.js","names":["_core","require","_resolveColorEnhance","_interopRequireDefault","_flexBox","_react","_AbstractButton2","style","sstyled","insert","enhance","resolveColor","resolveColorEnhance","RootButtonLink","_AbstractButton","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","key","value","getTextColor","_ref5","asProps","color","AbstractButton","_defineProperty2","Object","values","use","Text","props","_ref","arguments[0]","_ref3","SText","Box","styles","createElement","cn","_objectSpread2","assignProps","Addon","_ref2","_ref4","SAddon","ButtonLink","exports","createComponent"],"sources":["../../../../src/component/ButtonLink/ButtonLink.tsx"],"sourcesContent":["import { createComponent, sstyled, Root } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport { Box } from '@semcore/flex-box';\nimport React from 'react';\n\nimport style from './buttonLink.shadow.css';\nimport type { ButtonLinkAddonProps, ButtonLinkComponent, ButtonLinkTextProps } from './ButtonLink.type';\nimport { AbstractButton } from '../AbstractButton/AbstractButton';\n\nconst enhance = {\n resolveColor: resolveColorEnhance(),\n};\n\nclass RootButtonLink extends AbstractButton {\n static displayName = 'ButtonLink';\n static enhance = Object.values(enhance);\n static style = style;\n static defaultProps = {\n use: 'primary',\n };\n\n protected getTextColor(): string | undefined {\n const { color, resolveColor } = this.asProps as any;\n return resolveColor(color);\n }\n}\n\nfunction Text(props: ButtonLinkTextProps) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props: ButtonLinkAddonProps) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nexport const ButtonLink = createComponent(RootButtonLink, {\n Text,\n Addon,\n}) as ButtonLinkComponent;\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,oBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAF,sBAAA,CAAAF,OAAA;AAIA,IAAAK,gBAAA,GAAAL,OAAA;AAAkE;AAAA,IAAAM,KAAA,8BAAAP,KAAA,CAAAQ,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAElE,IAAMC,OAAO,GAAG;EACdC,YAAY,EAAE,IAAAC,+BAAmB,EAAC;AACpC,CAAC;AAAC,IAEIC,cAAc,0BAAAC,eAAA;EAAA,SAAAD,eAAA;IAAA,IAAAE,gBAAA,mBAAAF,cAAA;IAAA,WAAAG,WAAA,mBAAAH,cAAA,EAAAI,SAAA;EAAA;EAAA,IAAAC,UAAA,aAAAL,cAAA,EAAAC,eAAA;EAAA,WAAAK,aAAA,aAAAN,cAAA;IAAAO,GAAA;IAAAC,KAAA,EAQlB,SAAUC,YAAYA,CAAA,EAAuB;MAC3C,IAAAC,KAAA,GAAgC,IAAI,CAACC,OAAO;QAApCC,KAAK,GAAAF,KAAA,CAALE,KAAK;QAAEd,YAAY,GAAAY,KAAA,CAAZZ,YAAY;MAC3B,OAAOA,YAAY,CAACc,KAAK,CAAC;IAC5B;EAAC;AAAA,EAX0BC,+BAAc;AAAA,IAAAC,gBAAA,aAArCd,cAAc,iBACG,YAAY;AAAA,IAAAc,gBAAA,aAD7Bd,cAAc,aAEDe,MAAM,CAACC,MAAM,CAACnB,OAAO,CAAC;AAAA,IAAAiB,gBAAA,aAFnCd,cAAc,WAGHN,KAAK;AAAA,IAAAoB,gBAAA,aAHhBd,cAAc,kBAII;EACpBiB,GAAG,EAAE;AACP,CAAC;AAQH,SAASC,IAAIA,CAACC,KAA0B,EAAE;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EACxC,IAAMC,KAAK,GACiCC,YAAG;EAA/C,OAAAF,KAAA,GAAO,IAAA3B,aAAO,EAACwB,KAAK,CAACM,MAAM,CAAC,eAACjC,MAAA,YAAAkC,aAAA,CAACH,KAAK,EAAAD,KAAA,CAAAK,EAAA,cAAAC,cAAA,qBAAAzC,KAAA,CAAA0C,WAAA;IAAA,OAAkB;EAAM,GAAAT,IAAA,GAAE,CAAC;AAChE;AAEA,SAASU,KAAKA,CAACX,KAA2B,EAAE;EAAA,IAAAY,KAAA,GAAAV,YAAA;IAAAW,KAAA;EAC1C,IAAMC,MAAM,GACiCT,YAAG;EAAhD,OAAAQ,KAAA,GAAO,IAAArC,aAAO,EAACwB,KAAK,CAACM,MAAM,CAAC,eAACjC,MAAA,YAAAkC,aAAA,CAACO,MAAM,EAAAD,KAAA,CAAAL,EAAA,eAAAC,cAAA,qBAAAzC,KAAA,CAAA0C,WAAA;IAAA,OAAkB;EAAM,GAAAE,KAAA,GAAE,CAAC;AACjE;AAEO,IAAMG,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,IAAAE,qBAAe,EAACpC,cAAc,EAAE;EACxDkB,IAAI,EAAJA,IAAI;EACJY,KAAK,EAALA;AACF,CAAC,CAAwB","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@ SButton {
|
|
|
2
2
|
display: inline-flex;
|
|
3
3
|
font-family: inherit;
|
|
4
4
|
font-size: var(--intergalactic-fs-200, 14px);
|
|
5
|
-
color: var(--intergalactic-text-link,
|
|
5
|
+
color: var(--intergalactic-text-link, oklch(0.53 0.21 263));
|
|
6
6
|
line-height: normal;
|
|
7
7
|
position: relative;
|
|
8
8
|
cursor: pointer;
|
|
@@ -28,42 +28,43 @@ SButton {
|
|
|
28
28
|
&[active],
|
|
29
29
|
&:hover,
|
|
30
30
|
&:active {
|
|
31
|
-
color: var(--intergalactic-text-link-hover-active,
|
|
31
|
+
color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.202 263));
|
|
32
32
|
|
|
33
33
|
& SText {
|
|
34
|
-
|
|
34
|
+
border-color: currentColor;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&[enableVisited]:visited,
|
|
39
39
|
&[enableVisited]:visited:hover {
|
|
40
|
-
color: var(--intergalactic-text-link-visited,
|
|
40
|
+
color: var(--intergalactic-text-link-visited, oklch(0.53 0.26 296));
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
SText {
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
border-bottom-width: 1px;
|
|
45
|
+
border-bottom-style: solid;
|
|
46
|
+
border-color: transparent;
|
|
47
|
+
transition: border-bottom-color 0.15s ease-in-out;
|
|
46
48
|
}
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
SButton[disabled] {
|
|
50
|
-
opacity: var(--intergalactic-disabled-opacity, 0.
|
|
52
|
+
opacity: var(--intergalactic-disabled-opacity, 0.4);
|
|
51
53
|
cursor: default;
|
|
52
54
|
/* Disable link interactions */
|
|
53
55
|
pointer-events: none;
|
|
54
56
|
}
|
|
55
57
|
|
|
56
58
|
SButton[use='secondary'] {
|
|
57
|
-
color: var(--intergalactic-text-hint,
|
|
59
|
+
color: var(--intergalactic-text-hint, oklch(0.088 0.026 147.7 / 0.583));
|
|
58
60
|
|
|
59
61
|
&[active],
|
|
60
62
|
&:active,
|
|
61
63
|
&:hover {
|
|
62
|
-
color: var(--intergalactic-text-hint-hover-active,
|
|
64
|
+
color: var(--intergalactic-text-hint-hover-active, oklch(0.086 0.026 145.8 / 0.605));
|
|
63
65
|
}
|
|
64
66
|
|
|
65
67
|
SText {
|
|
66
|
-
box-shadow: none;
|
|
67
68
|
border-bottom-width: 1px;
|
|
68
69
|
border-bottom-style: dashed;
|
|
69
70
|
border-color: currentColor;
|
|
@@ -72,7 +73,7 @@ SButton[use='secondary'] {
|
|
|
72
73
|
|
|
73
74
|
SInner {
|
|
74
75
|
display: inline-flex;
|
|
75
|
-
align-items:
|
|
76
|
+
align-items: center;
|
|
76
77
|
justify-content: center;
|
|
77
78
|
height: 100%;
|
|
78
79
|
width: 100%;
|
|
@@ -81,10 +82,9 @@ SInner {
|
|
|
81
82
|
SAddon {
|
|
82
83
|
display: inline-flex;
|
|
83
84
|
justify-content: center;
|
|
84
|
-
align-items:
|
|
85
|
+
align-items: center;
|
|
85
86
|
vertical-align: middle;
|
|
86
87
|
pointer-events: none;
|
|
87
|
-
align-self: center;
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
SButton SAddon {
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
@@ -9,14 +9,14 @@ var _exportNames = {
|
|
|
9
9
|
};
|
|
10
10
|
Object.defineProperty(exports, "MAP_USE_DEFAULT_THEME", {
|
|
11
11
|
enumerable: true,
|
|
12
|
-
get: function () {
|
|
12
|
+
get: function get() {
|
|
13
13
|
return _AbstractButton.MAP_USE_DEFAULT_THEME;
|
|
14
14
|
}
|
|
15
15
|
});
|
|
16
16
|
Object.defineProperty(exports, "default", {
|
|
17
17
|
enumerable: true,
|
|
18
|
-
get: function () {
|
|
19
|
-
return _Button
|
|
18
|
+
get: function get() {
|
|
19
|
+
return _Button["default"];
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
22
|
var _Button = _interopRequireDefault(require("./component/Button/Button"));
|
|
@@ -27,7 +27,7 @@ Object.keys(_Button2).forEach(function (key) {
|
|
|
27
27
|
if (key in exports && exports[key] === _Button2[key]) return;
|
|
28
28
|
Object.defineProperty(exports, key, {
|
|
29
29
|
enumerable: true,
|
|
30
|
-
get: function () {
|
|
30
|
+
get: function get() {
|
|
31
31
|
return _Button2[key];
|
|
32
32
|
}
|
|
33
33
|
});
|
|
@@ -39,7 +39,7 @@ Object.keys(_ButtonLink).forEach(function (key) {
|
|
|
39
39
|
if (key in exports && exports[key] === _ButtonLink[key]) return;
|
|
40
40
|
Object.defineProperty(exports, key, {
|
|
41
41
|
enumerable: true,
|
|
42
|
-
get: function () {
|
|
42
|
+
get: function get() {
|
|
43
43
|
return _ButtonLink[key];
|
|
44
44
|
}
|
|
45
45
|
});
|
|
@@ -51,7 +51,7 @@ Object.keys(_ButtonLink2).forEach(function (key) {
|
|
|
51
51
|
if (key in exports && exports[key] === _ButtonLink2[key]) return;
|
|
52
52
|
Object.defineProperty(exports, key, {
|
|
53
53
|
enumerable: true,
|
|
54
|
-
get: function () {
|
|
54
|
+
get: function get() {
|
|
55
55
|
return _ButtonLink2[key];
|
|
56
56
|
}
|
|
57
57
|
});
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_Button","_interopRequireDefault","require","_Button2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_ButtonLink","_ButtonLink2","_AbstractButton"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './component/Button/Button';\nexport * from './component/Button/Button.type';\nexport * from './component/ButtonLink/ButtonLink';\nexport * from './component/ButtonLink/ButtonLink.type';\nexport { MAP_USE_DEFAULT_THEME } from './component/AbstractButton/AbstractButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,QAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,QAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Button","_interopRequireDefault","require","_Button2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_ButtonLink","_ButtonLink2","_AbstractButton"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './component/Button/Button';\nexport * from './component/Button/Button.type';\nexport * from './component/ButtonLink/ButtonLink';\nexport * from './component/ButtonLink/ButtonLink.type';\nexport { MAP_USE_DEFAULT_THEME } from './component/AbstractButton/AbstractButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,QAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,QAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAZ,QAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,WAAA,GAAAd,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAW,WAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,WAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,WAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AACA,IAAAU,YAAA,GAAAf,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAY,YAAA,EAAAX,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAU,YAAA,CAAAV,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAE,YAAA,CAAAV,GAAA;IAAA;EAAA;AAAA;AACA,IAAAW,eAAA,GAAAhB,OAAA","ignoreList":[]}
|
|
@@ -1,117 +1,184 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
+
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
5
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
1
6
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
|
+
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
2
8
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
3
|
-
import { NeighborLocation, Box, Hint } from '@semcore/base-components';
|
|
4
9
|
import { Component, CORE_INSTANCE, Root, sstyled } from '@semcore/core';
|
|
5
10
|
import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
|
|
6
11
|
import hasLabels from '@semcore/core/lib/utils/hasLabels';
|
|
7
12
|
import logger from '@semcore/core/lib/utils/logger';
|
|
13
|
+
import { Box } from '@semcore/flex-box';
|
|
14
|
+
import NeighborLocation from '@semcore/neighbor-location';
|
|
15
|
+
import { Hint } from '@semcore/tooltip';
|
|
8
16
|
import React from 'react';
|
|
9
17
|
import SpinButton from './SpinButton';
|
|
10
|
-
export
|
|
18
|
+
export var MAP_USE_DEFAULT_THEME = {
|
|
11
19
|
primary: 'info',
|
|
12
20
|
secondary: 'muted',
|
|
13
21
|
tertiary: 'info'
|
|
14
22
|
};
|
|
15
|
-
export
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
23
|
+
export var AbstractButton = /*#__PURE__*/function (_Component) {
|
|
24
|
+
function AbstractButton() {
|
|
25
|
+
var _this;
|
|
26
|
+
_classCallCheck(this, AbstractButton);
|
|
27
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
28
|
+
args[_key] = arguments[_key];
|
|
29
|
+
}
|
|
30
|
+
_this = _callSuper(this, AbstractButton, [].concat(args));
|
|
31
|
+
_defineProperty(_this, "containerRef", /*#__PURE__*/React.createRef());
|
|
32
|
+
_defineProperty(_this, "state", {
|
|
20
33
|
ariaLabelledByContent: null
|
|
21
34
|
});
|
|
35
|
+
return _this;
|
|
22
36
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
37
|
+
_inherits(AbstractButton, _Component);
|
|
38
|
+
return _createClass(AbstractButton, [{
|
|
39
|
+
key: "getTextProps",
|
|
40
|
+
value: function getTextProps() {
|
|
41
|
+
var size = this.asProps.size;
|
|
42
|
+
return {
|
|
43
|
+
size: size
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
}, {
|
|
47
|
+
key: "getAddonProps",
|
|
48
|
+
value: function getAddonProps() {
|
|
49
|
+
var size = this.asProps.size;
|
|
50
|
+
return {
|
|
51
|
+
size: size
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
}, {
|
|
55
|
+
key: "componentDidMount",
|
|
56
|
+
value: function componentDidMount() {
|
|
57
|
+
var _this2 = this;
|
|
58
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
59
|
+
logger.warn(this.containerRef.current && !hasLabels(this.containerRef.current) && !this.asProps.title, "'title' or 'aria-label' or 'aria-labelledby' are required props for buttons without text content", this.asProps['data-ui-name'] || AbstractButton.displayName);
|
|
60
|
+
logger.warn(this.asProps.theme === 'warning', 'Warning theme is deprecated and will be removed in the next major release.', this.asProps['data-ui-name'] || AbstractButton.displayName);
|
|
61
|
+
}
|
|
62
|
+
var ariaLabelledby = this.asProps['aria-labelledby'];
|
|
63
|
+
if (ariaLabelledby) {
|
|
64
|
+
setTimeout(function () {
|
|
65
|
+
var _document$getElementB, _document$getElementB2;
|
|
66
|
+
_this2.setState({
|
|
67
|
+
ariaLabelledByContent: (_document$getElementB = (_document$getElementB2 = document.getElementById(ariaLabelledby)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.textContent) !== null && _document$getElementB !== void 0 ? _document$getElementB : ''
|
|
68
|
+
});
|
|
69
|
+
}, 0);
|
|
70
|
+
}
|
|
43
71
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
72
|
+
}, {
|
|
73
|
+
key: "renderButton",
|
|
74
|
+
value: function renderButton(_ref6) {
|
|
75
|
+
var _ref = this.asProps,
|
|
76
|
+
_ref3;
|
|
77
|
+
var buttonProps = _ref6.buttonProps,
|
|
78
|
+
children = _ref6.children;
|
|
79
|
+
var _this$asProps = this.asProps,
|
|
80
|
+
styles = _this$asProps.styles,
|
|
81
|
+
theme = _this$asProps.theme;
|
|
82
|
+
var SButton = Box;
|
|
83
|
+
return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SButton, _ref3.cn("SButton", _objectSpread({}, _assignProps(_objectSpread({
|
|
84
|
+
"invertOutline": theme === 'invert'
|
|
85
|
+
}, buttonProps), _ref))), children);
|
|
86
|
+
}
|
|
87
|
+
}, {
|
|
88
|
+
key: "renderButtonWithHint",
|
|
89
|
+
value: function renderButtonWithHint(_ref7) {
|
|
90
|
+
var _ref2 = this.asProps,
|
|
91
|
+
_ref4;
|
|
92
|
+
var buttonProps = _ref7.buttonProps,
|
|
93
|
+
children = _ref7.children,
|
|
94
|
+
hintProps = _ref7.hintProps;
|
|
95
|
+
var _this$asProps2 = this.asProps,
|
|
96
|
+
styles = _this$asProps2.styles,
|
|
97
|
+
theme = _this$asProps2.theme;
|
|
98
|
+
var SButton = Hint;
|
|
99
|
+
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SButton, _ref4.cn("SButton", _objectSpread({}, _assignProps2(_objectSpread(_objectSpread(_objectSpread({
|
|
100
|
+
"invertOutline": theme === 'invert'
|
|
101
|
+
}, buttonProps), hintProps), {}, {
|
|
102
|
+
"ignorePortalsStacking": true
|
|
103
|
+
}), _ref2))), children);
|
|
104
|
+
}
|
|
105
|
+
}, {
|
|
106
|
+
key: "render",
|
|
107
|
+
value: function render() {
|
|
108
|
+
var _ref8,
|
|
109
|
+
_ref9,
|
|
110
|
+
_this3 = this;
|
|
111
|
+
var _this$asProps3 = this.asProps,
|
|
112
|
+
styles = _this$asProps3.styles,
|
|
113
|
+
use = _this$asProps3.use,
|
|
114
|
+
_this$asProps3$theme = _this$asProps3.theme,
|
|
115
|
+
theme = _this$asProps3$theme === void 0 ? typeof use === 'string' && MAP_USE_DEFAULT_THEME[use] : _this$asProps3$theme,
|
|
116
|
+
loading = _this$asProps3.loading,
|
|
117
|
+
_this$asProps3$disabl = _this$asProps3.disabled,
|
|
118
|
+
disabled = _this$asProps3$disabl === void 0 ? loading : _this$asProps3$disabl,
|
|
119
|
+
size = _this$asProps3.size,
|
|
120
|
+
neighborLocation = _this$asProps3.neighborLocation,
|
|
121
|
+
hasChildren = _this$asProps3.children,
|
|
122
|
+
title = _this$asProps3.title,
|
|
123
|
+
ariaLabel = _this$asProps3['aria-label'],
|
|
124
|
+
Children = _this$asProps3.Children,
|
|
125
|
+
AddonLeft = _this$asProps3.addonLeft,
|
|
126
|
+
AddonRight = _this$asProps3.addonRight,
|
|
127
|
+
hintPlacement = _this$asProps3.hintPlacement;
|
|
128
|
+
// @ts-ignore
|
|
129
|
+
var Button = this[CORE_INSTANCE];
|
|
130
|
+
var useTheme = use && theme ? "".concat(use, "-").concat(theme) : false;
|
|
131
|
+
var SInner = Box;
|
|
132
|
+
var SSpin = Box;
|
|
133
|
+
var buttonAriaLabel = (_ref8 = (_ref9 = title !== null && title !== void 0 ? title : ariaLabel) !== null && _ref9 !== void 0 ? _ref9 : this.state.ariaLabelledByContent) !== null && _ref8 !== void 0 ? _ref8 : '';
|
|
134
|
+
var buttonProps = {
|
|
135
|
+
'type': 'button',
|
|
136
|
+
'tag': 'button',
|
|
137
|
+
disabled: disabled,
|
|
138
|
+
'use:theme': useTheme,
|
|
139
|
+
'ref': this.containerRef,
|
|
140
|
+
'text-color': this.getTextColor(),
|
|
141
|
+
'aria-busy': loading,
|
|
142
|
+
'__excludeProps': ['title'],
|
|
143
|
+
'tabIndex': 0
|
|
144
|
+
};
|
|
145
|
+
var hintProps = {
|
|
146
|
+
title: buttonAriaLabel,
|
|
147
|
+
timeout: [250, 50],
|
|
148
|
+
placement: hintPlacement,
|
|
149
|
+
theme: theme === 'invert' ? 'invert' : undefined,
|
|
150
|
+
__excludeProps: []
|
|
151
|
+
};
|
|
152
|
+
return /*#__PURE__*/React.createElement(NeighborLocation.Detect, {
|
|
153
|
+
neighborLocation: neighborLocation
|
|
154
|
+
}, function (neighborLocation) {
|
|
155
|
+
var _ref5;
|
|
156
|
+
var children = (_ref5 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SInner, _ref5.cn("SInner", {
|
|
157
|
+
"tag": 'span',
|
|
158
|
+
"loading": loading,
|
|
159
|
+
"data-ui-name": "".concat(_this3.asProps['data-ui-name'], ".InnerWrapper")
|
|
160
|
+
}), AddonLeft ? /*#__PURE__*/React.createElement(Button.Addon, null, /*#__PURE__*/React.createElement(AddonLeft, _ref5.cn("AddonLeft", {}))) : null, addonTextChildren(Children, Button.Text, Button.Addon), AddonRight ? /*#__PURE__*/React.createElement(Button.Addon, null, /*#__PURE__*/React.createElement(AddonRight, _ref5.cn("AddonRight", {}))) : null), loading && /*#__PURE__*/React.createElement(SSpin, _ref5.cn("SSpin", {
|
|
161
|
+
"tag": 'span'
|
|
162
|
+
}), /*#__PURE__*/React.createElement(SpinButton, _ref5.cn("SpinButton", {
|
|
163
|
+
"centered": true,
|
|
164
|
+
"size": size,
|
|
165
|
+
"theme": useTheme
|
|
166
|
+
})))));
|
|
167
|
+
buttonProps.neighborLocation = neighborLocation;
|
|
168
|
+
if (hasChildren === undefined || title) {
|
|
169
|
+
return _this3.renderButtonWithHint({
|
|
170
|
+
buttonProps: buttonProps,
|
|
171
|
+
hintProps: hintProps,
|
|
172
|
+
children: children
|
|
173
|
+
});
|
|
174
|
+
}
|
|
175
|
+
return _this3.renderButton({
|
|
176
|
+
buttonProps: buttonProps,
|
|
177
|
+
children: children
|
|
49
178
|
});
|
|
50
|
-
}
|
|
179
|
+
});
|
|
51
180
|
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
var _ref = this.asProps;
|
|
55
|
-
const {
|
|
56
|
-
styles,
|
|
57
|
-
use,
|
|
58
|
-
theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],
|
|
59
|
-
loading,
|
|
60
|
-
disabled = loading,
|
|
61
|
-
size,
|
|
62
|
-
neighborLocation,
|
|
63
|
-
children,
|
|
64
|
-
title,
|
|
65
|
-
['aria-label']: ariaLabel,
|
|
66
|
-
Children,
|
|
67
|
-
addonLeft: AddonLeft,
|
|
68
|
-
addonRight: AddonRight,
|
|
69
|
-
hintPlacement
|
|
70
|
-
} = this.asProps;
|
|
71
|
-
const SButton = Box;
|
|
72
|
-
// @ts-ignore
|
|
73
|
-
const Button = this[CORE_INSTANCE];
|
|
74
|
-
const useTheme = use && theme ? `${use}-${theme}` : false;
|
|
75
|
-
const SInner = Box;
|
|
76
|
-
const SSpin = Box;
|
|
77
|
-
const buttonAriaLabel = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';
|
|
78
|
-
const showHint = children === undefined || title;
|
|
79
|
-
return /*#__PURE__*/React.createElement(NeighborLocation.Detect, {
|
|
80
|
-
neighborLocation: neighborLocation
|
|
81
|
-
}, neighborLocation => {
|
|
82
|
-
var _ref2;
|
|
83
|
-
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SButton, _ref2.cn("SButton", {
|
|
84
|
-
..._assignProps({
|
|
85
|
-
"invertOutline": theme === 'invert',
|
|
86
|
-
"type": 'button',
|
|
87
|
-
"tag": 'button',
|
|
88
|
-
"tabIndex": 0,
|
|
89
|
-
"disabled": disabled,
|
|
90
|
-
"use:theme": useTheme,
|
|
91
|
-
"ref": this.containerRef,
|
|
92
|
-
"text-color": this.getTextColor(),
|
|
93
|
-
"aria-busy": loading,
|
|
94
|
-
"__excludeProps": ['title'],
|
|
95
|
-
"aria-label": showHint ? buttonAriaLabel : undefined,
|
|
96
|
-
"neighborLocation": neighborLocation
|
|
97
|
-
}, _ref)
|
|
98
|
-
}), /*#__PURE__*/React.createElement(SInner, _ref2.cn("SInner", {
|
|
99
|
-
"tag": 'span',
|
|
100
|
-
"loading": loading,
|
|
101
|
-
"data-ui-name": `${this.asProps['data-ui-name']}.InnerWrapper`
|
|
102
|
-
}), AddonLeft ? /*#__PURE__*/React.createElement(Button.Addon, null, /*#__PURE__*/React.createElement(AddonLeft, _ref2.cn("AddonLeft", {}))) : null, addonTextChildren(Children, Button.Text, Button.Addon), AddonRight ? /*#__PURE__*/React.createElement(Button.Addon, null, /*#__PURE__*/React.createElement(AddonRight, _ref2.cn("AddonRight", {}))) : null), loading && /*#__PURE__*/React.createElement(SSpin, _ref2.cn("SSpin", {
|
|
103
|
-
"tag": 'span'
|
|
104
|
-
}), /*#__PURE__*/React.createElement(SpinButton, _ref2.cn("SpinButton", {
|
|
105
|
-
"centered": true,
|
|
106
|
-
"size": size,
|
|
107
|
-
"theme": useTheme
|
|
108
|
-
})))), showHint && /*#__PURE__*/React.createElement(Hint, _ref2.cn("Hint", {
|
|
109
|
-
"triggerRef": this.containerRef,
|
|
110
|
-
"timeout": [250, 50],
|
|
111
|
-
"placement": hintPlacement
|
|
112
|
-
}), buttonAriaLabel));
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
}
|
|
181
|
+
}]);
|
|
182
|
+
}(Component);
|
|
116
183
|
_defineProperty(AbstractButton, "displayName", 'AbstractButton');
|
|
117
184
|
//# sourceMappingURL=AbstractButton.js.map
|