@megafon/ui-core 5.2.3 → 5.3.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 +11 -0
- package/dist/es/components/Selector/Selector.css +98 -0
- package/dist/es/components/Selector/Selector.d.ts +39 -0
- package/dist/es/components/Selector/Selector.js +94 -0
- package/dist/es/components/Selector/doc/Selector.example.css +14 -0
- package/dist/es/index.d.ts +1 -0
- package/dist/es/index.js +1 -0
- package/dist/lib/components/Selector/Selector.css +98 -0
- package/dist/lib/components/Selector/Selector.d.ts +39 -0
- package/dist/lib/components/Selector/Selector.js +118 -0
- package/dist/lib/components/Selector/doc/Selector.example.css +14 -0
- package/dist/lib/index.d.ts +1 -0
- package/dist/lib/index.js +8 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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
|
+
# [5.3.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.2.3...@megafon/ui-core@5.3.0) (2023-11-08)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **selector:** create component Selector ([73d6aec](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/73d6aec573fe500471f0b557f0cbe0a9485b1fa3))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [5.2.3](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.2.2...@megafon/ui-core@5.2.3) (2023-10-17)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
.mfui-selector__input {
|
|
2
|
+
position: absolute;
|
|
3
|
+
top: 0;
|
|
4
|
+
left: 0;
|
|
5
|
+
z-index: -1;
|
|
6
|
+
width: 0;
|
|
7
|
+
height: 0;
|
|
8
|
+
opacity: 0;
|
|
9
|
+
}
|
|
10
|
+
.mfui-selector__label {
|
|
11
|
+
position: relative;
|
|
12
|
+
display: -webkit-inline-box;
|
|
13
|
+
display: -ms-inline-flexbox;
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
-webkit-box-align: center;
|
|
16
|
+
-ms-flex-align: center;
|
|
17
|
+
align-items: center;
|
|
18
|
+
outline: none;
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
}
|
|
21
|
+
.mfui-selector__custom-input {
|
|
22
|
+
position: absolute;
|
|
23
|
+
display: -webkit-box;
|
|
24
|
+
display: -ms-flexbox;
|
|
25
|
+
display: flex;
|
|
26
|
+
-webkit-box-align: center;
|
|
27
|
+
-ms-flex-align: center;
|
|
28
|
+
align-items: center;
|
|
29
|
+
-webkit-box-pack: center;
|
|
30
|
+
-ms-flex-pack: center;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
-webkit-box-sizing: border-box;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
width: 20px;
|
|
35
|
+
height: 20px;
|
|
36
|
+
border: 2px solid;
|
|
37
|
+
border-color: var(--spbSky2);
|
|
38
|
+
border-radius: 50%;
|
|
39
|
+
background-color: var(--base);
|
|
40
|
+
-webkit-transition: background-color, border-color;
|
|
41
|
+
transition: background-color, border-color;
|
|
42
|
+
-webkit-transition-duration: 0.3s;
|
|
43
|
+
transition-duration: 0.3s;
|
|
44
|
+
}
|
|
45
|
+
.mfui-selector__icon {
|
|
46
|
+
display: block;
|
|
47
|
+
width: 20px;
|
|
48
|
+
height: 20px;
|
|
49
|
+
opacity: 0;
|
|
50
|
+
-webkit-transition: fill, opacity;
|
|
51
|
+
transition: fill, opacity;
|
|
52
|
+
-webkit-transition-duration: 0.3s;
|
|
53
|
+
transition-duration: 0.3s;
|
|
54
|
+
fill: var(--stcWhite);
|
|
55
|
+
}
|
|
56
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
|
|
57
|
+
border-color: var(--buttonHoverGreen);
|
|
58
|
+
}
|
|
59
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
|
|
60
|
+
border-color: var(--buttonDown);
|
|
61
|
+
}
|
|
62
|
+
.mfui-selector__label_disabled {
|
|
63
|
+
cursor: default;
|
|
64
|
+
}
|
|
65
|
+
.mfui-selector__label_disabled .mfui-selector__custom-input {
|
|
66
|
+
border-color: var(--spbSky2);
|
|
67
|
+
background-color: var(--spbSky1);
|
|
68
|
+
}
|
|
69
|
+
.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input {
|
|
70
|
+
background-color: var(--spbSky2);
|
|
71
|
+
}
|
|
72
|
+
.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
|
|
73
|
+
opacity: 1;
|
|
74
|
+
}
|
|
75
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
|
|
76
|
+
border-color: var(--buttonHoverGreen);
|
|
77
|
+
background-color: var(--buttonHoverGreen);
|
|
78
|
+
}
|
|
79
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
|
|
80
|
+
opacity: 1;
|
|
81
|
+
}
|
|
82
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
|
|
83
|
+
border-color: var(--buttonDown);
|
|
84
|
+
background-color: var(--buttonDown);
|
|
85
|
+
}
|
|
86
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
|
|
87
|
+
opacity: 1;
|
|
88
|
+
}
|
|
89
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
|
|
90
|
+
border-color: var(--brandGreen);
|
|
91
|
+
background-color: var(--brandGreen);
|
|
92
|
+
}
|
|
93
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
|
|
94
|
+
opacity: 1;
|
|
95
|
+
}
|
|
96
|
+
.mfui-selector__label_error .mfui-selector__custom-input {
|
|
97
|
+
border-color: var(--fury);
|
|
98
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import './Selector.less';
|
|
3
|
+
export interface ISelectorProps {
|
|
4
|
+
/** Базовый тип компонента */
|
|
5
|
+
type?: 'radio' | 'checkbox';
|
|
6
|
+
/** Значение */
|
|
7
|
+
value: string;
|
|
8
|
+
/** Имя для тега form */
|
|
9
|
+
name?: string;
|
|
10
|
+
/** Управление состоянием вкл/выкл компонента */
|
|
11
|
+
checked?: boolean;
|
|
12
|
+
/** Управление состоянием компонента при типе checkbox */
|
|
13
|
+
checkedOptions?: string[];
|
|
14
|
+
/** Отключение компонента */
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
/** Отобразить компонент в состоянии ошибки */
|
|
17
|
+
error?: boolean;
|
|
18
|
+
/** Дополнительный класс корневого элемента */
|
|
19
|
+
className?: string;
|
|
20
|
+
/** Дополнительные классы для внутренних элементов */
|
|
21
|
+
classes?: {
|
|
22
|
+
label?: string;
|
|
23
|
+
customInput?: string;
|
|
24
|
+
};
|
|
25
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
|
26
|
+
dataAttrs?: {
|
|
27
|
+
root?: Record<string, string>;
|
|
28
|
+
label?: Record<string, string>;
|
|
29
|
+
input?: Record<string, string>;
|
|
30
|
+
customInput?: Record<string, string>;
|
|
31
|
+
};
|
|
32
|
+
children?: React.ReactNode;
|
|
33
|
+
/** Обработчик изменения значения 'value' */
|
|
34
|
+
onChange?: (value: string | string[]) => void;
|
|
35
|
+
/** Ссылка на input */
|
|
36
|
+
inputRef?: React.Ref<HTMLInputElement>;
|
|
37
|
+
}
|
|
38
|
+
declare const Selector: React.FC<ISelectorProps>;
|
|
39
|
+
export default Selector;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "core-js/modules/es.function.name.js";
|
|
4
|
+
import "core-js/modules/es.array.includes.js";
|
|
5
|
+
import "core-js/modules/es.string.includes.js";
|
|
6
|
+
import "core-js/modules/es.array.filter.js";
|
|
7
|
+
import "core-js/modules/es.array.concat.js";
|
|
8
|
+
import * as React from 'react';
|
|
9
|
+
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
|
10
|
+
import * as PropTypes from 'prop-types';
|
|
11
|
+
import "./Selector.css";
|
|
12
|
+
|
|
13
|
+
var CheckedIcon = function CheckedIcon(props) {
|
|
14
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
15
|
+
viewBox: "0 0 20 20"
|
|
16
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
17
|
+
d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
|
|
18
|
+
}));
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
var cn = cnCreate('mfui-selector');
|
|
22
|
+
|
|
23
|
+
var Selector = function Selector(_ref) {
|
|
24
|
+
var _ref$type = _ref.type,
|
|
25
|
+
type = _ref$type === void 0 ? 'radio' : _ref$type,
|
|
26
|
+
value = _ref.value,
|
|
27
|
+
name = _ref.name,
|
|
28
|
+
checked = _ref.checked,
|
|
29
|
+
_ref$checkedOptions = _ref.checkedOptions,
|
|
30
|
+
checkedOptions = _ref$checkedOptions === void 0 ? [] : _ref$checkedOptions,
|
|
31
|
+
_ref$disabled = _ref.disabled,
|
|
32
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
33
|
+
error = _ref.error,
|
|
34
|
+
className = _ref.className,
|
|
35
|
+
_ref$classes = _ref.classes,
|
|
36
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
|
37
|
+
dataAttrs = _ref.dataAttrs,
|
|
38
|
+
children = _ref.children,
|
|
39
|
+
onChange = _ref.onChange,
|
|
40
|
+
inputRef = _ref.inputRef;
|
|
41
|
+
|
|
42
|
+
var handleChange = function handleChange() {
|
|
43
|
+
if (type === 'radio') {
|
|
44
|
+
return onChange === null || onChange === void 0 ? void 0 : onChange(value);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
var isChecked = checkedOptions.includes(value);
|
|
48
|
+
var newCheckedOptions = isChecked ? checkedOptions.filter(function (option) {
|
|
49
|
+
return option !== value;
|
|
50
|
+
}) : [].concat(_toConsumableArray(checkedOptions), [value]);
|
|
51
|
+
return onChange === null || onChange === void 0 ? void 0 : onChange(newCheckedOptions);
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
55
|
+
className: cn('', className)
|
|
56
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", _extends({
|
|
57
|
+
className: cn('label', {
|
|
58
|
+
disabled: disabled,
|
|
59
|
+
error: error
|
|
60
|
+
}, classes.label)
|
|
61
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label)), /*#__PURE__*/React.createElement("input", _extends({
|
|
62
|
+
className: cn('input'),
|
|
63
|
+
type: type,
|
|
64
|
+
name: name,
|
|
65
|
+
value: value,
|
|
66
|
+
checked: type === 'radio' ? checked : checkedOptions.includes(value),
|
|
67
|
+
disabled: disabled,
|
|
68
|
+
onChange: handleChange,
|
|
69
|
+
ref: inputRef
|
|
70
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input))), /*#__PURE__*/React.createElement("div", _extends({
|
|
71
|
+
className: cn('custom-input', classes.customInput)
|
|
72
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput)), /*#__PURE__*/React.createElement(CheckedIcon, {
|
|
73
|
+
className: cn('icon')
|
|
74
|
+
})), children));
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
Selector.propTypes = {
|
|
78
|
+
type: PropTypes.oneOf(['radio', 'checkbox']),
|
|
79
|
+
value: PropTypes.string.isRequired,
|
|
80
|
+
name: PropTypes.string,
|
|
81
|
+
disabled: PropTypes.bool,
|
|
82
|
+
checked: PropTypes.bool,
|
|
83
|
+
checkedOptions: PropTypes.arrayOf(PropTypes.string.isRequired),
|
|
84
|
+
error: PropTypes.bool,
|
|
85
|
+
className: PropTypes.string,
|
|
86
|
+
classes: PropTypes.objectOf(PropTypes.string),
|
|
87
|
+
dataAttrs: PropTypes.objectOf(PropTypes.object),
|
|
88
|
+
children: PropTypes.node,
|
|
89
|
+
onChange: PropTypes.func,
|
|
90
|
+
inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
|
91
|
+
current: PropTypes.elementType
|
|
92
|
+
}), PropTypes.any])])
|
|
93
|
+
};
|
|
94
|
+
export default Selector;
|
package/dist/es/index.d.ts
CHANGED
|
@@ -35,6 +35,7 @@ export { default as PromoBadge } from './components/Badges/components/PromoBadge
|
|
|
35
35
|
export { default as RadioButton } from './components/RadioButton/RadioButton';
|
|
36
36
|
export { default as Search } from './components/Search/Search';
|
|
37
37
|
export { default as Select } from './components/Select/Select';
|
|
38
|
+
export { default as Selector } from './components/Selector/Selector';
|
|
38
39
|
export { default as selectReducer } from './components/Select/reducer/selectReducer';
|
|
39
40
|
export { default as Snackbar } from './components/Snackbar/Snackbar';
|
|
40
41
|
export { default as SnackbarTimer } from './components/Snackbar/SnackbarTimer/SnackbarTimer';
|
package/dist/es/index.js
CHANGED
|
@@ -35,6 +35,7 @@ export { default as PromoBadge } from "./components/Badges/components/PromoBadge
|
|
|
35
35
|
export { default as RadioButton } from "./components/RadioButton/RadioButton";
|
|
36
36
|
export { default as Search } from "./components/Search/Search";
|
|
37
37
|
export { default as Select } from "./components/Select/Select";
|
|
38
|
+
export { default as Selector } from "./components/Selector/Selector";
|
|
38
39
|
export { default as selectReducer } from "./components/Select/reducer/selectReducer";
|
|
39
40
|
export { default as Snackbar } from "./components/Snackbar/Snackbar";
|
|
40
41
|
export { default as SnackbarTimer } from "./components/Snackbar/SnackbarTimer/SnackbarTimer";
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
.mfui-selector__input {
|
|
2
|
+
position: absolute;
|
|
3
|
+
top: 0;
|
|
4
|
+
left: 0;
|
|
5
|
+
z-index: -1;
|
|
6
|
+
width: 0;
|
|
7
|
+
height: 0;
|
|
8
|
+
opacity: 0;
|
|
9
|
+
}
|
|
10
|
+
.mfui-selector__label {
|
|
11
|
+
position: relative;
|
|
12
|
+
display: -webkit-inline-box;
|
|
13
|
+
display: -ms-inline-flexbox;
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
-webkit-box-align: center;
|
|
16
|
+
-ms-flex-align: center;
|
|
17
|
+
align-items: center;
|
|
18
|
+
outline: none;
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
}
|
|
21
|
+
.mfui-selector__custom-input {
|
|
22
|
+
position: absolute;
|
|
23
|
+
display: -webkit-box;
|
|
24
|
+
display: -ms-flexbox;
|
|
25
|
+
display: flex;
|
|
26
|
+
-webkit-box-align: center;
|
|
27
|
+
-ms-flex-align: center;
|
|
28
|
+
align-items: center;
|
|
29
|
+
-webkit-box-pack: center;
|
|
30
|
+
-ms-flex-pack: center;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
-webkit-box-sizing: border-box;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
width: 20px;
|
|
35
|
+
height: 20px;
|
|
36
|
+
border: 2px solid;
|
|
37
|
+
border-color: var(--spbSky2);
|
|
38
|
+
border-radius: 50%;
|
|
39
|
+
background-color: var(--base);
|
|
40
|
+
-webkit-transition: background-color, border-color;
|
|
41
|
+
transition: background-color, border-color;
|
|
42
|
+
-webkit-transition-duration: 0.3s;
|
|
43
|
+
transition-duration: 0.3s;
|
|
44
|
+
}
|
|
45
|
+
.mfui-selector__icon {
|
|
46
|
+
display: block;
|
|
47
|
+
width: 20px;
|
|
48
|
+
height: 20px;
|
|
49
|
+
opacity: 0;
|
|
50
|
+
-webkit-transition: fill, opacity;
|
|
51
|
+
transition: fill, opacity;
|
|
52
|
+
-webkit-transition-duration: 0.3s;
|
|
53
|
+
transition-duration: 0.3s;
|
|
54
|
+
fill: var(--stcWhite);
|
|
55
|
+
}
|
|
56
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
|
|
57
|
+
border-color: var(--buttonHoverGreen);
|
|
58
|
+
}
|
|
59
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
|
|
60
|
+
border-color: var(--buttonDown);
|
|
61
|
+
}
|
|
62
|
+
.mfui-selector__label_disabled {
|
|
63
|
+
cursor: default;
|
|
64
|
+
}
|
|
65
|
+
.mfui-selector__label_disabled .mfui-selector__custom-input {
|
|
66
|
+
border-color: var(--spbSky2);
|
|
67
|
+
background-color: var(--spbSky1);
|
|
68
|
+
}
|
|
69
|
+
.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input {
|
|
70
|
+
background-color: var(--spbSky2);
|
|
71
|
+
}
|
|
72
|
+
.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
|
|
73
|
+
opacity: 1;
|
|
74
|
+
}
|
|
75
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
|
|
76
|
+
border-color: var(--buttonHoverGreen);
|
|
77
|
+
background-color: var(--buttonHoverGreen);
|
|
78
|
+
}
|
|
79
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
|
|
80
|
+
opacity: 1;
|
|
81
|
+
}
|
|
82
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
|
|
83
|
+
border-color: var(--buttonDown);
|
|
84
|
+
background-color: var(--buttonDown);
|
|
85
|
+
}
|
|
86
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
|
|
87
|
+
opacity: 1;
|
|
88
|
+
}
|
|
89
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
|
|
90
|
+
border-color: var(--brandGreen);
|
|
91
|
+
background-color: var(--brandGreen);
|
|
92
|
+
}
|
|
93
|
+
.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
|
|
94
|
+
opacity: 1;
|
|
95
|
+
}
|
|
96
|
+
.mfui-selector__label_error .mfui-selector__custom-input {
|
|
97
|
+
border-color: var(--fury);
|
|
98
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import './Selector.less';
|
|
3
|
+
export interface ISelectorProps {
|
|
4
|
+
/** Базовый тип компонента */
|
|
5
|
+
type?: 'radio' | 'checkbox';
|
|
6
|
+
/** Значение */
|
|
7
|
+
value: string;
|
|
8
|
+
/** Имя для тега form */
|
|
9
|
+
name?: string;
|
|
10
|
+
/** Управление состоянием вкл/выкл компонента */
|
|
11
|
+
checked?: boolean;
|
|
12
|
+
/** Управление состоянием компонента при типе checkbox */
|
|
13
|
+
checkedOptions?: string[];
|
|
14
|
+
/** Отключение компонента */
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
/** Отобразить компонент в состоянии ошибки */
|
|
17
|
+
error?: boolean;
|
|
18
|
+
/** Дополнительный класс корневого элемента */
|
|
19
|
+
className?: string;
|
|
20
|
+
/** Дополнительные классы для внутренних элементов */
|
|
21
|
+
classes?: {
|
|
22
|
+
label?: string;
|
|
23
|
+
customInput?: string;
|
|
24
|
+
};
|
|
25
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
|
26
|
+
dataAttrs?: {
|
|
27
|
+
root?: Record<string, string>;
|
|
28
|
+
label?: Record<string, string>;
|
|
29
|
+
input?: Record<string, string>;
|
|
30
|
+
customInput?: Record<string, string>;
|
|
31
|
+
};
|
|
32
|
+
children?: React.ReactNode;
|
|
33
|
+
/** Обработчик изменения значения 'value' */
|
|
34
|
+
onChange?: (value: string | string[]) => void;
|
|
35
|
+
/** Ссылка на input */
|
|
36
|
+
inputRef?: React.Ref<HTMLInputElement>;
|
|
37
|
+
}
|
|
38
|
+
declare const Selector: React.FC<ISelectorProps>;
|
|
39
|
+
export default Selector;
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
require("core-js/modules/es.function.name.js");
|
|
15
|
+
|
|
16
|
+
require("core-js/modules/es.array.includes.js");
|
|
17
|
+
|
|
18
|
+
require("core-js/modules/es.string.includes.js");
|
|
19
|
+
|
|
20
|
+
require("core-js/modules/es.array.filter.js");
|
|
21
|
+
|
|
22
|
+
require("core-js/modules/es.array.concat.js");
|
|
23
|
+
|
|
24
|
+
var React = _interopRequireWildcard(require("react"));
|
|
25
|
+
|
|
26
|
+
var _uiHelpers = require("@megafon/ui-helpers");
|
|
27
|
+
|
|
28
|
+
var PropTypes = _interopRequireWildcard(require("prop-types"));
|
|
29
|
+
|
|
30
|
+
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); }
|
|
31
|
+
|
|
32
|
+
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; }
|
|
33
|
+
|
|
34
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
35
|
+
|
|
36
|
+
var CheckedIcon = function CheckedIcon(props) {
|
|
37
|
+
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
38
|
+
viewBox: "0 0 20 20"
|
|
39
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
40
|
+
d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
|
|
41
|
+
}));
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
var cn = (0, _uiHelpers.cnCreate)('mfui-selector');
|
|
45
|
+
|
|
46
|
+
var Selector = function Selector(_ref) {
|
|
47
|
+
var _ref$type = _ref.type,
|
|
48
|
+
type = _ref$type === void 0 ? 'radio' : _ref$type,
|
|
49
|
+
value = _ref.value,
|
|
50
|
+
name = _ref.name,
|
|
51
|
+
checked = _ref.checked,
|
|
52
|
+
_ref$checkedOptions = _ref.checkedOptions,
|
|
53
|
+
checkedOptions = _ref$checkedOptions === void 0 ? [] : _ref$checkedOptions,
|
|
54
|
+
_ref$disabled = _ref.disabled,
|
|
55
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
56
|
+
error = _ref.error,
|
|
57
|
+
className = _ref.className,
|
|
58
|
+
_ref$classes = _ref.classes,
|
|
59
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
|
60
|
+
dataAttrs = _ref.dataAttrs,
|
|
61
|
+
children = _ref.children,
|
|
62
|
+
onChange = _ref.onChange,
|
|
63
|
+
inputRef = _ref.inputRef;
|
|
64
|
+
|
|
65
|
+
var handleChange = function handleChange() {
|
|
66
|
+
if (type === 'radio') {
|
|
67
|
+
return onChange === null || onChange === void 0 ? void 0 : onChange(value);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
var isChecked = checkedOptions.includes(value);
|
|
71
|
+
var newCheckedOptions = isChecked ? checkedOptions.filter(function (option) {
|
|
72
|
+
return option !== value;
|
|
73
|
+
}) : [].concat((0, _toConsumableArray2["default"])(checkedOptions), [value]);
|
|
74
|
+
return onChange === null || onChange === void 0 ? void 0 : onChange(newCheckedOptions);
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
|
78
|
+
className: cn('', className)
|
|
79
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", (0, _extends2["default"])({
|
|
80
|
+
className: cn('label', {
|
|
81
|
+
disabled: disabled,
|
|
82
|
+
error: error
|
|
83
|
+
}, classes.label)
|
|
84
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label)), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
|
|
85
|
+
className: cn('input'),
|
|
86
|
+
type: type,
|
|
87
|
+
name: name,
|
|
88
|
+
value: value,
|
|
89
|
+
checked: type === 'radio' ? checked : checkedOptions.includes(value),
|
|
90
|
+
disabled: disabled,
|
|
91
|
+
onChange: handleChange,
|
|
92
|
+
ref: inputRef
|
|
93
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input))), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
|
94
|
+
className: cn('custom-input', classes.customInput)
|
|
95
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput)), /*#__PURE__*/React.createElement(CheckedIcon, {
|
|
96
|
+
className: cn('icon')
|
|
97
|
+
})), children));
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
Selector.propTypes = {
|
|
101
|
+
type: PropTypes.oneOf(['radio', 'checkbox']),
|
|
102
|
+
value: PropTypes.string.isRequired,
|
|
103
|
+
name: PropTypes.string,
|
|
104
|
+
disabled: PropTypes.bool,
|
|
105
|
+
checked: PropTypes.bool,
|
|
106
|
+
checkedOptions: PropTypes.arrayOf(PropTypes.string.isRequired),
|
|
107
|
+
error: PropTypes.bool,
|
|
108
|
+
className: PropTypes.string,
|
|
109
|
+
classes: PropTypes.objectOf(PropTypes.string),
|
|
110
|
+
dataAttrs: PropTypes.objectOf(PropTypes.object),
|
|
111
|
+
children: PropTypes.node,
|
|
112
|
+
onChange: PropTypes.func,
|
|
113
|
+
inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
|
114
|
+
current: PropTypes.elementType
|
|
115
|
+
}), PropTypes.any])])
|
|
116
|
+
};
|
|
117
|
+
var _default = Selector;
|
|
118
|
+
exports["default"] = _default;
|
package/dist/lib/index.d.ts
CHANGED
|
@@ -35,6 +35,7 @@ export { default as PromoBadge } from './components/Badges/components/PromoBadge
|
|
|
35
35
|
export { default as RadioButton } from './components/RadioButton/RadioButton';
|
|
36
36
|
export { default as Search } from './components/Search/Search';
|
|
37
37
|
export { default as Select } from './components/Select/Select';
|
|
38
|
+
export { default as Selector } from './components/Selector/Selector';
|
|
38
39
|
export { default as selectReducer } from './components/Select/reducer/selectReducer';
|
|
39
40
|
export { default as Snackbar } from './components/Snackbar/Snackbar';
|
|
40
41
|
export { default as SnackbarTimer } from './components/Snackbar/SnackbarTimer/SnackbarTimer';
|
package/dist/lib/index.js
CHANGED
|
@@ -225,6 +225,12 @@ Object.defineProperty(exports, "Select", {
|
|
|
225
225
|
return _Select["default"];
|
|
226
226
|
}
|
|
227
227
|
});
|
|
228
|
+
Object.defineProperty(exports, "Selector", {
|
|
229
|
+
enumerable: true,
|
|
230
|
+
get: function get() {
|
|
231
|
+
return _Selector["default"];
|
|
232
|
+
}
|
|
233
|
+
});
|
|
228
234
|
Object.defineProperty(exports, "selectReducer", {
|
|
229
235
|
enumerable: true,
|
|
230
236
|
get: function get() {
|
|
@@ -384,6 +390,8 @@ var _Search = _interopRequireDefault(require("./components/Search/Search"));
|
|
|
384
390
|
|
|
385
391
|
var _Select = _interopRequireDefault(require("./components/Select/Select"));
|
|
386
392
|
|
|
393
|
+
var _Selector = _interopRequireDefault(require("./components/Selector/Selector"));
|
|
394
|
+
|
|
387
395
|
var _selectReducer = _interopRequireDefault(require("./components/Select/reducer/selectReducer"));
|
|
388
396
|
|
|
389
397
|
var _Snackbar = _interopRequireDefault(require("./components/Snackbar/Snackbar"));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"styles"
|
|
@@ -96,5 +96,5 @@
|
|
|
96
96
|
"react-popper": "^2.2.3",
|
|
97
97
|
"swiper": "^6.5.6"
|
|
98
98
|
},
|
|
99
|
-
"gitHead": "
|
|
99
|
+
"gitHead": "0a8f8d140ed863cb8bb9f05e4226edcb7925c74d"
|
|
100
100
|
}
|