@skbkontur/react-ui 3.6.0 → 3.8.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 +71 -0
- package/cjs/components/Button/Button.d.ts +1 -0
- package/cjs/components/Button/Button.js +7 -4
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.js +2 -2
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.js +9 -8
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js +3 -2
- package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/components/CurrencyLabel/CurrencyLabel.js +14 -5
- package/cjs/components/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/cjs/components/CurrencyLabel/CurrencyLabel.styles.d.ts +4 -0
- package/cjs/components/CurrencyLabel/CurrencyLabel.styles.js +9 -0
- package/cjs/components/CurrencyLabel/CurrencyLabel.styles.js.map +1 -0
- package/cjs/components/FxInput/FxInput.js +1 -1
- package/cjs/components/FxInput/FxInput.js.map +1 -1
- package/cjs/components/Input/Input.styles.js +1 -1
- package/cjs/components/Input/Input.styles.js.map +1 -1
- package/cjs/components/Kebab/Kebab.js +2 -2
- package/cjs/components/Kebab/Kebab.js.map +1 -1
- package/cjs/components/Link/Link.js +2 -2
- package/cjs/components/Link/Link.js.map +1 -1
- package/cjs/components/Loader/Loader.d.ts +3 -1
- package/cjs/components/Loader/Loader.js +20 -1
- package/cjs/components/Loader/Loader.js.map +1 -1
- package/cjs/components/MenuItem/MenuItem.md +1 -1
- package/cjs/components/MenuItem/MenuItem.styles.js +3 -2
- package/cjs/components/MenuItem/MenuItem.styles.js.map +1 -1
- package/cjs/components/Modal/Modal.styles.d.ts +1 -0
- package/cjs/components/Modal/Modal.styles.js +24 -21
- package/cjs/components/Modal/Modal.styles.js.map +1 -1
- package/cjs/components/Modal/ModalClose.js +23 -3
- package/cjs/components/Modal/ModalClose.js.map +1 -1
- package/cjs/components/Paging/Paging.js +2 -2
- package/cjs/components/Paging/Paging.js.map +1 -1
- package/cjs/components/Paging/Paging.styles.js +2 -1
- package/cjs/components/Paging/Paging.styles.js.map +1 -1
- package/cjs/components/Radio/Radio.d.ts +9 -1
- package/cjs/components/Radio/Radio.js +37 -4
- package/cjs/components/Radio/Radio.js.map +1 -1
- package/cjs/components/Radio/Radio.styles.d.ts +1 -1
- package/cjs/components/Radio/Radio.styles.js +5 -10
- package/cjs/components/Radio/Radio.styles.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollBar.d.ts +37 -0
- package/cjs/components/ScrollContainer/ScrollBar.js +244 -0
- package/cjs/components/ScrollContainer/ScrollBar.js.map +1 -0
- package/cjs/components/ScrollContainer/ScrollContainer.constants.d.ts +23 -0
- package/cjs/components/ScrollContainer/ScrollContainer.constants.js +33 -0
- package/cjs/components/ScrollContainer/ScrollContainer.constants.js.map +1 -0
- package/cjs/components/ScrollContainer/ScrollContainer.d.ts +38 -23
- package/cjs/components/ScrollContainer/ScrollContainer.helpers.d.ts +10 -0
- package/cjs/components/ScrollContainer/ScrollContainer.helpers.js +62 -0
- package/cjs/components/ScrollContainer/ScrollContainer.helpers.js.map +1 -0
- package/cjs/components/ScrollContainer/ScrollContainer.js +81 -153
- package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.md +62 -13
- package/cjs/components/ScrollContainer/ScrollContainer.styles.d.ts +12 -3
- package/cjs/components/ScrollContainer/ScrollContainer.styles.js +72 -9
- package/cjs/components/ScrollContainer/ScrollContainer.styles.js.map +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +1 -2
- package/cjs/components/SidePage/SidePage.js +1 -5
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/SidePage/SidePage.styles.d.ts +2 -1
- package/cjs/components/SidePage/SidePage.styles.js +44 -28
- package/cjs/components/SidePage/SidePage.styles.js.map +1 -1
- package/cjs/components/SidePage/SidePageHeader.d.ts +4 -1
- package/cjs/components/SidePage/SidePageHeader.js +33 -23
- package/cjs/components/SidePage/SidePageHeader.js.map +1 -1
- package/cjs/components/Switcher/Switcher.js +1 -1
- package/cjs/components/Switcher/Switcher.js.map +1 -1
- package/cjs/components/Switcher/Switcher.styles.d.ts +1 -1
- package/cjs/components/Switcher/Switcher.styles.js +3 -2
- package/cjs/components/Switcher/Switcher.styles.js.map +1 -1
- package/cjs/components/Tabs/Tab.d.ts +0 -3
- package/cjs/components/Tabs/Tab.js +3 -13
- package/cjs/components/Tabs/Tab.js.map +1 -1
- package/cjs/components/Tabs/Tab.styles.js +2 -2
- package/cjs/components/Tabs/Tab.styles.js.map +1 -1
- package/cjs/components/Toggle/Toggle.js +6 -5
- package/cjs/components/Toggle/Toggle.js.map +1 -1
- package/cjs/components/Toggle/Toggle.styles.d.ts +1 -0
- package/cjs/components/Toggle/Toggle.styles.js +26 -16
- package/cjs/components/Toggle/Toggle.styles.js.map +1 -1
- package/cjs/components/Token/Token.styles.js +8 -9
- package/cjs/components/Token/Token.styles.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.d.ts +8 -0
- package/cjs/components/TokenInput/TokenInput.js +24 -2
- package/cjs/components/TokenInput/TokenInput.js.map +1 -1
- package/cjs/components/Tooltip/Tooltip.styles.js +2 -1
- package/cjs/components/Tooltip/Tooltip.styles.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.js +2 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBoxReducer.js +3 -2
- package/cjs/internal/CustomComboBox/CustomComboBoxReducer.js.map +1 -1
- package/cjs/internal/HideBodyVerticalScroll/HideBodyVerticalScroll.js +5 -7
- package/cjs/internal/HideBodyVerticalScroll/HideBodyVerticalScroll.js.map +1 -1
- package/cjs/internal/InputLikeText/InputLikeText.js +2 -1
- package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
- package/cjs/internal/PopupMenu/PopupMenu.js +1 -1
- package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
- package/cjs/internal/RenderContainer/RenderContainer.js +2 -1
- package/cjs/internal/RenderContainer/RenderContainer.js.map +1 -1
- package/cjs/internal/ThemePlayground/darkTheme.js +3 -3
- package/cjs/internal/ThemePlayground/darkTheme.js.map +1 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/icons/CrossIcon.js +8 -1
- package/cjs/internal/icons/CrossIcon.js.map +1 -1
- package/cjs/internal/themes/DefaultTheme.d.ts +23 -7
- package/cjs/internal/themes/DefaultTheme.js +77 -32
- package/cjs/internal/themes/DefaultTheme.js.map +1 -1
- package/cjs/internal/themes/FlatTheme.d.ts +4 -4
- package/cjs/internal/themes/FlatTheme.js +16 -8
- package/cjs/internal/themes/FlatTheme.js.map +1 -1
- package/cjs/internal/themes/Theme8px.d.ts +0 -5
- package/cjs/internal/themes/Theme8px.js +2 -12
- package/cjs/internal/themes/Theme8px.js.map +1 -1
- package/cjs/lib/Upgrades.d.ts +2 -0
- package/cjs/lib/Upgrades.js +14 -0
- package/cjs/lib/Upgrades.js.map +1 -1
- package/cjs/lib/events/keyListener.d.ts +7 -0
- package/cjs/lib/events/keyListener.js +22 -0
- package/cjs/lib/events/keyListener.js.map +1 -0
- package/cjs/lib/events/keyboard/identifiers.d.ts +1 -0
- package/cjs/lib/events/keyboard/identifiers.js +6 -1
- package/cjs/lib/events/keyboard/identifiers.js.map +1 -1
- package/cjs/lib/events/tabListener.d.ts +1 -6
- package/cjs/lib/events/tabListener.js +2 -15
- package/cjs/lib/events/tabListener.js.map +1 -1
- package/cjs/lib/locale/LOCALECONTEXT.md +1 -1
- package/cjs/lib/styles/ColorFunctions.js +1 -1
- package/cjs/lib/styles/ColorFunctions.js.map +1 -1
- package/cjs/lib/theming/Emotion.js +1 -1
- package/cjs/lib/theming/Emotion.js.map +1 -1
- package/cjs/lib/theming/ThemeContext.md +1 -1
- package/cjs/lib/utils.d.ts +7 -0
- package/cjs/lib/utils.js +12 -2
- package/cjs/lib/utils.js.map +1 -1
- package/components/Button/Button/Button.js +5 -4
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +1 -0
- package/components/Button/Button.styles/Button.styles.js +1 -1
- package/components/Button/Button.styles/Button.styles.js.map +1 -1
- package/components/Checkbox/Checkbox/Checkbox.js +5 -5
- package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
- package/components/Checkbox/Checkbox.styles/Checkbox.styles.js +2 -2
- package/components/Checkbox/Checkbox.styles/Checkbox.styles.js.map +1 -1
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js +11 -5
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/components/CurrencyLabel/CurrencyLabel.styles/CurrencyLabel.styles.js +10 -0
- package/components/CurrencyLabel/CurrencyLabel.styles/CurrencyLabel.styles.js.map +1 -0
- package/components/CurrencyLabel/CurrencyLabel.styles/package.json +6 -0
- package/components/CurrencyLabel/CurrencyLabel.styles.d.ts +4 -0
- package/components/FxInput/FxInput/FxInput.js +2 -1
- package/components/FxInput/FxInput/FxInput.js.map +1 -1
- package/components/Input/Input.styles/Input.styles.js +1 -1
- package/components/Input/Input.styles/Input.styles.js.map +1 -1
- package/components/Kebab/Kebab/Kebab.js +2 -2
- package/components/Kebab/Kebab/Kebab.js.map +1 -1
- package/components/Link/Link/Link.js +2 -2
- package/components/Link/Link/Link.js.map +1 -1
- package/components/Loader/Loader/Loader.js +34 -14
- package/components/Loader/Loader/Loader.js.map +1 -1
- package/components/Loader/Loader.d.ts +3 -1
- package/components/MenuItem/MenuItem.md +1 -1
- package/components/MenuItem/MenuItem.styles/MenuItem.styles.js +1 -1
- package/components/MenuItem/MenuItem.styles/MenuItem.styles.js.map +1 -1
- package/components/Modal/Modal.styles/Modal.styles.js +18 -15
- package/components/Modal/Modal.styles/Modal.styles.js.map +1 -1
- package/components/Modal/Modal.styles.d.ts +1 -0
- package/components/Modal/ModalClose/ModalClose.js +25 -2
- package/components/Modal/ModalClose/ModalClose.js.map +1 -1
- package/components/Paging/Paging/Paging.js +2 -2
- package/components/Paging/Paging/Paging.js.map +1 -1
- package/components/Paging/Paging.styles/Paging.styles.js +1 -1
- package/components/Paging/Paging.styles/Paging.styles.js.map +1 -1
- package/components/Radio/Radio/Radio.js +36 -3
- package/components/Radio/Radio/Radio.js.map +1 -1
- package/components/Radio/Radio.d.ts +9 -1
- package/components/Radio/Radio.styles/Radio.styles.js +3 -3
- package/components/Radio/Radio.styles/Radio.styles.js.map +1 -1
- package/components/Radio/Radio.styles.d.ts +1 -1
- package/components/ScrollContainer/ScrollBar/ScrollBar.js +254 -0
- package/components/ScrollContainer/ScrollBar/ScrollBar.js.map +1 -0
- package/components/ScrollContainer/ScrollBar/package.json +6 -0
- package/components/ScrollContainer/ScrollBar.d.ts +37 -0
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +121 -205
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.constants/ScrollContainer.constants.js +31 -0
- package/components/ScrollContainer/ScrollContainer.constants/ScrollContainer.constants.js.map +1 -0
- package/components/ScrollContainer/ScrollContainer.constants/package.json +6 -0
- package/components/ScrollContainer/ScrollContainer.constants.d.ts +23 -0
- package/components/ScrollContainer/ScrollContainer.d.ts +38 -23
- package/components/ScrollContainer/ScrollContainer.helpers/ScrollContainer.helpers.js +55 -0
- package/components/ScrollContainer/ScrollContainer.helpers/ScrollContainer.helpers.js.map +1 -0
- package/components/ScrollContainer/ScrollContainer.helpers/package.json +6 -0
- package/components/ScrollContainer/ScrollContainer.helpers.d.ts +10 -0
- package/components/ScrollContainer/ScrollContainer.md +62 -13
- package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js +23 -9
- package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.styles.d.ts +12 -3
- package/components/SidePage/SidePage/SidePage.js +2 -4
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +1 -2
- package/components/SidePage/SidePage.styles/SidePage.styles.js +20 -16
- package/components/SidePage/SidePage.styles/SidePage.styles.js.map +1 -1
- package/components/SidePage/SidePage.styles.d.ts +2 -1
- package/components/SidePage/SidePageHeader/SidePageHeader.js +40 -22
- package/components/SidePage/SidePageHeader/SidePageHeader.js.map +1 -1
- package/components/SidePage/SidePageHeader.d.ts +4 -1
- package/components/Switcher/Switcher/Switcher.js +1 -1
- package/components/Switcher/Switcher/Switcher.js.map +1 -1
- package/components/Switcher/Switcher.styles/Switcher.styles.js +2 -2
- package/components/Switcher/Switcher.styles/Switcher.styles.js.map +1 -1
- package/components/Switcher/Switcher.styles.d.ts +1 -1
- package/components/Tabs/Tab/Tab.js +2 -16
- package/components/Tabs/Tab/Tab.js.map +1 -1
- package/components/Tabs/Tab.d.ts +0 -3
- package/components/Tabs/Tab.styles/Tab.styles.js +1 -1
- package/components/Tabs/Tab.styles/Tab.styles.js.map +1 -1
- package/components/Toggle/Toggle/Toggle.js +5 -5
- package/components/Toggle/Toggle/Toggle.js.map +1 -1
- package/components/Toggle/Toggle.styles/Toggle.styles.js +15 -12
- package/components/Toggle/Toggle.styles/Toggle.styles.js.map +1 -1
- package/components/Toggle/Toggle.styles.d.ts +1 -0
- package/components/Token/Token.styles/Token.styles.js +2 -2
- package/components/Token/Token.styles/Token.styles.js.map +1 -1
- package/components/TokenInput/TokenInput/TokenInput.js +24 -2
- package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +8 -0
- package/components/Tooltip/Tooltip.styles/Tooltip.styles.js +1 -1
- package/components/Tooltip/Tooltip.styles/Tooltip.styles.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +2 -1
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js +3 -2
- package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js.map +1 -1
- package/internal/HideBodyVerticalScroll/HideBodyVerticalScroll/HideBodyVerticalScroll.js +4 -4
- package/internal/HideBodyVerticalScroll/HideBodyVerticalScroll/HideBodyVerticalScroll.js.map +1 -1
- package/internal/InputLikeText/InputLikeText/InputLikeText.js +2 -1
- package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
- package/internal/PopupMenu/PopupMenu/PopupMenu.js +2 -2
- package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
- package/internal/RenderContainer/RenderContainer/RenderContainer.js +2 -1
- package/internal/RenderContainer/RenderContainer/RenderContainer.js.map +1 -1
- package/internal/ThemePlayground/darkTheme/darkTheme.js +3 -3
- package/internal/ThemePlayground/darkTheme/darkTheme.js.map +1 -1
- package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/internal/icons/CrossIcon/CrossIcon.js +2 -1
- package/internal/icons/CrossIcon/CrossIcon.js.map +1 -1
- package/internal/themes/DefaultTheme/DefaultTheme.js +100 -19
- package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
- package/internal/themes/DefaultTheme.d.ts +23 -7
- package/internal/themes/FlatTheme/FlatTheme.js +18 -6
- package/internal/themes/FlatTheme/FlatTheme.js.map +1 -1
- package/internal/themes/FlatTheme.d.ts +4 -4
- package/internal/themes/Theme8px/Theme8px.js +1 -14
- package/internal/themes/Theme8px/Theme8px.js.map +1 -1
- package/internal/themes/Theme8px.d.ts +0 -5
- package/lib/Upgrades/Upgrades.js +13 -0
- package/lib/Upgrades/Upgrades.js.map +1 -1
- package/lib/Upgrades.d.ts +2 -0
- package/lib/events/keyListener/keyListener.js +22 -0
- package/lib/events/keyListener/keyListener.js.map +1 -0
- package/lib/events/keyListener/package.json +6 -0
- package/lib/events/keyListener.d.ts +7 -0
- package/lib/events/keyboard/identifiers/identifiers.js +10 -1
- package/lib/events/keyboard/identifiers/identifiers.js.map +1 -1
- package/lib/events/keyboard/identifiers.d.ts +1 -0
- package/lib/events/tabListener/tabListener.js +2 -19
- package/lib/events/tabListener/tabListener.js.map +1 -1
- package/lib/events/tabListener.d.ts +1 -6
- package/lib/locale/LOCALECONTEXT.md +1 -1
- package/lib/styles/ColorFunctions/ColorFunctions.js +1 -1
- package/lib/styles/ColorFunctions/ColorFunctions.js.map +1 -1
- package/lib/theming/Emotion/Emotion.js +1 -1
- package/lib/theming/Emotion/Emotion.js.map +1 -1
- package/lib/theming/ThemeContext.md +1 -1
- package/lib/utils/utils.js +10 -0
- package/lib/utils/utils.js.map +1 -1
- package/lib/utils.d.ts +7 -0
- package/package.json +2 -2
|
@@ -2,12 +2,12 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import * as LayoutEvents from "../../../lib/LayoutEvents";
|
|
5
|
-
import { getScrollWidth } from "../../../lib/dom/getScrollWidth";
|
|
6
5
|
import { CommonWrapper } from "../../../internal/CommonWrapper";
|
|
7
6
|
import { cx } from "../../../lib/theming/Emotion";
|
|
8
|
-
import { styles } from "../ScrollContainer.styles";
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
import { styles, globalClasses } from "../ScrollContainer.styles";
|
|
8
|
+
import { scrollSizeParametersNames } from "../ScrollContainer.constants";
|
|
9
|
+
import { getScrollYOffset, convertScrollbarXScrollState, convertScrollbarYScrollState } from "../ScrollContainer.helpers";
|
|
10
|
+
import { ScrollBar } from "../ScrollBar";
|
|
11
11
|
export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
|
|
12
12
|
_inheritsLoose(ScrollContainer, _React$Component);
|
|
13
13
|
|
|
@@ -19,160 +19,96 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
|
|
22
|
-
_this.
|
|
23
|
-
|
|
24
|
-
scrollSize: 0,
|
|
25
|
-
scrollPos: 0,
|
|
26
|
-
// Mouse is moving where big scrollbar can be located.
|
|
27
|
-
hover: false,
|
|
28
|
-
// True when scroll is following mouse (mouse down on scroll).
|
|
29
|
-
scrolling: false,
|
|
30
|
-
scrollState: 'top'
|
|
31
|
-
};
|
|
22
|
+
_this.scrollX = void 0;
|
|
23
|
+
_this.scrollY = void 0;
|
|
32
24
|
_this.inner = void 0;
|
|
33
|
-
_this.scroll = void 0;
|
|
34
|
-
|
|
35
|
-
_this.refInner = function (element) {
|
|
36
|
-
if (!_this.inner && element && _this.props.preventWindowScroll) {
|
|
37
|
-
element.addEventListener('wheel', _this.handleInnerScrollWheel, {
|
|
38
|
-
passive: false
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
if (_this.inner && !element) {
|
|
43
|
-
_this.inner.removeEventListener('wheel', _this.handleInnerScrollWheel);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
_this.inner = element;
|
|
47
|
-
};
|
|
48
25
|
|
|
49
|
-
_this.
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
if (_this.scroll && !element) {
|
|
57
|
-
_this.scroll.removeEventListener('wheel', _this.handleScrollWheel);
|
|
58
|
-
}
|
|
26
|
+
_this.render = function () {
|
|
27
|
+
var props = _this.props;
|
|
28
|
+
var innerStyle = {
|
|
29
|
+
scrollBehavior: props.scrollBehaviour,
|
|
30
|
+
maxHeight: props.maxHeight,
|
|
31
|
+
maxWidth: props.maxWidth
|
|
32
|
+
};
|
|
59
33
|
|
|
60
|
-
|
|
34
|
+
var scrollbarY = _this.renderScrollbar('y');
|
|
35
|
+
|
|
36
|
+
var scrollbarX = _this.renderScrollbar('x');
|
|
37
|
+
|
|
38
|
+
return /*#__PURE__*/React.createElement(CommonWrapper, _this.props, /*#__PURE__*/React.createElement("div", {
|
|
39
|
+
className: styles.root(),
|
|
40
|
+
onMouseMove: _this.handleMouseMove,
|
|
41
|
+
onMouseLeave: _this.handleMouseLeave
|
|
42
|
+
}, scrollbarY, scrollbarX, /*#__PURE__*/React.createElement("div", {
|
|
43
|
+
style: innerStyle,
|
|
44
|
+
ref: _this.refInner,
|
|
45
|
+
className: cx(styles.inner(), globalClasses.inner),
|
|
46
|
+
"data-tid": "ScrollContainer__inner",
|
|
47
|
+
onScroll: _this.handleNativeScroll
|
|
48
|
+
}, props.children)));
|
|
61
49
|
};
|
|
62
50
|
|
|
63
|
-
_this.
|
|
64
|
-
_this.
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
LayoutEvents.emit();
|
|
51
|
+
_this.renderScrollbar = function (axis) {
|
|
52
|
+
var refScrollBar = axis === 'x' ? _this.refScrollBarX : _this.refScrollBarY;
|
|
53
|
+
return /*#__PURE__*/React.createElement(ScrollBar, {
|
|
54
|
+
axis: axis,
|
|
55
|
+
ref: refScrollBar,
|
|
56
|
+
invert: _this.props.invert,
|
|
57
|
+
onScrollStateChange: _this.handleScrollStateChange
|
|
58
|
+
});
|
|
74
59
|
};
|
|
75
60
|
|
|
76
|
-
_this.
|
|
77
|
-
if (!_this.
|
|
61
|
+
_this.handleScrollStateChange = function (scrollState, axis) {
|
|
62
|
+
if (!_this.scrollY || !_this.scrollX) {
|
|
78
63
|
return;
|
|
79
64
|
}
|
|
80
65
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
var scrollActive = containerHeight < contentHeight;
|
|
85
|
-
|
|
86
|
-
if (!scrollActive && !_this.state.scrollActive) {
|
|
66
|
+
if (axis === 'x') {
|
|
67
|
+
var scrollXState = convertScrollbarXScrollState(scrollState);
|
|
68
|
+
_this.props.onScrollStateChangeX == null ? void 0 : _this.props.onScrollStateChangeX(scrollXState);
|
|
87
69
|
return;
|
|
88
70
|
}
|
|
89
71
|
|
|
90
|
-
var
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
if (scrollActive) {
|
|
95
|
-
scrollSize = Math.max(containerHeight / contentHeight * containerHeight, MIN_SCROLL_SIZE);
|
|
96
|
-
scrollPos = scrollTop / (contentHeight - containerHeight) * (containerHeight - scrollSize);
|
|
97
|
-
}
|
|
72
|
+
var scrollYState = convertScrollbarYScrollState(scrollState);
|
|
73
|
+
_this.props.onScrollStateChange == null ? void 0 : _this.props.onScrollStateChange(scrollYState);
|
|
74
|
+
_this.props.onScrollStateChangeY == null ? void 0 : _this.props.onScrollStateChangeY(scrollYState);
|
|
75
|
+
};
|
|
98
76
|
|
|
99
|
-
|
|
100
|
-
|
|
77
|
+
_this.refScrollBarY = function (scrollbar) {
|
|
78
|
+
_this.scrollY = scrollbar;
|
|
79
|
+
};
|
|
101
80
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
81
|
+
_this.refScrollBarX = function (scrollbar) {
|
|
82
|
+
_this.scrollX = scrollbar;
|
|
83
|
+
};
|
|
105
84
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
scrollState: scrollState
|
|
85
|
+
_this.refInner = function (element) {
|
|
86
|
+
if (!_this.inner && element && _this.props.preventWindowScroll) {
|
|
87
|
+
element.addEventListener('wheel', _this.handleInnerScrollWheel, {
|
|
88
|
+
passive: false
|
|
111
89
|
});
|
|
112
90
|
}
|
|
113
|
-
};
|
|
114
91
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
return;
|
|
92
|
+
if (_this.inner && !element) {
|
|
93
|
+
_this.inner.removeEventListener('wheel', _this.handleInnerScrollWheel);
|
|
118
94
|
}
|
|
119
95
|
|
|
120
|
-
|
|
121
|
-
var initialY = event.clientY;
|
|
122
|
-
var initialScrollTop = _this.inner.scrollTop;
|
|
123
|
-
|
|
124
|
-
var mouseMove = function mouseMove(mouseMoveEvent) {
|
|
125
|
-
if (!_this.inner) {
|
|
126
|
-
return;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
var ratio = (_this.inner.scrollHeight - _this.inner.offsetHeight) / (_this.inner.offsetHeight - _this.state.scrollSize);
|
|
130
|
-
var deltaY = (mouseMoveEvent.clientY - initialY) * ratio;
|
|
131
|
-
_this.inner.scrollTop = initialScrollTop + deltaY;
|
|
132
|
-
|
|
133
|
-
if (mouseMoveEvent.preventDefault) {
|
|
134
|
-
mouseMoveEvent.preventDefault();
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {
|
|
138
|
-
mouseMoveEvent.returnValue = false;
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
var mouseUp = function mouseUp() {
|
|
143
|
-
target.removeEventListener('mousemove', mouseMove);
|
|
144
|
-
target.removeEventListener('mouseup', mouseUp);
|
|
145
|
-
|
|
146
|
-
_this.setState({
|
|
147
|
-
scrolling: false
|
|
148
|
-
});
|
|
149
|
-
};
|
|
150
|
-
|
|
151
|
-
target.addEventListener('mousemove', mouseMove);
|
|
152
|
-
target.addEventListener('mouseup', mouseUp);
|
|
153
|
-
|
|
154
|
-
_this.setState({
|
|
155
|
-
scrolling: true
|
|
156
|
-
});
|
|
157
|
-
|
|
158
|
-
event.preventDefault();
|
|
96
|
+
_this.inner = element;
|
|
159
97
|
};
|
|
160
98
|
|
|
161
|
-
_this.
|
|
162
|
-
|
|
163
|
-
return;
|
|
164
|
-
}
|
|
99
|
+
_this.handleNativeScroll = function (event) {
|
|
100
|
+
var _this$scrollX, _this$scrollY;
|
|
165
101
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
102
|
+
(_this$scrollX = _this.scrollX) == null ? void 0 : _this$scrollX.reflow();
|
|
103
|
+
(_this$scrollY = _this.scrollY) == null ? void 0 : _this$scrollY.reflow();
|
|
104
|
+
_this.props.onScroll == null ? void 0 : _this.props.onScroll(event);
|
|
169
105
|
|
|
170
|
-
if (
|
|
106
|
+
if (_this.props.preventWindowScroll) {
|
|
107
|
+
event.preventDefault();
|
|
171
108
|
return;
|
|
172
109
|
}
|
|
173
110
|
|
|
174
|
-
|
|
175
|
-
event.preventDefault();
|
|
111
|
+
LayoutEvents.emit();
|
|
176
112
|
};
|
|
177
113
|
|
|
178
114
|
_this.handleInnerScrollWheel = function (event) {
|
|
@@ -180,13 +116,20 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
180
116
|
return;
|
|
181
117
|
}
|
|
182
118
|
|
|
183
|
-
|
|
184
|
-
|
|
119
|
+
var axis = event.shiftKey ? 'x' : 'y';
|
|
120
|
+
|
|
121
|
+
if (_this.hasScrollBar(axis)) {
|
|
122
|
+
var _scrollSizeParameters = scrollSizeParametersNames[axis],
|
|
123
|
+
pos = _scrollSizeParameters.pos,
|
|
124
|
+
size = _scrollSizeParameters.size,
|
|
125
|
+
offset = _scrollSizeParameters.offset;
|
|
126
|
+
|
|
127
|
+
if (event.deltaY > 0 && _this.inner[size] <= _this.inner[pos] + _this.inner[offset]) {
|
|
185
128
|
event.preventDefault();
|
|
186
129
|
return false;
|
|
187
130
|
}
|
|
188
131
|
|
|
189
|
-
if (event.deltaY < 0 && _this.inner
|
|
132
|
+
if (event.deltaY < 0 && _this.inner[pos] <= 0) {
|
|
190
133
|
event.preventDefault();
|
|
191
134
|
return false;
|
|
192
135
|
}
|
|
@@ -194,13 +137,19 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
194
137
|
};
|
|
195
138
|
|
|
196
139
|
_this.handleMouseMove = function (event) {
|
|
197
|
-
var
|
|
140
|
+
var _this$scrollY2, _this$scrollX2;
|
|
198
141
|
|
|
199
|
-
|
|
142
|
+
var right = event.currentTarget.getBoundingClientRect().right - event.pageX;
|
|
143
|
+
var bottom = event.currentTarget.getBoundingClientRect().bottom - event.pageY;
|
|
144
|
+
(_this$scrollY2 = _this.scrollY) == null ? void 0 : _this$scrollY2.setHover(right <= 12);
|
|
145
|
+
(_this$scrollX2 = _this.scrollX) == null ? void 0 : _this$scrollX2.setHover(right >= 12 && bottom <= 12);
|
|
200
146
|
};
|
|
201
147
|
|
|
202
148
|
_this.handleMouseLeave = function () {
|
|
203
|
-
_this
|
|
149
|
+
var _this$scrollY3, _this$scrollX3;
|
|
150
|
+
|
|
151
|
+
(_this$scrollY3 = _this.scrollY) == null ? void 0 : _this$scrollY3.setHover(false);
|
|
152
|
+
(_this$scrollX3 = _this.scrollX) == null ? void 0 : _this$scrollX3.setHover(false);
|
|
204
153
|
};
|
|
205
154
|
|
|
206
155
|
return _this;
|
|
@@ -209,7 +158,10 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
209
158
|
var _proto = ScrollContainer.prototype;
|
|
210
159
|
|
|
211
160
|
_proto.componentDidMount = function componentDidMount() {
|
|
212
|
-
|
|
161
|
+
var _this$scrollX4, _this$scrollY4;
|
|
162
|
+
|
|
163
|
+
(_this$scrollX4 = this.scrollX) == null ? void 0 : _this$scrollX4.setInnerElement(this.inner);
|
|
164
|
+
(_this$scrollY4 = this.scrollY) == null ? void 0 : _this$scrollY4.setInnerElement(this.inner);
|
|
213
165
|
};
|
|
214
166
|
|
|
215
167
|
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
|
|
@@ -224,115 +176,76 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
224
176
|
});
|
|
225
177
|
}
|
|
226
178
|
}
|
|
227
|
-
|
|
228
|
-
this.reflow();
|
|
229
179
|
};
|
|
180
|
+
/**
|
|
181
|
+
* @public
|
|
182
|
+
* @param {HTMLElement} element
|
|
183
|
+
*/
|
|
230
184
|
|
|
231
|
-
_proto.render = function render() {
|
|
232
|
-
var state = this.state;
|
|
233
|
-
var props = this.props;
|
|
234
|
-
var scroll = null;
|
|
235
|
-
|
|
236
|
-
if (state.scrollActive) {
|
|
237
|
-
var _cx;
|
|
238
185
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
height: state.scrollSize
|
|
243
|
-
};
|
|
244
|
-
scroll = /*#__PURE__*/React.createElement("div", {
|
|
245
|
-
ref: this.refScroll,
|
|
246
|
-
className: scrollClass,
|
|
247
|
-
style: scrollStyle,
|
|
248
|
-
onMouseDown: this.handleScrollMouseDown
|
|
249
|
-
});
|
|
186
|
+
_proto.scrollTo = function scrollTo(element) {
|
|
187
|
+
if (!element || !this.inner) {
|
|
188
|
+
return;
|
|
250
189
|
}
|
|
251
190
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
marginRight: -1 * HIDE_SCROLLBAR_OFFSET,
|
|
255
|
-
paddingRight: HIDE_SCROLLBAR_OFFSET - getScrollWidth(),
|
|
256
|
-
maxHeight: props.maxHeight,
|
|
257
|
-
scrollBehavior: props.scrollBehaviour
|
|
258
|
-
};
|
|
259
|
-
return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
|
|
260
|
-
className: styles.root(),
|
|
261
|
-
onMouseMove: this.handleMouseMove,
|
|
262
|
-
onMouseLeave: this.handleMouseLeave
|
|
263
|
-
}, scroll, /*#__PURE__*/React.createElement("div", {
|
|
264
|
-
"data-tid": "ScrollContainer__inner",
|
|
265
|
-
className: styles.inner(),
|
|
266
|
-
style: innerStyle,
|
|
267
|
-
ref: this.refInner,
|
|
268
|
-
onScroll: this.handleNativeScroll
|
|
269
|
-
}, props.children)));
|
|
191
|
+
this.inner.scrollLeft = element.offsetLeft;
|
|
192
|
+
this.inner.scrollTop = getScrollYOffset(element, this.inner);
|
|
270
193
|
}
|
|
271
194
|
/**
|
|
272
195
|
* @public
|
|
273
|
-
* @param {HTMLElement} element
|
|
274
196
|
*/
|
|
275
197
|
;
|
|
276
198
|
|
|
277
|
-
_proto.
|
|
278
|
-
if (!
|
|
199
|
+
_proto.scrollToTop = function scrollToTop() {
|
|
200
|
+
if (!this.inner) {
|
|
279
201
|
return;
|
|
280
202
|
}
|
|
281
203
|
|
|
282
|
-
|
|
204
|
+
this.inner.scrollTop = 0;
|
|
205
|
+
}
|
|
206
|
+
/**
|
|
207
|
+
* @public
|
|
208
|
+
*/
|
|
209
|
+
;
|
|
283
210
|
|
|
284
|
-
|
|
285
|
-
|
|
211
|
+
_proto.scrollToBottom = function scrollToBottom() {
|
|
212
|
+
if (!this.inner) {
|
|
286
213
|
return;
|
|
287
214
|
}
|
|
288
215
|
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
if (this.inner.scrollTop < minScroll) {
|
|
292
|
-
this.inner.scrollTop = minScroll;
|
|
293
|
-
}
|
|
216
|
+
this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;
|
|
294
217
|
}
|
|
295
218
|
/**
|
|
296
219
|
* @public
|
|
297
220
|
*/
|
|
298
221
|
;
|
|
299
222
|
|
|
300
|
-
_proto.
|
|
223
|
+
_proto.scrollToLeft = function scrollToLeft() {
|
|
301
224
|
if (!this.inner) {
|
|
302
225
|
return;
|
|
303
226
|
}
|
|
304
227
|
|
|
305
|
-
this.inner.
|
|
228
|
+
this.inner.scrollLeft = 0;
|
|
306
229
|
}
|
|
307
230
|
/**
|
|
308
231
|
* @public
|
|
309
232
|
*/
|
|
310
233
|
;
|
|
311
234
|
|
|
312
|
-
_proto.
|
|
235
|
+
_proto.scrollToRight = function scrollToRight() {
|
|
313
236
|
if (!this.inner) {
|
|
314
237
|
return;
|
|
315
238
|
}
|
|
316
239
|
|
|
317
|
-
this.inner.
|
|
240
|
+
this.inner.scrollLeft = this.inner.scrollWidth - this.inner.offsetWidth;
|
|
318
241
|
};
|
|
319
242
|
|
|
320
|
-
_proto.
|
|
321
|
-
if (this.
|
|
322
|
-
|
|
323
|
-
hover: hover
|
|
324
|
-
});
|
|
243
|
+
_proto.hasScrollBar = function hasScrollBar(axis) {
|
|
244
|
+
if (!this.inner) {
|
|
245
|
+
return false;
|
|
325
246
|
}
|
|
326
|
-
};
|
|
327
247
|
|
|
328
|
-
|
|
329
|
-
if (!this.inner || this.inner.scrollTop === 0) {
|
|
330
|
-
return 'top';
|
|
331
|
-
} else if (this.inner.scrollTop === this.inner.scrollHeight - this.inner.clientHeight) {
|
|
332
|
-
return 'bottom';
|
|
333
|
-
} else {
|
|
334
|
-
return 'scroll';
|
|
335
|
-
}
|
|
248
|
+
return axis === 'x' ? this.inner.offsetWidth < this.inner.scrollWidth : this.inner.offsetHeight < this.inner.scrollHeight;
|
|
336
249
|
};
|
|
337
250
|
|
|
338
251
|
return ScrollContainer;
|
|
@@ -340,11 +253,14 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
340
253
|
ScrollContainer.__KONTUR_REACT_UI__ = 'ScrollContainer';
|
|
341
254
|
ScrollContainer.propTypes = {
|
|
342
255
|
invert: PropTypes.bool,
|
|
256
|
+
maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
343
257
|
maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
344
258
|
scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),
|
|
345
259
|
preventWindowScroll: PropTypes.bool,
|
|
346
260
|
onScrollStateChange: PropTypes.func
|
|
347
261
|
};
|
|
348
262
|
ScrollContainer.defaultProps = {
|
|
349
|
-
|
|
263
|
+
invert: false,
|
|
264
|
+
scrollBehaviour: 'auto',
|
|
265
|
+
preventWindowScroll: false
|
|
350
266
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ScrollContainer.tsx"],"names":["React","PropTypes","LayoutEvents","getScrollWidth","CommonWrapper","cx","styles","HIDE_SCROLLBAR_OFFSET","MIN_SCROLL_SIZE","ScrollContainer","state","scrollActive","scrollSize","scrollPos","hover","scrolling","scrollState","inner","scroll","refInner","element","props","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","refScroll","handleScrollWheel","handleNativeScroll","event","reflow","onScroll","preventDefault","emit","containerHeight","offsetHeight","contentHeight","scrollHeight","scrollTop","Math","max","getImmediateScrollState","onScrollStateChange","setState","handleScrollMouseDown","target","window","document","initialY","clientY","initialScrollTop","mouseMove","mouseMoveEvent","ratio","deltaY","Object","prototype","hasOwnProperty","call","returnValue","mouseUp","WheelEvent","handleMouseMove","right","currentTarget","getBoundingClientRect","pageX","setHover","handleMouseLeave","componentDidMount","componentDidUpdate","prevProps","render","scrollClass","scrollInvert","Boolean","invert","scrollHover","scrollStyle","top","height","innerStyle","marginRight","paddingRight","maxHeight","scrollBehavior","scrollBehaviour","root","children","scrollTo","maxScroll","offsetTop","minScroll","scrollToTop","scrollToBottom","clientHeight","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","string","number","oneOf","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './ScrollContainer.styles';\n\nconst HIDE_SCROLLBAR_OFFSET = 30;\nconst MIN_SCROLL_SIZE = 20;\n\nexport type ScrollContainerScrollState = 'top' | 'scroll' | 'bottom';\n\nexport type ScrollBehaviour = 'auto' | 'smooth';\n\nexport interface ScrollContainerProps extends CommonProps {\n invert?: boolean;\n maxHeight?: React.CSSProperties['maxHeight'];\n preventWindowScroll?: boolean;\n /**\n * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)\n * @default 'auto'\n */\n scrollBehaviour?: ScrollBehaviour;\n onScrollStateChange?: (scrollState: ScrollContainerScrollState) => void;\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n}\n\nexport interface ScrollContainerState {\n scrollActive: boolean;\n hover: boolean;\n scrolling: boolean;\n scrollSize: number;\n scrollPos: number;\n scrollState: ScrollContainerScrollState;\n}\n\nexport class ScrollContainer extends React.Component<ScrollContainerProps, ScrollContainerState> {\n public static __KONTUR_REACT_UI__ = 'ScrollContainer';\n\n public static propTypes = {\n invert: PropTypes.bool,\n maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),\n preventWindowScroll: PropTypes.bool,\n onScrollStateChange: PropTypes.func,\n };\n\n public static defaultProps = {\n scrollBehaviour: 'auto',\n };\n\n public state: ScrollContainerState = {\n scrollActive: false,\n scrollSize: 0,\n scrollPos: 0,\n\n // Mouse is moving where big scrollbar can be located.\n hover: false,\n // True when scroll is following mouse (mouse down on scroll).\n scrolling: false,\n scrollState: 'top',\n };\n\n private inner: Nullable<HTMLElement>;\n private scroll: Nullable<HTMLElement>;\n\n public componentDidMount() {\n this.reflow();\n }\n\n public componentDidUpdate(prevProps: ScrollContainerProps) {\n if (this.inner) {\n if (prevProps.preventWindowScroll && !this.props.preventWindowScroll) {\n this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n }\n if (!prevProps.preventWindowScroll && this.props.preventWindowScroll) {\n this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n }\n }\n this.reflow();\n }\n\n public render() {\n const state = this.state;\n const props = this.props;\n let scroll = null;\n\n if (state.scrollActive) {\n const scrollClass = cx({\n [styles.scroll()]: true,\n [styles.scrollInvert()]: Boolean(props.invert),\n [styles.scrollHover()]: state.hover || state.scrolling,\n });\n const scrollStyle = {\n top: state.scrollPos,\n height: state.scrollSize,\n };\n scroll = (\n <div\n ref={this.refScroll}\n className={scrollClass}\n style={scrollStyle}\n onMouseDown={this.handleScrollMouseDown}\n />\n );\n }\n\n const innerStyle: React.CSSProperties = {\n // hide vertical scrollbar with a little extra space\n marginRight: -1 * HIDE_SCROLLBAR_OFFSET,\n paddingRight: HIDE_SCROLLBAR_OFFSET - getScrollWidth(),\n\n maxHeight: props.maxHeight,\n scrollBehavior: props.scrollBehaviour,\n };\n\n return (\n <CommonWrapper {...this.props}>\n <div className={styles.root()} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>\n {scroll}\n <div\n data-tid=\"ScrollContainer__inner\"\n className={styles.inner()}\n style={innerStyle}\n ref={this.refInner}\n onScroll={this.handleNativeScroll}\n >\n {props.children}\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n /**\n * @public\n * @param {HTMLElement} element\n */\n public scrollTo(element: HTMLElement) {\n if (!element || !this.inner) {\n return;\n }\n const maxScroll = element.offsetTop;\n if (this.inner.scrollTop > maxScroll) {\n this.inner.scrollTop = maxScroll;\n return;\n }\n\n const minScroll = element.offsetTop + element.scrollHeight - this.inner.offsetHeight;\n if (this.inner.scrollTop < minScroll) {\n this.inner.scrollTop = minScroll;\n }\n }\n\n /**\n * @public\n */\n public scrollToTop() {\n if (!this.inner) {\n return;\n }\n this.inner.scrollTop = 0;\n }\n\n /**\n * @public\n */\n public scrollToBottom() {\n if (!this.inner) {\n return;\n }\n this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;\n }\n\n private refInner = (element: HTMLElement | null) => {\n if (!this.inner && element && this.props.preventWindowScroll) {\n element.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n }\n if (this.inner && !element) {\n this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n }\n this.inner = element;\n };\n\n private refScroll = (element: HTMLElement | null) => {\n if (!this.scroll && element) {\n element.addEventListener('wheel', this.handleScrollWheel, { passive: false });\n }\n if (this.scroll && !element) {\n this.scroll.removeEventListener('wheel', this.handleScrollWheel);\n }\n this.scroll = element;\n };\n\n private handleNativeScroll = (event: React.UIEvent<HTMLDivElement>) => {\n this.reflow();\n this.props.onScroll?.(event);\n if (this.props.preventWindowScroll) {\n event.preventDefault();\n return;\n }\n LayoutEvents.emit();\n };\n\n private reflow = () => {\n if (!this.inner) {\n return;\n }\n\n const containerHeight = this.inner.offsetHeight;\n const contentHeight = this.inner.scrollHeight;\n const scrollTop = this.inner.scrollTop;\n\n const scrollActive = containerHeight < contentHeight;\n\n if (!scrollActive && !this.state.scrollActive) {\n return;\n }\n\n let scrollSize = 0;\n let scrollPos = 0;\n let scrollState = this.state.scrollState;\n\n if (scrollActive) {\n scrollSize = Math.max((containerHeight / contentHeight) * containerHeight, MIN_SCROLL_SIZE);\n scrollPos = (scrollTop / (contentHeight - containerHeight)) * (containerHeight - scrollSize);\n }\n\n if (\n this.state.scrollActive !== scrollActive ||\n this.state.scrollSize !== scrollSize ||\n this.state.scrollPos !== scrollPos\n ) {\n scrollState = this.getImmediateScrollState();\n\n if (scrollState !== this.state.scrollState) {\n this.props.onScrollStateChange?.(scrollState);\n }\n\n this.setState({\n scrollActive,\n scrollSize,\n scrollPos,\n scrollState,\n });\n }\n };\n\n private handleScrollMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n if (!this.inner) {\n return;\n }\n\n const target: Document = window.document;\n const initialY = event.clientY;\n const initialScrollTop = this.inner.scrollTop;\n\n const mouseMove = (mouseMoveEvent: MouseEvent) => {\n if (!this.inner) {\n return;\n }\n\n const ratio =\n (this.inner.scrollHeight - this.inner.offsetHeight) / (this.inner.offsetHeight - this.state.scrollSize);\n const deltaY = (mouseMoveEvent.clientY - initialY) * ratio;\n\n this.inner.scrollTop = initialScrollTop + deltaY;\n\n if (mouseMoveEvent.preventDefault) {\n mouseMoveEvent.preventDefault();\n }\n\n if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {\n (\n mouseMoveEvent as MouseEvent & {\n returnValue: boolean;\n }\n ).returnValue = false;\n }\n };\n\n const mouseUp = () => {\n target.removeEventListener('mousemove', mouseMove);\n target.removeEventListener('mouseup', mouseUp);\n this.setState({ scrolling: false });\n };\n\n target.addEventListener('mousemove', mouseMove);\n target.addEventListener('mouseup', mouseUp);\n this.setState({ scrolling: true });\n\n event.preventDefault();\n };\n\n private handleScrollWheel = (event: Event) => {\n if (!this.inner || !(event instanceof WheelEvent)) {\n return;\n }\n\n if (event.deltaY > 0 && this.inner.scrollHeight <= this.inner.scrollTop + this.inner.offsetHeight) {\n return;\n }\n if (event.deltaY < 0 && this.inner.scrollTop <= 0) {\n return;\n }\n\n this.inner.scrollTop += event.deltaY;\n event.preventDefault();\n };\n\n private handleInnerScrollWheel = (event: Event) => {\n if (!this.inner || !(event instanceof WheelEvent)) {\n return;\n }\n\n if (this.state.scrollActive) {\n if (event.deltaY > 0 && this.inner.scrollHeight <= this.inner.scrollTop + this.inner.offsetHeight) {\n event.preventDefault();\n return false;\n }\n if (event.deltaY < 0 && this.inner.scrollTop <= 0) {\n event.preventDefault();\n return false;\n }\n }\n };\n\n private handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const right = event.currentTarget.getBoundingClientRect().right - event.pageX;\n this.setHover(right <= 12);\n };\n\n private handleMouseLeave = () => {\n this.setHover(false);\n };\n\n private setHover(hover: boolean) {\n if (this.state.hover !== hover) {\n this.setState({ hover });\n }\n }\n\n private getImmediateScrollState(): ScrollContainerScrollState {\n if (!this.inner || this.inner.scrollTop === 0) {\n return 'top';\n } else if (this.inner.scrollTop === this.inner.scrollHeight - this.inner.clientHeight) {\n return 'bottom';\n } else {\n return 'scroll';\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["ScrollContainer.tsx"],"names":["React","PropTypes","LayoutEvents","CommonWrapper","cx","styles","globalClasses","scrollSizeParametersNames","getScrollYOffset","convertScrollbarXScrollState","convertScrollbarYScrollState","ScrollBar","ScrollContainer","scrollX","scrollY","inner","render","props","innerStyle","scrollBehavior","scrollBehaviour","maxHeight","maxWidth","scrollbarY","renderScrollbar","scrollbarX","root","handleMouseMove","handleMouseLeave","refInner","handleNativeScroll","children","axis","refScrollBar","refScrollBarX","refScrollBarY","invert","handleScrollStateChange","scrollState","scrollXState","onScrollStateChangeX","scrollYState","onScrollStateChange","onScrollStateChangeY","scrollbar","element","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","event","reflow","onScroll","preventDefault","emit","WheelEvent","shiftKey","hasScrollBar","pos","size","offset","deltaY","right","currentTarget","getBoundingClientRect","pageX","bottom","pageY","setHover","componentDidMount","setInnerElement","componentDidUpdate","prevProps","scrollTo","scrollLeft","offsetLeft","scrollTop","scrollToTop","scrollToBottom","scrollHeight","offsetHeight","scrollToLeft","scrollToRight","scrollWidth","offsetWidth","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","string","number","oneOf","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles, globalClasses } from './ScrollContainer.styles';\nimport { scrollSizeParametersNames } from './ScrollContainer.constants';\nimport {\n getScrollYOffset,\n convertScrollbarXScrollState,\n convertScrollbarYScrollState,\n} from './ScrollContainer.helpers';\nimport { ScrollAxis, ScrollBar, ScrollBarScrollState } from './ScrollBar';\n\nexport type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';\nexport type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';\nexport type ScrollContainerScrollState = ScrollContainerScrollStateY; // deprecated\nexport type ScrollBehaviour = 'auto' | 'smooth';\n\nexport interface ScrollContainerProps extends CommonProps {\n /**\n * Инвертировать цвет скроллбара\n * @default false\n */\n invert: boolean;\n maxHeight?: React.CSSProperties['maxHeight'];\n maxWidth?: React.CSSProperties['maxWidth'];\n /**\n * @default false\n */\n preventWindowScroll: boolean;\n /**\n * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)\n * @default 'auto'\n */\n scrollBehaviour?: ScrollBehaviour;\n onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;\n onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;\n onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void; // deprecated\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n}\n\nexport class ScrollContainer extends React.Component<ScrollContainerProps> {\n public static __KONTUR_REACT_UI__ = 'ScrollContainer';\n\n public static propTypes = {\n invert: PropTypes.bool,\n maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),\n preventWindowScroll: PropTypes.bool,\n onScrollStateChange: PropTypes.func,\n };\n\n public static defaultProps = {\n invert: false,\n scrollBehaviour: 'auto',\n preventWindowScroll: false,\n };\n\n private scrollX: Nullable<ScrollBar>;\n private scrollY: Nullable<ScrollBar>;\n private inner: Nullable<HTMLElement>;\n\n public componentDidMount() {\n this.scrollX?.setInnerElement(this.inner);\n this.scrollY?.setInnerElement(this.inner);\n }\n\n public componentDidUpdate(prevProps: ScrollContainerProps) {\n if (this.inner) {\n if (prevProps.preventWindowScroll && !this.props.preventWindowScroll) {\n this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n }\n if (!prevProps.preventWindowScroll && this.props.preventWindowScroll) {\n this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n }\n }\n }\n\n public render = () => {\n const props = this.props;\n\n const innerStyle: React.CSSProperties = {\n scrollBehavior: props.scrollBehaviour,\n maxHeight: props.maxHeight,\n maxWidth: props.maxWidth,\n };\n\n const scrollbarY = this.renderScrollbar('y');\n const scrollbarX = this.renderScrollbar('x');\n\n return (\n <CommonWrapper {...this.props}>\n <div className={styles.root()} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>\n {scrollbarY}\n {scrollbarX}\n <div\n style={innerStyle}\n ref={this.refInner}\n className={cx(styles.inner(), globalClasses.inner)}\n data-tid=\"ScrollContainer__inner\"\n onScroll={this.handleNativeScroll}\n >\n {props.children}\n </div>\n </div>\n </CommonWrapper>\n );\n };\n\n /**\n * @public\n * @param {HTMLElement} element\n */\n public scrollTo(element: Nullable<HTMLElement>) {\n if (!element || !this.inner) {\n return;\n }\n\n this.inner.scrollLeft = element.offsetLeft;\n this.inner.scrollTop = getScrollYOffset(element, this.inner);\n }\n\n /**\n * @public\n */\n public scrollToTop() {\n if (!this.inner) {\n return;\n }\n this.inner.scrollTop = 0;\n }\n\n /**\n * @public\n */\n public scrollToBottom() {\n if (!this.inner) {\n return;\n }\n this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;\n }\n\n /**\n * @public\n */\n public scrollToLeft() {\n if (!this.inner) {\n return;\n }\n this.inner.scrollLeft = 0;\n }\n\n /**\n * @public\n */\n public scrollToRight() {\n if (!this.inner) {\n return;\n }\n\n this.inner.scrollLeft = this.inner.scrollWidth - this.inner.offsetWidth;\n }\n\n private hasScrollBar(axis: ScrollAxis) {\n if (!this.inner) {\n return false;\n }\n\n return axis === 'x'\n ? this.inner.offsetWidth < this.inner.scrollWidth\n : this.inner.offsetHeight < this.inner.scrollHeight;\n }\n\n private renderScrollbar = (axis: ScrollAxis) => {\n const refScrollBar = axis === 'x' ? this.refScrollBarX : this.refScrollBarY;\n\n return (\n <ScrollBar\n axis={axis}\n ref={refScrollBar}\n invert={this.props.invert}\n onScrollStateChange={this.handleScrollStateChange}\n />\n );\n };\n\n private handleScrollStateChange = (scrollState: ScrollBarScrollState, axis: ScrollAxis) => {\n if (!this.scrollY || !this.scrollX) {\n return;\n }\n\n if (axis === 'x') {\n const scrollXState = convertScrollbarXScrollState(scrollState);\n\n this.props.onScrollStateChangeX?.(scrollXState);\n return;\n }\n\n const scrollYState = convertScrollbarYScrollState(scrollState);\n\n this.props.onScrollStateChange?.(scrollYState);\n this.props.onScrollStateChangeY?.(scrollYState);\n };\n\n private refScrollBarY = (scrollbar: Nullable<ScrollBar>) => {\n this.scrollY = scrollbar;\n };\n\n private refScrollBarX = (scrollbar: Nullable<ScrollBar>) => {\n this.scrollX = scrollbar;\n };\n\n private refInner = (element: HTMLElement | null) => {\n if (!this.inner && element && this.props.preventWindowScroll) {\n element.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n }\n if (this.inner && !element) {\n this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n }\n this.inner = element;\n };\n\n private handleNativeScroll = (event: React.UIEvent<HTMLDivElement>) => {\n this.scrollX?.reflow();\n this.scrollY?.reflow();\n\n this.props.onScroll?.(event);\n if (this.props.preventWindowScroll) {\n event.preventDefault();\n return;\n }\n LayoutEvents.emit();\n };\n\n private handleInnerScrollWheel = (event: Event) => {\n if (!this.inner || !(event instanceof WheelEvent)) {\n return;\n }\n\n const axis: ScrollAxis = event.shiftKey ? 'x' : 'y';\n\n if (this.hasScrollBar(axis)) {\n const { pos, size, offset } = scrollSizeParametersNames[axis];\n\n if (event.deltaY > 0 && this.inner[size] <= this.inner[pos] + this.inner[offset]) {\n event.preventDefault();\n return false;\n }\n if (event.deltaY < 0 && this.inner[pos] <= 0) {\n event.preventDefault();\n return false;\n }\n }\n };\n\n private handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const right = event.currentTarget.getBoundingClientRect().right - event.pageX;\n const bottom = event.currentTarget.getBoundingClientRect().bottom - event.pageY;\n\n this.scrollY?.setHover(right <= 12);\n this.scrollX?.setHover(right >= 12 && bottom <= 12);\n };\n\n private handleMouseLeave = () => {\n this.scrollY?.setHover(false);\n this.scrollX?.setHover(false);\n };\n}\n"]}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export var MIN_SCROLL_SIZE = 20;
|
|
2
|
+
export var defaultScrollbarState = {
|
|
3
|
+
size: 0,
|
|
4
|
+
pos: 0,
|
|
5
|
+
// Mouse is moving where big scrollbar can be located.
|
|
6
|
+
hover: false,
|
|
7
|
+
active: false,
|
|
8
|
+
// True when scroll is following mouse (mouse down on scroll).
|
|
9
|
+
scrolling: false,
|
|
10
|
+
scrollState: 'begin'
|
|
11
|
+
};
|
|
12
|
+
export var scrollSizeParametersNames = {
|
|
13
|
+
x: {
|
|
14
|
+
offset: 'offsetWidth',
|
|
15
|
+
size: 'scrollWidth',
|
|
16
|
+
pos: 'scrollLeft',
|
|
17
|
+
coord: 'clientX',
|
|
18
|
+
clientSize: 'clientWidth',
|
|
19
|
+
customScrollPos: 'left',
|
|
20
|
+
customScrollSize: 'width'
|
|
21
|
+
},
|
|
22
|
+
y: {
|
|
23
|
+
offset: 'offsetHeight',
|
|
24
|
+
size: 'scrollHeight',
|
|
25
|
+
pos: 'scrollTop',
|
|
26
|
+
coord: 'clientY',
|
|
27
|
+
clientSize: 'clientHeight',
|
|
28
|
+
customScrollPos: 'top',
|
|
29
|
+
customScrollSize: 'height'
|
|
30
|
+
}
|
|
31
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["ScrollContainer.constants.ts"],"names":["MIN_SCROLL_SIZE","defaultScrollbarState","size","pos","hover","active","scrolling","scrollState","scrollSizeParametersNames","x","offset","coord","clientSize","customScrollPos","customScrollSize","y"],"mappings":";;AAEA,OAAO,IAAMA,eAAe,GAAG,EAAxB;;AAEP,OAAO,IAAMC,qBAAqC,GAAG;AACnDC,EAAAA,IAAI,EAAE,CAD6C;AAEnDC,EAAAA,GAAG,EAAE,CAF8C;AAGnD;AACAC,EAAAA,KAAK,EAAE,KAJ4C;AAKnDC,EAAAA,MAAM,EAAE,KAL2C;AAMnD;AACAC,EAAAA,SAAS,EAAE,KAPwC;AAQnDC,EAAAA,WAAW,EAAE,OARsC,EAA9C;;;AAWP,OAAO,IAAMC,yBAAyB,GAAG;AACvCC,EAAAA,CAAC,EAAE;AACDC,IAAAA,MAAM,EAAE,aADP;AAEDR,IAAAA,IAAI,EAAE,aAFL;AAGDC,IAAAA,GAAG,EAAE,YAHJ;AAIDQ,IAAAA,KAAK,EAAE,SAJN;AAKDC,IAAAA,UAAU,EAAE,aALX;AAMDC,IAAAA,eAAe,EAAE,MANhB;AAODC,IAAAA,gBAAgB,EAAE,OAPjB,EADoC;;AAUvCC,EAAAA,CAAC,EAAE;AACDL,IAAAA,MAAM,EAAE,cADP;AAEDR,IAAAA,IAAI,EAAE,cAFL;AAGDC,IAAAA,GAAG,EAAE,WAHJ;AAIDQ,IAAAA,KAAK,EAAE,SAJN;AAKDC,IAAAA,UAAU,EAAE,cALX;AAMDC,IAAAA,eAAe,EAAE,KANhB;AAODC,IAAAA,gBAAgB,EAAE,QAPjB,EAVoC,EAAlC","sourcesContent":["import { ScrollBarState } from './ScrollBar';\n\nexport const MIN_SCROLL_SIZE = 20;\n\nexport const defaultScrollbarState: ScrollBarState = {\n size: 0,\n pos: 0,\n // Mouse is moving where big scrollbar can be located.\n hover: false,\n active: false,\n // True when scroll is following mouse (mouse down on scroll).\n scrolling: false,\n scrollState: 'begin',\n};\n\nexport const scrollSizeParametersNames = {\n x: {\n offset: 'offsetWidth',\n size: 'scrollWidth',\n pos: 'scrollLeft',\n coord: 'clientX',\n clientSize: 'clientWidth',\n customScrollPos: 'left',\n customScrollSize: 'width',\n },\n y: {\n offset: 'offsetHeight',\n size: 'scrollHeight',\n pos: 'scrollTop',\n coord: 'clientY',\n clientSize: 'clientHeight',\n customScrollPos: 'top',\n customScrollSize: 'height',\n },\n} as const;\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ScrollBarState } from './ScrollBar';
|
|
2
|
+
export declare const MIN_SCROLL_SIZE = 20;
|
|
3
|
+
export declare const defaultScrollbarState: ScrollBarState;
|
|
4
|
+
export declare const scrollSizeParametersNames: {
|
|
5
|
+
readonly x: {
|
|
6
|
+
readonly offset: "offsetWidth";
|
|
7
|
+
readonly size: "scrollWidth";
|
|
8
|
+
readonly pos: "scrollLeft";
|
|
9
|
+
readonly coord: "clientX";
|
|
10
|
+
readonly clientSize: "clientWidth";
|
|
11
|
+
readonly customScrollPos: "left";
|
|
12
|
+
readonly customScrollSize: "width";
|
|
13
|
+
};
|
|
14
|
+
readonly y: {
|
|
15
|
+
readonly offset: "offsetHeight";
|
|
16
|
+
readonly size: "scrollHeight";
|
|
17
|
+
readonly pos: "scrollTop";
|
|
18
|
+
readonly coord: "clientY";
|
|
19
|
+
readonly clientSize: "clientHeight";
|
|
20
|
+
readonly customScrollPos: "top";
|
|
21
|
+
readonly customScrollSize: "height";
|
|
22
|
+
};
|
|
23
|
+
};
|