devextreme/cjs/__internal/core/r1/widget.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/core/r1/widget.js)
 * Version: 24.2.6
 * Build date: Mon Mar 17 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.WidgetDefaultProps = exports.Widget = void 0;
var _inferno = require("inferno");
require("../../../common/core/events/click");
require("../../../common/core/events/hover");
var _inferno2 = require("@devextreme/runtime/inferno");
var _short = require("../../../common/core/events/short");
var _dom_adapter = _interopRequireDefault(require("../../../core/dom_adapter"));
var _errors = _interopRequireDefault(require("../../../core/errors"));
var _extend = require("../../../core/utils/extend");
var _resize_callbacks = _interopRequireDefault(require("../../../core/utils/resize_callbacks"));
var _style = require("../../../core/utils/style");
var _type = require("../../../core/utils/type");
var _config_context = require("../../core/r1/config_context");
var _config_provider = require("../../core/r1/config_provider");
var _render_utils = require("../../core/r1/utils/render_utils");
var _resolve_rtl = require("../../core/r1/utils/resolve_rtl");
var _base_props = require("./base_props");
var _subscribe_to_event = require("./utils/subscribe_to_event");

function _interopRequireDefault(e) {
    return e && e.__esModule ? e : {
        default: e
    }
}

function _extends() {
    return _extends = Object.assign ? Object.assign.bind() : function(n) {
        for (var e = 1; e < arguments.length; e++) {
            var t = arguments[e];
            for (var r in t) {
                ({}).hasOwnProperty.call(t, r) && (n[r] = t[r])
            }
        }
        return n
    }, _extends.apply(null, arguments)
}
const DEFAULT_FEEDBACK_HIDE_TIMEOUT = 400;
const DEFAULT_FEEDBACK_SHOW_TIMEOUT = 30;
const getAria = args => Object.keys(args).reduce(((r, key) => {
    if (args[key]) {
        return _extends({}, r, {
            ["role" === key || "id" === key ? key : `aria-${key}`]: String(args[key])
        })
    }
    return r
}), {});
const WidgetDefaultProps = exports.WidgetDefaultProps = _extends({}, _base_props.BaseWidgetDefaultProps, {
    _feedbackHideTimeout: 400,
    _feedbackShowTimeout: 30,
    cssText: "",
    aria: {},
    classes: "",
    name: "",
    addWidgetClass: true
});
class Widget extends _inferno2.InfernoWrapperComponent {
    constructor(props) {
        super(props);
        this.state = {
            active: false,
            focused: false,
            hovered: false
        };
        this.refs = null;
        this.rootElementRef = (0, _inferno.createRef)();
        this.widgetElementRef = (0, _inferno.createRef)();
        this.setRootElementRef = this.setRootElementRef.bind(this);
        this.activeEffect = this.activeEffect.bind(this);
        this.inactiveEffect = this.inactiveEffect.bind(this);
        this.clickEffect = this.clickEffect.bind(this);
        this.focus = this.focus.bind(this);
        this.blur = this.blur.bind(this);
        this.activate = this.activate.bind(this);
        this.deactivate = this.deactivate.bind(this);
        this.focusInEffect = this.focusInEffect.bind(this);
        this.focusOutEffect = this.focusOutEffect.bind(this);
        this.hoverStartEffect = this.hoverStartEffect.bind(this);
        this.hoverEndEffect = this.hoverEndEffect.bind(this);
        this.keyboardEffect = this.keyboardEffect.bind(this);
        this.resizeEffect = this.resizeEffect.bind(this);
        this.windowResizeEffect = this.windowResizeEffect.bind(this);
        this.visibilityEffect = this.visibilityEffect.bind(this);
        this.checkDeprecation = this.checkDeprecation.bind(this);
        this.applyCssTextEffect = this.applyCssTextEffect.bind(this)
    }
    componentWillUpdate(nextProps, nextState, context) {
        super.componentWillUpdate(nextProps, nextState, context)
    }
    getConfig() {
        if (this.context[_config_context.ConfigContext.id]) {
            return this.context[_config_context.ConfigContext.id]
        }
        return _config_context.ConfigContext.defaultValue
    }
    createEffects() {
        return [new _inferno2.InfernoEffect(this.setRootElementRef, []), new _inferno2.InfernoEffect(this.activeEffect, [this.props._feedbackShowTimeout, this.props.activeStateEnabled, this.props.activeStateUnit, this.props.disabled, this.props.onActive]), new _inferno2.InfernoEffect(this.inactiveEffect, [this.props._feedbackHideTimeout, this.props.activeStateEnabled, this.props.activeStateUnit, this.props.onInactive, this.state.active]), new _inferno2.InfernoEffect(this.clickEffect, [this.props.disabled, this.props.name, this.props.onClick]), new _inferno2.InfernoEffect(this.focusInEffect, [this.props.disabled, this.props.focusStateEnabled, this.props.name, this.props.onFocusIn]), new _inferno2.InfernoEffect(this.focusOutEffect, [this.props.focusStateEnabled, this.props.name, this.props.onFocusOut, this.state.focused]), new _inferno2.InfernoEffect(this.hoverStartEffect, [this.props.activeStateUnit, this.props.disabled, this.props.hoverStateEnabled, this.props.onHoverStart, this.state.active]), new _inferno2.InfernoEffect(this.hoverEndEffect, [this.props.activeStateUnit, this.props.hoverStateEnabled, this.props.onHoverEnd, this.state.hovered]), new _inferno2.InfernoEffect(this.keyboardEffect, [this.props.focusStateEnabled, this.props.onKeyDown]), new _inferno2.InfernoEffect(this.resizeEffect, [this.props.name, this.props.onDimensionChanged]), new _inferno2.InfernoEffect(this.windowResizeEffect, [this.props.onDimensionChanged]), new _inferno2.InfernoEffect(this.visibilityEffect, [this.props.name, this.props.onVisibilityChange]), new _inferno2.InfernoEffect(this.checkDeprecation, [this.props.height, this.props.width]), new _inferno2.InfernoEffect(this.applyCssTextEffect, [this.props.cssText]), (0, _inferno2.createReRenderEffect)()]
    }
    updateEffects() {
        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, _this$_effects$11, _this$_effects$12, _this$_effects$13;
        null === (_this$_effects$ = this._effects[1]) || void 0 === _this$_effects$ || _this$_effects$.update([this.props._feedbackShowTimeout, this.props.activeStateEnabled, this.props.activeStateUnit, this.props.disabled, this.props.onActive]);
        null === (_this$_effects$2 = this._effects[2]) || void 0 === _this$_effects$2 || _this$_effects$2.update([this.props._feedbackHideTimeout, this.props.activeStateEnabled, this.props.activeStateUnit, this.props.onInactive, this.state.active]);
        null === (_this$_effects$3 = this._effects[3]) || void 0 === _this$_effects$3 || _this$_effects$3.update([this.props.disabled, this.props.name, this.props.onClick]);
        null === (_this$_effects$4 = this._effects[4]) || void 0 === _this$_effects$4 || _this$_effects$4.update([this.props.disabled, this.props.focusStateEnabled, this.props.name, this.props.onFocusIn]);
        null === (_this$_effects$5 = this._effects[5]) || void 0 === _this$_effects$5 || _this$_effects$5.update([this.props.focusStateEnabled, this.props.name, this.props.onFocusOut, this.state.focused]);
        null === (_this$_effects$6 = this._effects[6]) || void 0 === _this$_effects$6 || _this$_effects$6.update([this.props.activeStateUnit, this.props.disabled, this.props.hoverStateEnabled, this.props.onHoverStart, this.state.active]);
        null === (_this$_effects$7 = this._effects[7]) || void 0 === _this$_effects$7 || _this$_effects$7.update([this.props.activeStateUnit, this.props.hoverStateEnabled, this.props.onHoverEnd, this.state.hovered]);
        null === (_this$_effects$8 = this._effects[8]) || void 0 === _this$_effects$8 || _this$_effects$8.update([this.props.focusStateEnabled, this.props.onKeyDown]);
        null === (_this$_effects$9 = this._effects[9]) || void 0 === _this$_effects$9 || _this$_effects$9.update([this.props.name, this.props.onDimensionChanged]);
        null === (_this$_effects$10 = this._effects[10]) || void 0 === _this$_effects$10 || _this$_effects$10.update([this.props.onDimensionChanged]);
        null === (_this$_effects$11 = this._effects[11]) || void 0 === _this$_effects$11 || _this$_effects$11.update([this.props.name, this.props.onVisibilityChange]);
        null === (_this$_effects$12 = this._effects[12]) || void 0 === _this$_effects$12 || _this$_effects$12.update([this.props.height, this.props.width]);
        null === (_this$_effects$13 = this._effects[13]) || void 0 === _this$_effects$13 || _this$_effects$13.update([this.props.cssText])
    }
    setRootElementRef() {
        var _this$widgetElementRe;
        const {
            rootElementRef: rootElementRef,
            onRootElementRendered: onRootElementRendered
        } = this.props;
        if (rootElementRef && this.widgetElementRef) {
            rootElementRef.current = this.widgetElementRef.current
        }
        if (null !== this && void 0 !== this && null !== (_this$widgetElementRe = this.widgetElementRef) && void 0 !== _this$widgetElementRe && _this$widgetElementRe.current) {
            null === onRootElementRendered || void 0 === onRootElementRendered || onRootElementRendered(this.widgetElementRef.current)
        }
    }
    activeEffect() {
        const {
            activeStateEnabled: activeStateEnabled,
            activeStateUnit: activeStateUnit,
            disabled: disabled,
            _feedbackShowTimeout: _feedbackShowTimeout,
            onActive: onActive
        } = this.props;
        const selector = activeStateUnit;
        if (activeStateEnabled) {
            if (!disabled) {
                var _this$widgetElementRe2;
                return (0, _subscribe_to_event.subscribeToDxActiveEvent)(null === (_this$widgetElementRe2 = this.widgetElementRef) || void 0 === _this$widgetElementRe2 ? void 0 : _this$widgetElementRe2.current, (event => {
                    this.setState({
                        active: true
                    });
                    null === onActive || void 0 === onActive || onActive(event)
                }), {
                    timeout: _feedbackShowTimeout,
                    selector: selector
                }, "UIFeedback")
            }
        }
        return
    }
    inactiveEffect() {
        const {
            activeStateEnabled: activeStateEnabled,
            activeStateUnit: activeStateUnit,
            _feedbackHideTimeout: _feedbackHideTimeout,
            onInactive: onInactive
        } = this.props;
        const selector = activeStateUnit;
        if (activeStateEnabled) {
            var _this$widgetElementRe3;
            return (0, _subscribe_to_event.subscribeToDxInactiveEvent)(null === (_this$widgetElementRe3 = this.widgetElementRef) || void 0 === _this$widgetElementRe3 ? void 0 : _this$widgetElementRe3.current, (event => {
                if (this.state.active) {
                    this.setState({
                        active: false
                    });
                    null === onInactive || void 0 === onInactive || onInactive(event)
                }
            }), {
                timeout: _feedbackHideTimeout,
                selector: selector
            }, "UIFeedback")
        }
        return
    }
    clickEffect() {
        const {
            name: name,
            onClick: onClick,
            disabled: disabled
        } = this.props;
        const namespace = name;
        if (onClick && !disabled) {
            var _this$widgetElementRe4;
            _short.dxClick.on(null === (_this$widgetElementRe4 = this.widgetElementRef) || void 0 === _this$widgetElementRe4 ? void 0 : _this$widgetElementRe4.current, onClick, {
                namespace: namespace
            });
            return () => {
                var _this$widgetElementRe5;
                return _short.dxClick.off(null === (_this$widgetElementRe5 = this.widgetElementRef) || void 0 === _this$widgetElementRe5 ? void 0 : _this$widgetElementRe5.current, {
                    namespace: namespace
                })
            }
        }
        return
    }
    focusInEffect() {
        const {
            disabled: disabled,
            focusStateEnabled: focusStateEnabled,
            name: name,
            onFocusIn: onFocusIn
        } = this.props;
        const namespace = `${name}Focus`;
        if (focusStateEnabled) {
            if (!disabled) {
                var _this$widgetElementRe6;
                return (0, _subscribe_to_event.subscribeToDxFocusInEvent)(null === (_this$widgetElementRe6 = this.widgetElementRef) || void 0 === _this$widgetElementRe6 ? void 0 : _this$widgetElementRe6.current, (event => {
                    if (!event.isDefaultPrevented()) {
                        this.setState({
                            focused: true
                        });
                        null === onFocusIn || void 0 === onFocusIn || onFocusIn(event)
                    }
                }), null, namespace)
            }
        }
        return
    }
    focusOutEffect() {
        const {
            focusStateEnabled: focusStateEnabled,
            name: name,
            onFocusOut: onFocusOut
        } = this.props;
        const namespace = `${name}Focus`;
        if (focusStateEnabled) {
            var _this$widgetElementRe7;
            return (0, _subscribe_to_event.subscribeToDxFocusOutEvent)(null === (_this$widgetElementRe7 = this.widgetElementRef) || void 0 === _this$widgetElementRe7 ? void 0 : _this$widgetElementRe7.current, (event => {
                if (!event.isDefaultPrevented() && this.state.focused) {
                    this.setState({
                        focused: false
                    });
                    null === onFocusOut || void 0 === onFocusOut || onFocusOut(event)
                }
            }), null, namespace)
        }
        return
    }
    hoverStartEffect() {
        const {
            activeStateUnit: activeStateUnit,
            hoverStateEnabled: hoverStateEnabled,
            disabled: disabled,
            onHoverStart: onHoverStart
        } = this.props;
        const selector = activeStateUnit;
        if (hoverStateEnabled) {
            if (!disabled) {
                var _this$widgetElementRe8;
                return (0, _subscribe_to_event.subscribeToDxHoverStartEvent)(null === (_this$widgetElementRe8 = this.widgetElementRef) || void 0 === _this$widgetElementRe8 ? void 0 : _this$widgetElementRe8.current, (event => {
                    if (!this.state.active) {
                        this.setState({
                            hovered: true
                        })
                    }
                    null === onHoverStart || void 0 === onHoverStart || onHoverStart(event)
                }), {
                    selector: selector
                }, "UIFeedback")
            }
        }
        return
    }
    hoverEndEffect() {
        const {
            activeStateUnit: activeStateUnit,
            hoverStateEnabled: hoverStateEnabled,
            onHoverEnd: onHoverEnd
        } = this.props;
        const selector = activeStateUnit;
        if (hoverStateEnabled) {
            var _this$widgetElementRe9;
            return (0, _subscribe_to_event.subscribeToDxHoverEndEvent)(null === (_this$widgetElementRe9 = this.widgetElementRef) || void 0 === _this$widgetElementRe9 ? void 0 : _this$widgetElementRe9.current, (event => {
                if (this.state.hovered) {
                    this.setState({
                        hovered: false
                    });
                    null === onHoverEnd || void 0 === onHoverEnd || onHoverEnd(event)
                }
            }), {
                selector: selector
            }, "UIFeedback")
        }
        return
    }
    keyboardEffect() {
        const {
            onKeyDown: onKeyDown,
            focusStateEnabled: focusStateEnabled
        } = this.props;
        if (focusStateEnabled && onKeyDown) {
            var _this$widgetElementRe10, _this$widgetElementRe11;
            const id = _short.keyboard.on(null === (_this$widgetElementRe10 = this.widgetElementRef) || void 0 === _this$widgetElementRe10 ? void 0 : _this$widgetElementRe10.current, null === (_this$widgetElementRe11 = this.widgetElementRef) || void 0 === _this$widgetElementRe11 ? void 0 : _this$widgetElementRe11.current, (e => onKeyDown(e)));
            return () => _short.keyboard.off(id)
        }
        return
    }
    resizeEffect() {
        const namespace = `${this.props.name}VisibilityChange`;
        const {
            onDimensionChanged: onDimensionChanged
        } = this.props;
        if (onDimensionChanged) {
            var _this$widgetElementRe12;
            _short.resize.on(null === (_this$widgetElementRe12 = this.widgetElementRef) || void 0 === _this$widgetElementRe12 ? void 0 : _this$widgetElementRe12.current, onDimensionChanged, {
                namespace: namespace
            });
            return () => {
                var _this$widgetElementRe13;
                return _short.resize.off(null === (_this$widgetElementRe13 = this.widgetElementRef) || void 0 === _this$widgetElementRe13 ? void 0 : _this$widgetElementRe13.current, {
                    namespace: namespace
                })
            }
        }
        return
    }
    windowResizeEffect() {
        const {
            onDimensionChanged: onDimensionChanged
        } = this.props;
        if (onDimensionChanged) {
            _resize_callbacks.default.add(onDimensionChanged);
            return () => {
                _resize_callbacks.default.remove(onDimensionChanged)
            }
        }
        return
    }
    visibilityEffect() {
        const {
            name: name,
            onVisibilityChange: onVisibilityChange
        } = this.props;
        const namespace = `${name}VisibilityChange`;
        if (onVisibilityChange) {
            var _this$widgetElementRe14;
            _short.visibility.on(null === (_this$widgetElementRe14 = this.widgetElementRef) || void 0 === _this$widgetElementRe14 ? void 0 : _this$widgetElementRe14.current, (() => onVisibilityChange(true)), (() => onVisibilityChange(false)), {
                namespace: namespace
            });
            return () => {
                var _this$widgetElementRe15;
                return _short.visibility.off(null === (_this$widgetElementRe15 = this.widgetElementRef) || void 0 === _this$widgetElementRe15 ? void 0 : _this$widgetElementRe15.current, {
                    namespace: namespace
                })
            }
        }
        return
    }
    checkDeprecation() {
        const {
            width: width,
            height: height
        } = this.props;
        if ((0, _type.isFunction)(width)) {
            _errors.default.log("W0017", "width")
        }
        if ((0, _type.isFunction)(height)) {
            _errors.default.log("W0017", "height")
        }
    }
    applyCssTextEffect() {
        var _this$widgetElementRe16;
        const {
            cssText: cssText
        } = this.props;
        if (void 0 !== cssText && "" !== cssText && null !== (_this$widgetElementRe16 = this.widgetElementRef) && void 0 !== _this$widgetElementRe16 && _this$widgetElementRe16.current) {
            this.widgetElementRef.current.style.cssText = cssText
        }
    }
    getShouldRenderConfigProvider() {
        const {
            rtlEnabled: rtlEnabled
        } = this.props;
        return (0, _resolve_rtl.resolveRtlEnabledDefinition)(rtlEnabled, this.config)
    }
    getRtlEnabled() {
        const {
            rtlEnabled: rtlEnabled
        } = this.props;
        return (0, _resolve_rtl.resolveRtlEnabled)(rtlEnabled, this.config)
    }
    getAttributes() {
        const {
            aria: aria,
            disabled: disabled,
            focusStateEnabled: focusStateEnabled,
            visible: visible
        } = this.props;
        const accessKey = focusStateEnabled && !disabled && this.props.accessKey;
        const props = _extends({}, (0, _extend.extend)({}, accessKey && {
            accessKey: accessKey
        }), getAria(_extends({}, aria, {
            disabled: disabled,
            hidden: !visible
        })), (0, _extend.extend)({}, this.getRestAttributes(this.props)));
        return props
    }
    getRestAttributes(props) {
        const result = _extends({}, props);
        ["_feedbackHideTimeout", "_feedbackShowTimeout", "accessKey", "activeStateEnabled", "activeStateUnit", "addWidgetClass", "aria", "children", "className", "classes", "cssText", "disabled", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "name", "onActive", "onClick", "onDimensionChanged", "onFocusIn", "onFocusOut", "onHoverEnd", "onHoverStart", "onInactive", "onKeyDown", "onRootElementRendered", "onVisibilityChange", "rootElementRef", "rtlEnabled", "tabIndex", "visible", "width"].forEach((exclude => {
            delete result[exclude]
        }));
        return result
    }
    getStyles() {
        const {
            width: width,
            height: height
        } = this.props;
        const style = this.props.style || {};
        const computedWidth = (0, _style.normalizeStyleProp)("width", (0, _type.isFunction)(width) ? width() : width);
        const computedHeight = (0, _style.normalizeStyleProp)("height", (0, _type.isFunction)(height) ? height() : height);
        return _extends({}, style, {
            height: computedHeight ?? style.height,
            width: computedWidth ?? style.width
        })
    }
    getCssClasses() {
        const {
            classes: classes,
            addWidgetClass: addWidgetClass,
            className: className,
            disabled: disabled,
            activeStateEnabled: activeStateEnabled,
            focusStateEnabled: focusStateEnabled,
            hoverStateEnabled: hoverStateEnabled,
            onVisibilityChange: onVisibilityChange,
            visible: visible
        } = this.props;
        const isFocusable = !!focusStateEnabled && !disabled;
        const isHoverable = !!hoverStateEnabled && !disabled;
        const canBeActive = !!activeStateEnabled && !disabled;
        const classesMap = {
            "dx-widget": !!addWidgetClass,
            [String(classes)]: !!classes,
            [String(className)]: !!className,
            "dx-state-disabled": !!disabled,
            "dx-state-invisible": !visible,
            "dx-state-focused": !!this.state.focused && isFocusable,
            "dx-state-active": !!this.state.active && canBeActive,
            "dx-state-hover": !!this.state.hovered && isHoverable && !this.state.active,
            "dx-rtl": !!this.props.rtlEnabled,
            "dx-visibility-change-handler": !!onVisibilityChange
        };
        return (0, _render_utils.combineClasses)(classesMap)
    }
    getTabIndex() {
        const {
            focusStateEnabled: focusStateEnabled,
            disabled: disabled,
            tabIndex: tabIndex
        } = this.props;
        const isFocusable = focusStateEnabled && !disabled;
        return isFocusable ? tabIndex : void 0
    }
    focus() {
        var _this$widgetElementRe17;
        _short.focus.trigger(null === (_this$widgetElementRe17 = this.widgetElementRef) || void 0 === _this$widgetElementRe17 ? void 0 : _this$widgetElementRe17.current)
    }
    blur() {
        var _this$widgetElementRe18, _this$widgetElementRe19;
        const activeElement = _dom_adapter.default.getActiveElement(null === (_this$widgetElementRe18 = this.widgetElementRef) || void 0 === _this$widgetElementRe18 ? void 0 : _this$widgetElementRe18.current);
        if ((null === (_this$widgetElementRe19 = this.widgetElementRef) || void 0 === _this$widgetElementRe19 ? void 0 : _this$widgetElementRe19.current) === activeElement) {
            activeElement.blur()
        }
    }
    activate() {
        this.setState({
            active: true
        })
    }
    deactivate() {
        this.setState({
            active: false
        })
    }
    render() {
        const {
            hint: hint,
            children: children
        } = this.props;
        const widget = (0, _inferno.normalizeProps)((0, _inferno.createVNode)(1, "div", this.getCssClasses(), children, 0, _extends({}, this.getAttributes(), {
            tabIndex: this.getTabIndex(),
            title: hint,
            style: this.getStyles()
        }), null, this.widgetElementRef));
        return this.getShouldRenderConfigProvider() ? (0, _inferno.createComponentVNode)(2, _config_provider.ConfigProvider, {
            rtlEnabled: this.getRtlEnabled(),
            children: widget
        }) : widget
    }
}
exports.Widget = Widget;
Widget.defaultProps = WidgetDefaultProps;