devextreme/renovation/ui/scroll_view/scrollable.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (renovation/ui/scroll_view/scrollable.js)
 * Version: 23.2.6
 * Build date: Wed May 01 2024
 *
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
exports.viewFunction = exports.Scrollable = void 0;
var _inferno = require("inferno");
var _inferno2 = require("@devextreme/runtime/inferno");
var _native = require("./strategy/native");
var _simulated = require("./strategy/simulated");
var _get_element_location_internal = require("./utils/get_element_location_internal");
var _convert_location = require("./utils/convert_location");
var _get_offset_distance = require("./utils/get_offset_distance");
var _type = require("../../../core/utils/type");
var _window = require("../../../core/utils/window");
var _consts = require("./common/consts");
var _scrollable_props = require("./common/scrollable_props");
var _resolve_rtl = require("../../utils/resolve_rtl");
var _config_context = require("../../common/config_context");
const _excluded = ["addWidgetClass", "aria", "bounceEnabled", "children", "classes", "direction", "disabled", "forceGeneratePockets", "height", "inertiaEnabled", "loadPanelTemplate", "needRenderScrollbars", "needScrollViewContentWrapper", "onBounce", "onEnd", "onPullDown", "onReachBottom", "onScroll", "onStart", "onUpdated", "onVisibilityChange", "pullDownEnabled", "pulledDownText", "pullingDownText", "reachBottomEnabled", "reachBottomText", "refreshStrategy", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "scrollLocationChange", "showScrollbar", "useKeyboard", "useNative", "useSimulatedScrollbar", "visible", "width"];

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 _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, _toPropertyKey(descriptor.key), descriptor)
    }
}

function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) {
        _defineProperties(Constructor.prototype, protoProps)
    }
    if (staticProps) {
        _defineProperties(Constructor, staticProps)
    }
    Object.defineProperty(Constructor, "prototype", {
        writable: false
    });
    return Constructor
}

function _toPropertyKey(arg) {
    var key = _toPrimitive(arg, "string");
    return "symbol" === typeof key ? key : String(key)
}

function _toPrimitive(input, hint) {
    if ("object" !== typeof input || null === input) {
        return input
    }
    var prim = input[Symbol.toPrimitive];
    if (void 0 !== prim) {
        var res = prim.call(input, hint || "default");
        if ("object" !== typeof res) {
            return res
        }
        throw new TypeError("@@toPrimitive must return a primitive value.")
    }
    return ("string" === hint ? String : Number)(input)
}

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 ? Object.setPrototypeOf.bind() : function(o, p) {
        o.__proto__ = p;
        return o
    };
    return _setPrototypeOf(o, p)
}

