(patch) refactor repeater mixin

Neovici · Mar 16, 2019 · 2682598 · 2682598
1 parent 7d7a37a
commit 2682598
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 202 deletions.
diff --git a/cosmoz-omnitable-group-row.html b/cosmoz-omnitable-group-row.html
@@ -71,51 +71,26 @@
 				this.columns = [newColumn];
 			}
 
-			_getTemplateInstance(column, props) {
-				return column.getTemplateInstance(Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE, props);
+			/**
+			 * @inheritdoc
+			 */
+			_getTemplateInstance(column) {
+				return column.getTemplateInstance(
+					Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE,
+					{item: this.item, selected: this.selected, expanded: this.expanded}
+				);
 			}
 
-			_detachTemplateInstance(instance, column) {
-				column.detachTemplateInstance(instance);
-			}
-
-			_configureTemplateInstance(instance) {
-				if (instance.item !== this.item && this.item !== undefined) {
-					this._forwardProperty(instance, 'item', this.item);
-					this._forwardProperty(instance, 'selected', this.selected);
-					this._forwardProperty(instance, 'folded', this.folded);
-					instance._flushProperties(true);
-				}
-			}
-
-			_itemUpdated(itemChange) {
-				if (itemChange.path === 'item') {
-					this.elements.forEach(element =>
-						this._forwardProperty(this.getElementTemplateInstance(element), 'item', itemChange.value, true)
-					);
-				} else {
-					this.elements.forEach(element =>
-						this._forwardNotifyPath(this.getElementTemplateInstance(element), itemChange.path, itemChange.value, true, true)
-					);
-				}
+			_itemUpdated(changeRecord) {
+				this.forwardPathChange(changeRecord);
 			}
 
 			_selectedChanged(selected) {
-				this.templateInstances.forEach(instance => {
-					this._forwardProperty(instance, 'selected', selected, true);
-				});
-			}
-
-			_expandedChanged(expanded) {
-				this.templateInstances.forEach(instance => {
-					this._forwardProperty(instance, 'expanded', expanded, true);
-				});
+				this.forwardChange('selected', selected);
 			}
 
 			_foldedChanged(folded) {
-				this.templateInstances.forEach(instance => {
-					this._forwardProperty(instance, 'folded', folded, true);
-				});
+				this.forwardChange('folded', folded);
 			}
 		}
 		customElements.define(OmnitableGroupRow.is, OmnitableGroupRow);

diff --git a/cosmoz-omnitable-header-row.html b/cosmoz-omnitable-header-row.html
@@ -47,23 +47,22 @@
 			return 'header-cell';
 		}
 
-		_getTemplateInstance(column, props) {
-			return column.getTemplateInstance(Cosmoz.OmnitableTemplatizeMixin.HEADER_TEMPLATE, props);
+		/**
+		 * @inheritdoc
+		 */
+		_getTemplateInstance(column) {
+			return column.getTemplateInstance(Cosmoz.OmnitableTemplatizeMixin.HEADER_TEMPLATE);
 		}
 
-		_detachTemplateInstance(instance, column) {
-			column.detachTemplateInstance(instance);
-		}
-
-		_configureElement(element, column) {
+		/**
+		 * @inheritdoc
+		 */
+		_configureElement(element, column, instance) {
+			super._configureElement(element, column, instance);
 			element.classList.toggle(column.headerCellClass, true);
 			element.classList.toggle('header-cell', true);
 			element.setAttribute('title', column.title);
 		}
-
-		_configureTemplateInstance(instance) {
-			instance._flushProperties(true);
-		}
 	}
 	customElements.define(OmnitableHeaderRow.is, OmnitableHeaderRow);
 

diff --git a/cosmoz-omnitable-item-expand.html b/cosmoz-omnitable-item-expand.html
@@ -85,27 +85,24 @@
 			return 'item-expand-line';
 		}
 
