From a0d39eeb0494bfad3fcfb24f7bdc6a35c41b22b6 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Fri, 14 Jun 2024 10:22:27 +0400 Subject: [PATCH] HierarchicalCollectionWidget, DataAdapter, DataConverter: ignore errors after move to TS --- .../hierarchical_collection/m_data_adapter.ts | 932 +++++++++--------- .../m_data_converter.ts | 406 ++++---- .../m_hierarchical_collection_widget.ts | 449 +++++---- .../ui.hierarchical_collection_widget.js | 0 .../hierarchicalCollectionTestHelper.js | 2 +- .../hierarchicalDataAdapter.js | 2 +- 6 files changed, 898 insertions(+), 893 deletions(-) create mode 100644 packages/devextreme/js/ui/hierarchical_collection/ui.hierarchical_collection_widget.js diff --git a/packages/devextreme/js/__internal/ui/hierarchical_collection/m_data_adapter.ts b/packages/devextreme/js/__internal/ui/hierarchical_collection/m_data_adapter.ts index 1b8b2c6f756a..880f5a7fc976 100644 --- a/packages/devextreme/js/__internal/ui/hierarchical_collection/m_data_adapter.ts +++ b/packages/devextreme/js/__internal/ui/hierarchical_collection/m_data_adapter.ts @@ -1,539 +1,545 @@ -import Class from '../../core/class'; -import { noop } from '../../core/utils/common'; -import { each } from '../../core/utils/iterator'; -import { isFunction, isDefined } from '../../core/utils/type'; -import { extend } from '../../core/utils/extend'; -import errors from '../../ui/widget/ui.errors'; -import uiSearchBoxMixin from '../../ui/widget/ui.search_box_mixin'; -import TextBox from '../../ui/text_box'; -import query from '../../data/query'; -import storeHelper from '../../data/store_helper'; -import HierarchicalDataConverter from './ui.data_converter'; +import Class from '@js/core/class'; +import { noop } from '@js/core/utils/common'; +import { extend } from '@js/core/utils/extend'; +import { each } from '@js/core/utils/iterator'; +import { isDefined, isFunction } from '@js/core/utils/type'; +import query from '@js/data/query'; +import storeHelper from '@js/data/store_helper'; +import TextBox from '@js/ui/text_box'; +import errors from '@js/ui/widget/ui.errors'; +import uiSearchBoxMixin from '@js/ui/widget/ui.search_box_mixin'; + +import HierarchicalDataConverter from './m_data_converter'; const EXPANDED = 'expanded'; const SELECTED = 'selected'; const DISABLED = 'disabled'; - +// @ts-expect-error uiSearchBoxMixin.setEditorClass(TextBox); const DataAdapter = Class.inherit({ - ctor: function(options) { - this.options = {}; - extend(this.options, this._defaultOptions(), options); - this.options.dataConverter.setDataAccessors(this.options.dataAccessors); - - this._selectedNodesKeys = []; - this._expandedNodesKeys = []; - this._dataStructure = []; - - this._createInternalDataStructure(); - this.getTreeNodes(); - }, + ctor(options) { + this.options = {}; + extend(this.options, this._defaultOptions(), options); + this.options.dataConverter.setDataAccessors(this.options.dataAccessors); - setOption: function(name, value) { - this.options[name] = value; + this._selectedNodesKeys = []; + this._expandedNodesKeys = []; + this._dataStructure = []; - if(name === 'recursiveSelection') { - this._updateSelection(); - } - }, - - _defaultOptions: function() { - return { - dataAccessors: undefined, - items: [], - multipleSelection: true, - recursiveSelection: false, - recursiveExpansion: false, - rootValue: 0, - searchValue: '', - dataType: 'tree', - searchMode: 'contains', - dataConverter: new HierarchicalDataConverter(), - onNodeChanged: noop, - sort: null - }; - }, - - _createInternalDataStructure: function() { - this._initialDataStructure = this.options.dataConverter.createPlainStructure(this.options.items, this.options.rootValue, this.options.dataType); - this._dataStructure = this.options.searchValue.length ? this.search(this.options.searchValue) : this._initialDataStructure; - this.options.dataConverter._dataStructure = this._dataStructure; - - this._updateSelection(); - this._updateExpansion(); - }, - - _updateSelection: function() { - if(this.options.recursiveSelection) { - this._setChildrenSelection(); - this._setParentSelection(); - } + this._createInternalDataStructure(); + this.getTreeNodes(); + }, - this._selectedNodesKeys = this._updateNodesKeysArray(SELECTED); - }, + setOption(name, value) { + this.options[name] = value; - _updateExpansion: function(key) { - if(this.options.recursiveExpansion) { - key ? this._updateOneBranch(key) : this._setParentExpansion(); - } + if (name === 'recursiveSelection') { + this._updateSelection(); + } + }, + + _defaultOptions() { + return { + dataAccessors: undefined, + items: [], + multipleSelection: true, + recursiveSelection: false, + recursiveExpansion: false, + rootValue: 0, + searchValue: '', + dataType: 'tree', + searchMode: 'contains', + dataConverter: new HierarchicalDataConverter(), + onNodeChanged: noop, + sort: null, + }; + }, + + _createInternalDataStructure() { + this._initialDataStructure = this.options.dataConverter.createPlainStructure(this.options.items, this.options.rootValue, this.options.dataType); + this._dataStructure = this.options.searchValue.length ? this.search(this.options.searchValue) : this._initialDataStructure; + this.options.dataConverter._dataStructure = this._dataStructure; + + this._updateSelection(); + this._updateExpansion(); + }, + + _updateSelection() { + if (this.options.recursiveSelection) { + this._setChildrenSelection(); + this._setParentSelection(); + } - this._expandedNodesKeys = this._updateNodesKeysArray(EXPANDED); - }, - - _updateNodesKeysArray: function(property) { - const that = this; - let array = []; - - each(that._getDataBySelectionMode(), function(_, node) { - if(!that._isNodeVisible(node)) { - return; - } - - if(node.internalFields[property]) { - if(property === EXPANDED || that.options.multipleSelection) { - array.push(node.internalFields.key); - } else { - array.length && that.toggleSelection(array[0], false, true); - array = [node.internalFields.key]; - } - } - }); + this._selectedNodesKeys = this._updateNodesKeysArray(SELECTED); + }, - return array; - }, + _updateExpansion(key) { + if (this.options.recursiveExpansion) { + key ? this._updateOneBranch(key) : this._setParentExpansion(); + } - _getDataBySelectionMode: function() { - return this.options.multipleSelection ? this.getData() : this.getFullData(); - }, + this._expandedNodesKeys = this._updateNodesKeysArray(EXPANDED); + }, - _isNodeVisible: function(node) { - return node.internalFields.item.visible !== false; - }, + _updateNodesKeysArray(property) { + const that = this; + let array = []; - _getByKey: function(data, key) { - return data === this._dataStructure ? - this.options.dataConverter._getByKey(key) : - this.options.dataConverter.getByKey(data, key); - }, + each(that._getDataBySelectionMode(), (_, node) => { + if (!that._isNodeVisible(node)) { + return; + } - _setChildrenSelection: function() { - const that = this; + if (node.internalFields[property]) { + if (property === EXPANDED || that.options.multipleSelection) { + // @ts-expect-error + array.push(node.internalFields.key); + } else { + array.length && that.toggleSelection(array[0], false, true); + // @ts-expect-error + array = [node.internalFields.key]; + } + } + }); - each(this._dataStructure, function(_, node) { - if(!node.internalFields.childrenKeys.length) { - return; - } + return array; + }, - const isSelected = node.internalFields.selected; - isSelected === true && that._toggleChildrenSelection(node, isSelected); - }); - }, + _getDataBySelectionMode() { + return this.options.multipleSelection ? this.getData() : this.getFullData(); + }, - _setParentSelection: function() { - const that = this; + _isNodeVisible(node) { + return node.internalFields.item.visible !== false; + }, - each(this._dataStructure, function(_, node) { - const parent = that.options.dataConverter.getParentNode(node); + _getByKey(data, key) { + return data === this._dataStructure + ? this.options.dataConverter._getByKey(key) + : this.options.dataConverter.getByKey(data, key); + }, - if(parent && node.internalFields.parentKey !== that.options.rootValue) { - that._iterateParents(node, function(parent) { - const newParentState = that._calculateSelectedState(parent); - that._setFieldState(parent, SELECTED, newParentState); - }); - } - }); - }, + _setChildrenSelection() { + const that = this; - _setParentExpansion: function() { - const that = this; + each(this._dataStructure, (_, node) => { + if (!node.internalFields.childrenKeys.length) { + return; + } - each(this._dataStructure, function(_, node) { - if(!node.internalFields.expanded) { - return; - } + const isSelected = node.internalFields.selected; + isSelected === true && that._toggleChildrenSelection(node, isSelected); + }); + }, - that._updateOneBranch(node.internalFields.key); - }); - }, + _setParentSelection() { + const that = this; - _updateOneBranch: function(key) { - const that = this; - const node = this.getNodeByKey(key); + each(this._dataStructure, (_, node) => { + const parent = that.options.dataConverter.getParentNode(node); - that._iterateParents(node, function(parent) { - that._setFieldState(parent, EXPANDED, true); + if (parent && node.internalFields.parentKey !== that.options.rootValue) { + that._iterateParents(node, (parent) => { + const newParentState = that._calculateSelectedState(parent); + that._setFieldState(parent, SELECTED, newParentState); }); - }, - - _iterateChildren: function(node, recursive, callback, processedKeys) { - if(!isFunction(callback)) { - return; - } - - const that = this; - const nodeKey = node.internalFields.key; - processedKeys = processedKeys || []; - if(processedKeys.indexOf(nodeKey) === -1) { - processedKeys.push(nodeKey); - each(node.internalFields.childrenKeys, function(_, key) { - const child = that.getNodeByKey(key); - callback(child); - if(child.internalFields.childrenKeys.length && recursive) { - that._iterateChildren(child, recursive, callback, processedKeys); - } - }); - } - }, + } + }); + }, + + _setParentExpansion() { + const that = this; + + each(this._dataStructure, (_, node) => { + if (!node.internalFields.expanded) { + return; + } + + that._updateOneBranch(node.internalFields.key); + }); + }, + + _updateOneBranch(key) { + const that = this; + const node = this.getNodeByKey(key); + + that._iterateParents(node, (parent) => { + that._setFieldState(parent, EXPANDED, true); + }); + }, + + _iterateChildren(node, recursive, callback, processedKeys) { + if (!isFunction(callback)) { + return; + } - _iterateParents: function(node, callback, processedKeys) { - if(node.internalFields.parentKey === this.options.rootValue || !isFunction(callback)) { - return; - } - processedKeys = processedKeys || []; - const key = node.internalFields.key; - - if(processedKeys.indexOf(key) === -1) { - processedKeys.push(key); - const parent = this.options.dataConverter.getParentNode(node); - if(parent) { - callback(parent); - if(parent.internalFields.parentKey !== this.options.rootValue) { - this._iterateParents(parent, callback, processedKeys); - } - } - } - }, - - _calculateSelectedState: function(node) { - const itemsCount = node.internalFields.childrenKeys.length; - let selectedItemsCount = 0; - let invisibleItemsCount = 0; - let result = false; - - for(let i = 0; i <= itemsCount - 1; i++) { - const childNode = this.getNodeByKey(node.internalFields.childrenKeys[i]); - const isChildInvisible = childNode.internalFields.item.visible === false; - const childState = childNode.internalFields.selected; - - if(isChildInvisible) { - invisibleItemsCount++; - continue; - } - - if(childState) { - selectedItemsCount++; - } else if(childState === undefined) { - selectedItemsCount += 0.5; - } + const that = this; + const nodeKey = node.internalFields.key; + processedKeys = processedKeys || []; + if (processedKeys.indexOf(nodeKey) === -1) { + processedKeys.push(nodeKey); + each(node.internalFields.childrenKeys, (_, key) => { + const child = that.getNodeByKey(key); + callback(child); + if (child.internalFields.childrenKeys.length && recursive) { + that._iterateChildren(child, recursive, callback, processedKeys); } + }); + } + }, - if(selectedItemsCount) { - result = selectedItemsCount === itemsCount - invisibleItemsCount ? true : undefined; + _iterateParents(node, callback, processedKeys) { + if (node.internalFields.parentKey === this.options.rootValue || !isFunction(callback)) { + return; + } + processedKeys = processedKeys || []; + const { key } = node.internalFields; + + if (processedKeys.indexOf(key) === -1) { + processedKeys.push(key); + const parent = this.options.dataConverter.getParentNode(node); + if (parent) { + callback(parent); + if (parent.internalFields.parentKey !== this.options.rootValue) { + this._iterateParents(parent, callback, processedKeys); } + } + } + }, + + _calculateSelectedState(node) { + const itemsCount = node.internalFields.childrenKeys.length; + let selectedItemsCount = 0; + let invisibleItemsCount = 0; + let result = false; + + for (let i = 0; i <= itemsCount - 1; i++) { + const childNode = this.getNodeByKey(node.internalFields.childrenKeys[i]); + const isChildInvisible = childNode.internalFields.item.visible === false; + const childState = childNode.internalFields.selected; + + if (isChildInvisible) { + invisibleItemsCount++; + continue; + } + + if (childState) { + selectedItemsCount++; + } else if (childState === undefined) { + selectedItemsCount += 0.5; + } + } - return result; - }, - - _toggleChildrenSelection: function(node, state) { - const that = this; - - this._iterateChildren(node, true, function(child) { - if(that._isNodeVisible(child)) { - that._setFieldState(child, SELECTED, state); - } - }); - }, + if (selectedItemsCount) { + // @ts-expect-error + result = selectedItemsCount === itemsCount - invisibleItemsCount ? true : undefined; + } - _setFieldState: function(node, field, state) { - if(node.internalFields[field] === state) { - return; - } + return result; + }, - node.internalFields[field] = state; - if(node.internalFields.publicNode) { - node.internalFields.publicNode[field] = state; - } - this.options.dataAccessors.setters[field](node.internalFields.item, state); + _toggleChildrenSelection(node, state) { + const that = this; - this.options.onNodeChanged(node); - }, + this._iterateChildren(node, true, (child) => { + if (that._isNodeVisible(child)) { + that._setFieldState(child, SELECTED, state); + } + }); + }, - _markChildren: function(keys) { - const that = this; + _setFieldState(node, field, state) { + if (node.internalFields[field] === state) { + return; + } - each(keys, function(_, key) { - const index = that.getIndexByKey(key); - const node = that.getNodeByKey(key); - that._dataStructure[index] = 0; - node.internalFields.childrenKeys.length && that._markChildren(node.internalFields.childrenKeys); - }); - }, - - _removeNode: function(key) { - const node = this.getNodeByKey(key); - - this._dataStructure[this.getIndexByKey(key)] = 0; - this._markChildren(node.internalFields.childrenKeys); - - const that = this; - let counter = 0; - const items = extend([], this._dataStructure); - each(items, function(index, item) { - if(!item) { - that._dataStructure.splice(index - counter, 1); - counter++; - } - }); - }, - - _addNode: function(item) { - const dataConverter = this.options.dataConverter; - const node = dataConverter._convertItemToNode(item, this.options.dataAccessors.getters.parentKey(item)); - - this._dataStructure = this._dataStructure.concat(node); - this._initialDataStructure = this._initialDataStructure.concat(node); - dataConverter._dataStructure = dataConverter._dataStructure.concat(node); - }, - - _updateFields: function() { - this.options.dataConverter.updateChildrenKeys(); - this._updateSelection(); - this._updateExpansion(); - }, - - getSelectedNodesKeys: function() { - return this._selectedNodesKeys; - }, - - getExpandedNodesKeys: function() { - return this._expandedNodesKeys; - }, - - getData: function() { - return this._dataStructure; - }, - - getFullData: function() { - return this._initialDataStructure; - }, - - getNodeByItem: function(item) { - let result = null; - - each(this._dataStructure, function(_, node) { - if(node.internalFields.item === item) { - result = node; - return false; - } - }); + node.internalFields[field] = state; + if (node.internalFields.publicNode) { + node.internalFields.publicNode[field] = state; + } + this.options.dataAccessors.setters[field](node.internalFields.item, state); + + this.options.onNodeChanged(node); + }, + + _markChildren(keys) { + const that = this; + + each(keys, (_, key) => { + const index = that.getIndexByKey(key); + const node = that.getNodeByKey(key); + that._dataStructure[index] = 0; + node.internalFields.childrenKeys.length && that._markChildren(node.internalFields.childrenKeys); + }); + }, + + _removeNode(key) { + const node = this.getNodeByKey(key); + + this._dataStructure[this.getIndexByKey(key)] = 0; + this._markChildren(node.internalFields.childrenKeys); + + const that = this; + let counter = 0; + const items = extend([], this._dataStructure); + each(items, (index, item) => { + if (!item) { + // @ts-expect-error + that._dataStructure.splice(index - counter, 1); + counter++; + } + }); + }, + + _addNode(item) { + const { dataConverter } = this.options; + const node = dataConverter._convertItemToNode(item, this.options.dataAccessors.getters.parentKey(item)); + + this._dataStructure = this._dataStructure.concat(node); + this._initialDataStructure = this._initialDataStructure.concat(node); + dataConverter._dataStructure = dataConverter._dataStructure.concat(node); + }, + + _updateFields() { + this.options.dataConverter.updateChildrenKeys(); + this._updateSelection(); + this._updateExpansion(); + }, + + getSelectedNodesKeys() { + return this._selectedNodesKeys; + }, + + getExpandedNodesKeys() { + return this._expandedNodesKeys; + }, + + getData() { + return this._dataStructure; + }, + + getFullData() { + return this._initialDataStructure; + }, + + getNodeByItem(item) { + let result = null; + // @ts-expect-error + each(this._dataStructure, (_, node) => { + if (node.internalFields.item === item) { + result = node; + return false; + } + }); + + return result; + }, + + getNodesByItems(items) { + const that = this; + const nodes = []; + + each(items, (_, item) => { + const node = that.getNodeByItem(item); + // @ts-expect-error + node && nodes.push(node); + }); + + return nodes; + }, + + getNodeByKey(key, data) { + return this._getByKey(data || this._getDataBySelectionMode(), key); + }, + + getTreeNodes() { + return this.options.dataConverter.convertToPublicNodes(this.getRootNodes()); + }, + + getItemsCount() { + return this.options.dataConverter.getItemsCount(); + }, + + getVisibleItemsCount() { + return this.options.dataConverter.getVisibleItemsCount(); + }, + + getPublicNode(node) { + return node.internalFields.publicNode; + }, + + getRootNodes() { + return this.getChildrenNodes(this.options.rootValue); + }, + + getChildrenNodes(parentKey) { + return query(this._dataStructure, { langParams: this.options.langParams }).filter(['internalFields.parentKey', parentKey]).toArray(); + }, + + getIndexByKey(key) { + return this.options.dataConverter.getIndexByKey(key); + }, + + addItem(item) { + this._addNode(item); + this._updateFields(); + }, + + removeItem(key) { + this._removeNode(key); + this._updateFields(); + }, + + toggleSelection(key, state, selectRecursive) { + const isSingleModeUnselect = this._isSingleModeUnselect(state); + const node = this._getByKey(selectRecursive || isSingleModeUnselect ? this._initialDataStructure : this._dataStructure, key); + this._setFieldState(node, SELECTED, state); + + if (this.options.recursiveSelection && !selectRecursive) { + state ? this._setChildrenSelection() : this._toggleChildrenSelection(node, state); + this._setParentSelection(); + } - return result; - }, + this._selectedNodesKeys = this._updateNodesKeysArray(SELECTED); + }, - getNodesByItems: function(items) { - const that = this; - const nodes = []; + _isSingleModeUnselect(selectionState) { + return !this.options.multipleSelection && !selectionState; + }, - each(items, function(_, item) { - const node = that.getNodeByItem(item); - node && nodes.push(node); - }); + toggleNodeDisabledState(key, state) { + const node = this.getNodeByKey(key); + this._setFieldState(node, DISABLED, state); + }, - return nodes; - }, + toggleSelectAll(state) { + if (!isDefined(state)) { + return; + } - getNodeByKey: function(key, data) { - return this._getByKey(data || this._getDataBySelectionMode(), key); - }, + const that = this; + const lastSelectedKey = that._selectedNodesKeys[that._selectedNodesKeys.length - 1]; + const dataStructure = that._isSingleModeUnselect(state) ? this._initialDataStructure : this._dataStructure; - getTreeNodes: function() { - return this.options.dataConverter.convertToPublicNodes(this.getRootNodes()); - }, + each(dataStructure, (index, node) => { + if (!that._isNodeVisible(node)) { + return; + } - getItemsCount: function() { - return this.options.dataConverter.getItemsCount(); - }, + that._setFieldState(node, SELECTED, state); + }); - getVisibleItemsCount: function() { - return this.options.dataConverter.getVisibleItemsCount(); - }, + that._selectedNodesKeys = that._updateNodesKeysArray(SELECTED); - getPublicNode: function(node) { - return node.internalFields.publicNode; - }, + if (!state && that.options.selectionRequired) { + that.toggleSelection(lastSelectedKey, true); + } + }, - getRootNodes: function() { - return this.getChildrenNodes(this.options.rootValue); - }, + isAllSelected() { + if (this.getSelectedNodesKeys().length) { + return this.getSelectedNodesKeys().length === this.getVisibleItemsCount() ? true : undefined; + } + return false; + }, + + toggleExpansion(key, state) { + const node = this.getNodeByKey(key); + this._setFieldState(node, EXPANDED, state); + if (state) { + this._updateExpansion(key); + } + this._expandedNodesKeys = this._updateNodesKeysArray(EXPANDED); + }, - getChildrenNodes: function(parentKey) { - return query(this._dataStructure, { langParams: this.options.langParams }).filter(['internalFields.parentKey', parentKey]).toArray(); - }, + isFiltered(item) { + return !this.options.searchValue.length || !!this._filterDataStructure(this.options.searchValue, [item]).length; + }, - getIndexByKey: function(key) { - return this.options.dataConverter.getIndexByKey(key); - }, + _createCriteria(selector, value, operation) { + const searchFilter = []; + if (!Array.isArray(selector)) { + return [selector, operation, value]; + } + each(selector, (i, item) => { + // @ts-expect-error + searchFilter.push([item, operation, value], 'or'); + }); - addItem: function(item) { - this._addNode(item); - this._updateFields(); - }, + searchFilter.pop(); + return searchFilter; + }, - removeItem: function(key) { - this._removeNode(key); - this._updateFields(); - }, + _filterDataStructure(filterValue, dataStructure) { + const selector = this.options.searchExpr || this.options.dataAccessors.getters.display; + // @ts-expect-error + const operation = uiSearchBoxMixin.getOperationBySearchMode(this.options.searchMode); + const criteria = this._createCriteria(selector, filterValue, operation); - toggleSelection: function(key, state, selectRecursive) { - const isSingleModeUnselect = this._isSingleModeUnselect(state); - const node = this._getByKey(selectRecursive || isSingleModeUnselect ? this._initialDataStructure : this._dataStructure, key); - this._setFieldState(node, SELECTED, state); + dataStructure = dataStructure || this._initialDataStructure; - if(this.options.recursiveSelection && !selectRecursive) { - state ? this._setChildrenSelection() : this._toggleChildrenSelection(node, state); - this._setParentSelection(); - } + return query(dataStructure, { langParams: this.options.langParams }).filter(criteria).toArray(); + }, - this._selectedNodesKeys = this._updateNodesKeysArray(SELECTED); - }, + search(searchValue) { + const that = this; + let matches = this._filterDataStructure(searchValue); + const { dataConverter } = this.options; - _isSingleModeUnselect: function(selectionState) { - return !this.options.multipleSelection && !selectionState; - }, + function lookForParents(matches, index) { + const { length } = matches; - toggleNodeDisabledState: function(key, state) { - const node = this.getNodeByKey(key); - this._setFieldState(node, DISABLED, state); - }, + while (index < length) { + const node = matches[index]; - toggleSelectAll: function(state) { - if(!isDefined(state)) { - return; + if (node.internalFields.parentKey === that.options.rootValue) { + index++; + continue; } - const that = this; - const lastSelectedKey = that._selectedNodesKeys[that._selectedNodesKeys.length - 1]; - const dataStructure = that._isSingleModeUnselect(state) ? this._initialDataStructure : this._dataStructure; - - each(dataStructure, function(index, node) { - if(!that._isNodeVisible(node)) { - return; - } + const parent = dataConverter.getParentNode(node); - that._setFieldState(node, SELECTED, state); - }); - - that._selectedNodesKeys = that._updateNodesKeysArray(SELECTED); - - if(!state && that.options.selectionRequired) { - that.toggleSelection(lastSelectedKey, true); + if (!parent) { + errors.log('W1007', node.internalFields.parentKey, node.internalFields.key); + index++; + continue; } - }, - isAllSelected: function() { - if(this.getSelectedNodesKeys().length) { - return this.getSelectedNodesKeys().length === this.getVisibleItemsCount() ? true : undefined; - } else { - return false; + if (!parent.internalFields.expanded) { + that._setFieldState(parent, EXPANDED, true); } - }, - toggleExpansion: function(key, state) { - const node = this.getNodeByKey(key); - this._setFieldState(node, EXPANDED, state); - if(state) { - this._updateExpansion(key); + if (matches.includes(parent)) { + index++; + continue; } - this._expandedNodesKeys = this._updateNodesKeysArray(EXPANDED); - }, - - isFiltered: function(item) { - return !this.options.searchValue.length || !!this._filterDataStructure(this.options.searchValue, [item]).length; - }, - - _createCriteria: function(selector, value, operation) { - const searchFilter = []; - if(!Array.isArray(selector)) { - return [selector, operation, value]; - } - each(selector, function(i, item) { - searchFilter.push([item, operation, value], 'or'); - }); - - searchFilter.pop(); - return searchFilter; - }, - _filterDataStructure: function(filterValue, dataStructure) { - const selector = this.options.searchExpr || this.options.dataAccessors.getters.display; - const operation = uiSearchBoxMixin.getOperationBySearchMode(this.options.searchMode); - const criteria = this._createCriteria(selector, filterValue, operation); - - dataStructure = dataStructure || this._initialDataStructure; - - return query(dataStructure, { langParams: this.options.langParams }).filter(criteria).toArray(); - }, - - search: function(searchValue) { - const that = this; - let matches = this._filterDataStructure(searchValue); - const dataConverter = this.options.dataConverter; - - function lookForParents(matches, index) { - - const length = matches.length; - - while(index < length) { - const node = matches[index]; - - if(node.internalFields.parentKey === that.options.rootValue) { - index++; - continue; - } - - const parent = dataConverter.getParentNode(node); - - if(!parent) { - errors.log('W1007', node.internalFields.parentKey, node.internalFields.key); - index++; - continue; - } - - if(!parent.internalFields.expanded) { - that._setFieldState(parent, EXPANDED, true); - } - - if(matches.includes(parent)) { - index++; - continue; - } - - matches.splice(index, 0, parent); - lookForParents(matches, index); - } - } + matches.splice(index, 0, parent); + lookForParents(matches, index); + } + } - lookForParents(matches, 0); + lookForParents(matches, 0); - if(this.options.sort) { - matches = storeHelper - .queryByOptions(query(matches), { sort: this.options.sort, langParams: this.options.langParams }) - .toArray(); - } + if (this.options.sort) { + matches = storeHelper + .queryByOptions(query(matches), { sort: this.options.sort, langParams: this.options.langParams }) + .toArray(); + } - dataConverter._indexByKey = {}; - each(matches, function(index, node) { - node.internalFields.childrenKeys = []; - dataConverter._indexByKey[node.internalFields.key] = index; - }); + dataConverter._indexByKey = {}; + each(matches, (index, node) => { + node.internalFields.childrenKeys = []; + dataConverter._indexByKey[node.internalFields.key] = index; + }); - dataConverter._dataStructure = matches; - dataConverter.setChildrenKeys(); + dataConverter._dataStructure = matches; + dataConverter.setChildrenKeys(); - return dataConverter._dataStructure; - } + return dataConverter._dataStructure; + }, }); diff --git a/packages/devextreme/js/__internal/ui/hierarchical_collection/m_data_converter.ts b/packages/devextreme/js/__internal/ui/hierarchical_collection/m_data_converter.ts index 701086388896..bdb0a92674a7 100644 --- a/packages/devextreme/js/__internal/ui/hierarchical_collection/m_data_converter.ts +++ b/packages/devextreme/js/__internal/ui/hierarchical_collection/m_data_converter.ts @@ -1,235 +1,235 @@ -import Class from '../../core/class'; -import { extend } from '../../core/utils/extend'; -import errors from '../../ui/widget/ui.errors'; -import { each } from '../../core/utils/iterator'; -import { isDefined, isPrimitive } from '../../core/utils/type'; +import Class from '@js/core/class'; +import { extend } from '@js/core/utils/extend'; +import { each } from '@js/core/utils/iterator'; +import { isDefined, isPrimitive } from '@js/core/utils/type'; +import errors from '@js/ui/widget/ui.errors'; const DataConverter = Class.inherit({ - ctor: function() { - this._dataStructure = []; - this._itemsCount = 0; - this._visibleItemsCount = 0; - }, + ctor() { + this._dataStructure = []; + this._itemsCount = 0; + this._visibleItemsCount = 0; + }, - _indexByKey: {}, + _indexByKey: {}, - _convertItemsToNodes: function(items, parentKey) { - const that = this; + _convertItemsToNodes(items, parentKey) { + const that = this; - each(items, function(_, item) { - const parentId = isDefined(parentKey) ? parentKey : that._getParentId(item); - const node = that._convertItemToNode(item, parentId); + each(items, (_, item) => { + const parentId = isDefined(parentKey) ? parentKey : that._getParentId(item); + const node = that._convertItemToNode(item, parentId); - that._dataStructure.push(node); + that._dataStructure.push(node); - that._checkForDuplicateId(node.internalFields.key); - that._indexByKey[node.internalFields.key] = that._dataStructure.length - 1; + that._checkForDuplicateId(node.internalFields.key); + that._indexByKey[node.internalFields.key] = that._dataStructure.length - 1; - if(that._itemHasChildren(item)) { - that._convertItemsToNodes(that._dataAccessors.getters.items(item), node.internalFields.key); - } - }); - }, + if (that._itemHasChildren(item)) { + that._convertItemsToNodes(that._dataAccessors.getters.items(item), node.internalFields.key); + } + }); + }, - _checkForDuplicateId: function(key) { - if(isDefined(this._indexByKey[key])) { - throw errors.Error('E1040', key); - } - }, + _checkForDuplicateId(key) { + if (isDefined(this._indexByKey[key])) { + throw errors.Error('E1040', key); + } + }, - _getParentId: function(item) { - return this._dataType === 'plain' ? this._dataAccessors.getters.parentKey(item) : undefined; - }, + _getParentId(item) { + return this._dataType === 'plain' ? this._dataAccessors.getters.parentKey(item) : undefined; + }, - _itemHasChildren: function(item) { - if(this._dataType === 'plain') { - return; - } - const items = this._dataAccessors.getters.items(item); - return items && items.length; - }, - - _getUniqueKey: function(item) { - const keyGetter = this._dataAccessors.getters.key; - const itemKey = keyGetter(item); - const isCorrectKey = keyGetter && (itemKey || itemKey === 0) && isPrimitive(itemKey); - - return isCorrectKey ? itemKey : this.getItemsCount(); - }, - - _convertItemToNode: function(item, parentKey) { - this._itemsCount++; - item.visible !== false && this._visibleItemsCount++; - - const that = this; - const node = { - internalFields: { - disabled: that._dataAccessors.getters.disabled(item, { defaultValue: false }), - expanded: that._dataAccessors.getters.expanded(item, { defaultValue: false }), - selected: that._dataAccessors.getters.selected(item, { defaultValue: false }), - key: that._getUniqueKey(item), - parentKey: isDefined(parentKey) ? parentKey : that._rootValue, - item: that._makeObjectFromPrimitive(item), - childrenKeys: [] - } - }; - - extend(node, item); - - delete node.items; - - return node; - }, - - setChildrenKeys: function() { - const that = this; - - each(this._dataStructure, function(_, node) { - if(node.internalFields.parentKey === that._rootValue) return; - - const parent = that.getParentNode(node); - parent && parent.internalFields.childrenKeys.push(node.internalFields.key); - }); - }, - - _makeObjectFromPrimitive: function(item) { - if(isPrimitive(item)) { - const key = item; - item = {}; - this._dataAccessors.setters.key(item, key); - } - return item; - }, + _itemHasChildren(item) { + if (this._dataType === 'plain') { + return; + } + const items = this._dataAccessors.getters.items(item); + return items && items.length; + }, + + _getUniqueKey(item) { + const keyGetter = this._dataAccessors.getters.key; + const itemKey = keyGetter(item); + const isCorrectKey = keyGetter && (itemKey || itemKey === 0) && isPrimitive(itemKey); + + return isCorrectKey ? itemKey : this.getItemsCount(); + }, + + _convertItemToNode(item, parentKey) { + this._itemsCount++; + item.visible !== false && this._visibleItemsCount++; + + const that = this; + const node = { + internalFields: { + disabled: that._dataAccessors.getters.disabled(item, { defaultValue: false }), + expanded: that._dataAccessors.getters.expanded(item, { defaultValue: false }), + selected: that._dataAccessors.getters.selected(item, { defaultValue: false }), + key: that._getUniqueKey(item), + parentKey: isDefined(parentKey) ? parentKey : that._rootValue, + item: that._makeObjectFromPrimitive(item), + childrenKeys: [], + }, + }; + + extend(node, item); + // @ts-expect-error + delete node.items; + + return node; + }, + + setChildrenKeys() { + const that = this; + + each(this._dataStructure, (_, node) => { + if (node.internalFields.parentKey === that._rootValue) return; + + const parent = that.getParentNode(node); + parent && parent.internalFields.childrenKeys.push(node.internalFields.key); + }); + }, + + _makeObjectFromPrimitive(item) { + if (isPrimitive(item)) { + const key = item; + item = {}; + this._dataAccessors.setters.key(item, key); + } + return item; + }, - _convertToPublicNode: function(node, parent) { - if(!node) { - return null; - } + _convertToPublicNode(node, parent) { + if (!node) { + return null; + } - const publicNode = { - text: this._dataAccessors.getters.display(node), - key: node.internalFields.key, - selected: node.internalFields.selected, - expanded: node.internalFields.expanded, - disabled: node.internalFields.disabled, - parent: parent || null, - itemData: node.internalFields.item, - children: [], - items: [] - }; - - if(publicNode.parent) { - publicNode.parent.children.push(publicNode); - publicNode.parent.items.push(publicNode); - } + const publicNode = { + text: this._dataAccessors.getters.display(node), + key: node.internalFields.key, + selected: node.internalFields.selected, + expanded: node.internalFields.expanded, + disabled: node.internalFields.disabled, + parent: parent || null, + itemData: node.internalFields.item, + children: [], + items: [], + }; + + if (publicNode.parent) { + publicNode.parent.children.push(publicNode); + publicNode.parent.items.push(publicNode); + } - return publicNode; - }, + return publicNode; + }, - convertToPublicNodes: function(data, parent) { + convertToPublicNodes(data, parent) { + if (!data.length) return []; - if(!data.length) return []; + const that = this; + const publicNodes = []; - const that = this; - const publicNodes = []; + each(data, (_, node) => { + node = isPrimitive(node) ? that._getByKey(node) : node; - each(data, function(_, node) { - node = isPrimitive(node) ? that._getByKey(node) : node; + const publicNode = that._convertToPublicNode(node, parent); - const publicNode = that._convertToPublicNode(node, parent); + publicNode.children = that.convertToPublicNodes(node.internalFields.childrenKeys, publicNode); + // @ts-expect-error + publicNodes.push(publicNode); - publicNode.children = that.convertToPublicNodes(node.internalFields.childrenKeys, publicNode); + node.internalFields.publicNode = publicNode; + }); - publicNodes.push(publicNode); + return publicNodes; + }, - node.internalFields.publicNode = publicNode; - }); + setDataAccessors(accessors) { + this._dataAccessors = accessors; + }, - return publicNodes; - }, + _getByKey(key) { + return this._dataStructure[this.getIndexByKey(key)] || null; + }, - setDataAccessors: function(accessors) { - this._dataAccessors = accessors; - }, + getParentNode(node) { + return this._getByKey(node.internalFields.parentKey); + }, - _getByKey: function(key) { - return this._dataStructure[this.getIndexByKey(key)] || null; - }, + getByKey(data, key) { + if (key === null || key === undefined) { + return null; + } - getParentNode: function(node) { - return this._getByKey(node.internalFields.parentKey); - }, + let result = null; + const that = this; - getByKey: function(data, key) { - if(key === null || key === undefined) { - return null; + const getByKey = function (data, key) { + // @ts-expect-error + each(data, (_, element) => { + const currentElementKey = element.internalFields && element.internalFields.key || that._dataAccessors.getters.key(element); + if (currentElementKey.toString() === key.toString()) { + result = element; + return false; } - - let result = null; - const that = this; - - const getByKey = function(data, key) { - each(data, function(_, element) { - const currentElementKey = element.internalFields && element.internalFields.key || that._dataAccessors.getters.key(element); - if(currentElementKey.toString() === key.toString()) { - result = element; - return false; - } - }); - - return result; - }; - - return getByKey(data, key); - }, - - getItemsCount: function() { - return this._itemsCount; - }, - - getVisibleItemsCount: function() { - return this._visibleItemsCount; - }, - - updateIndexByKey: function() { - const that = this; - this._indexByKey = {}; - each(this._dataStructure, function(index, node) { - that._checkForDuplicateId(node.internalFields.key); - that._indexByKey[node.internalFields.key] = index; - }); - }, - - updateChildrenKeys: function() { - this._indexByKey = {}; - this.removeChildrenKeys(); - this.updateIndexByKey(); - this.setChildrenKeys(); - }, - - removeChildrenKeys: function() { - this._indexByKey = {}; - each(this._dataStructure, function(index, node) { - node.internalFields.childrenKeys = []; - }); - }, - - getIndexByKey: function(key) { - return this._indexByKey[key]; - }, - - createPlainStructure: function(items, rootValue, dataType) { - this._itemsCount = 0; - this._visibleItemsCount = 0; - this._rootValue = rootValue; - this._dataType = dataType; - this._indexByKey = {}; - this._convertItemsToNodes(items); - this.setChildrenKeys(); - - return this._dataStructure; - } + }); + + return result; + }; + + return getByKey(data, key); + }, + + getItemsCount() { + return this._itemsCount; + }, + + getVisibleItemsCount() { + return this._visibleItemsCount; + }, + + updateIndexByKey() { + const that = this; + this._indexByKey = {}; + each(this._dataStructure, (index, node) => { + that._checkForDuplicateId(node.internalFields.key); + that._indexByKey[node.internalFields.key] = index; + }); + }, + + updateChildrenKeys() { + this._indexByKey = {}; + this.removeChildrenKeys(); + this.updateIndexByKey(); + this.setChildrenKeys(); + }, + + removeChildrenKeys() { + this._indexByKey = {}; + each(this._dataStructure, (index, node) => { + node.internalFields.childrenKeys = []; + }); + }, + + getIndexByKey(key) { + return this._indexByKey[key]; + }, + + createPlainStructure(items, rootValue, dataType) { + this._itemsCount = 0; + this._visibleItemsCount = 0; + this._rootValue = rootValue; + this._dataType = dataType; + this._indexByKey = {}; + this._convertItemsToNodes(items); + this.setChildrenKeys(); + + return this._dataStructure; + }, }); diff --git a/packages/devextreme/js/__internal/ui/hierarchical_collection/m_hierarchical_collection_widget.ts b/packages/devextreme/js/__internal/ui/hierarchical_collection/m_hierarchical_collection_widget.ts index fd69a5d85a68..6deddad62d6d 100644 --- a/packages/devextreme/js/__internal/ui/hierarchical_collection/m_hierarchical_collection_widget.ts +++ b/packages/devextreme/js/__internal/ui/hierarchical_collection/m_hierarchical_collection_widget.ts @@ -1,240 +1,239 @@ -import $ from '../../core/renderer'; -import { compileGetter, compileSetter } from '../../core/utils/data'; -import { extend } from '../../core/utils/extend'; -import { each } from '../../core/utils/iterator'; -import devices from '../../core/devices'; -import { getImageContainer } from '../../core/utils/icon'; -import HierarchicalDataAdapter from './ui.data_adapter'; -import CollectionWidget from '../collection/ui.collection_widget.edit'; -import { BindableTemplate } from '../../core/templates/bindable_template'; -import { isFunction, isObject } from '../../core/utils/type'; -import { noop } from '../../core/utils/common'; +import devices from '@js/core/devices'; +import $ from '@js/core/renderer'; +import { BindableTemplate } from '@js/core/templates/bindable_template'; +import { noop } from '@js/core/utils/common'; +import { compileGetter, compileSetter } from '@js/core/utils/data'; +import { extend } from '@js/core/utils/extend'; +import { getImageContainer } from '@js/core/utils/icon'; +import { each } from '@js/core/utils/iterator'; +import { isFunction, isObject } from '@js/core/utils/type'; +import CollectionWidget from '@js/ui/collection/ui.collection_widget.edit'; + +import HierarchicalDataAdapter from './m_data_adapter'; const DISABLED_STATE_CLASS = 'dx-state-disabled'; const ITEM_URL_CLASS = 'dx-item-url'; const HierarchicalCollectionWidget = CollectionWidget.inherit({ - _getDefaultOptions: function() { - return extend(this.callBase(), { - keyExpr: 'id', - - displayExpr: 'text', - - selectedExpr: 'selected', - - disabledExpr: 'disabled', - - itemsExpr: 'items', - - hoverStateEnabled: true, - - parentIdExpr: 'parentId', - expandedExpr: 'expanded' - }); - }, + _getDefaultOptions() { + return extend(this.callBase(), { + keyExpr: 'id', + displayExpr: 'text', + selectedExpr: 'selected', + disabledExpr: 'disabled', + itemsExpr: 'items', + hoverStateEnabled: true, + parentIdExpr: 'parentId', + expandedExpr: 'expanded', + }); + }, + + _defaultOptionsRules() { + return this.callBase().concat([ + { + device() { + return devices.real().deviceType === 'desktop' && !devices.isSimulator(); + }, + options: { + focusStateEnabled: true, + }, + }, + ]); + }, + + _init() { + this.callBase(); + + this._initAccessors(); + this._initDataAdapter(); + this._initDynamicTemplates(); + }, + + _initDataSource() { + this.callBase(); + this._dataSource && this._dataSource.paginate(false); + }, + + _initDataAdapter() { + const accessors = this._createDataAdapterAccessors(); + + this._dataAdapter = new HierarchicalDataAdapter( + extend({ + dataAccessors: { + getters: accessors.getters, + setters: accessors.setters, + }, + items: this.option('items'), + }, this._getDataAdapterOptions()), + ); + }, + + _getDataAdapterOptions: noop, + + _getItemExtraPropNames: noop, + + _initDynamicTemplates() { + const fields = ['text', 'html', 'items', 'icon'].concat(this._getItemExtraPropNames()); + + this._templateManager.addDefaultTemplates({ + item: new BindableTemplate(this._addContent.bind(this), fields, this.option('integrationOptions.watchMethod'), { + text: this._displayGetter, + items: this._itemsGetter, + }), + }); + }, + + _addContent($container, itemData) { + $container + .html(itemData.html) + .append(this._getIconContainer(itemData)) + .append(this._getTextContainer(itemData)); + }, + + _getLinkContainer(iconContainer, textContainer, { linkAttr, url }) { + const linkAttributes = isObject(linkAttr) ? linkAttr : {}; + return $('') + .addClass(ITEM_URL_CLASS) + // @ts-expect-error + .attr({ ...linkAttributes, href: url }) + .append(iconContainer) + .append(textContainer); + }, + + _getIconContainer(itemData) { + if (!itemData.icon) { + return undefined; + } - _defaultOptionsRules: function() { - return this.callBase().concat([ - { - device: function() { - return devices.real().deviceType === 'desktop' && !devices.isSimulator(); - }, - options: { - focusStateEnabled: true - } - } - ]); - }, + const $imageContainer = getImageContainer(itemData.icon); + // @ts-expect-error + if ($imageContainer.is('img')) { + const componentName = this.NAME.startsWith('dxPrivateComponent') + ? '' + : `${this.NAME} `; + // @ts-expect-error + $imageContainer.attr('alt', `${componentName}item icon`); + } - _init: function() { - this.callBase(); + return $imageContainer; + }, + + _getTextContainer(itemData) { + return $('').text(itemData.text); + }, + + _initAccessors() { + const that = this; + each(this._getAccessors(), (_, accessor) => { + that._compileAccessor(accessor); + }); + + this._compileDisplayGetter(); + }, + + _getAccessors() { + return ['key', 'selected', 'items', 'disabled', 'parentId', 'expanded']; + }, + + _getChildNodes(node) { + const that = this; + const arr = []; + each(node.internalFields.childrenKeys, (_, key) => { + const childNode = that._dataAdapter.getNodeByKey(key); + // @ts-expect-error + arr.push(childNode); + }); + return arr; + }, + + _hasChildren(node) { + return node && node.internalFields.childrenKeys.length; + }, + + _compileAccessor(optionName) { + const getter = `_${optionName}Getter`; + const setter = `_${optionName}Setter`; + const optionExpr = this.option(`${optionName}Expr`); + + if (!optionExpr) { + this[getter] = noop; + this[setter] = noop; + return; + } if (isFunction(optionExpr)) { + this[setter] = function (obj, value) { obj[optionExpr()] = value; }; + this[getter] = function (obj) { return obj[optionExpr()]; }; + return; + } + this[getter] = compileGetter(optionExpr); + this[setter] = compileSetter(optionExpr); + }, + + _createDataAdapterAccessors() { + const that = this; + const accessors = { + getters: {}, + setters: {}, + }; + + each(this._getAccessors(), (_, accessor) => { + const getterName = `_${accessor}Getter`; + const setterName = `_${accessor}Setter`; + const newAccessor = accessor === 'parentId' ? 'parentKey' : accessor; + + accessors.getters[newAccessor] = that[getterName]; + accessors.setters[newAccessor] = that[setterName]; + }); + // @ts-expect-error + accessors.getters.display = !this._displayGetter ? (itemData) => itemData.text : this._displayGetter; + + return accessors; + }, + + _initMarkup() { + this.callBase(); + this._addWidgetClass(); + }, + + _addWidgetClass() { + this._focusTarget().addClass(this._widgetClass()); + }, + + _widgetClass: noop, + + _renderItemFrame(index, itemData) { + const $itemFrame = this.callBase.apply(this, arguments); + + $itemFrame.toggleClass(DISABLED_STATE_CLASS, !!this._disabledGetter(itemData)); + return $itemFrame; + }, + + _optionChanged(args) { + switch (args.name) { + case 'displayExpr': + case 'keyExpr': this._initAccessors(); - this._initDataAdapter(); this._initDynamicTemplates(); - }, - - _initDataSource: function() { - this.callBase(); - this._dataSource && this._dataSource.paginate(false); - }, - - _initDataAdapter: function() { - const accessors = this._createDataAdapterAccessors(); - - this._dataAdapter = new HierarchicalDataAdapter( - extend({ - dataAccessors: { - getters: accessors.getters, - setters: accessors.setters - }, - items: this.option('items') - }, this._getDataAdapterOptions())); - }, - - _getDataAdapterOptions: noop, - - _getItemExtraPropNames: noop, - - _initDynamicTemplates: function() { - const fields = ['text', 'html', 'items', 'icon'].concat(this._getItemExtraPropNames()); - - this._templateManager.addDefaultTemplates({ - item: new BindableTemplate(this._addContent.bind(this), fields, this.option('integrationOptions.watchMethod'), { - 'text': this._displayGetter, - 'items': this._itemsGetter - }) - }); - }, - - _addContent: function($container, itemData) { - $container - .html(itemData.html) - .append(this._getIconContainer(itemData)) - .append(this._getTextContainer(itemData)); - }, - - _getLinkContainer: function(iconContainer, textContainer, { linkAttr, url }) { - const linkAttributes = isObject(linkAttr) ? linkAttr : {}; - return $('') - .addClass(ITEM_URL_CLASS) - .attr({ ...linkAttributes, href: url }) - .append(iconContainer) - .append(textContainer); - }, - - _getIconContainer: function(itemData) { - if(!itemData.icon) { - return undefined; - } - - const $imageContainer = getImageContainer(itemData.icon); - - if($imageContainer.is('img')) { - const componentName = this.NAME.startsWith('dxPrivateComponent') - ? '' - : `${this.NAME} `; - $imageContainer.attr('alt', `${componentName}item icon`); - } - - return $imageContainer; - }, - - _getTextContainer: function(itemData) { - return $('').text(itemData.text); - }, - - _initAccessors: function() { - const that = this; - each(this._getAccessors(), function(_, accessor) { - that._compileAccessor(accessor); - }); - - this._compileDisplayGetter(); - }, - - _getAccessors: function() { - return ['key', 'selected', 'items', 'disabled', 'parentId', 'expanded']; - }, - - _getChildNodes: function(node) { - const that = this; - const arr = []; - each(node.internalFields.childrenKeys, function(_, key) { - const childNode = that._dataAdapter.getNodeByKey(key); - arr.push(childNode); - }); - return arr; - }, - - _hasChildren: function(node) { - return node && node.internalFields.childrenKeys.length; - }, - - _compileAccessor: function(optionName) { - const getter = '_' + optionName + 'Getter'; - const setter = '_' + optionName + 'Setter'; - const optionExpr = this.option(optionName + 'Expr'); - - if(!optionExpr) { - this[getter] = noop; - this[setter] = noop; - return; - } else if(isFunction(optionExpr)) { - this[setter] = function(obj, value) { obj[optionExpr()] = value; }; - this[getter] = function(obj) { return obj[optionExpr()]; }; - return; - } - - this[getter] = compileGetter(optionExpr); - this[setter] = compileSetter(optionExpr); - }, - - _createDataAdapterAccessors: function() { - const that = this; - const accessors = { - getters: {}, - setters: {} - }; - - each(this._getAccessors(), function(_, accessor) { - const getterName = '_' + accessor + 'Getter'; - const setterName = '_' + accessor + 'Setter'; - const newAccessor = accessor === 'parentId' ? 'parentKey' : accessor; - - accessors.getters[newAccessor] = that[getterName]; - accessors.setters[newAccessor] = that[setterName]; - }); - - accessors.getters['display'] = !this._displayGetter ? (itemData) => itemData.text : this._displayGetter; - - return accessors; - }, - - _initMarkup: function() { - this.callBase(); - this._addWidgetClass(); - }, - - _addWidgetClass: function() { - this._focusTarget().addClass(this._widgetClass()); - }, - - _widgetClass: noop, - - _renderItemFrame: function(index, itemData) { - const $itemFrame = this.callBase.apply(this, arguments); - - $itemFrame.toggleClass(DISABLED_STATE_CLASS, !!this._disabledGetter(itemData)); - return $itemFrame; - }, - - _optionChanged: function(args) { - switch(args.name) { - case 'displayExpr': - case 'keyExpr': - this._initAccessors(); - this._initDynamicTemplates(); - this.repaint(); - break; - case 'itemsExpr': - case 'selectedExpr': - case 'disabledExpr': - case 'expandedExpr': - case 'parentIdExpr': - this._initAccessors(); - this._initDataAdapter(); - this.repaint(); - break; - case 'items': - this._initDataAdapter(); - this.callBase(args); - break; - default: - this.callBase(args); - } + this.repaint(); + break; + case 'itemsExpr': + case 'selectedExpr': + case 'disabledExpr': + case 'expandedExpr': + case 'parentIdExpr': + this._initAccessors(); + this._initDataAdapter(); + this.repaint(); + break; + case 'items': + this._initDataAdapter(); + this.callBase(args); + break; + default: + this.callBase(args); } + }, }); export default HierarchicalCollectionWidget; diff --git a/packages/devextreme/js/ui/hierarchical_collection/ui.hierarchical_collection_widget.js b/packages/devextreme/js/ui/hierarchical_collection/ui.hierarchical_collection_widget.js new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/packages/devextreme/testing/tests/DevExpress.ui/hierarchicalCollectionWidgetParts/hierarchicalCollectionTestHelper.js b/packages/devextreme/testing/tests/DevExpress.ui/hierarchicalCollectionWidgetParts/hierarchicalCollectionTestHelper.js index 2e46b53cc1dd..8895ad7bc6f4 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui/hierarchicalCollectionWidgetParts/hierarchicalCollectionTestHelper.js +++ b/packages/devextreme/testing/tests/DevExpress.ui/hierarchicalCollectionWidgetParts/hierarchicalCollectionTestHelper.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import HierarchicalDataAdapter from 'ui/hierarchical_collection/ui.data_adapter'; +import HierarchicalDataAdapter from '__internal/ui/hierarchical_collection/m_data_adapter'; class HierarchicalCollectionTestHelper { constructor() { diff --git a/packages/devextreme/testing/tests/DevExpress.ui/hierarchicalCollectionWidgetParts/hierarchicalDataAdapter.js b/packages/devextreme/testing/tests/DevExpress.ui/hierarchicalCollectionWidgetParts/hierarchicalDataAdapter.js index 9fc4096e6fb2..27347eabf7a1 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui/hierarchicalCollectionWidgetParts/hierarchicalDataAdapter.js +++ b/packages/devextreme/testing/tests/DevExpress.ui/hierarchicalCollectionWidgetParts/hierarchicalDataAdapter.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import HierarchicalDataAdapter from 'ui/hierarchical_collection/ui.data_adapter'; +import HierarchicalDataAdapter from '__internal/ui/hierarchical_collection/m_data_adapter'; import { processRequestResultLock } from 'data/utils'; import HierarchicalCollectionTestHelper from './hierarchicalCollectionTestHelper.js'; import errors from 'ui/widget/ui.errors';