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

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/core/r1/template_wrapper.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/
 */
import _extends from "@babel/runtime/helpers/esm/extends";
var __rest = this && this.__rest || function(s, e) {
    var t = {};
    for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) {
            t[p] = s[p]
        }
    }
    if (null != s && "function" === typeof Object.getOwnPropertySymbols) {
        var i = 0;
        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) {
                t[p[i]] = s[p[i]]
            }
        }
    }
    return t
};
import {
    InfernoComponent,
    InfernoEffect
} from "@devextreme/runtime/inferno";
import domAdapter from "../../../core/dom_adapter";
import {
    getPublicElement
} from "../../../core/element";
import $ from "../../../core/renderer";
import {
    replaceWith
} from "../../../core/utils/dom";
import {
    isDefined
} from "../../../core/utils/type";
import {
    findDOMfromVNode
} from "inferno";
import {
    shallowEquals
} from "./utils/shallow_equals";
var isDxElementWrapper = element => !!element.toArray;
export var buildTemplateArgs = (model, template) => {
    var _a;
    var args = {
        template: template,
        model: _extends({}, model)
    };
    var _b = null !== (_a = model.data) && void 0 !== _a ? _a : {},
        {
            isEqual: isEqual
        } = _b,
        data = __rest(_b, ["isEqual"]);
    if (isEqual) {
        args.model.data = data;
        args.isEqual = isEqual
    }
    return args
};
var renderTemplateContent = (props, container) => {
    var _a;
    var {
        data: data,
        index: index
    } = null !== (_a = props.model) && void 0 !== _a ? _a : {
        data: {}
    };
    if (data) {
        Object.keys(data).forEach(name => {
            if (data[name] && domAdapter.isNode(data[name])) {
                data[name] = getPublicElement($(data[name]))
            }
        })
    }
    var rendered = props.template.render(_extends(_extends(_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() : [$(rendered).get(0)]
};
var removeDifferentElements = (oldChildren, newChildren) => {
    newChildren.forEach(newElement => {
        var hasOldChild = !!oldChildren.find(oldElement => newElement === oldElement);
        if (!hasOldChild && newElement.parentNode) {
            $(newElement).remove()
        }
    })
};
export class TemplateWrapper extends InfernoComponent {
    constructor(props) {
        super(props);
        this.renderTemplate = this.renderTemplate.bind(this)
    }
    renderTemplate() {
        var node = findDOMfromVNode(this.$LI, true);
        if (!(null === node || void 0 === node ? void 0 : node.parentNode)) {
            return () => {}
        }
        var container = node.parentNode;
        var $container = $(container);
        var $oldContainerContent = $container.contents().toArray();
        var content = renderTemplateContent(this.props, getPublicElement($container));
        replaceWith($(node), $(content));
        return () => {
            var $actualContainerContent = $(container).contents().toArray();
            removeDifferentElements($oldContainerContent, $actualContainerContent);
            container.appendChild(node)
        }
    }
    shouldComponentUpdate(nextProps) {
        var {
            template: template,
            model: model
        } = this.props;
        var {
            template: nextTemplate,
            model: nextModel,
            isEqual: isEqual
        } = nextProps;
        var equalityComparer = null !== isEqual && void 0 !== isEqual ? isEqual : shallowEquals;
        if (template !== nextTemplate) {
            return true
        }
        if (!isDefined(model) || !isDefined(nextModel)) {
            return model !== nextModel
        }
        var {
            data: data,
            index: index
        } = model;
        var {
            data: nextData,
            index: nextIndex
        } = nextModel;
        if (index !== nextIndex) {
            return true
        }
        return !equalityComparer(data, nextData)
    }
    createEffects() {
        return [new InfernoEffect(this.renderTemplate, [this.props.template, this.props.model])]
    }
    updateEffects() {
        this._effects[0].update([this.props.template, this.props.model])
    }
    componentWillUnmount() {}
    render() {
        return null
    }
}