function _extends() {
    _extends = Object.assign ? Object.assign.bind() : 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)
}
const viewFunction = viewModel => {
    const {
        isServerSide: isServerSide,
        props: {
            aria: aria,
            bounceEnabled: bounceEnabled,
            children: children,
            classes: classes,
            direction: direction,
            disabled: disabled,
            forceGeneratePockets: forceGeneratePockets,
            height: height,
            inertiaEnabled: inertiaEnabled,
            loadPanelTemplate: loadPanelTemplate,
            needScrollViewContentWrapper: needScrollViewContentWrapper,
            onBounce: onBounce,
            onEnd: onEnd,
            onPullDown: onPullDown,
            onReachBottom: onReachBottom,
            onScroll: onScroll,
            onStart: onStart,
            onUpdated: onUpdated,
            onVisibilityChange: onVisibilityChange,
            pullDownEnabled: pullDownEnabled,
            pulledDownText: pulledDownText,
            pullingDownText: pullingDownText,
            reachBottomEnabled: reachBottomEnabled,
            reachBottomText: reachBottomText,
            refreshStrategy: refreshStrategy,
            refreshingText: refreshingText,
            scrollByContent: scrollByContent,
            scrollByThumb: scrollByThumb,
            showScrollbar: showScrollbar,
            useKeyboard: useKeyboard,
            useNative: useNative,
            useSimulatedScrollbar: useSimulatedScrollbar,
            visible: visible,
            width: width
        },
        restAttributes: restAttributes,
        rtlEnabled: rtlEnabled,
        scrollableNativeRef: scrollableNativeRef,
        scrollableSimulatedRef: scrollableSimulatedRef
    } = viewModel;
    return useNative ? (0, _inferno.normalizeProps)((0, _inferno.createComponentVNode)(2, _native.ScrollableNative, _extends({
        aria: aria,
        classes: classes,
        width: width,
        height: height,
        disabled: disabled,
        visible: visible,
        rtlEnabled: rtlEnabled,
        direction: direction,
        showScrollbar: showScrollbar,
        pullDownEnabled: pullDownEnabled,
        reachBottomEnabled: reachBottomEnabled,
        forceGeneratePockets: forceGeneratePockets && !isServerSide,
        needScrollViewContentWrapper: needScrollViewContentWrapper,
        loadPanelTemplate: !isServerSide ? loadPanelTemplate : void 0,
        needRenderScrollbars: !isServerSide,
        onScroll: onScroll,
        onUpdated: onUpdated,
        onPullDown: onPullDown,
        onReachBottom: onReachBottom,
        refreshStrategy: refreshStrategy,
        pulledDownText: pulledDownText,
        pullingDownText: pullingDownText,
        refreshingText: refreshingText,
        reachBottomText: reachBottomText,
        useSimulatedScrollbar: useSimulatedScrollbar
    }, restAttributes, {
        children: children
    }), null, scrollableNativeRef)) : (0, _inferno.normalizeProps)((0, _inferno.createComponentVNode)(2, _simulated.ScrollableSimulated, _extends({
        aria: aria,
        classes: classes,
        width: width,
        height: height,
        disabled: disabled,
        visible: visible,
        rtlEnabled: rtlEnabled,
        direction: direction,
        showScrollbar: showScrollbar,
        scrollByThumb: scrollByThumb,
        pullDownEnabled: pullDownEnabled,
        reachBottomEnabled: reachBottomEnabled,
        forceGeneratePockets: forceGeneratePockets && !isServerSide,
        needScrollViewContentWrapper: needScrollViewContentWrapper,
        loadPanelTemplate: !isServerSide ? loadPanelTemplate : void 0,
        needRenderScrollbars: !isServerSide,
        onScroll: onScroll,
        onUpdated: onUpdated,
        onPullDown: onPullDown,
        onReachBottom: onReachBottom,
        refreshStrategy: "simulated",
        pulledDownText: pulledDownText,
        pullingDownText: pullingDownText,
        refreshingText: refreshingText,
        reachBottomText: reachBottomText,
        onVisibilityChange: onVisibilityChange,
        inertiaEnabled: inertiaEnabled,
        bounceEnabled: bounceEnabled,
        scrollByContent: scrollByContent,
        useKeyboard: useKeyboard,
        onStart: onStart,
        onEnd: onEnd,
        onBounce: onBounce
    }, restAttributes, {
        children: children
    }), null, scrollableSimulatedRef))
};
exports.viewFunction = viewFunction;
const getTemplate = TemplateProp => TemplateProp && (TemplateProp.defaultProps ? props => (0, _inferno.normalizeProps)((0, _inferno.createComponentVNode)(2, TemplateProp, _extends({}, props))) : TemplateProp);
let Scrollable = function(_InfernoWrapperCompon) {
    _inheritsLoose(Scrollable, _InfernoWrapperCompon);

    function Scrollable(props) {
        var _this;
        _this = _InfernoWrapperCompon.call(this, props) || this;
        _this.state = {};
        _this.scrollableNativeRef = (0, _inferno.createRef)();
        _this.scrollableSimulatedRef = (0, _inferno.createRef)();
        _this.content = _this.content.bind(_assertThisInitialized(_this));
        _this.container = _this.container.bind(_assertThisInitialized(_this));
        _this.scrollTo = _this.scrollTo.bind(_assertThisInitialized(_this));
        _this.scrollBy = _this.scrollBy.bind(_assertThisInitialized(_this));
        _this.updateHandler = _this.updateHandler.bind(_assertThisInitialized(_this));
        _this.release = _this.release.bind(_assertThisInitialized(_this));
        _this.refresh = _this.refresh.bind(_assertThisInitialized(_this));
        _this.scrollToElement = _this.scrollToElement.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.getScrollElementPosition = _this.getScrollElementPosition.bind(_assertThisInitialized(_this));
        _this.startLoading = _this.startLoading.bind(_assertThisInitialized(_this));
        _this.finishLoading = _this.finishLoading.bind(_assertThisInitialized(_this));
        _this.validate = _this.validate.bind(_assertThisInitialized(_this));
        return _this
    }
    var _proto = Scrollable.prototype;
    _proto.createEffects = function() {
        return [(0, _inferno2.createReRenderEffect)()]
    };
    _proto.validate = function(event) {
        return this.scrollableRef.validate(event)
    };
    _proto.content = function() {
        return this.scrollableRef.content()
    };
    _proto.container = function() {
        return this.scrollableRef.container()
    };
    _proto.scrollTo = function(targetLocation) {
        if (!this.props.useNative) {
            this.updateHandler()
        }
        const currentScrollOffset = this.props.useNative ? this.scrollOffset() : {
            top: this.container().scrollTop,
            left: this.container().scrollLeft
        };
        const distance = (0, _get_offset_distance.getOffsetDistance)((0, _convert_location.convertToLocation)(targetLocation, this.props.direction), currentScrollOffset);
        this.scrollBy(distance)
    };
    _proto.scrollBy = function(distance) {
        let {
            left: left,
            top: top
        } = (0, _convert_location.convertToLocation)(distance, this.props.direction);
        if (!(0, _type.isDefined)(top) || !(0, _type.isNumeric)(top)) {
            top = 0
        }
        if (!(0, _type.isDefined)(left) || !(0, _type.isNumeric)(top)) {
            left = 0
        }
        if (0 === top && 0 === left) {
            return
        }
        this.scrollableRef.scrollByLocation({
            top: top,
            left: left
        })
    };
    _proto.updateHandler = function() {
        this.scrollableRef.updateHandler()
    };
    _proto.release = function() {
        if (!this.isServerSide) {
            this.scrollableRef.release()
        }
    };
    _proto.refresh = function() {
        if (!this.isServerSide) {
            this.scrollableRef.refresh()
        }
    };
    _proto.scrollToElement = function(element, offset) {
        if (!this.content().contains(element)) {
            return
        }
        const scrollPosition = {
            top: 0,
            left: 0
        };
        const {
            direction: direction
        } = this.props;
        if (direction !== _consts.DIRECTION_VERTICAL) {
            scrollPosition.left = this.getScrollElementPosition(element, _consts.DIRECTION_HORIZONTAL, offset)
        }
        if (direction !== _consts.DIRECTION_HORIZONTAL) {
            scrollPosition.top = this.getScrollElementPosition(element, _consts.DIRECTION_VERTICAL, offset)
        }
        this.scrollTo(scrollPosition)
    };
    _proto.scrollHeight = function() {
        return this.scrollableRef.scrollHeight()
    };
    _proto.scrollWidth = function() {
        return this.scrollableRef.scrollWidth()
    };
    _proto.scrollOffset = function() {
        if (!this.isServerSide) {
            return this.scrollableRef.scrollOffset()
        }
        return {
            top: 0,
            left: 0
        }
    };
    _proto.scrollTop = function() {
        return this.scrollableRef.scrollTop()
    };
    _proto.scrollLeft = function() {
        return this.scrollableRef.scrollLeft()
    };
    _proto.clientHeight = function() {
        return this.scrollableRef.clientHeight()
    };
    _proto.clientWidth = function() {
        return this.scrollableRef.clientWidth()
    };
    _proto.getScrollElementPosition = function(targetElement, direction, offset) {
        const scrollOffset = this.scrollOffset();
        return (0, _get_element_location_internal.getElementLocationInternal)(targetElement, direction, this.container(), scrollOffset, offset)
    };
    _proto.startLoading = function() {
        this.scrollableRef.startLoading()
    };
    _proto.finishLoading = function() {
        if (!this.isServerSide) {
            this.scrollableRef.finishLoading()
        }
    };
    _proto.render = function() {
        const props = this.props;
        return viewFunction({
            props: _extends({}, props, {
                loadPanelTemplate: (TemplateProp = props.loadPanelTemplate, TemplateProp && (TemplateProp.defaultProps ? props => (0, _inferno.normalizeProps)((0, _inferno.createComponentVNode)(2, TemplateProp, _extends({}, props))) : TemplateProp))
            }),
            scrollableNativeRef: this.scrollableNativeRef,
            scrollableSimulatedRef: this.scrollableSimulatedRef,
            config: this.config,
            validate: this.validate,
            scrollableRef: this.scrollableRef,
            rtlEnabled: this.rtlEnabled,
            isServerSide: this.isServerSide,
            restAttributes: this.restAttributes
        });
        var TemplateProp
    };
    _createClass(Scrollable, [{
        key: "config",
        get: function() {
            if (this.context[_config_context.ConfigContext.id]) {
                return this.context[_config_context.ConfigContext.id]
            }
            return _config_context.ConfigContext.defaultValue
        }
    }, {
        key: "scrollableRef",
        get: function() {
            if (this.props.useNative) {
                return this.scrollableNativeRef.current
            }
            return this.scrollableSimulatedRef.current
        }
    }, {
        key: "rtlEnabled",
        get: function() {
            const {
                rtlEnabled: rtlEnabled
            } = this.props;
            return !!(0, _resolve_rtl.resolveRtlEnabled)(rtlEnabled, this.config)
        }
    }, {
        key: "isServerSide",
        get: function() {
            return !(0, _window.hasWindow)()
        }
    }, {
        key: "restAttributes",
        get: function() {
            const _this$props = this.props,
                restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
            return restProps
        }
    }]);
    return Scrollable
}(_inferno2.InfernoWrapperComponent);
exports.Scrollable = Scrollable;
Scrollable.defaultProps = _scrollable_props.ScrollableProps;