@megafon/ui-core 3.4.0 → 3.5.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 +17 -0
- package/dist/es/components/Badges/components/PromoBadge/PromoBadge.css +1 -1
- package/dist/es/components/Logo/Logo.css +5 -0
- package/dist/es/components/Switcher/Switcher.css +101 -28
- package/dist/es/components/Switcher/Switcher.d.ts +8 -1
- package/dist/es/components/Switcher/Switcher.js +39 -10
- package/dist/lib/components/Badges/components/PromoBadge/PromoBadge.css +1 -1
- package/dist/lib/components/Logo/Logo.css +5 -0
- package/dist/lib/components/Switcher/Switcher.css +101 -28
- package/dist/lib/components/Switcher/Switcher.d.ts +8 -1
- package/dist/lib/components/Switcher/Switcher.js +38 -9
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [3.5.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.4.0...@megafon/ui-core@3.5.0) (2022-04-05)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **logo:** fix img align ([51c81d9](https://github.com/MegafonWebLab/megafon-ui/commit/51c81d9e2edb9cf6b5d245ebb60d8a74f1e8bc1d))
|
|
12
|
+
* **promobadge:** fixed font color for dark theme ([88781d8](https://github.com/MegafonWebLab/megafon-ui/commit/88781d843e25028a5836b030861939cdf019760d))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* **switcher:** new props and colors ([adb5f34](https://github.com/MegafonWebLab/megafon-ui/commit/adb5f34e3e0949109445c75dc188d37171637af9))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
6
23
|
# [3.4.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.3.1...@megafon/ui-core@3.4.0) (2022-03-21)
|
|
7
24
|
|
|
8
25
|
|
|
@@ -1,48 +1,121 @@
|
|
|
1
1
|
.mfui-switcher {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
-
|
|
11
|
-
|
|
2
|
+
display: -webkit-box;
|
|
3
|
+
display: -ms-flexbox;
|
|
4
|
+
display: flex;
|
|
5
|
+
}
|
|
6
|
+
.mfui-switcher__content {
|
|
7
|
+
font-size: 15px;
|
|
8
|
+
line-height: 24px;
|
|
9
|
+
font-weight: 400;
|
|
10
|
+
-ms-flex-item-align: center;
|
|
11
|
+
align-self: center;
|
|
12
|
+
margin-left: 12px;
|
|
13
|
+
}
|
|
14
|
+
.mfui-switcher__content_size_small {
|
|
15
|
+
font-size: 12px;
|
|
16
|
+
line-height: 16px;
|
|
17
|
+
}
|
|
18
|
+
.mfui-switcher__content_left {
|
|
19
|
+
margin-right: 12px;
|
|
20
|
+
margin-left: 0;
|
|
21
|
+
}
|
|
22
|
+
.mfui-switcher__content_left + .mfui-switcher__input {
|
|
23
|
+
margin-left: auto;
|
|
12
24
|
}
|
|
13
25
|
.mfui-switcher__pointer {
|
|
14
26
|
position: relative;
|
|
15
|
-
top:
|
|
16
|
-
left:
|
|
27
|
+
top: 2px;
|
|
28
|
+
left: 2px;
|
|
17
29
|
width: 24px;
|
|
18
30
|
height: 24px;
|
|
19
|
-
border: 1px solid var(--stcBlack20);
|
|
20
31
|
border-radius: 50%;
|
|
21
|
-
background-color: var(--
|
|
22
|
-
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 1px rgba(0, 0, 0, 0.05);
|
|
23
|
-
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 1px rgba(0, 0, 0, 0.05);
|
|
32
|
+
background-color: var(--stcWhite);
|
|
24
33
|
-webkit-transition: all 0.3s;
|
|
25
34
|
transition: all 0.3s;
|
|
26
35
|
}
|
|
27
|
-
.mfui-
|
|
36
|
+
.mfui-switcher__loader {
|
|
37
|
+
position: absolute;
|
|
38
|
+
top: 0;
|
|
39
|
+
right: 0;
|
|
40
|
+
bottom: 0;
|
|
41
|
+
left: 0;
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
}
|
|
44
|
+
.mfui-switcher__loader:before {
|
|
45
|
+
content: '';
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 0;
|
|
48
|
+
bottom: 0;
|
|
49
|
+
left: 0;
|
|
50
|
+
width: 300%;
|
|
51
|
+
height: 100%;
|
|
52
|
+
background: -webkit-gradient(linear, left top, right top, from(var(--spbSky1)), color-stop(16%, var(--spbSky2)), color-stop(33%, var(--spbSky1)), color-stop(50%, var(--spbSky2)), color-stop(66%, var(--spbSky1)), color-stop(82%, var(--spbSky2)), to(var(--spbSky1)));
|
|
53
|
+
background: linear-gradient(90deg, var(--spbSky1) 0%, var(--spbSky2) 16%, var(--spbSky1) 33%, var(--spbSky2) 50%, var(--spbSky1) 66%, var(--spbSky2) 82%, var(--spbSky1) 100%);
|
|
54
|
+
-webkit-animation: shining 0.8s linear infinite;
|
|
55
|
+
animation: shining 0.8s linear infinite;
|
|
56
|
+
}
|
|
57
|
+
@-webkit-keyframes shining {
|
|
58
|
+
0% {
|
|
59
|
+
-webkit-transform: translateX(-33%);
|
|
60
|
+
transform: translateX(-33%);
|
|
61
|
+
}
|
|
62
|
+
100% {
|
|
63
|
+
-webkit-transform: translateX(0);
|
|
64
|
+
transform: translateX(0);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
@keyframes shining {
|
|
68
|
+
0% {
|
|
69
|
+
-webkit-transform: translateX(-33%);
|
|
70
|
+
transform: translateX(-33%);
|
|
71
|
+
}
|
|
72
|
+
100% {
|
|
73
|
+
-webkit-transform: translateX(0);
|
|
74
|
+
transform: translateX(0);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
.mfui-switcher__input {
|
|
78
|
+
position: relative;
|
|
79
|
+
-ms-flex-item-align: start;
|
|
80
|
+
align-self: flex-start;
|
|
81
|
+
width: 48px;
|
|
82
|
+
min-width: 48px;
|
|
83
|
+
height: 28px;
|
|
84
|
+
border-radius: 15.5px;
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
background-color: var(--spbSky1);
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
-webkit-transition: background-color 0.3s;
|
|
89
|
+
transition: background-color 0.3s;
|
|
90
|
+
}
|
|
91
|
+
.mfui-switcher__input_disabled {
|
|
28
92
|
background-color: var(--spbSky1);
|
|
29
93
|
}
|
|
30
|
-
.mfui-
|
|
94
|
+
.mfui-switcher__input_disabled,
|
|
95
|
+
.mfui-switcher__input_loaded {
|
|
96
|
+
cursor: default;
|
|
97
|
+
}
|
|
98
|
+
.mfui-switcher__input:hover:not(.mfui-switcher__input_disabled) {
|
|
99
|
+
background-color: var(--spbSky2);
|
|
100
|
+
}
|
|
101
|
+
.mfui-switcher__input_checked:not(.mfui-switcher__input_disabled) {
|
|
31
102
|
border-color: var(--brandGreen);
|
|
32
103
|
background-color: var(--brandGreen);
|
|
33
104
|
}
|
|
34
|
-
.mfui-
|
|
35
|
-
left: 21px;
|
|
36
|
-
}
|
|
37
|
-
.mfui-switcher_checked.mfui-switcher_no-touch:hover {
|
|
105
|
+
.mfui-switcher__input_checked:hover:not(.mfui-switcher__input_disabled) {
|
|
38
106
|
border-color: var(--buttonHoverGreen);
|
|
39
107
|
background-color: var(--buttonHoverGreen);
|
|
40
108
|
}
|
|
41
|
-
.mfui-
|
|
42
|
-
background-color: var(--spbSky1);
|
|
43
|
-
cursor: default;
|
|
44
|
-
}
|
|
45
|
-
.mfui-switcher_disabled.mfui-switcher_checked.mfui-switcher_no-touch {
|
|
46
|
-
border-color: var(--spbSky2);
|
|
109
|
+
.mfui-switcher__input_disabled .mfui-switcher__pointer {
|
|
47
110
|
background-color: var(--spbSky2);
|
|
48
111
|
}
|
|
112
|
+
.mfui-switcher__input_checked .mfui-switcher__pointer {
|
|
113
|
+
left: 22px;
|
|
114
|
+
}
|
|
115
|
+
.mfui-switcher__input_checked .mfui-switcher__loader:before {
|
|
116
|
+
background: -webkit-gradient(linear, left top, right top, from(var(--brandGreen)), color-stop(16%, var(--buttonHoverGreen)), color-stop(33%, var(--brandGreen)), color-stop(50%, var(--buttonHoverGreen)), color-stop(66%, var(--brandGreen)), color-stop(82%, var(--buttonHoverGreen)), to(var(--brandGreen)));
|
|
117
|
+
background: linear-gradient(90deg, var(--brandGreen) 0%, var(--buttonHoverGreen) 16%, var(--brandGreen) 33%, var(--buttonHoverGreen) 50%, var(--brandGreen) 66%, var(--buttonHoverGreen) 82%, var(--brandGreen) 100%);
|
|
118
|
+
}
|
|
119
|
+
.mfui-switcher_disabled .mfui-switcher__content {
|
|
120
|
+
color: var(--spbSky3);
|
|
121
|
+
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { AccessibilityEventType } from '@megafon/ui-helpers';
|
|
2
3
|
import './Switcher.less';
|
|
3
4
|
export interface ISwitcherProps {
|
|
4
5
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
@@ -11,8 +12,14 @@ export interface ISwitcherProps {
|
|
|
11
12
|
checked?: boolean;
|
|
12
13
|
/** Отключение переключателя */
|
|
13
14
|
disabled?: boolean;
|
|
15
|
+
/** Cостояние загрузки */
|
|
16
|
+
showLoader?: boolean;
|
|
17
|
+
/** Размер текста лейбла */
|
|
18
|
+
textSize?: 'small' | 'medium';
|
|
19
|
+
/** Позиция лейбла относительно свитчера */
|
|
20
|
+
textPosition?: 'left' | 'right';
|
|
14
21
|
/** Обработчик изменения элемента */
|
|
15
|
-
onChange?: (e:
|
|
22
|
+
onChange?: (e: AccessibilityEventType) => void;
|
|
16
23
|
}
|
|
17
24
|
declare const Switcher: React.FC<ISwitcherProps>;
|
|
18
25
|
export default Switcher;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
|
|
3
|
+
import { checkEventIsClickOrEnterPress, cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
|
|
4
4
|
import * as PropTypes from 'prop-types';
|
|
5
5
|
import "./Switcher.css";
|
|
6
6
|
var cn = cnCreate('mfui-switcher');
|
|
@@ -12,27 +12,53 @@ var Switcher = function Switcher(_ref) {
|
|
|
12
12
|
checked = _ref$checked === void 0 ? false : _ref$checked,
|
|
13
13
|
_ref$disabled = _ref.disabled,
|
|
14
14
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
15
|
+
_ref$showLoader = _ref.showLoader,
|
|
16
|
+
showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
|
|
17
|
+
children = _ref.children,
|
|
18
|
+
_ref$textSize = _ref.textSize,
|
|
19
|
+
textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
|
|
20
|
+
_ref$textPosition = _ref.textPosition,
|
|
21
|
+
textPosition = _ref$textPosition === void 0 ? 'right' : _ref$textPosition,
|
|
15
22
|
onChange = _ref.onChange;
|
|
16
23
|
var isTouch = detectTouch();
|
|
17
|
-
|
|
18
|
-
var
|
|
19
|
-
|
|
24
|
+
var isLeftContent = !!children && textPosition === 'left';
|
|
25
|
+
var isRightContent = !!children && textPosition === 'right';
|
|
26
|
+
var isInteractiveDisabled = showLoader || disabled;
|
|
27
|
+
var handleChange = React.useCallback(function (e) {
|
|
28
|
+
if (isInteractiveDisabled || !checkEventIsClickOrEnterPress(e)) {
|
|
20
29
|
return;
|
|
21
30
|
}
|
|
22
31
|
|
|
23
32
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
33
|
+
}, [isInteractiveDisabled, onChange]);
|
|
34
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
27
35
|
className: cn({
|
|
36
|
+
disabled: disabled
|
|
37
|
+
}, className)
|
|
38
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isLeftContent && /*#__PURE__*/React.createElement("div", {
|
|
39
|
+
className: cn('content', {
|
|
40
|
+
size: textSize,
|
|
41
|
+
left: true
|
|
42
|
+
})
|
|
43
|
+
}, children), /*#__PURE__*/React.createElement("div", {
|
|
44
|
+
className: cn('input', {
|
|
28
45
|
checked: checked,
|
|
29
46
|
disabled: disabled,
|
|
47
|
+
loaded: showLoader,
|
|
30
48
|
'no-touch': !isTouch
|
|
31
|
-
}
|
|
32
|
-
onClick: handleChange
|
|
49
|
+
}),
|
|
50
|
+
onClick: handleChange,
|
|
51
|
+
onKeyDown: handleChange,
|
|
52
|
+
tabIndex: isInteractiveDisabled ? undefined : 0
|
|
53
|
+
}, showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
|
|
54
|
+
className: cn('loader')
|
|
33
55
|
}), /*#__PURE__*/React.createElement("div", {
|
|
34
56
|
className: cn('pointer')
|
|
35
|
-
}))
|
|
57
|
+
})), isRightContent && /*#__PURE__*/React.createElement("div", {
|
|
58
|
+
className: cn('content', {
|
|
59
|
+
size: textSize
|
|
60
|
+
})
|
|
61
|
+
}, children));
|
|
36
62
|
};
|
|
37
63
|
|
|
38
64
|
Switcher.propTypes = {
|
|
@@ -40,8 +66,11 @@ Switcher.propTypes = {
|
|
|
40
66
|
root: PropTypes.objectOf(PropTypes.string.isRequired)
|
|
41
67
|
}),
|
|
42
68
|
className: PropTypes.string,
|
|
69
|
+
textSize: PropTypes.oneOf(['small', 'medium']),
|
|
70
|
+
textPosition: PropTypes.oneOf(['left', 'right']),
|
|
43
71
|
checked: PropTypes.bool,
|
|
44
72
|
disabled: PropTypes.bool,
|
|
73
|
+
showLoader: PropTypes.bool,
|
|
45
74
|
onChange: PropTypes.func
|
|
46
75
|
};
|
|
47
76
|
export default Switcher;
|
|
@@ -1,48 +1,121 @@
|
|
|
1
1
|
.mfui-switcher {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
-
|
|
11
|
-
|
|
2
|
+
display: -webkit-box;
|
|
3
|
+
display: -ms-flexbox;
|
|
4
|
+
display: flex;
|
|
5
|
+
}
|
|
6
|
+
.mfui-switcher__content {
|
|
7
|
+
font-size: 15px;
|
|
8
|
+
line-height: 24px;
|
|
9
|
+
font-weight: 400;
|
|
10
|
+
-ms-flex-item-align: center;
|
|
11
|
+
align-self: center;
|
|
12
|
+
margin-left: 12px;
|
|
13
|
+
}
|
|
14
|
+
.mfui-switcher__content_size_small {
|
|
15
|
+
font-size: 12px;
|
|
16
|
+
line-height: 16px;
|
|
17
|
+
}
|
|
18
|
+
.mfui-switcher__content_left {
|
|
19
|
+
margin-right: 12px;
|
|
20
|
+
margin-left: 0;
|
|
21
|
+
}
|
|
22
|
+
.mfui-switcher__content_left + .mfui-switcher__input {
|
|
23
|
+
margin-left: auto;
|
|
12
24
|
}
|
|
13
25
|
.mfui-switcher__pointer {
|
|
14
26
|
position: relative;
|
|
15
|
-
top:
|
|
16
|
-
left:
|
|
27
|
+
top: 2px;
|
|
28
|
+
left: 2px;
|
|
17
29
|
width: 24px;
|
|
18
30
|
height: 24px;
|
|
19
|
-
border: 1px solid var(--stcBlack20);
|
|
20
31
|
border-radius: 50%;
|
|
21
|
-
background-color: var(--
|
|
22
|
-
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 1px rgba(0, 0, 0, 0.05);
|
|
23
|
-
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 1px rgba(0, 0, 0, 0.05);
|
|
32
|
+
background-color: var(--stcWhite);
|
|
24
33
|
-webkit-transition: all 0.3s;
|
|
25
34
|
transition: all 0.3s;
|
|
26
35
|
}
|
|
27
|
-
.mfui-
|
|
36
|
+
.mfui-switcher__loader {
|
|
37
|
+
position: absolute;
|
|
38
|
+
top: 0;
|
|
39
|
+
right: 0;
|
|
40
|
+
bottom: 0;
|
|
41
|
+
left: 0;
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
}
|
|
44
|
+
.mfui-switcher__loader:before {
|
|
45
|
+
content: '';
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 0;
|
|
48
|
+
bottom: 0;
|
|
49
|
+
left: 0;
|
|
50
|
+
width: 300%;
|
|
51
|
+
height: 100%;
|
|
52
|
+
background: -webkit-gradient(linear, left top, right top, from(var(--spbSky1)), color-stop(16%, var(--spbSky2)), color-stop(33%, var(--spbSky1)), color-stop(50%, var(--spbSky2)), color-stop(66%, var(--spbSky1)), color-stop(82%, var(--spbSky2)), to(var(--spbSky1)));
|
|
53
|
+
background: linear-gradient(90deg, var(--spbSky1) 0%, var(--spbSky2) 16%, var(--spbSky1) 33%, var(--spbSky2) 50%, var(--spbSky1) 66%, var(--spbSky2) 82%, var(--spbSky1) 100%);
|
|
54
|
+
-webkit-animation: shining 0.8s linear infinite;
|
|
55
|
+
animation: shining 0.8s linear infinite;
|
|
56
|
+
}
|
|
57
|
+
@-webkit-keyframes shining {
|
|
58
|
+
0% {
|
|
59
|
+
-webkit-transform: translateX(-33%);
|
|
60
|
+
transform: translateX(-33%);
|
|
61
|
+
}
|
|
62
|
+
100% {
|
|
63
|
+
-webkit-transform: translateX(0);
|
|
64
|
+
transform: translateX(0);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
@keyframes shining {
|
|
68
|
+
0% {
|
|
69
|
+
-webkit-transform: translateX(-33%);
|
|
70
|
+
transform: translateX(-33%);
|
|
71
|
+
}
|
|
72
|
+
100% {
|
|
73
|
+
-webkit-transform: translateX(0);
|
|
74
|
+
transform: translateX(0);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
.mfui-switcher__input {
|
|
78
|
+
position: relative;
|
|
79
|
+
-ms-flex-item-align: start;
|
|
80
|
+
align-self: flex-start;
|
|
81
|
+
width: 48px;
|
|
82
|
+
min-width: 48px;
|
|
83
|
+
height: 28px;
|
|
84
|
+
border-radius: 15.5px;
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
background-color: var(--spbSky1);
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
-webkit-transition: background-color 0.3s;
|
|
89
|
+
transition: background-color 0.3s;
|
|
90
|
+
}
|
|
91
|
+
.mfui-switcher__input_disabled {
|
|
28
92
|
background-color: var(--spbSky1);
|
|
29
93
|
}
|
|
30
|
-
.mfui-
|
|
94
|
+
.mfui-switcher__input_disabled,
|
|
95
|
+
.mfui-switcher__input_loaded {
|
|
96
|
+
cursor: default;
|
|
97
|
+
}
|
|
98
|
+
.mfui-switcher__input:hover:not(.mfui-switcher__input_disabled) {
|
|
99
|
+
background-color: var(--spbSky2);
|
|
100
|
+
}
|
|
101
|
+
.mfui-switcher__input_checked:not(.mfui-switcher__input_disabled) {
|
|
31
102
|
border-color: var(--brandGreen);
|
|
32
103
|
background-color: var(--brandGreen);
|
|
33
104
|
}
|
|
34
|
-
.mfui-
|
|
35
|
-
left: 21px;
|
|
36
|
-
}
|
|
37
|
-
.mfui-switcher_checked.mfui-switcher_no-touch:hover {
|
|
105
|
+
.mfui-switcher__input_checked:hover:not(.mfui-switcher__input_disabled) {
|
|
38
106
|
border-color: var(--buttonHoverGreen);
|
|
39
107
|
background-color: var(--buttonHoverGreen);
|
|
40
108
|
}
|
|
41
|
-
.mfui-
|
|
42
|
-
background-color: var(--spbSky1);
|
|
43
|
-
cursor: default;
|
|
44
|
-
}
|
|
45
|
-
.mfui-switcher_disabled.mfui-switcher_checked.mfui-switcher_no-touch {
|
|
46
|
-
border-color: var(--spbSky2);
|
|
109
|
+
.mfui-switcher__input_disabled .mfui-switcher__pointer {
|
|
47
110
|
background-color: var(--spbSky2);
|
|
48
111
|
}
|
|
112
|
+
.mfui-switcher__input_checked .mfui-switcher__pointer {
|
|
113
|
+
left: 22px;
|
|
114
|
+
}
|
|
115
|
+
.mfui-switcher__input_checked .mfui-switcher__loader:before {
|
|
116
|
+
background: -webkit-gradient(linear, left top, right top, from(var(--brandGreen)), color-stop(16%, var(--buttonHoverGreen)), color-stop(33%, var(--brandGreen)), color-stop(50%, var(--buttonHoverGreen)), color-stop(66%, var(--brandGreen)), color-stop(82%, var(--buttonHoverGreen)), to(var(--brandGreen)));
|
|
117
|
+
background: linear-gradient(90deg, var(--brandGreen) 0%, var(--buttonHoverGreen) 16%, var(--brandGreen) 33%, var(--buttonHoverGreen) 50%, var(--brandGreen) 66%, var(--buttonHoverGreen) 82%, var(--brandGreen) 100%);
|
|
118
|
+
}
|
|
119
|
+
.mfui-switcher_disabled .mfui-switcher__content {
|
|
120
|
+
color: var(--spbSky3);
|
|
121
|
+
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { AccessibilityEventType } from '@megafon/ui-helpers';
|
|
2
3
|
import './Switcher.less';
|
|
3
4
|
export interface ISwitcherProps {
|
|
4
5
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
@@ -11,8 +12,14 @@ export interface ISwitcherProps {
|
|
|
11
12
|
checked?: boolean;
|
|
12
13
|
/** Отключение переключателя */
|
|
13
14
|
disabled?: boolean;
|
|
15
|
+
/** Cостояние загрузки */
|
|
16
|
+
showLoader?: boolean;
|
|
17
|
+
/** Размер текста лейбла */
|
|
18
|
+
textSize?: 'small' | 'medium';
|
|
19
|
+
/** Позиция лейбла относительно свитчера */
|
|
20
|
+
textPosition?: 'left' | 'right';
|
|
14
21
|
/** Обработчик изменения элемента */
|
|
15
|
-
onChange?: (e:
|
|
22
|
+
onChange?: (e: AccessibilityEventType) => void;
|
|
16
23
|
}
|
|
17
24
|
declare const Switcher: React.FC<ISwitcherProps>;
|
|
18
25
|
export default Switcher;
|
|
@@ -30,27 +30,53 @@ var Switcher = function Switcher(_ref) {
|
|
|
30
30
|
checked = _ref$checked === void 0 ? false : _ref$checked,
|
|
31
31
|
_ref$disabled = _ref.disabled,
|
|
32
32
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
33
|
+
_ref$showLoader = _ref.showLoader,
|
|
34
|
+
showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
|
|
35
|
+
children = _ref.children,
|
|
36
|
+
_ref$textSize = _ref.textSize,
|
|
37
|
+
textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
|
|
38
|
+
_ref$textPosition = _ref.textPosition,
|
|
39
|
+
textPosition = _ref$textPosition === void 0 ? 'right' : _ref$textPosition,
|
|
33
40
|
onChange = _ref.onChange;
|
|
34
41
|
var isTouch = (0, _uiHelpers.detectTouch)();
|
|
35
|
-
|
|
36
|
-
var
|
|
37
|
-
|
|
42
|
+
var isLeftContent = !!children && textPosition === 'left';
|
|
43
|
+
var isRightContent = !!children && textPosition === 'right';
|
|
44
|
+
var isInteractiveDisabled = showLoader || disabled;
|
|
45
|
+
var handleChange = React.useCallback(function (e) {
|
|
46
|
+
if (isInteractiveDisabled || !(0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
|
|
38
47
|
return;
|
|
39
48
|
}
|
|
40
49
|
|
|
41
50
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
51
|
+
}, [isInteractiveDisabled, onChange]);
|
|
52
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
|
45
53
|
className: cn({
|
|
54
|
+
disabled: disabled
|
|
55
|
+
}, className)
|
|
56
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isLeftContent && /*#__PURE__*/React.createElement("div", {
|
|
57
|
+
className: cn('content', {
|
|
58
|
+
size: textSize,
|
|
59
|
+
left: true
|
|
60
|
+
})
|
|
61
|
+
}, children), /*#__PURE__*/React.createElement("div", {
|
|
62
|
+
className: cn('input', {
|
|
46
63
|
checked: checked,
|
|
47
64
|
disabled: disabled,
|
|
65
|
+
loaded: showLoader,
|
|
48
66
|
'no-touch': !isTouch
|
|
49
|
-
}
|
|
50
|
-
onClick: handleChange
|
|
67
|
+
}),
|
|
68
|
+
onClick: handleChange,
|
|
69
|
+
onKeyDown: handleChange,
|
|
70
|
+
tabIndex: isInteractiveDisabled ? undefined : 0
|
|
71
|
+
}, showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
|
|
72
|
+
className: cn('loader')
|
|
51
73
|
}), /*#__PURE__*/React.createElement("div", {
|
|
52
74
|
className: cn('pointer')
|
|
53
|
-
}))
|
|
75
|
+
})), isRightContent && /*#__PURE__*/React.createElement("div", {
|
|
76
|
+
className: cn('content', {
|
|
77
|
+
size: textSize
|
|
78
|
+
})
|
|
79
|
+
}, children));
|
|
54
80
|
};
|
|
55
81
|
|
|
56
82
|
Switcher.propTypes = {
|
|
@@ -58,8 +84,11 @@ Switcher.propTypes = {
|
|
|
58
84
|
root: PropTypes.objectOf(PropTypes.string.isRequired)
|
|
59
85
|
}),
|
|
60
86
|
className: PropTypes.string,
|
|
87
|
+
textSize: PropTypes.oneOf(['small', 'medium']),
|
|
88
|
+
textPosition: PropTypes.oneOf(['left', 'right']),
|
|
61
89
|
checked: PropTypes.bool,
|
|
62
90
|
disabled: PropTypes.bool,
|
|
91
|
+
showLoader: PropTypes.bool,
|
|
63
92
|
onChange: PropTypes.func
|
|
64
93
|
};
|
|
65
94
|
var _default = Switcher;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"styles"
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
"react-popper": "^2.2.3",
|
|
98
98
|
"swiper": "^6.5.6"
|
|
99
99
|
},
|
|
100
|
-
"gitHead": "
|
|
100
|
+
"gitHead": "48ac683c2daf04dfdc42d1359024800699f2e7dc"
|
|
101
101
|
}
|