devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
1,012 lines (1,001 loc) • 77.2 kB
JavaScript
/**
* DevExtreme (renovation/ui/scroll_view/scrollable_simulated.js)
* Version: 21.1.4
* Build date: Mon Jun 21 2021
*
* Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
exports.ScrollableSimulated = exports.viewFunction = void 0;
var _inferno = require("inferno");
var _vdom = require("@devextreme/vdom");
var _subscribe_to_event = require("../../utils/subscribe_to_event");
var _load_panel = require("./load_panel");
var _animated_scrollbar = require("./animated_scrollbar");
var _widget = require("../common/widget");
var _combine_classes = require("../../utils/combine_classes");
var _get_boundary_props = require("./utils/get_boundary_props");
var _index = require("../../../events/utils/index");
var _window = require("../../../core/utils/window");
var _type = require("../../../core/utils/type");
var _scrollable_simulated_props = require("./scrollable_simulated_props");
require("../../../events/gesture/emitter.gesture.scroll");
var _events_engine = _interopRequireDefault(require("../../../events/core/events_engine"));
var _scrollable_utils = require("./scrollable_utils");
var _scroll_direction = require("./utils/scroll_direction");
var _consts = require("./common/consts");
var _get_element_offset = require("./utils/get_element_offset");
var _get_element_style = require("./utils/get_element_style");
var _top_pocket = require("./top_pocket");
var _bottom_pocket = require("./bottom_pocket");
var _short = require("../../../events/short");
var _get_offset_distance = require("./utils/get_offset_distance");
var _restore_location = require("./utils/restore_location");
var _get_scroll_top_max = require("./utils/get_scroll_top_max");
var _get_scroll_left_max = require("./utils/get_scroll_left_max");
var _excluded = ["aria", "bounceEnabled", "children", "classes", "contentTranslateOffsetChange", "direction", "disabled", "forceGeneratePockets", "height", "inertiaEnabled", "needScrollViewContentWrapper", "needScrollViewLoadPanel", "onBounce", "onEnd", "onKeyDown", "onPullDown", "onReachBottom", "onScroll", "onStart", "onStop", "onUpdated", "pullDownEnabled", "pulledDownText", "pullingDownText", "reachBottomEnabled", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "scrollLocationChange", "showScrollbar", "updateManually", "useKeyboard", "useNative", "visible", "width"];
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
}
}
function _objectWithoutProperties(source, excluded) {
if (null == source) {
return {}
}
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) {
continue
}
if (!Object.prototype.propertyIsEnumerable.call(source, key)) {
continue
}
target[key] = source[key]
}
}
return target
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (null == source) {
return {}
}
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) {
continue
}
target[key] = source[key]
}
return target
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
})
} else {
obj[key] = value
}
return obj
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) {
descriptor.writable = true
}
Object.defineProperty(target, descriptor.key, descriptor)
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) {
_defineProperties(Constructor.prototype, protoProps)
}
if (staticProps) {
_defineProperties(Constructor, staticProps)
}
return Constructor
}
function _assertThisInitialized(self) {
if (void 0 === self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called")
}
return self
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass)
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function(o, p) {
o.__proto__ = p;
return o
};
return _setPrototypeOf(o, p)
}
function _extends() {
_extends = Object.assign || function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key]
}
}
}
return target
};
return _extends.apply(this, arguments)
}
var viewFunction = function(viewModel) {
var bottomPocketClientHeight = viewModel.bottomPocketClientHeight,
bottomPocketRef = viewModel.bottomPocketRef,
containerClientHeight = viewModel.containerClientHeight,
containerClientWidth = viewModel.containerClientWidth,
containerRef = viewModel.containerRef,
containerStyles = viewModel.containerStyles,
contentHeight = viewModel.contentHeight,
contentRef = viewModel.contentRef,
contentStyles = viewModel.contentStyles,
contentTranslateOffsetChange = viewModel.contentTranslateOffsetChange,
contentWidth = viewModel.contentWidth,
cssClasses = viewModel.cssClasses,
cursorEnterHandler = viewModel.cursorEnterHandler,
cursorLeaveHandler = viewModel.cursorLeaveHandler,
direction = viewModel.direction,
forceUpdateHScrollbarLocation = viewModel.forceUpdateHScrollbarLocation,
forceUpdateVScrollbarLocation = viewModel.forceUpdateVScrollbarLocation,
hScrollLocation = viewModel.hScrollLocation,
hScrollbarRef = viewModel.hScrollbarRef,
isHovered = viewModel.isHovered,
isLoadPanelVisible = viewModel.isLoadPanelVisible,
onBounce = viewModel.onBounce,
onPullDown = viewModel.onPullDown,
onReachBottom = viewModel.onReachBottom,
onRelease = viewModel.onRelease,
onWidgetKeyDown = viewModel.onWidgetKeyDown,
pocketStateChange = viewModel.pocketStateChange,
_viewModel$props = viewModel.props,
aria = _viewModel$props.aria,
bounceEnabled = _viewModel$props.bounceEnabled,
children = _viewModel$props.children,
disabled = _viewModel$props.disabled,
forceGeneratePockets = _viewModel$props.forceGeneratePockets,
height = _viewModel$props.height,
inertiaEnabled = _viewModel$props.inertiaEnabled,
needScrollViewContentWrapper = _viewModel$props.needScrollViewContentWrapper,
needScrollViewLoadPanel = _viewModel$props.needScrollViewLoadPanel,
pullDownEnabled = _viewModel$props.pullDownEnabled,
pulledDownText = _viewModel$props.pulledDownText,
pullingDownText = _viewModel$props.pullingDownText,
reachBottomEnabled = _viewModel$props.reachBottomEnabled,
reachBottomText = _viewModel$props.reachBottomText,
refreshingText = _viewModel$props.refreshingText,
rtlEnabled = _viewModel$props.rtlEnabled,
scrollByThumb = _viewModel$props.scrollByThumb,
showScrollbar = _viewModel$props.showScrollbar,
useKeyboard = _viewModel$props.useKeyboard,
visible = _viewModel$props.visible,
width = _viewModel$props.width,
restAttributes = viewModel.restAttributes,
scrollLocationChange = viewModel.scrollLocationChange,
scrollViewContentRef = viewModel.scrollViewContentRef,
scrollableOffsetLeft = viewModel.scrollableOffsetLeft,
scrollableOffsetTop = viewModel.scrollableOffsetTop,
scrollableRef = viewModel.scrollableRef,
topPocketClientHeight = viewModel.topPocketClientHeight,
topPocketRef = viewModel.topPocketRef,
topPocketState = viewModel.topPocketState,
vScrollLocation = viewModel.vScrollLocation,
vScrollbarRef = viewModel.vScrollbarRef,
windowResizeHandler = viewModel.windowResizeHandler,
wrapperRef = viewModel.wrapperRef;
return (0, _inferno.normalizeProps)((0, _inferno.createComponentVNode)(2, _widget.Widget, _extends({
rootElementRef: scrollableRef,
focusStateEnabled: useKeyboard,
hoverStateEnabled: true,
aria: aria,
classes: cssClasses,
disabled: disabled,
rtlEnabled: rtlEnabled,
height: height,
width: width,
visible: visible,
onKeyDown: onWidgetKeyDown,
onHoverStart: cursorEnterHandler,
onHoverEnd: cursorLeaveHandler,
onDimensionChanged: windowResizeHandler
}, restAttributes, {
children: [(0, _inferno.createVNode)(1, "div", _consts.SCROLLABLE_WRAPPER_CLASS, (0, _inferno.createVNode)(1, "div", _consts.SCROLLABLE_CONTAINER_CLASS, [(0, _inferno.createVNode)(1, "div", _consts.SCROLLABLE_CONTENT_CLASS, [forceGeneratePockets && (0, _inferno.createComponentVNode)(2, _top_pocket.TopPocket, {
topPocketRef: topPocketRef,
pullingDownText: pullingDownText,
pulledDownText: pulledDownText,
refreshingText: refreshingText,
refreshStrategy: "simulated",
pocketState: topPocketState,
visible: !!pullDownEnabled
}), needScrollViewContentWrapper ? (0, _inferno.createVNode)(1, "div", _consts.SCROLLVIEW_CONTENT_CLASS, children, 0, null, null, scrollViewContentRef) : (0, _inferno.createVNode)(1, "div", null, children, 0), forceGeneratePockets && (0, _inferno.createComponentVNode)(2, _bottom_pocket.BottomPocket, {
bottomPocketRef: bottomPocketRef,
reachBottomText: reachBottomText,
visible: !!reachBottomEnabled
})], 0, {
style: (0, _vdom.normalizeStyles)(contentStyles)
}, null, contentRef), direction.isHorizontal && (0, _inferno.createComponentVNode)(2, _animated_scrollbar.AnimatedScrollbar, {
direction: "horizontal",
scrollableOffset: scrollableOffsetLeft,
contentSize: contentWidth,
containerSize: containerClientWidth,
isScrollableHovered: isHovered,
scrollLocation: hScrollLocation,
scrollLocationChange: scrollLocationChange,
contentTranslateOffsetChange: contentTranslateOffsetChange,
scrollByThumb: scrollByThumb,
bounceEnabled: bounceEnabled,
showScrollbar: showScrollbar,
inertiaEnabled: inertiaEnabled,
onBounce: onBounce,
forceUpdateScrollbarLocation: forceUpdateHScrollbarLocation
}, null, hScrollbarRef), direction.isVertical && (0, _inferno.createComponentVNode)(2, _animated_scrollbar.AnimatedScrollbar, {
direction: "vertical",
scrollableOffset: scrollableOffsetTop,
contentSize: contentHeight,
containerSize: containerClientHeight,
isScrollableHovered: isHovered,
scrollLocation: vScrollLocation,
scrollLocationChange: scrollLocationChange,
contentTranslateOffsetChange: contentTranslateOffsetChange,
scrollByThumb: scrollByThumb,
bounceEnabled: bounceEnabled,
showScrollbar: showScrollbar,
inertiaEnabled: inertiaEnabled,
onBounce: onBounce,
forceUpdateScrollbarLocation: forceUpdateVScrollbarLocation,
forceGeneratePockets: forceGeneratePockets,
topPocketSize: topPocketClientHeight,
bottomPocketSize: bottomPocketClientHeight,
onPullDown: onPullDown,
onRelease: onRelease,
onReachBottom: onReachBottom,
pullDownEnabled: pullDownEnabled,
reachBottomEnabled: reachBottomEnabled,
pocketState: topPocketState,
pocketStateChange: pocketStateChange
}, null, vScrollbarRef)], 0, {
style: (0, _vdom.normalizeStyles)(containerStyles)
}, null, containerRef), 2, null, null, wrapperRef), needScrollViewLoadPanel && (0, _inferno.createComponentVNode)(2, _load_panel.ScrollViewLoadPanel, {
targetElement: scrollableRef,
refreshingText: refreshingText,
visible: isLoadPanelVisible
})]
})))
};
exports.viewFunction = viewFunction;
var ScrollableSimulated = function(_InfernoComponent) {
_inheritsLoose(ScrollableSimulated, _InfernoComponent);
function ScrollableSimulated(props) {
var _this;
_this = _InfernoComponent.call(this, props) || this;
_this._currentState = null;
_this.locked = false;
_this.loadingIndicatorEnabled = true;
_this.validDirections = {};
_this.prevContainerClientWidth = 0;
_this.prevContainerClientHeight = 0;
_this.prevContentClientWidth = 0;
_this.prevContentClientHeight = 0;
_this.scrollableRef = (0, _inferno.createRef)();
_this.wrapperRef = (0, _inferno.createRef)();
_this.contentRef = (0, _inferno.createRef)();
_this.scrollViewContentRef = (0, _inferno.createRef)();
_this.containerRef = (0, _inferno.createRef)();
_this.vScrollbarRef = (0, _inferno.createRef)();
_this.hScrollbarRef = (0, _inferno.createRef)();
_this.topPocketRef = (0, _inferno.createRef)();
_this.bottomPocketRef = (0, _inferno.createRef)();
_this.state = {
isHovered: false,
scrollableOffsetLeft: 0,
scrollableOffsetTop: 0,
containerClientWidth: 0,
containerClientHeight: 0,
contentScrollWidth: 0,
contentScrollHeight: 0,
contentClientWidth: 0,
contentClientHeight: 0,
topPocketClientHeight: 0,
bottomPocketClientHeight: 0,
topPocketState: _consts.TopPocketState.STATE_RELEASED,
isLoadPanelVisible: false,
vScrollLocation: 0,
hScrollLocation: 0,
vContentTranslateOffset: 0,
hContentTranslateOffset: 0,
forceUpdateHScrollbarLocation: false,
forceUpdateVScrollbarLocation: false
};
_this.content = _this.content.bind(_assertThisInitialized(_this));
_this.update = _this.update.bind(_assertThisInitialized(_this));
_this.refresh = _this.refresh.bind(_assertThisInitialized(_this));
_this.startLoading = _this.startLoading.bind(_assertThisInitialized(_this));
_this.finishLoading = _this.finishLoading.bind(_assertThisInitialized(_this));
_this.release = _this.release.bind(_assertThisInitialized(_this));
_this.scrollBy = _this.scrollBy.bind(_assertThisInitialized(_this));
_this.scrollTo = _this.scrollTo.bind(_assertThisInitialized(_this));
_this.scrollToElement = _this.scrollToElement.bind(_assertThisInitialized(_this));
_this.getElementLocation = _this.getElementLocation.bind(_assertThisInitialized(_this));
_this.scrollHeight = _this.scrollHeight.bind(_assertThisInitialized(_this));
_this.scrollWidth = _this.scrollWidth.bind(_assertThisInitialized(_this));
_this.scrollOffset = _this.scrollOffset.bind(_assertThisInitialized(_this));
_this.scrollTop = _this.scrollTop.bind(_assertThisInitialized(_this));
_this.scrollLeft = _this.scrollLeft.bind(_assertThisInitialized(_this));
_this.clientHeight = _this.clientHeight.bind(_assertThisInitialized(_this));
_this.clientWidth = _this.clientWidth.bind(_assertThisInitialized(_this));
_this.disposeWheelTimer = _this.disposeWheelTimer.bind(_assertThisInitialized(_this));
_this.scrollEffect = _this.scrollEffect.bind(_assertThisInitialized(_this));
_this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
_this.getEventArgs = _this.getEventArgs.bind(_assertThisInitialized(_this));
_this.initEffect = _this.initEffect.bind(_assertThisInitialized(_this));
_this.getInitEventData = _this.getInitEventData.bind(_assertThisInitialized(_this));
_this.startEffect = _this.startEffect.bind(_assertThisInitialized(_this));
_this.moveEffect = _this.moveEffect.bind(_assertThisInitialized(_this));
_this.endEffect = _this.endEffect.bind(_assertThisInitialized(_this));
_this.stopEffect = _this.stopEffect.bind(_assertThisInitialized(_this));
_this.cancelEffect = _this.cancelEffect.bind(_assertThisInitialized(_this));
_this.onStart = _this.onStart.bind(_assertThisInitialized(_this));
_this.onEnd = _this.onEnd.bind(_assertThisInitialized(_this));
_this.onStop = _this.onStop.bind(_assertThisInitialized(_this));
_this.onUpdated = _this.onUpdated.bind(_assertThisInitialized(_this));
_this.onBounce = _this.onBounce.bind(_assertThisInitialized(_this));
_this.onPullDown = _this.onPullDown.bind(_assertThisInitialized(_this));
_this.onRelease = _this.onRelease.bind(_assertThisInitialized(_this));
_this.onReachBottom = _this.onReachBottom.bind(_assertThisInitialized(_this));
_this.pocketStateChange = _this.pocketStateChange.bind(_assertThisInitialized(_this));
_this.scrollLocationChange = _this.scrollLocationChange.bind(_assertThisInitialized(_this));
_this.triggerScrollEvent = _this.triggerScrollEvent.bind(_assertThisInitialized(_this));
_this.contentTranslateOffsetChange = _this.contentTranslateOffsetChange.bind(_assertThisInitialized(_this));
_this.cursorEnterHandler = _this.cursorEnterHandler.bind(_assertThisInitialized(_this));
_this.cursorLeaveHandler = _this.cursorLeaveHandler.bind(_assertThisInitialized(_this));
_this.handleInit = _this.handleInit.bind(_assertThisInitialized(_this));
_this.handleStart = _this.handleStart.bind(_assertThisInitialized(_this));
_this.handleMove = _this.handleMove.bind(_assertThisInitialized(_this));
_this.handleEnd = _this.handleEnd.bind(_assertThisInitialized(_this));
_this.handleStop = _this.handleStop.bind(_assertThisInitialized(_this));
_this.handleCancel = _this.handleCancel.bind(_assertThisInitialized(_this));
_this.isCrossThumbScrolling = _this.isCrossThumbScrolling.bind(_assertThisInitialized(_this));
_this.adjustDistance = _this.adjustDistance.bind(_assertThisInitialized(_this));
_this.suppressDirections = _this.suppressDirections.bind(_assertThisInitialized(_this));
_this.validateEvent = _this.validateEvent.bind(_assertThisInitialized(_this));
_this.prepareDirections = _this.prepareDirections.bind(_assertThisInitialized(_this));
_this.isContent = _this.isContent.bind(_assertThisInitialized(_this));
_this.eventHandler = _this.eventHandler.bind(_assertThisInitialized(_this));
_this.getDirection = _this.getDirection.bind(_assertThisInitialized(_this));
_this.allowedDirection = _this.allowedDirection.bind(_assertThisInitialized(_this));
_this.validate = _this.validate.bind(_assertThisInitialized(_this));
_this.isLocked = _this.isLocked.bind(_assertThisInitialized(_this));
_this.validateWheel = _this.validateWheel.bind(_assertThisInitialized(_this));
_this.clearWheelValidationTimer = _this.clearWheelValidationTimer.bind(_assertThisInitialized(_this));
_this.validateMove = _this.validateMove.bind(_assertThisInitialized(_this));
_this.onWidgetKeyDown = _this.onWidgetKeyDown.bind(_assertThisInitialized(_this));
_this.keyDownHandler = _this.keyDownHandler.bind(_assertThisInitialized(_this));
_this.scrollByLine = _this.scrollByLine.bind(_assertThisInitialized(_this));
_this.tryGetDevicePixelRatio = _this.tryGetDevicePixelRatio.bind(_assertThisInitialized(_this));
_this.scrollByPage = _this.scrollByPage.bind(_assertThisInitialized(_this));
_this.wheelDirection = _this.wheelDirection.bind(_assertThisInitialized(_this));
_this.scrollToHome = _this.scrollToHome.bind(_assertThisInitialized(_this));
_this.scrollToEnd = _this.scrollToEnd.bind(_assertThisInitialized(_this));
_this.effectDisabledState = _this.effectDisabledState.bind(_assertThisInitialized(_this));
_this.lock = _this.lock.bind(_assertThisInitialized(_this));
_this.unlock = _this.unlock.bind(_assertThisInitialized(_this));
_this.effectResetInactiveState = _this.effectResetInactiveState.bind(_assertThisInitialized(_this));
_this.updateScrollbarSize = _this.updateScrollbarSize.bind(_assertThisInitialized(_this));
_this.windowResizeHandler = _this.windowResizeHandler.bind(_assertThisInitialized(_this));
_this.updateSizes = _this.updateSizes.bind(_assertThisInitialized(_this));
return _this
}
var _proto = ScrollableSimulated.prototype;
_proto.createEffects = function() {
return [new _vdom.InfernoEffect(this.disposeWheelTimer, []), new _vdom.InfernoEffect(this.scrollEffect, [this.props.onScroll, this.props.direction, this.topPocketClientHeight]), new _vdom.InfernoEffect(this.initEffect, [this.props.direction, this.props.scrollByContent, this.props.scrollByThumb, this.props.onStop, this.topPocketClientHeight, this.contentScrollHeight, this.contentClientHeight, this.containerClientHeight, this.props.bounceEnabled, this.contentScrollWidth, this.contentClientWidth, this.containerClientWidth, this.props.updateManually, this.props.forceGeneratePockets, this.props.pullDownEnabled, this.props.reachBottomEnabled, this.vScrollLocation, this.props.onUpdated, this.props.disabled]), new _vdom.InfernoEffect(this.startEffect, [this.props.direction, this.props.onStart, this.topPocketClientHeight]), new _vdom.InfernoEffect(this.moveEffect, [this.props.direction]), new _vdom.InfernoEffect(this.endEffect, [this.props.direction, this.props.onEnd, this.topPocketClientHeight]), new _vdom.InfernoEffect(this.stopEffect, [this.props.direction]), new _vdom.InfernoEffect(this.cancelEffect, [this.props.direction]), new _vdom.InfernoEffect(this.effectDisabledState, [this.props.disabled]), new _vdom.InfernoEffect(this.effectResetInactiveState, [this.props.direction]), new _vdom.InfernoEffect(this.updateScrollbarSize, [this.isHovered, this.scrollableOffsetLeft, this.scrollableOffsetTop, this.containerClientWidth, this.containerClientHeight, this.contentScrollWidth, this.contentScrollHeight, this.contentClientWidth, this.contentClientHeight, this.topPocketClientHeight, this.bottomPocketClientHeight, this.topPocketState, this.isLoadPanelVisible, this.vScrollLocation, this.hScrollLocation, this.vContentTranslateOffset, this.hContentTranslateOffset, this.forceUpdateHScrollbarLocation, this.forceUpdateVScrollbarLocation, this.props.inertiaEnabled, this.props.useKeyboard, this.props.onStart, this.props.onEnd, this.props.onBounce, this.props.onStop, this.props.contentTranslateOffsetChange, this.props.scrollLocationChange, this.props.children, this.props.useNative, this.props.direction, this.props.showScrollbar, this.props.bounceEnabled, this.props.scrollByContent, this.props.scrollByThumb, this.props.updateManually, this.props.classes, this.props.pullDownEnabled, this.props.reachBottomEnabled, this.props.forceGeneratePockets, this.props.needScrollViewContentWrapper, this.props.needScrollViewLoadPanel, this.props.onScroll, this.props.onUpdated, this.props.onPullDown, this.props.onReachBottom, this.props.pullingDownText, this.props.pulledDownText, this.props.refreshingText, this.props.reachBottomText, this.props.aria, this.props.disabled, this.props.height, this.props.onKeyDown, this.props.rtlEnabled, this.props.visible, this.props.width])]
};
_proto.updateEffects = function() {
var _this$_effects$, _this$_effects$2, _this$_effects$3, _this$_effects$4, _this$_effects$5, _this$_effects$6, _this$_effects$7, _this$_effects$8, _this$_effects$9, _this$_effects$10;
null === (_this$_effects$ = this._effects[1]) || void 0 === _this$_effects$ ? void 0 : _this$_effects$.update([this.props.onScroll, this.props.direction, this.topPocketClientHeight]);
null === (_this$_effects$2 = this._effects[2]) || void 0 === _this$_effects$2 ? void 0 : _this$_effects$2.update([this.props.direction, this.props.scrollByContent, this.props.scrollByThumb, this.props.onStop, this.topPocketClientHeight, this.contentScrollHeight, this.contentClientHeight, this.containerClientHeight, this.props.bounceEnabled, this.contentScrollWidth, this.contentClientWidth, this.containerClientWidth, this.props.updateManually, this.props.forceGeneratePockets, this.props.pullDownEnabled, this.props.reachBottomEnabled, this.vScrollLocation, this.props.onUpdated, this.props.disabled]);
null === (_this$_effects$3 = this._effects[3]) || void 0 === _this$_effects$3 ? void 0 : _this$_effects$3.update([this.props.direction, this.props.onStart, this.topPocketClientHeight]);
null === (_this$_effects$4 = this._effects[4]) || void 0 === _this$_effects$4 ? void 0 : _this$_effects$4.update([this.props.direction]);
null === (_this$_effects$5 = this._effects[5]) || void 0 === _this$_effects$5 ? void 0 : _this$_effects$5.update([this.props.direction, this.props.onEnd, this.topPocketClientHeight]);
null === (_this$_effects$6 = this._effects[6]) || void 0 === _this$_effects$6 ? void 0 : _this$_effects$6.update([this.props.direction]);
null === (_this$_effects$7 = this._effects[7]) || void 0 === _this$_effects$7 ? void 0 : _this$_effects$7.update([this.props.direction]);
null === (_this$_effects$8 = this._effects[8]) || void 0 === _this$_effects$8 ? void 0 : _this$_effects$8.update([this.props.disabled]);
null === (_this$_effects$9 = this._effects[9]) || void 0 === _this$_effects$9 ? void 0 : _this$_effects$9.update([this.props.direction]);
null === (_this$_effects$10 = this._effects[10]) || void 0 === _this$_effects$10 ? void 0 : _this$_effects$10.update([this.isHovered, this.scrollableOffsetLeft, this.scrollableOffsetTop, this.containerClientWidth, this.containerClientHeight, this.contentScrollWidth, this.contentScrollHeight, this.contentClientWidth, this.contentClientHeight, this.topPocketClientHeight, this.bottomPocketClientHeight, this.topPocketState, this.isLoadPanelVisible, this.vScrollLocation, this.hScrollLocation, this.vContentTranslateOffset, this.hContentTranslateOffset, this.forceUpdateHScrollbarLocation, this.forceUpdateVScrollbarLocation, this.props.inertiaEnabled, this.props.useKeyboard, this.props.onStart, this.props.onEnd, this.props.onBounce, this.props.onStop, this.props.contentTranslateOffsetChange, this.props.scrollLocationChange, this.props.children, this.props.useNative, this.props.direction, this.props.showScrollbar, this.props.bounceEnabled, this.props.scrollByContent, this.props.scrollByThumb, this.props.updateManually, this.props.classes, this.props.pullDownEnabled, this.props.reachBottomEnabled, this.props.forceGeneratePockets, this.props.needScrollViewContentWrapper, this.props.needScrollViewLoadPanel, this.props.onScroll, this.props.onUpdated, this.props.onPullDown, this.props.onReachBottom, this.props.pullingDownText, this.props.pulledDownText, this.props.refreshingText, this.props.reachBottomText, this.props.aria, this.props.disabled, this.props.height, this.props.onKeyDown, this.props.rtlEnabled, this.props.visible, this.props.width])
};
_proto.set_isHovered = function(value) {
var _this2 = this;
this.setState((function(state) {
_this2._currentState = state;
var newValue = value();
_this2._currentState = null;
return {
isHovered: newValue
}
}))
};
_proto.set_scrollableOffsetLeft = function(value) {
var _this3 = this;
this.setState((function(state) {
_this3._currentState = state;
var newValue = value();
_this3._currentState = null;
return {
scrollableOffsetLeft: newValue
}
}))
};
_proto.set_scrollableOffsetTop = function(value) {
var _this4 = this;
this.setState((function(state) {
_this4._currentState = state;
var newValue = value();
_this4._currentState = null;
return {
scrollableOffsetTop: newValue
}
}))
};
_proto.set_containerClientWidth = function(value) {
var _this5 = this;
this.setState((function(state) {
_this5._currentState = state;
var newValue = value();
_this5._currentState = null;
return {
containerClientWidth: newValue
}
}))
};
_proto.set_containerClientHeight = function(value) {
var _this6 = this;
this.setState((function(state) {
_this6._currentState = state;
var newValue = value();
_this6._currentState = null;
return {
containerClientHeight: newValue
}
}))
};
_proto.set_contentScrollWidth = function(value) {
var _this7 = this;
this.setState((function(state) {
_this7._currentState = state;
var newValue = value();
_this7._currentState = null;
return {
contentScrollWidth: newValue
}
}))
};
_proto.set_contentScrollHeight = function(value) {
var _this8 = this;
this.setState((function(state) {
_this8._currentState = state;
var newValue = value();
_this8._currentState = null;
return {
contentScrollHeight: newValue
}
}))
};
_proto.set_contentClientWidth = function(value) {
var _this9 = this;
this.setState((function(state) {
_this9._currentState = state;
var newValue = value();
_this9._currentState = null;
return {
contentClientWidth: newValue
}
}))
};
_proto.set_contentClientHeight = function(value) {
var _this10 = this;
this.setState((function(state) {
_this10._currentState = state;
var newValue = value();
_this10._currentState = null;
return {
contentClientHeight: newValue
}
}))
};
_proto.set_topPocketClientHeight = function(value) {
var _this11 = this;
this.setState((function(state) {
_this11._currentState = state;
var newValue = value();
_this11._currentState = null;
return {
topPocketClientHeight: newValue
}
}))
};
_proto.set_bottomPocketClientHeight = function(value) {
var _this12 = this;
this.setState((function(state) {
_this12._currentState = state;
var newValue = value();
_this12._currentState = null;
return {
bottomPocketClientHeight: newValue
}
}))
};
_proto.set_topPocketState = function(value) {
var _this13 = this;
this.setState((function(state) {
_this13._currentState = state;
var newValue = value();
_this13._currentState = null;
return {
topPocketState: newValue
}
}))
};
_proto.set_isLoadPanelVisible = function(value) {
var _this14 = this;
this.setState((function(state) {
_this14._currentState = state;
var newValue = value();
_this14._currentState = null;
return {
isLoadPanelVisible: newValue
}
}))
};
_proto.set_vScrollLocation = function(value) {
var _this15 = this;
this.setState((function(state) {
_this15._currentState = state;
var newValue = value();
_this15._currentState = null;
return {
vScrollLocation: newValue
}
}))
};
_proto.set_hScrollLocation = function(value) {
var _this16 = this;
this.setState((function(state) {
_this16._currentState = state;
var newValue = value();
_this16._currentState = null;
return {
hScrollLocation: newValue
}
}))
};
_proto.set_vContentTranslateOffset = function(value) {
var _this17 = this;
this.setState((function(state) {
_this17._currentState = state;
var newValue = value();
_this17._currentState = null;
return {
vContentTranslateOffset: newValue
}
}))
};
_proto.set_hContentTranslateOffset = function(value) {
var _this18 = this;
this.setState((function(state) {
_this18._currentState = state;
var newValue = value();
_this18._currentState = null;
return {
hContentTranslateOffset: newValue
}
}))
};
_proto.set_forceUpdateHScrollbarLocation = function(value) {
var _this19 = this;
this.setState((function(state) {
_this19._currentState = state;
var newValue = value();
_this19._currentState = null;
return {
forceUpdateHScrollbarLocation: newValue
}
}))
};
_proto.set_forceUpdateVScrollbarLocation = function(value) {
var _this20 = this;
this.setState((function(state) {
_this20._currentState = state;
var newValue = value();
_this20._currentState = null;
return {
forceUpdateVScrollbarLocation: newValue
}
}))
};
_proto.disposeWheelTimer = function() {
var _this21 = this;
return function() {
return _this21.clearWheelValidationTimer()
}
};
_proto.scrollEffect = function() {
var _this22 = this;
return (0, _subscribe_to_event.subscribeToScrollEvent)(this.containerElement, (function() {
_this22.handleScroll()
}))
};
_proto.initEffect = function() {
var _this23 = this;
_short.dxScrollInit.on(this.wrapperRef.current, (function(e) {
_this23.handleInit(e)
}), this.getInitEventData(), {
namespace: "dxScrollable"
});
return function() {
return _short.dxScrollInit.off(_this23.wrapperRef.current, {
namespace: "dxScrollable"
})
}
};
_proto.startEffect = function() {
var _this24 = this;
_short.dxScrollStart.on(this.wrapperRef.current, (function(e) {
_this24.handleStart(e)
}), {
namespace: "dxScrollable"
});
return function() {
return _short.dxScrollStart.off(_this24.wrapperRef.current, {
namespace: "dxScrollable"
})
}
};
_proto.moveEffect = function() {
var _this25 = this;
_short.dxScrollMove.on(this.wrapperRef.current, (function(e) {
_this25.handleMove(e)
}), {
namespace: "dxScrollable"
});
return function() {
return _short.dxScrollMove.off(_this25.wrapperRef.current, {
namespace: "dxScrollable"
})
}
};
_proto.endEffect = function() {
var _this26 = this;
_short.dxScrollEnd.on(this.wrapperRef.current, (function(e) {
_this26.handleEnd(e)
}), {
namespace: "dxScrollable"
});
return function() {
return _short.dxScrollEnd.off(_this26.wrapperRef.current, {
namespace: "dxScrollable"
})
}
};
_proto.stopEffect = function() {
var _this27 = this;
_short.dxScrollStop.on(this.wrapperRef.current, (function() {
_this27.handleStop()
}), {
namespace: "dxScrollable"
});
return function() {
return _short.dxScrollStop.off(_this27.wrapperRef.current, {
namespace: "dxScrollable"
})
}
};
_proto.cancelEffect = function() {
var _this28 = this;
_short.dxScrollCancel.on(this.wrapperRef.current, (function(event) {
_this28.handleCancel(event)
}), {
namespace: "dxScrollable"
});
return function() {
return _short.dxScrollCancel.off(_this28.wrapperRef.current, {
namespace: "dxScrollable"
})
}
};
_proto.effectDisabledState = function() {
if (this.props.disabled) {
this.lock()
} else {
this.unlock()
}
};
_proto.effectResetInactiveState = function() {
var containerEl = this.containerRef.current;
if (this.props.direction === _consts.DIRECTION_BOTH || !(0, _type.isDefined)(containerEl)) {
return
}
containerEl[this.fullScrollInactiveProp] = 0
};
_proto.updateScrollbarSize = function() {
var _this29 = this;
this.set_scrollableOffsetLeft((function() {
return _this29.scrollableOffset.left
}));
this.set_scrollableOffsetTop((function() {
return _this29.scrollableOffset.top
}));
this.updateSizes()
};
_proto.startLoading = function() {
if (this.loadingIndicatorEnabled) {
this.set_isLoadPanelVisible((function() {
return true
}))
}
this.lock()
};
_proto.finishLoading = function() {
this.set_isLoadPanelVisible((function() {
return false
}));
this.unlock()
};
_proto.handleScroll = function() {
var _this$props$onScroll, _this$props;
null === (_this$props$onScroll = (_this$props = this.props).onScroll) || void 0 === _this$props$onScroll ? void 0 : _this$props$onScroll.call(_this$props, this.getEventArgs())
};
_proto.getEventArgs = function() {
var scrollOffset = this.scrollOffset();
return _extends({
event: this.eventForUserAction,
scrollOffset: scrollOffset
}, (0, _get_boundary_props.getBoundaryProps)(this.props.direction, scrollOffset, this.containerElement, this.topPocketClientHeight))
};
_proto.getInitEventData = function() {
return {
getDirection: this.getDirection,
validate: this.validate,
isNative: false,
scrollTarget: this.containerRef.current
}
};
_proto.onStart = function() {
var _this$props$onStart, _this$props2;
null === (_this$props$onStart = (_this$props2 = this.props).onStart) || void 0 === _this$props$onStart ? void 0 : _this$props$onStart.call(_this$props2, this.getEventArgs())
};
_proto.onEnd = function() {
var _this$props$onEnd, _this$props3;
null === (_this$props$onEnd = (_this$props3 = this.props).onEnd) || void 0 === _this$props$onEnd ? void 0 : _this$props$onEnd.call(_this$props3, this.getEventArgs())
};
_proto.onStop = function() {
var _this$props$onStop, _this$props4;
null === (_this$props$onStop = (_this$props4 = this.props).onStop) || void 0 === _this$props$onStop ? void 0 : _this$props$onStop.call(_this$props4, this.getEventArgs())
};
_proto.onUpdated = function() {
var _this$props$onUpdated, _this$props5;
null === (_this$props$onUpdated = (_this$props5 = this.props).onUpdated) || void 0 === _this$props$onUpdated ? void 0 : _this$props$onUpdated.call(_this$props5, this.getEventArgs())
};
_proto.onBounce = function() {
var _this$props$onBounce, _this$props6;
null === (_this$props$onBounce = (_this$props6 = this.props).onBounce) || void 0 === _this$props$onBounce ? void 0 : _this$props$onBounce.call(_this$props6, this.getEventArgs())
};
_proto.onPullDown = function() {
var _this$props$onPullDow, _this$props7;
this.loadingIndicatorEnabled = false;
this.startLoading();
null === (_this$props$onPullDow = (_this$props7 = this.props).onPullDown) || void 0 === _this$props$onPullDow ? void 0 : _this$props$onPullDow.call(_this$props7, {})
};
_proto.onRelease = function() {
this.loadingIndicatorEnabled = true;
this.finishLoading();
this.onUpdated()
};
_proto.onReachBottom = function() {
var _this$props$onReachBo, _this$props8;
this.loadingIndicatorEnabled = false;
this.startLoading();
null === (_this$props$onReachBo = (_this$props8 = this.props).onReachBottom) || void 0 === _this$props$onReachBo ? void 0 : _this$props$onReachBo.call(_this$props8, {})
};
_proto.pocketStateChange = function(state) {
this.set_topPocketState((function() {
return state
}))
};
_proto.scrollLocationChange = function(scrollProp, location) {
var containerEl = this.containerElement;
containerEl[scrollProp] = -location;
if ("scrollLeft" === scrollProp) {
this.set_hScrollLocation((function() {
return location
}))
} else {
this.set_vScrollLocation((function() {
return location
}))
}
this.set_forceUpdateHScrollbarLocation((function() {
return false
}));
this.set_forceUpdateVScrollbarLocation((function() {
return false
}));
this.triggerScrollEvent()
};
_proto.triggerScrollEvent = function() {
_events_engine.default.triggerHandler(this.containerElement, {
type: "scroll"
})
};
_proto.contentTranslateOffsetChange = function(prop, translateOffset) {
if ("top" === prop) {
this.set_vContentTranslateOffset((function() {
return translateOffset
}))
} else {
this.set_hContentTranslateOffset((function() {
return translateOffset
}))
}
};
_proto.cursorEnterHandler = function() {
if ("onHover" === this.props.showScrollbar) {
this.set_isHovered((function() {
return true
}))
}
};
_proto.cursorLeaveHandler = function() {
if ("onHover" === this.props.showScrollbar) {
this.set_isHovered((function() {
return false
}))
}
};
_proto.handleInit = function(e) {
this.suppressDirections(e);
this.eventForUserAction = e;
var crossThumbScrolling = this.isCrossThumbScrolling(e);
this.eventHandler((function(scrollbar) {
return scrollbar.initHandler(e, crossThumbScrolling)
}));
this.onStop()
};
_proto.handleStart = function(e) {
this.eventForUserAction = e;
this.eventHandler((function(scrollbar) {
return scrollbar.startHandler()
}));
this.onStart()
};
_proto.handleMove = function(e) {
if (this.isLocked()) {
e.cancel = true;
return
}
e.preventDefault();
this.adjustDistance(e, "delta");
this.eventForUserAction = e;
this.eventHandler((function(scrollbar) {
return scrollbar.moveHandler(e.delta)
}))
};
_proto.handleEnd = function(e) {
this.adjustDistance(e, "velocity");
this.eventForUserAction = e;
this.eventHandler((function(scrollbar) {
return scrollbar.endHandler(e.velocity)
}));
this.onEnd()
};
_proto.handleStop = function() {
this.eventHandler((function(scrollbar) {
return scrollbar.stopHandler()
}))
};
_proto.handleCancel = function(e) {
this.eventForUserAction = e;
this.eventHandler((function(scrollbar) {
return scrollbar.endHandler({
x: 0,
y: 0
})
}))
};
_proto.isCrossThumbScrolling = function(e) {
var target = e.originalEvent.target;
var verticalScrolling;
var horizontalScrolling;
if (this.direction.isVertical) {
verticalScrolling = this.props.scrollByThumb && this.vScrollbarRef.current.isThumb(target)
}
if (this.direction.isHorizontal) {
horizontalScrolling = this.props.scrollByThumb && this.hScrollbarRef.current.isThumb(target)
}
return verticalScrolling || horizontalScrolling
};
_proto.adjustDistance = function(e, property) {
var distance = e[property];
distance.x *= this.validDirections[_consts.DIRECTION_HORIZONTAL] ? 1 : 0;
distance.y *= this.validDirections[_consts.DIRECTION_VERTICAL] ? 1 : 0;
var devicePixelRatio = this.tryGetDevicePixelRatio();
if (devicePixelRatio && (0, _index.isDxMouseWheelEvent)(e.originalEvent)) {
distance.x = Math.round(distance.x / devicePixelRatio * 100) / 100;
distance.y = Math.round(distance.y / devicePixelRatio * 100) / 100
}
};
_proto.suppressDirections = function(e) {
if ((0, _index.isDxMouseWheelEvent)(e.originalEvent)) {
this.prepareDirections(true);
return
}
this.prepareDirections(false);
if (this.direction.isVertical && (0, _type.isDefined)(this.vScrollbarRef.current)) {
var isValid = this.validateEvent(e, this.vScrollbarRef.current);
this.validDirections[_consts.DIRECTION_VERTICAL] = isValid
}
if (this.direction.isHorizontal && (0, _type.isDefined)(this.hScrollbarRef.current)) {
var _isValid = this.validateEvent(e, this.hScrollbarRef.current);
this.validDirections[_consts.DIRECTION_HORIZONTAL] = _isValid
}
};
_proto.validateEvent = function(e, scrollbarRef) {
var _this$props9 = this.props,
scrollByContent = _this$props9.scrollByContent,
scrollByThumb = _this$props9.scrollByThumb;
return scrollByThumb && scrollbarRef.validateEvent(e) || scrollByContent && this.isContent(e.originalEvent.target)
};
_proto.prepareDirections = function(value) {
this.validDirections[_consts.DIRECTION_HORIZONTAL] = value;
this.validDirections[_consts.DIRECTION_VERTICAL] = value
};
_proto.isContent = function(element) {
var closest = element.closest(".dx-scrollable-simulated");
if ((0, _type.isDefined)(closest)) {
return closest === this.scrollableRef.current
}
return false
};
_proto.eventHandler = function(handler) {
if (this.direction.isHorizontal) {
handler(this.hScrollbarRef.current)
}
if (this.direction.isVertical) {
handler(this.vScrollbarRef.current)
}
};
_proto.getDirection = function(e) {
return (0, _index.isDxMouseWheelEvent)(e) ? this.wheelDirection(e) : this.allowedDirection()
};
_proto.allowedDirection = function() {
return (0, _scrollable_utils.updateAllowedDirection)(this.allowedDirections, this.props.direction)
};
_proto.isLocked = function() {
return this.locked
};
_proto.validateWheel = function(e) {
var scrollbar = "horizontal" === this.wheelDirection(e) ? this.hScrollbarRef.current : this.vScrollbarRef.current;
var reachedMin = scrollbar.reachedMin();
var reachedMax = scrollbar.reachedMax();
var contentGreaterThanContainer = !reachedMin || !reachedMax;
var locatedNotAtBound = !reachedMin && !reac