-		_getTemplateInstance(column, props) {
-			return column.getTemplateInstance(Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE, props);
+		/**
+		 * @inheritdoc
+		 */
+		_getTemplateInstance(column) {
+			return column.getTemplateInstance(
+				Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE,
+				{item: this.item, selected: this.selected, expanded: this.expanded}
+			);
 		}
 
-		_detachTemplateInstance(instance, column) {
-			column.detachTemplateInstance(instance);
-		}
-
-		_configureElement(element, column) {
+		/**
+		 * @inheritdoc
+		 */
+		_configureElement(element, column, instance) {
+			super._configureElement(element, column, instance);
 			element.column = column;
 		}
 
-		_configureTemplateInstance(instance) {
-			if (instance.item !== this.item && this.item !== undefined) {
-				this._forwardProperty(instance, 'item', this.item);
-				this._forwardProperty(instance, 'selected', this.selected);
-				this._forwardProperty(instance, 'expanded', this.expanded);
-				instance._flushProperties(true);
-			}
-		}
-
 		_updateSize(columnsCount) {
 			this.hidden = columnsCount === 0;
 			if (this.expanded) {
@@ -117,28 +114,16 @@
 			}
 		}
 
-		_itemUpdated(itemChange) {
-			if (itemChange.path === 'item') {
-				this.elements.forEach(function (element) {
-					this._forwardProperty(this.getElementTemplateInstance(element), 'item', itemChange.value, true);
-				}, this);
-			} else {
-				this.elements.forEach(function (element) {
-					this._forwardNotifyPath(this.getElementTemplateInstance(element), itemChange.path, itemChange.value, true, true);
-				}, this);
-			}
+		_itemUpdated(changeRecord) {
+			this.forwardPathChange(changeRecord);
 		}
 
 		_selectedChanged(selected) {
-			this.templateInstances.forEach(instance => {
-				this._forwardProperty(instance, 'selected', selected, true);
-			});
+			this.forwardChange('selected', selected);
 		}
 
 		_expandedChanged(expanded) {
-			this.templateInstances.forEach(instance => {
-				this._forwardProperty(instance, 'expanded', expanded, true);
-			});
+			this.forwardChange('expanded', expanded);
 		}
 	}
 	customElements.define(OmnitableItemExpand.is, OmnitableItemExpand);

diff --git a/cosmoz-omnitable-item-row.html b/cosmoz-omnitable-item-row.html
@@ -78,60 +78,42 @@
 			return 'item-cell';
 		}
 
-		_getTemplateInstance(column, props) {
-			return column.getTemplateInstance(column.editable ? Cosmoz.OmnitableTemplatizeMixin.EDIT_TEMPLATE : Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE, props);
-		}
-
-		_detachTemplateInstance(instance, column) {
-			column.detachTemplateInstance(instance);
+		/**
+		 * @inheritdoc
+		 */
+		_getTemplateInstance(column) {
+			return column.getTemplateInstance(
+				column.editable
+					? Cosmoz.OmnitableTemplatizeMixin.EDIT_TEMPLATE
+					: Cosmoz.OmnitableTemplatizeMixin.CELL_TEMPLATE,
+				{item: this.item, selected: this.selected, expanded: this.expanded}
+			);
 		}
 
-		_configureElement(element, column) {
+		/**
+		 * @inheritdoc
+		 */
+		_configureElement(element, column, instance) {
+			super._configureElement(element, column, instance);
 			element.style.flexBasis = column.editable ? column.editWidth : column.width;
 			element.style.minWidth = column.editable ? column.editMinWidth : column.minWidth;
 			element.style.flexGrow = column.flex;
 			element.setAttribute('title', this._getCellTitle(column, this.item));
 			element.setAttribute('class', this._computeItemRowCellClasses(column));
 		}
 
-		_configureTemplateInstance(instance) {
-			if (instance.item !== this.item && this.item !== undefined) {
-				this._forwardProperty(instance, 'item', this.item);
-				this._forwardProperty(instance, 'selected', this.selected);
-				this._forwardProperty(instance, 'expanded', this.expanded);
-				instance._flushProperties(true);
-			}
-		}
-
-		_computeItemRowCellClasses(column) {
-			return 'itemRow-cell' +
-				(column.cellClass ? ' ' + column.cellClass + ' ' : '') +
-				' cosmoz-omnitable-column-' + column.__index;
-		}
-
-		_itemUpdated(itemChange) {
-			if (itemChange.path === 'item') {
-				this.elements.forEach(element => {
-					this._forwardProperty(this.getElementTemplateInstance(element), 'item', itemChange.value, true);
-					element.setAttribute('title', this._getCellTitle(this.getElementColumn(element), this.item));
-				});
-			} else {
-				this.elements.forEach(element => {
-					this._forwardNotifyPath(this.getElementTemplateInstance(element), itemChange.path, itemChange.value, true, true);
-				});
-			}
+		_itemUpdated(changeRecord) {
+			this.forwardPathChange(changeRecord, (element, column) => {
+				element.setAttribute('title', this._getCellTitle(column, this.item));
+			});
 		}
 
 		_selectedChanged(selected) {
-			this.templateInstances.forEach(instance => {
-				this._forwardProperty(instance, 'selected', selected, true);
-			});
+			this.forwardChange('selected', selected);
 		}
 
 		_expandedChanged(expanded) {
-			this.templateInstances.forEach(instance => {
-				this._forwardProperty(instance, 'expanded', expanded, true);
-			});
+			this.forwardChange('expanded', expanded);
 		}
 
 		/**
@@ -143,6 +125,12 @@
 		_getCellTitle(column, item) {
 			return column && column.cellTitleFn(item, column.valuePath);
 		}
+
+		_computeItemRowCellClasses(column) {
+			return 'itemRow-cell'
+				+ (column.cellClass ? ' ' + column.cellClass + ' ' : '')
+				+ ' cosmoz-omnitable-column-' + column.__index;
+		}
 	}
 	customElements.define(OmnitableItemRow.is, OmnitableItemRow);