devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
143 lines (142 loc) • 5.08 kB
JavaScript
/**
* DevExtreme (esm/__internal/core/r1/dom_component_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/
*/
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["componentProps", "componentType", "templateNames"];
import {
createVNode
} from "inferno";
import {
hasTemplate,
InfernoComponent,
InfernoEffect,
renderTemplate
} from "@devextreme/runtime/inferno";
import {
getUpdatedOptions
} from "../../core/r1/utils/get_updated_options";
import {
createRef
} from "inferno";
import {
extend
} from "../../../core/utils/extend";
import {
ConfigContext
} from "./config_context";
const normalizeProps = props => Object.keys(props).reduce(((accumulator, key) => {
if (void 0 !== props[key]) {
accumulator[key] = props[key]
}
return accumulator
}), {});
export class DomComponentWrapper extends InfernoComponent {
constructor(props) {
super(props);
this.state = {};
this.refs = null;
this.widgetRef = createRef();
this.instance = null;
this.prevProps = null;
this.getInstance = this.getInstance.bind(this);
this.setupWidget = this.setupWidget.bind(this);
this.updateWidget = this.updateWidget.bind(this)
}
getConfig() {
const {
id: id
} = ConfigContext;
if (this.context[id]) {
return this.context[id]
}
return ConfigContext.defaultValue
}
render() {
return normalizeProps(createVNode(1, "div", this.props.componentProps.className, null, 1, _extends({}, this.getRestAttributes()), null, this.widgetRef))
}
componentWillUpdate(nextProps, nextState, context) {
super.componentWillUpdate(nextProps, nextState, context)
}
createEffects() {
return [new InfernoEffect(this.setupWidget, []), new InfernoEffect(this.updateWidget, [this.props.componentProps, this.getConfig(), this.props.templateNames])]
}
updateEffects() {
var _this$_effects$;
const dependency = [this.props.componentProps, this.getConfig(), this.props.templateNames];
null === (_this$_effects$ = this._effects[1]) || void 0 === _this$_effects$ || _this$_effects$.update(dependency)
}
setupWidget() {
const current = this.widgetRef.current;
const componentInstance = new this.props.componentType(current, this.getProperties());
this.instance = componentInstance;
return () => {
componentInstance.dispose();
this.instance = null
}
}
updateWidget() {
if (!this.instance) {
return
}
const updatedOptions = getUpdatedOptions(this.prevProps ?? {}, this.getProperties());
if (updatedOptions.length) {
this.instance.beginUpdate();
updatedOptions.forEach((_ref2 => {
var _this$instance;
const {
path: path,
value: value
} = _ref2;
null === (_this$instance = this.instance) || void 0 === _this$instance || _this$instance.option(path, value)
}));
this.instance.endUpdate()
}
this.prevProps = this.getProperties()
}
getRestAttributes() {
const _this$props = this.props,
restAttr = _objectWithoutPropertiesLoose(_this$props, _excluded);
return restAttr
}
getProperties() {
var _this$getConfig;
const normalizedProps = normalizeProps(this.props.componentProps);
const {
valueChange: valueChange
} = normalizedProps;
const properties = extend({
rtlEnabled: null === (_this$getConfig = this.getConfig()) || void 0 === _this$getConfig ? void 0 : _this$getConfig.rtlEnabled,
isRenovated: true
}, normalizedProps);
if (valueChange) {
properties.onValueChanged = _ref3 => {
const {
value: value
} = _ref3;
return valueChange(value)
}
}
const templates = this.props.templateNames;
templates.forEach((name => {
if (hasTemplate(name, properties, this)) {
properties[name] = (item, index, container) => {
renderTemplate(this.props.componentProps[name], {
item: item,
index: index,
container: container
}, this)
}
}
}));
return properties
}
getInstance() {
return this.instance
}
}