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

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/__internal/core/r1/template_wrapper.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.buildTemplateArgs = exports.TemplateWrapper = void 0;
var _inferno = require("@devextreme/runtime/inferno");
var _dom_adapter = _interopRequireDefault(require("../../../core/dom_adapter"));
var _element = require("../../../core/element");
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _dom = require("../../../core/utils/dom");
var _type = require("../../../core/utils/type");
var _inferno2 = require("inferno");
var _shallow_equals = require("./utils/shallow_equals");
const _excluded = ["isEqual"];

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

function _objectWithoutPropertiesLoose(r, e) {
    if (null == r) {
        return {}
    }
    var t = {};
    for (var n in r) {
        if ({}.hasOwnProperty.call(r, n)) {
            if (e.includes(n)) {
                continue
            }
            t[n] = r[n]
        }
    }
    return t
}

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 isDxElementWrapper = element => !!element.toArray;
const buildTemplateArgs = (model, template) => {
    const args = {
        template: template,
        model: _extends({}, model)
    };
    const _ref = model.data ?? {},
        {
            isEqual: isEqual
        } = _ref,
        data = _objectWithoutPropertiesLoose(_ref, _excluded);
    if (isEqual) {
        args.model.data = data;
        args.isEqual = isEqual
    }
    return args
};
exports.buildTemplateArgs = buildTemplateArgs;
const renderTemplateContent = (props, container) => {
    const {
        data: data,
        index: index
    } = props.model ?? {
        data: {}
    };
    if (data) {
        Object.keys(data).forEach((name => {
            if (data[name] && _dom_adapter.default.isNode(data[name])) {
                data[name] = (0, _element.getPublicElement)((0, _renderer.default)(data[name]))
            }
        }))
    }
    const rendered = props.template.render(_extends({
        container: container,
        transclude: props.transclude
    }, {
        renovated: props.renovated
    }, !props.transclude ? {
        model: data
    } : {}, !props.transclude && Number.isFinite(index) ? {
        index: index
    } : {}));
    if (void 0 === rendered) {
        return []
    }
    return isDxElementWrapper(rendered) ? rendered.toArray() : [(0, _renderer.default)(rendered).get(0)]
};
const removeDifferentElements = (oldChildren, newChildren) => {
    newChildren.forEach((newElement => {
        const hasOldChild = !!oldChildren.find((oldElement => newElement === oldElement));
        if (!hasOldChild && newElement.parentNode) {
            (0, _renderer.default)(newElement).remove()
        }
    }))
};
class TemplateWrapper extends _inferno.InfernoComponent {
    constructor(props) {
        super(props);
        this.renderTemplate = this.renderTemplate.bind(this)
    }
    renderTemplate() {
        const node = (0, _inferno2.findDOMfromVNode)(this.$LI, true);
        if (!(null !== node && void 0 !== node && node.parentNode)) {
            return () => {}
        }
        const container = node.parentNode;
        const $container = (0, _renderer.default)(container);
        const $oldContainerContent = $container.contents().toArray();
        const content = renderTemplateContent(this.props, (0, _element.getPublicElement)($container));
        (0, _dom.replaceWith)((0, _renderer.default)(node), (0, _renderer.default)(content));
        return () => {
            const $actualContainerContent = (0, _renderer.default)(container).contents().toArray();
            removeDifferentElements($oldContainerContent, $actualContainerContent);
            container.appendChild(node)
        }
    }
    shouldComponentUpdate(nextProps) {
        const {
            template: template,
            model: model
        } = this.props;
        const {
            template: nextTemplate,
            model: nextModel,
            isEqual: isEqual
        } = nextProps;
        const equalityComparer = isEqual ?? _shallow_equals.shallowEquals;
        if (template !== nextTemplate) {
            return true
        }
        if (!(0, _type.isDefined)(model) || !(0, _type.isDefined)(nextModel)) {
            return model !== nextModel
        }
        const {
            data: data,
            index: index
        } = model;
        const {
            data: nextData,
            index: nextIndex
        } = nextModel;
        if (index !== nextIndex) {
            return true
        }
        if (!(0, _type.isDefined)(data) || !(0, _type.isDefined)(nextData)) {
            return model !== nextModel
        }
        return !equalityComparer(data, nextData)
    }
    createEffects() {
        return [new _inferno.InfernoEffect(this.renderTemplate, [this.props.template, this.props.model])]
    }
    updateEffects() {
        this._effects[0].update([this.props.template, this.props.model])
    }
    componentWillUnmount() {}
    render() {
        return null
    }
}
exports.TemplateWrapper = TemplateWrapper;