@megafon/ui-core 2.1.4 → 2.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 +55 -0
- package/dist/es/colors/Colors.d.ts +2 -2
- package/dist/es/components/Accordion/Accordion.d.ts +1 -0
- package/dist/es/components/Accordion/Accordion.js +4 -2
- package/dist/es/components/Banner/Banner.css +28 -0
- package/dist/es/components/Banner/Banner.d.ts +2 -0
- package/dist/es/components/Banner/Banner.js +15 -10
- package/dist/es/components/Button/Button.js +2 -2
- package/dist/es/components/Calendar/Calendar.js +3 -2
- package/dist/es/components/Calendar/components/Day/Day.js +1 -1
- package/dist/es/components/Carousel/Carousel.js +17 -14
- package/dist/es/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/es/components/Checkbox/Checkbox.js +1 -1
- package/dist/es/components/Counter/Counter.js +3 -3
- package/dist/es/components/Header/Header.d.ts +1 -1
- package/dist/es/components/Link/Link.d.ts +7 -3
- package/dist/es/components/Link/Link.js +21 -8
- package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.js +1 -1
- package/dist/es/components/Pagination/helpers.d.ts +1 -1
- package/dist/es/components/RadioButton/RadioButton.d.ts +5 -1
- package/dist/es/components/RadioButton/RadioButton.js +8 -6
- package/dist/es/components/Search/Search.js +4 -3
- package/dist/es/components/Select/Select.d.ts +3 -3
- package/dist/es/components/Select/Select.js +5 -5
- package/dist/es/components/Switcher/Switcher.js +1 -1
- package/dist/es/components/Tabs/Tabs.d.ts +2 -0
- package/dist/es/components/Tabs/Tabs.js +104 -59
- package/dist/es/components/TextField/TextField.d.ts +3 -1
- package/dist/es/components/TextField/TextField.js +14 -10
- package/dist/es/components/Tile/Tile.js +1 -1
- package/dist/es/components/Tooltip/Tooltip.js +17 -17
- package/dist/lib/colors/Colors.d.ts +2 -2
- package/dist/lib/components/Accordion/Accordion.d.ts +1 -0
- package/dist/lib/components/Accordion/Accordion.js +4 -2
- package/dist/lib/components/Banner/Banner.css +28 -0
- package/dist/lib/components/Banner/Banner.d.ts +2 -0
- package/dist/lib/components/Banner/Banner.js +15 -10
- package/dist/lib/components/Button/Button.js +2 -2
- package/dist/lib/components/Calendar/Calendar.js +3 -3
- package/dist/lib/components/Calendar/components/Day/Day.js +1 -1
- package/dist/lib/components/Carousel/Carousel.js +15 -12
- package/dist/lib/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/lib/components/Checkbox/Checkbox.js +1 -1
- package/dist/lib/components/Counter/Counter.js +3 -3
- package/dist/lib/components/Header/Header.d.ts +1 -1
- package/dist/lib/components/Link/Link.d.ts +7 -3
- package/dist/lib/components/Link/Link.js +34 -23
- package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.js +1 -1
- package/dist/lib/components/Pagination/helpers.d.ts +1 -1
- package/dist/lib/components/RadioButton/RadioButton.d.ts +5 -1
- package/dist/lib/components/RadioButton/RadioButton.js +7 -5
- package/dist/lib/components/Search/Search.js +4 -3
- package/dist/lib/components/Select/Select.d.ts +3 -3
- package/dist/lib/components/Select/Select.js +5 -5
- package/dist/lib/components/Switcher/Switcher.js +1 -1
- package/dist/lib/components/Tabs/Tabs.d.ts +2 -0
- package/dist/lib/components/Tabs/Tabs.js +104 -59
- package/dist/lib/components/TextField/TextField.d.ts +3 -1
- package/dist/lib/components/TextField/TextField.js +14 -10
- package/dist/lib/components/Tile/Tile.js +1 -1
- package/dist/lib/components/Tooltip/Tooltip.js +17 -17
- package/package.json +3 -3
|
@@ -79,7 +79,7 @@ var Day = function Day(_a) {
|
|
|
79
79
|
};
|
|
80
80
|
|
|
81
81
|
var handleMouseLeave = function handleMouseLeave() {
|
|
82
|
-
onMouseLeave
|
|
82
|
+
onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
|
|
83
83
|
};
|
|
84
84
|
|
|
85
85
|
return /*#__PURE__*/_react["default"].createElement("button", {
|
|
@@ -154,7 +154,8 @@ var Carousel = function Carousel(_ref) {
|
|
|
154
154
|
return;
|
|
155
155
|
}
|
|
156
156
|
|
|
157
|
-
autoplay.stop();
|
|
157
|
+
autoplay.stop(); // eslint-disable-next-line no-param-reassign
|
|
158
|
+
|
|
158
159
|
params.autoplay.delay = autoPlayDelay * 3;
|
|
159
160
|
autoplay.start();
|
|
160
161
|
}, [autoPlayDelay]);
|
|
@@ -164,7 +165,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
164
165
|
}
|
|
165
166
|
|
|
166
167
|
swiperInstance.slidePrev();
|
|
167
|
-
onPrevClick
|
|
168
|
+
onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
|
|
168
169
|
increaseAutoplayDelay(swiperInstance);
|
|
169
170
|
}, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
|
|
170
171
|
var handleNextClick = React.useCallback(function () {
|
|
@@ -173,14 +174,14 @@ var Carousel = function Carousel(_ref) {
|
|
|
173
174
|
}
|
|
174
175
|
|
|
175
176
|
swiperInstance.slideNext();
|
|
176
|
-
onNextClick
|
|
177
|
+
onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
|
|
177
178
|
increaseAutoplayDelay(swiperInstance);
|
|
178
179
|
}, [swiperInstance, onNextClick, increaseAutoplayDelay]);
|
|
179
180
|
var handleSwiper = React.useCallback(function (swiper) {
|
|
180
181
|
setSwiperInstance(swiper);
|
|
181
182
|
setLocked(swiper.isBeginning && swiper.isEnd);
|
|
182
|
-
getSwiper
|
|
183
|
-
}, []);
|
|
183
|
+
getSwiper === null || getSwiper === void 0 ? void 0 : getSwiper(swiper);
|
|
184
|
+
}, [getSwiper]);
|
|
184
185
|
var handleReachBeginnig = React.useCallback(function () {
|
|
185
186
|
setBeginning(true);
|
|
186
187
|
}, []);
|
|
@@ -201,7 +202,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
201
202
|
var realIndex = _ref4.realIndex,
|
|
202
203
|
previousIndex = _ref4.previousIndex,
|
|
203
204
|
params = _ref4.params;
|
|
204
|
-
onChange
|
|
205
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(realIndex, previousIndex, params.slidesPerView);
|
|
205
206
|
}, [onChange]);
|
|
206
207
|
|
|
207
208
|
var handleRootClick = function handleRootClick(e) {
|
|
@@ -214,13 +215,15 @@ var Carousel = function Carousel(_ref) {
|
|
|
214
215
|
}; // https://github.com/nolimits4web/Swiper/issues/2346
|
|
215
216
|
|
|
216
217
|
|
|
217
|
-
var handleSwiperResize = React.useCallback(
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
218
|
+
var handleSwiperResize = React.useCallback(function () {
|
|
219
|
+
(0, _lodash["default"])(function (swiper) {
|
|
220
|
+
setBeginning(swiper.isBeginning);
|
|
221
|
+
setEnd(swiper.isEnd);
|
|
222
|
+
setLocked(swiper.isBeginning && swiper.isEnd);
|
|
221
223
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
+
if (swiper.params.slidesPerView === SlidesPerView.AUTO) {}
|
|
225
|
+
}, _throttleTime["default"].resize);
|
|
226
|
+
}, []);
|
|
224
227
|
|
|
225
228
|
var handleSlideFocus = function handleSlideFocus(index) {
|
|
226
229
|
return function (e) {
|
|
@@ -30,7 +30,7 @@ export interface ICheckboxProps extends IFilterDataAttrs {
|
|
|
30
30
|
/** Обработчик изменения значения */
|
|
31
31
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
32
32
|
}
|
|
33
|
-
declare class Checkbox extends React.Component<ICheckboxProps
|
|
33
|
+
declare class Checkbox extends React.Component<ICheckboxProps> {
|
|
34
34
|
static propTypes: {
|
|
35
35
|
className: PropTypes.Requireable<string>;
|
|
36
36
|
fontSize: PropTypes.Requireable<string>;
|
|
@@ -94,7 +94,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
|
|
|
94
94
|
|
|
95
95
|
_this.handleChange = function (e) {
|
|
96
96
|
var onChange = _this.props.onChange;
|
|
97
|
-
onChange
|
|
97
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
98
98
|
};
|
|
99
99
|
|
|
100
100
|
return _this;
|
|
@@ -75,15 +75,15 @@ var Counter = function Counter(_ref) {
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
if (inputValue < min) {
|
|
78
|
-
onChange
|
|
78
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(min);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
if (inputValue > max) {
|
|
82
|
-
onChange
|
|
82
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(max);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
if (inputValue >= min && inputValue <= max) {
|
|
86
|
-
onChange
|
|
86
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
|
|
87
87
|
}
|
|
88
88
|
}, [min, max, onChange, isControlled]);
|
|
89
89
|
var handleMinusClick = React.useCallback(function () {
|
|
@@ -18,7 +18,7 @@ interface IHeaderProps extends IFilterDataAttrs {
|
|
|
18
18
|
/** Обработчик клика */
|
|
19
19
|
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
|
20
20
|
}
|
|
21
|
-
declare class Header extends React.Component<IHeaderProps
|
|
21
|
+
declare class Header extends React.Component<IHeaderProps> {
|
|
22
22
|
static propTypes: {
|
|
23
23
|
as: PropTypes.Requireable<string>;
|
|
24
24
|
color: PropTypes.Requireable<string>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
export interface ILinkProps {
|
|
3
3
|
/** Дополнительный класс корневого элемента */
|
|
4
4
|
className?: string;
|
|
@@ -8,10 +8,14 @@ export interface ILinkProps {
|
|
|
8
8
|
target?: '_self' | '_blank' | '_parent' | '_top';
|
|
9
9
|
/** rel - аргумент тега <a> */
|
|
10
10
|
rel?: string;
|
|
11
|
-
/** Обработчик клика */
|
|
12
|
-
onClick?: (e: React.MouseEvent<EventTarget>) => void;
|
|
13
11
|
/** Добавление атрибута download */
|
|
14
12
|
download?: boolean;
|
|
13
|
+
/** Дата атрибуты для элемента */
|
|
14
|
+
dataAttrs?: {
|
|
15
|
+
root?: Record<string, string>;
|
|
16
|
+
};
|
|
17
|
+
/** Обработчик клика */
|
|
18
|
+
onClick?: (e: React.MouseEvent<EventTarget>) => void;
|
|
15
19
|
children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
|
|
16
20
|
}
|
|
17
21
|
declare const Link: React.FC<ILinkProps>;
|
|
@@ -1,36 +1,47 @@
|
|
|
1
1
|
"use strict";
|
|
2
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
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports["default"] = void 0;
|
|
9
7
|
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _uiHelpers = require("@megafon/ui-helpers");
|
|
13
|
+
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
|
+
|
|
18
|
+
var Link = function Link(_ref) {
|
|
19
|
+
var target = _ref.target,
|
|
20
|
+
href = _ref.href,
|
|
21
|
+
rel = _ref.rel,
|
|
22
|
+
onClick = _ref.onClick,
|
|
23
|
+
className = _ref.className,
|
|
24
|
+
download = _ref.download,
|
|
25
|
+
children = _ref.children,
|
|
26
|
+
dataAttrs = _ref.dataAttrs;
|
|
27
|
+
return /*#__PURE__*/_react["default"].createElement("a", (0, _extends2["default"])({
|
|
28
|
+
className: className,
|
|
29
|
+
href: href,
|
|
30
|
+
target: target,
|
|
31
|
+
rel: rel,
|
|
32
|
+
download: download,
|
|
33
|
+
onClick: onClick
|
|
34
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), children);
|
|
24
35
|
};
|
|
25
36
|
|
|
26
37
|
Link.propTypes = {
|
|
27
|
-
href:
|
|
28
|
-
children:
|
|
29
|
-
target:
|
|
30
|
-
className:
|
|
31
|
-
rel:
|
|
32
|
-
onClick:
|
|
33
|
-
download:
|
|
38
|
+
href: _propTypes["default"].string,
|
|
39
|
+
children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].element), _propTypes["default"].element, _propTypes["default"].string, _propTypes["default"].node]),
|
|
40
|
+
target: _propTypes["default"].oneOf(['_self', '_blank', '_parent', '_top']),
|
|
41
|
+
className: _propTypes["default"].string,
|
|
42
|
+
rel: _propTypes["default"].string,
|
|
43
|
+
onClick: _propTypes["default"].func,
|
|
44
|
+
download: _propTypes["default"].bool
|
|
34
45
|
};
|
|
35
46
|
var _default = Link;
|
|
36
47
|
exports["default"] = _default;
|
|
@@ -28,7 +28,7 @@ var PaginationButton = function PaginationButton(_ref) {
|
|
|
28
28
|
value = _ref.value;
|
|
29
29
|
|
|
30
30
|
var handleClick = function handleClick() {
|
|
31
|
-
onClick
|
|
31
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(value);
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
return /*#__PURE__*/_react["default"].createElement("button", {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const getRange: (from:
|
|
1
|
+
declare const getRange: (from: number, to: number, step?: number) => number[];
|
|
2
2
|
export default getRange;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { IFilterDataAttrs } from '@megafon/ui-helpers';
|
|
2
3
|
import * as PropTypes from 'prop-types';
|
|
3
4
|
import './RadioButton.less';
|
|
4
|
-
export interface IRadioButtonProps {
|
|
5
|
+
export interface IRadioButtonProps extends IFilterDataAttrs {
|
|
5
6
|
/** Значение */
|
|
6
7
|
value: string;
|
|
7
8
|
/** Имя для тега form */
|
|
@@ -44,6 +45,9 @@ declare class RadioButton extends React.Component<IRadioButtonProps> {
|
|
|
44
45
|
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
45
46
|
onChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
46
47
|
inputRef: PropTypes.Requireable<any>;
|
|
48
|
+
dataAttrs: PropTypes.Requireable<{
|
|
49
|
+
[x: string]: string;
|
|
50
|
+
}>;
|
|
47
51
|
};
|
|
48
52
|
static defaultProps: Partial<IRadioButtonProps>;
|
|
49
53
|
handleChange: () => void;
|
|
@@ -93,7 +93,7 @@ var RadioButton = /*#__PURE__*/function (_React$Component) {
|
|
|
93
93
|
var _this$props = _this.props,
|
|
94
94
|
onChange = _this$props.onChange,
|
|
95
95
|
value = _this$props.value;
|
|
96
|
-
onChange
|
|
96
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(value);
|
|
97
97
|
};
|
|
98
98
|
|
|
99
99
|
return _this;
|
|
@@ -112,14 +112,15 @@ var RadioButton = /*#__PURE__*/function (_React$Component) {
|
|
|
112
112
|
inputRef = _this$props2.inputRef,
|
|
113
113
|
className = _this$props2.className,
|
|
114
114
|
_this$props2$classes = _this$props2.classes,
|
|
115
|
-
classes = _this$props2$classes === void 0 ? {} : _this$props2$classes
|
|
115
|
+
classes = _this$props2$classes === void 0 ? {} : _this$props2$classes,
|
|
116
|
+
dataAttrs = _this$props2.dataAttrs;
|
|
116
117
|
var checkedProp = isChecked !== undefined ? {
|
|
117
118
|
checked: isChecked
|
|
118
119
|
} : {};
|
|
119
120
|
var rootClassNames = Array.isArray(className) ? [].concat((0, _toConsumableArray2["default"])(className), [classes.root]) : [className, classes.root];
|
|
120
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
121
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
|
121
122
|
className: cn(rootClassNames)
|
|
122
|
-
}, /*#__PURE__*/React.createElement("label", {
|
|
123
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/React.createElement("label", {
|
|
123
124
|
className: cn('label', {
|
|
124
125
|
disabled: disabled
|
|
125
126
|
}, classes.label)
|
|
@@ -160,7 +161,8 @@ RadioButton.propTypes = {
|
|
|
160
161
|
onChange: PropTypes.func,
|
|
161
162
|
inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
|
162
163
|
current: PropTypes.elementType
|
|
163
|
-
}), PropTypes.any])])
|
|
164
|
+
}), PropTypes.any])]),
|
|
165
|
+
dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
|
|
164
166
|
};
|
|
165
167
|
RadioButton.defaultProps = {
|
|
166
168
|
textSize: 'medium',
|
|
@@ -100,7 +100,7 @@ var Search = function Search(_ref) {
|
|
|
100
100
|
setActiveIndex(-1);
|
|
101
101
|
|
|
102
102
|
if (changeDelay === 0) {
|
|
103
|
-
onChange
|
|
103
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
|
|
104
104
|
} else {
|
|
105
105
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
106
106
|
// @ts-ignore
|
|
@@ -124,7 +124,7 @@ var Search = function Search(_ref) {
|
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
var chosenValue = items[index].value;
|
|
127
|
-
onSubmit
|
|
127
|
+
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenValue);
|
|
128
128
|
}, [disabled, items, onSubmit]);
|
|
129
129
|
|
|
130
130
|
var handleSelectSubmit = _react["default"].useCallback(function () {
|
|
@@ -139,7 +139,7 @@ var Search = function Search(_ref) {
|
|
|
139
139
|
|
|
140
140
|
var handleBlur = _react["default"].useCallback(function (e) {
|
|
141
141
|
setFocus(false);
|
|
142
|
-
onBlur
|
|
142
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
143
143
|
}, [onBlur]);
|
|
144
144
|
|
|
145
145
|
var handleClick = _react["default"].useCallback(function () {
|
|
@@ -161,6 +161,7 @@ var Search = function Search(_ref) {
|
|
|
161
161
|
e.preventDefault();
|
|
162
162
|
} else if (e.key === 'Enter' && activeIndex > -1) {
|
|
163
163
|
handleItemSubmit(activeIndex);
|
|
164
|
+
e.preventDefault();
|
|
164
165
|
} else if (e.key === 'Enter' && activeIndex === -1) {
|
|
165
166
|
handleSearchSubmit();
|
|
166
167
|
}
|
|
@@ -138,9 +138,9 @@ declare class Select<T extends SelectItemValueType> extends React.Component<ISel
|
|
|
138
138
|
handleChangeCombobox: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
139
139
|
handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => boolean;
|
|
140
140
|
highlightString: (title: string, view?: string | Element | JSX.Element | JSX.Element[] | Element[] | ((data: ViewCallbackArguments) => ElementOrString) | undefined) => ElementOrString;
|
|
141
|
-
getItemWrapper: (node:
|
|
142
|
-
getSelectNode: (node:
|
|
143
|
-
getNodeList: (node:
|
|
141
|
+
getItemWrapper: (node: HTMLDivElement) => void;
|
|
142
|
+
getSelectNode: (node: HTMLDivElement) => void;
|
|
143
|
+
getNodeList: (node: HTMLDivElement) => void;
|
|
144
144
|
scrollList(activeIndex: number): void;
|
|
145
145
|
renderTitle(): JSX.Element;
|
|
146
146
|
renderCombobox(): JSX.Element;
|
|
@@ -154,12 +154,12 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
154
154
|
|
|
155
155
|
_this.handleOpened = function () {
|
|
156
156
|
var onOpened = _this.props.onOpened;
|
|
157
|
-
onOpened
|
|
157
|
+
onOpened === null || onOpened === void 0 ? void 0 : onOpened();
|
|
158
158
|
};
|
|
159
159
|
|
|
160
160
|
_this.handleClosed = function () {
|
|
161
161
|
var onClosed = _this.props.onClosed;
|
|
162
|
-
onClosed
|
|
162
|
+
onClosed === null || onClosed === void 0 ? void 0 : onClosed();
|
|
163
163
|
};
|
|
164
164
|
|
|
165
165
|
_this.handleClickOutside = function (e) {
|
|
@@ -218,7 +218,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
218
218
|
isChoosenItem: true
|
|
219
219
|
});
|
|
220
220
|
|
|
221
|
-
onSelect
|
|
221
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, item);
|
|
222
222
|
|
|
223
223
|
_this.handleClosed();
|
|
224
224
|
};
|
|
@@ -258,7 +258,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
258
258
|
var filterValue = e.target.value;
|
|
259
259
|
|
|
260
260
|
if (isChoosenItem) {
|
|
261
|
-
onSelect
|
|
261
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(null);
|
|
262
262
|
}
|
|
263
263
|
|
|
264
264
|
_this.setState({
|
|
@@ -376,7 +376,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
|
|
|
376
376
|
};
|
|
377
377
|
|
|
378
378
|
_this.getNodeList = function (node) {
|
|
379
|
-
|
|
379
|
+
_this.itemsNodeList.push(node);
|
|
380
380
|
};
|
|
381
381
|
|
|
382
382
|
_this.state = {
|
|
@@ -41,6 +41,8 @@ export interface ITabsProps {
|
|
|
41
41
|
defaultIndex?: number;
|
|
42
42
|
/** Рендер содержимого только для текущего таба */
|
|
43
43
|
renderOnlyCurrentPanel?: boolean;
|
|
44
|
+
/** Внешний контейнер для режима фиксация табов */
|
|
45
|
+
outerObserveContainer?: HTMLDivElement | null;
|
|
44
46
|
/** Обработчика клика по табам */
|
|
45
47
|
onTabClick?: (index: number) => void;
|
|
46
48
|
children: Array<React.ReactElement<ITabProps>>;
|
|
@@ -97,10 +97,12 @@ var Tabs = function Tabs(_ref) {
|
|
|
97
97
|
_ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
|
|
98
98
|
renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
|
|
99
99
|
children = _ref.children,
|
|
100
|
-
onTabClick = _ref.onTabClick
|
|
100
|
+
onTabClick = _ref.onTabClick,
|
|
101
|
+
outerObserveContainer = _ref.outerObserveContainer;
|
|
101
102
|
var tabsRef = React.useRef([]);
|
|
102
103
|
var rootRef = React.useRef(null);
|
|
103
104
|
var tabListRef = React.useRef(null);
|
|
105
|
+
var intersectionObserverRef = React.useRef();
|
|
104
106
|
|
|
105
107
|
var _React$useState = React.useState(),
|
|
106
108
|
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
@@ -193,11 +195,70 @@ var Tabs = function Tabs(_ref) {
|
|
|
193
195
|
left: left,
|
|
194
196
|
right: documentWidth - right
|
|
195
197
|
});
|
|
196
|
-
}, [
|
|
198
|
+
}, [sticky]);
|
|
199
|
+
var stickyON = React.useCallback(function (leftOffset, rightOffset) {
|
|
200
|
+
var documentWidth = document.documentElement.clientWidth;
|
|
201
|
+
setStickyOffset({
|
|
202
|
+
left: leftOffset,
|
|
203
|
+
right: documentWidth - rightOffset
|
|
204
|
+
});
|
|
205
|
+
setSticky(true);
|
|
206
|
+
}, []);
|
|
207
|
+
var stickyOFF = React.useCallback(function () {
|
|
208
|
+
setStickyOffset({
|
|
209
|
+
left: 0,
|
|
210
|
+
right: 0
|
|
211
|
+
});
|
|
212
|
+
setSticky(false);
|
|
213
|
+
}, []);
|
|
214
|
+
var isContainerNotFitViewport = React.useCallback(function () {
|
|
215
|
+
var _a;
|
|
216
|
+
|
|
217
|
+
var containerHeight = (_a = outerObserveContainer || rootRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
|
|
218
|
+
return containerHeight && containerHeight > window.innerHeight;
|
|
219
|
+
}, [outerObserveContainer]);
|
|
220
|
+
var addIntersectionObserver = React.useCallback(function () {
|
|
221
|
+
var observerOptions = {
|
|
222
|
+
threshold: [0, 1]
|
|
223
|
+
};
|
|
224
|
+
|
|
225
|
+
if (isContainerNotFitViewport()) {
|
|
226
|
+
observerOptions.rootMargin = '0px 0px -100%';
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
intersectionObserverRef.current = new IntersectionObserver(function (entries) {
|
|
230
|
+
entries.forEach(function (_ref2) {
|
|
231
|
+
var isIntersecting = _ref2.isIntersecting,
|
|
232
|
+
_ref2$boundingClientR = _ref2.boundingClientRect,
|
|
233
|
+
top = _ref2$boundingClientR.top,
|
|
234
|
+
left = _ref2$boundingClientR.left,
|
|
235
|
+
right = _ref2$boundingClientR.right;
|
|
236
|
+
|
|
237
|
+
if (!tabListRef.current) {
|
|
238
|
+
return;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
var _tabListRef$current$g = tabListRef.current.getBoundingClientRect(),
|
|
242
|
+
height = _tabListRef$current$g.height,
|
|
243
|
+
tabListNodeLeft = _tabListRef$current$g.left,
|
|
244
|
+
tabListNodeRight = _tabListRef$current$g.right;
|
|
245
|
+
|
|
246
|
+
var leftOffset = outerObserveContainer ? tabListNodeLeft : left;
|
|
247
|
+
var rightOffset = outerObserveContainer ? tabListNodeRight : right;
|
|
248
|
+
setTabListHeight(height);
|
|
249
|
+
|
|
250
|
+
if (isIntersecting) {
|
|
251
|
+
top < 0 ? stickyON(leftOffset, rightOffset) : stickyOFF();
|
|
252
|
+
} else {
|
|
253
|
+
stickyOFF();
|
|
254
|
+
}
|
|
255
|
+
});
|
|
256
|
+
}, observerOptions);
|
|
257
|
+
}, [isContainerNotFitViewport, outerObserveContainer, stickyOFF, stickyON]);
|
|
197
258
|
var handleTabInnerClick = React.useCallback(function (index) {
|
|
198
259
|
return function () {
|
|
199
260
|
setUnderlineTransition('all');
|
|
200
|
-
onTabClick
|
|
261
|
+
onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(index);
|
|
201
262
|
|
|
202
263
|
if (outerIndex === undefined) {
|
|
203
264
|
setInnerIndex(index);
|
|
@@ -215,6 +276,28 @@ var Tabs = function Tabs(_ref) {
|
|
|
215
276
|
var handleNextArrowClick = React.useCallback(function () {
|
|
216
277
|
swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideNext();
|
|
217
278
|
}, [swiperInstance]);
|
|
279
|
+
var handleReachBeginning = React.useCallback(function (swiper) {
|
|
280
|
+
setBeginning(swiper.isBeginning);
|
|
281
|
+
}, []);
|
|
282
|
+
var handleReachEnd = React.useCallback(function (swiper) {
|
|
283
|
+
setEnd(swiper.isEnd);
|
|
284
|
+
}, []);
|
|
285
|
+
var handleFromEdge = React.useCallback(function (swiper) {
|
|
286
|
+
setBeginning(swiper.isBeginning);
|
|
287
|
+
setEnd(swiper.isEnd);
|
|
288
|
+
}, []);
|
|
289
|
+
var addObserveEvent = React.useCallback(function () {
|
|
290
|
+
var _a;
|
|
291
|
+
|
|
292
|
+
var rootRefNode = rootRef.current;
|
|
293
|
+
rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.observe(outerObserveContainer || rootRefNode));
|
|
294
|
+
}, [outerObserveContainer]);
|
|
295
|
+
var removeObserveEvent = React.useCallback(function () {
|
|
296
|
+
var _a;
|
|
297
|
+
|
|
298
|
+
var rootRefNode = rootRef.current;
|
|
299
|
+
rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(outerObserveContainer || rootRefNode));
|
|
300
|
+
}, [outerObserveContainer]);
|
|
218
301
|
var renderTab = React.useCallback(function (index, title, icon, href) {
|
|
219
302
|
var ElementType = href ? 'a' : 'div';
|
|
220
303
|
return /*#__PURE__*/React.createElement(ElementType, {
|
|
@@ -246,7 +329,7 @@ var Tabs = function Tabs(_ref) {
|
|
|
246
329
|
ref: setTabRef
|
|
247
330
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), renderTabWrapper ? renderTabWrapper(tab) : tab));
|
|
248
331
|
});
|
|
249
|
-
}, [renderTab, children]);
|
|
332
|
+
}, [renderTab, children, activeTabClass, currentIndex, setTabRef, tabClass]);
|
|
250
333
|
var renderPanels = React.useCallback(function () {
|
|
251
334
|
return React.Children.map(children, function (child, i) {
|
|
252
335
|
var panel = child.props.children;
|
|
@@ -262,67 +345,27 @@ var Tabs = function Tabs(_ref) {
|
|
|
262
345
|
})
|
|
263
346
|
}, panel);
|
|
264
347
|
});
|
|
265
|
-
}, [children, currentIndex]);
|
|
266
|
-
var handleReachBeginning = React.useCallback(function (swiper) {
|
|
267
|
-
setBeginning(swiper.isBeginning);
|
|
268
|
-
}, []);
|
|
269
|
-
var handleReachEnd = React.useCallback(function (swiper) {
|
|
270
|
-
setEnd(swiper.isEnd);
|
|
271
|
-
}, []);
|
|
272
|
-
var handleFromEdge = React.useCallback(function (swiper) {
|
|
273
|
-
setBeginning(swiper.isBeginning);
|
|
274
|
-
setEnd(swiper.isEnd);
|
|
275
|
-
}, []);
|
|
348
|
+
}, [children, currentIndex, renderOnlyCurrentPanel]);
|
|
276
349
|
React.useEffect(function () {
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
_ref2$boundingClientR = _ref2.boundingClientRect,
|
|
281
|
-
top = _ref2$boundingClientR.top,
|
|
282
|
-
left = _ref2$boundingClientR.left,
|
|
283
|
-
right = _ref2$boundingClientR.right;
|
|
284
|
-
|
|
285
|
-
if (!sticky || !rootRef.current || !tabListRef.current) {
|
|
286
|
-
return;
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
var listHeight = tabListRef.current.clientHeight;
|
|
290
|
-
setTabListHeight(listHeight);
|
|
291
|
-
|
|
292
|
-
var stickyON = function stickyON(leftOffset, rightOffset) {
|
|
293
|
-
var documentWidth = document.documentElement.clientWidth;
|
|
294
|
-
setStickyOffset({
|
|
295
|
-
left: leftOffset,
|
|
296
|
-
right: documentWidth - rightOffset
|
|
297
|
-
});
|
|
298
|
-
setSticky(true);
|
|
299
|
-
};
|
|
300
|
-
|
|
301
|
-
var stickyOFF = function stickyOFF() {
|
|
302
|
-
setStickyOffset({
|
|
303
|
-
left: 0,
|
|
304
|
-
right: 0
|
|
305
|
-
});
|
|
306
|
-
setSticky(false);
|
|
307
|
-
};
|
|
350
|
+
if (!sticky) {
|
|
351
|
+
return undefined;
|
|
352
|
+
}
|
|
308
353
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
} else {
|
|
312
|
-
top < 0 && stickyOFF();
|
|
313
|
-
}
|
|
314
|
-
});
|
|
315
|
-
}, {
|
|
316
|
-
threshold: [0, 1]
|
|
317
|
-
});
|
|
318
|
-
rootRef.current && observer.observe(rootRef.current);
|
|
354
|
+
addIntersectionObserver();
|
|
355
|
+
addObserveEvent();
|
|
319
356
|
return function () {
|
|
320
|
-
|
|
357
|
+
removeObserveEvent();
|
|
321
358
|
};
|
|
322
|
-
}, [
|
|
359
|
+
}, [addIntersectionObserver, sticky, addObserveEvent, removeObserveEvent]);
|
|
323
360
|
React.useEffect(function () {
|
|
324
361
|
var handleResize = (0, _lodash["default"])(function () {
|
|
325
362
|
calculateSticky();
|
|
363
|
+
|
|
364
|
+
if (sticky && isContainerNotFitViewport()) {
|
|
365
|
+
removeObserveEvent();
|
|
366
|
+
addIntersectionObserver();
|
|
367
|
+
addObserveEvent();
|
|
368
|
+
}
|
|
326
369
|
}, 300);
|
|
327
370
|
var activeTabNode = tabsRef.current[currentIndex];
|
|
328
371
|
var resizeObserver = new ResizeObserver(function (entries) {
|
|
@@ -339,8 +382,9 @@ var Tabs = function Tabs(_ref) {
|
|
|
339
382
|
window.addEventListener('resize', handleResize);
|
|
340
383
|
return function () {
|
|
341
384
|
window.removeEventListener('resize', handleResize);
|
|
385
|
+
resizeObserver.unobserve(activeTabNode);
|
|
342
386
|
};
|
|
343
|
-
}, [calculateUnderline,
|
|
387
|
+
}, [sticky, currentIndex, addObserveEvent, calculateSticky, removeObserveEvent, calculateUnderline, addIntersectionObserver, isContainerNotFitViewport]);
|
|
344
388
|
React.useEffect(function () {
|
|
345
389
|
if (!swiperInstance) {
|
|
346
390
|
return;
|
|
@@ -419,6 +463,7 @@ Tabs.propTypes = {
|
|
|
419
463
|
currentIndex: _propTypes["default"].number,
|
|
420
464
|
defaultIndex: _propTypes["default"].number,
|
|
421
465
|
renderOnlyCurrentPanel: _propTypes["default"].bool,
|
|
466
|
+
outerObserveContainer: _propTypes["default"].oneOfType([_propTypes["default"].elementType, _propTypes["default"].any]),
|
|
422
467
|
onTabClick: _propTypes["default"].func
|
|
423
468
|
};
|
|
424
469
|
var _default = Tabs;
|
|
@@ -62,8 +62,10 @@ export declare type TextFieldProps = {
|
|
|
62
62
|
classes?: {
|
|
63
63
|
input?: string;
|
|
64
64
|
};
|
|
65
|
-
/**
|
|
65
|
+
/** Атрибут элемента input */
|
|
66
66
|
inputMode?: 'numeric' | 'tel' | 'decimal' | 'email' | 'url' | 'search' | 'none';
|
|
67
|
+
/** Атрибут элемента input. Не работает с textarea=true */
|
|
68
|
+
autoComplete?: string;
|
|
67
69
|
/** Переводит компонент в контролируемое состояние */
|
|
68
70
|
isControlled?: boolean;
|
|
69
71
|
/** Обработчик изменения значения */
|