@openui5/sap.ui.mdc 1.99.1 → 1.102.0

package/src/sap/ui/mdc/table/Column.js

@@ -5,8 +5,24 @@
  */
 
 sap.ui.define([
-	"sap/ui/core/Element", "sap/m/Label", "sap/ui/core/Core"
-], function(Element, Label, Core) {
+	"./GridTableType",
+	"./ResponsiveTableType",
+	"sap/m/library",
+	"sap/m/Label",
+	"sap/ui/model/json/JSONModel",
+	"sap/ui/model/base/ManagedObjectModel",
+	"sap/ui/core/Control",
+	"sap/ui/core/Core"
+], function(
+	GridTableType,
+	ResponsiveTableType,
+	MLibrary,
+	Label,
+	JSONModel,
+	ManagedObjectModel,
+	Control,
+	Core
+) {
 	"use strict";
 
 	/**
@@ -15,7 +31,7 @@ sap.ui.define([
 	 * @param {string} [sId] Optional ID for the new object; generated automatically if no non-empty ID is given
 	 * @param {object} [mSettings] initial settings for the new control
 	 * @class The column for the metadata-driven table with the template, which is shown if the rows have data.
-	 * @extends sap.ui.core.Element
+	 * @extends sap.ui.core.Control
 	 * @author SAP SE
 	 * @private
 	 * @experimental
@@ -25,8 +41,7 @@ sap.ui.define([
 	 * @alias sap.ui.mdc.table.Column
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
-
-	var Column = Element.extend("sap.ui.mdc.table.Column", {
+	var Column = Control.extend("sap.ui.mdc.table.Column", {
 		metadata: {
 			library: "sap.ui.mdc",
 			defaultAggregation: "template",
@@ -92,7 +107,6 @@ sap.ui.define([
 					type: "string"
 				}
 			},
-			events: {},
 			aggregations: {
 				/**
 				 * Template for the column.
@@ -110,6 +124,17 @@ sap.ui.define([
 					multiple: false
 				}
 			}
+		},
+		renderer: {
+			apiVersion: 2,
+			render: function(oRm, oColumn) {
+				oRm.openStart("div", oColumn);
+				oRm.openEnd();
+				if (oColumn._oColumnHeaderLabel) {
+					oRm.renderControl(oColumn._oColumnHeaderLabel.getLabel());
+				}
+				oRm.close("div");
+			}
 		}
 	});
 
@@ -119,52 +144,183 @@ sap.ui.define([
 			template: true,
 			creationTemplate: true
 		};
+
+		this._oManagedObjectModel = new ManagedObjectModel(this);
+		this._oSettingsModel = new JSONModel({
+			width: this.getWidth(),
+			calculatedWidth: null,
+			p13nWidth: null,
+			resizable: false
+		});
 	};
 
-	// Return the clone of the template set by the app on the column
-	Column.prototype.getTemplate = function(bClone) {
-		var oTemplate = this.getAggregation("template");
+	Column.prototype.getInnerColumn = function() {
+		var oTable = this.getTable();
 
-		if (bClone && this._oTemplateClone && this._oTemplateClone.bIsDestroyed) {
-			this._oTemplateClone = null;
+		if (oTable && (!this._oInnerColumn || this._oInnerColumn.isDestroyed())) {
+			this._oInnerColumn = this._createInnerColumn();
 		}
 
-		// clone the template control
-		if (!this._oTemplateClone && oTemplate) {
-			this._oTemplateClone = oTemplate.clone();
+		return this._oInnerColumn;
+	};
+
+	Column.prototype._createInnerColumn = function() {
+		var oTable = this.getTable();
+		var oColumn;
+
+		var oWidthBindingInfo = {
+			parts: [
+				{path: "$this>/width"},
+				{path: "$columnSettings>/calculatedWidth"},
+				{path: "$columnSettings>/p13nWidth"}
+			],
+			formatter: function(sWidth, sCalculatedWidth, sP13nWidth) {
+				return sP13nWidth || sCalculatedWidth || sWidth;
+			}
+		};
+
+		this._readP13nValues(); // XConfig might not have been available on init - depends on the order settings are applied in Table#applySettings.
+
+		if (oTable._bMobileTable) {
+			oColumn = ResponsiveTableType.createColumn(this.getId() + "-innerColumn", {
+				width: oWidthBindingInfo,
+				autoPopinWidth: "{$this>/minWidth}",
+				hAlign: "{$this>/hAlign}",
+				header: this._getColumnHeaderLabel(),
+				importance: "{$this>/importance}",
+				popinDisplay: "Inline"
+			});
+		} else {
+			oColumn = GridTableType.createColumn(this.getId() + "-innerColumn", {
+				width: oWidthBindingInfo,
+				minWidth: {
+					path: "$this>/minWidth",
+					formatter: function(fMinWidth) {
+						return Math.round(fMinWidth * parseFloat(MLibrary.BaseFontSize));
+					}
+				},
+				hAlign: "{$this>/hAlign}",
+				label: this._getColumnHeaderLabel(),
+				resizable: "{$columnSettings>/resizable}",
+				autoResizable: "{$columnSettings>/resizable}",
+				template: this.getTemplateClone()
+			});
+			oColumn.setCreationTemplate(this.getCreationTemplateClone());
 		}
 
-		return bClone ? this._oTemplateClone : oTemplate;
+		oColumn.setModel(this._oManagedObjectModel, "$this");
+		oColumn.setModel(this._oSettingsModel, "$columnSettings");
+
+		return oColumn;
 	};
 
-	Column.prototype.getCreationTemplate = function(bClone) {
-		var oCreationTemplate = this.getAggregation("creationTemplate");
+	var ColumnHeaderLabel = Control.extend("sap.ui.mdc.table.ColumnHeaderLabel", {
+		metadata: {
+			"final": true,
+			aggregations: {
+				label: {type: "sap.m.Label", multiple: false}
+			},
+			associations: {
+				column: {type: "sap.ui.mdc.table.Column"}
+			}
+		},
+		renderer: {
+			apiVersion: 2,
+			render: function(oRm, oColumnHeaderLabel) {
+				oRm.openStart("div", oColumnHeaderLabel);
+				oRm.style("width", "100%");
+				oRm.openEnd();
+				oRm.renderControl(Core.byId(oColumnHeaderLabel.getColumn()));
+				oRm.close("div");
+			}
+		},
+		getText: function() { // Used by tests in MDC and FE.
+			return this.getLabel().getText();
+		},
+		clone: function() { // For ResponsiveTable popin.
+			return this.getLabel().clone();
+		}
+	});
 
-		if (bClone && this._oCreationTemplateClone && this._oCreationTemplateClone.bIsDestroyed) {
-			this._oCreationTemplateClone = null;
+	/**
+	 * Creates and returns the column header control.
+	 * If <code>headerVisible=false</code> then <code>width=0px</code> is applied to the <code>sap.m.Label</code> control for accessibility purposes.
+	 *
+	 * @returns {object} The column header control
+	 * @private
+	 */
+	Column.prototype._getColumnHeaderLabel = function() {
+		var oTable = this.getTable();
+
+		if (oTable && (!this._oColumnHeaderLabel || this._oColumnHeaderLabel.isDestroyed())) {
+			this._oColumnHeaderLabel = new ColumnHeaderLabel({
+				column: this,
+				label: new Label({
+					width: "{= ${$this>/headerVisible} ? null : '0px' }",
+					text: "{$this>/header}",
+					textAlign: "{$this>/hAlign}",
+					wrapping: {
+						parts: [
+							{path: "$this>/headerVisible"},
+							{path: "$columnSettings>/resizable"}
+						],
+						formatter: function(bHeaderVisible, bResizable) {
+							return oTable._bMobileTable && bHeaderVisible && !bResizable;
+						}
+					},
+					wrappingType: oTable._bMobileTable ? "Hyphenated" : null
+				})
+			});
 		}
 
-		// clone the creationTemplate control
-		if (!this._oCreationTemplateClone && oCreationTemplate) {
-			this._oCreationTemplateClone = oCreationTemplate.clone();
+		return this._oColumnHeaderLabel;
+	};
+
+	Column.prototype.getTemplateClone = function() {
+		var oTable = this.getTable();
+		var oTemplate = this.getTemplate();
+
+		if (oTable && oTemplate && (!this._oTemplateClone || this._oTemplateClone.isDestroyed())) {
+			this._oTemplateClone = oTemplate.clone();
+
+			if (!oTable._bMobileTable) {
+				if (this._oTemplateClone.setWrapping) {
+					this._oTemplateClone.setWrapping(false);
+				}
+
+				if (this._oTemplateClone.setRenderWhitespace) {
+					this._oTemplateClone.setRenderWhitespace(false);
+				}
+			}
 		}
 
-		return bClone ? this._oCreationTemplateClone : oCreationTemplate;
+		return this._oTemplateClone;
 	};
 
-	Column.prototype.setHeaderVisible = function(bHeaderVisible) {
-		if (this.getHeaderVisible() === bHeaderVisible) {
-			return this;
+	Column.prototype.getCreationTemplateClone = function() {
+		var oTable = this.getTable();
+		var oCreationTemplate = this.getCreationTemplate();
+
+		if (oTable && oCreationTemplate && (!this._oCreationTemplateClone || this._oCreationTemplateClone.isDestroyed())) {
+			this._oCreationTemplateClone = oCreationTemplate.clone();
+
+			if (!oTable._bMobileTable) {
+				if (this._oCreationTemplateClone.setWrapping) {
+					this._oCreationTemplateClone.setWrapping(false);
+				}
+
+				if (this._oCreationTemplateClone.setRenderWhitespace) {
+					this._oCreationTemplateClone.setRenderWhitespace(false);
+				}
+			}
 		}
 
-		this.setProperty("headerVisible", bHeaderVisible, true);
-		this._updateColumnHeaderControl();
-		return this;
+		return this._oCreationTemplateClone;
 	};
 
 	Column.prototype.setHeader = function(sHeader) {
 		this.setProperty("header", sHeader, true);
-		this._updateColumnHeaderControl();
+
 		var oLabelElement = this.getDomRef();
 		if (oLabelElement) {
 			oLabelElement.textContent = this.getHeader();
@@ -173,134 +329,117 @@ sap.ui.define([
 		return this;
 	};
 
-	Column.prototype.setHAlign = function(sHAlign) {
-		this.setProperty("hAlign", sHAlign, true);
-		this._updateColumnHeaderControl();
-		return this;
+	Column.prototype._onTableChange = function(oEvent) {
+		if (oEvent.getParameter("name") === "enableColumnResize") {
+			this._readTableSettings();
+		}
 	};
 
-	/**
-	 * Updates the width of the column based on the auto column width calculation.
-	 * @private
-	 */
-	Column.prototype._updateColumnWidth = function(sWidth) {
-		var oInnerColumn = Core.byId(this.getId() + "-innerColumn");
-		if (!oInnerColumn || !this.getWidth()) {
-			this.setProperty("width", sWidth);
-		}
+	Column.prototype._readTableSettings = function() {
+		var oTable = this.getTable();
 
-		// set the inner column width only if there is no user(flex) changes has been applied
-		if (oInnerColumn && !oInnerColumn.getWidth()) {
-			oInnerColumn.setWidth(sWidth);
-		}
+		this._oSettingsModel.setProperty("/resizable", oTable.getEnableColumnResize());
 	};
 
-	/**
-	 * Updates the column header control based on the current column property settings.
-	 * @private
-	 */
-	Column.prototype._updateColumnHeaderControl = function() {
-		if (this._oColumnHeaderLabel) {
-			this._oColumnHeaderLabel.setWidth(this.getHeaderVisible() ? null : "0px");
-			this._oColumnHeaderLabel.setWrapping(this._bMobileTable && !this._bResizable && this.getHeaderVisible());
-			this._oColumnHeaderLabel.setText(this.getHeader());
-			this._oColumnHeaderLabel.setTextAlign(this.getHAlign());
+	Column.prototype.setParent = function(oParent) {
+		var oPreviousTable = this.getTable();
+		Control.prototype.setParent.apply(this, arguments);
+
+		if (this._bIsBeingMoved) { // Set by the table when moving this column.
+			return;
 		}
-	};
 
-	/**
-	 * Updates the resizable state of the column.
-	 * @private
-	 */
-	Column.prototype.updateColumnResizing = function(bEnabled) {
-		this._bResizable = !!bEnabled;
-		this._updateColumnHeaderControl();
+		this._disconnectFromTable(oPreviousTable);
+		this._connectToTable();
 	};
 
-	Column.prototype.setParent = function(oParent) {
-		var oPrevParent = this.getParent();
-		Element.prototype.setParent.apply(this, arguments);
-		if (oParent && oParent.isA("sap.ui.mdc.Table")) {
-			if (oParent.getDomRef()) {
-				this._addAriaStaticDom();
-			} else {
-					this.oAfterRenderingDelegate = {
-					onAfterRendering: function () {
-						this._addAriaStaticDom();
-						this.getParent().removeDelegate(this.oAfterRenderingDelegate);
-					}
-				};
-				oParent.addDelegate(this.oAfterRenderingDelegate, this);
-			}
-		} else if (!oParent) {
-			oPrevParent.removeDelegate(this.oAfterRenderingDelegate);
-			this._removeAriaStaticDom();
+	Column.prototype._connectToTable = function() {
+		var oTable = this.getTable();
+
+		if (!oTable) {
+			return;
 		}
+
+		this._calculateColumnWidth();
+		this._readP13nValues();
+		this._readTableSettings();
+		oTable.attachEvent("_change", this._onTableChange, this);
 	};
 
-	/**
-	 * Creates and returns the column header control.
-	 * If <code>headerVisible=false</code> then <code>width=0px</code> is applied to the <code>sap.m.Label</code> control for accessibility purposes.
-	 * @param {boolean} bMobileTable The type of the table
-	 * @param {boolean} bResizing Indicates whether the column is resizable
-	 * @returns {object} The column header control
-	 * @private
-	 */
-	Column.prototype.getColumnHeaderControl = function(bMobileTable, bResizing) {
-		if (this._oColumnHeaderLabel) {
-			this._oColumnHeaderLabel.destroy();
-		}
+	Column.prototype._disconnectFromTable = function(oTable) {
+		oTable = oTable || this.getTable();
 
-		this._oColumnHeaderLabel = new Label(this.getId() + "-innerColumnHeader", {
-			wrappingType: bMobileTable ? "Hyphenated" : null
-		});
-		this._bMobileTable = bMobileTable;
+		if (!oTable) {
+			return;
+		}
 
-		this.updateColumnResizing(bResizing);
+		if (this._oInnerColumn) {
+			this._oInnerColumn.destroy("KeepDom");
+			oTable.invalidate();
+		}
+	};
 
-		return this._oColumnHeaderLabel;
+	Column.prototype._onModifications = function() {
+		this._readP13nValues();
 	};
 
-	Column.prototype._removeAriaStaticDom = function() {
-		var oDomElement = this.getDomRef();
+	Column.prototype._calculateColumnWidth = function() {
+		var oTable = this.getTable();
 
-		if (oDomElement) {
-			oDomElement.parentNode.removeChild(oDomElement);
+		if (!oTable || !oTable.getEnableAutoColumnWidth() || !this.isPropertyInitial("width")) {
+			return;
 		}
-	};
 
-	Column.prototype._addAriaStaticDom = function() {
-		var oInvisibleDiv = document.createElement("div");
-		oInvisibleDiv.setAttribute("id", this.getId());
-		oInvisibleDiv.setAttribute("class", "sapUiInvisibleText");
-		oInvisibleDiv.setAttribute("aria-hidden", "true");
-		var oHeaderTextNode = document.createTextNode(this.getHeader());
-		oInvisibleDiv.appendChild(oHeaderTextNode);
-		var oStaticDiv = Core.getStaticAreaRef();
-
-		if (oInvisibleDiv && oStaticDiv) {
-			oStaticDiv.appendChild(oInvisibleDiv);
+		var oPropertyHelper = oTable.getPropertyHelper();
+
+		if (oPropertyHelper) {
+			this._oSettingsModel.setProperty("/calculatedWidth", oPropertyHelper.calculateColumnWidth(this));
+		} else {
+			oTable.awaitPropertyHelper().then(this._calculateColumnWidth.bind(this));
 		}
 	};
 
-	Column.prototype.exit = function() {
-		if (this._oTemplateClone) {
-			this._oTemplateClone.destroy();
-			this._oTemplateClone = null;
-		}
+	Column.prototype._readP13nValues = function() {
+		var oTable = this.getTable();
+		var vXConfig = oTable.getCurrentState().xConfig;
+		var sPropertyKey = this.getDataProperty();
 
-		if (this._oCreationTemplateClone) {
-			this._oCreationTemplateClone.destroy();
-			this._oCreationTemplateClone = null;
+		if (vXConfig instanceof Promise) {
+			vXConfig.then(this._readP13nValues.bind(this));
+			return;
 		}
 
-		if (this._oColumnHeaderLabel) {
-			this._oColumnHeaderLabel.destroy();
-			this._oColumnHeaderLabel = null;
-		}
-		this._removeAriaStaticDom();
+		var sWidth = vXConfig &&
+					 vXConfig.aggregations &&
+					 vXConfig.aggregations.columns &&
+					 vXConfig.aggregations.columns[sPropertyKey] &&
+					 vXConfig.aggregations.columns[sPropertyKey].width;
+
+		this._oSettingsModel.setProperty("/p13nWidth", sWidth);
 	};
 
-	return Column;
+	Column.prototype.getTable = function() {
+		var oParent = this.getParent();
+		return oParent && oParent.isA("sap.ui.mdc.Table") ? oParent : null;
+	};
 
-});
+	Column.prototype.exit = function() {
+		this._disconnectFromTable();
+
+		[
+			"_oManagedObjectModel",
+			"_oSettingsModel",
+			"_oInnerColumn",
+			"_oTemplateClone",
+			"_oCreationTemplateClone",
+			"_oColumnHeaderLabel"
+		].forEach(function(sObject) {
+			if (this[sObject]) {
+				this[sObject].destroy();
+				delete this[sObject];
+			}
+		}, this);
+	};
+
+	return Column;
+});

package/src/sap/ui/mdc/table/CreationRow.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 * {@link sap.ui.mdc.table.Column#getCreationTemplate creationTemplate} aggregation of the {@link sap.ui.mdc.table.Column}.
 	 * @extends sap.ui.core.Element
 	 * @author SAP SE
-	 * @version 1.99.1
+	 * @version 1.102.0
 	 * @constructor
 	 * @experimental
 	 * @private

package/src/sap/ui/mdc/table/GridTableType.js

@@ -11,7 +11,6 @@ sap.ui.define([
 
 	var InnerTable, InnerColumn, InnerRowAction, InnerRowActionItem, InnerMultiSelectionPlugin, InnerFixedRowMode, InnerAutoRowMode, InnerRowSettings;
 	var RowCountMode = library.RowCountMode;
-	var RowAction = library.RowAction;
 
 	/**
 	 * Constructor for a new <code>GridTableType</code>.
@@ -168,15 +167,6 @@ sap.ui.define([
 		return oColumn;
 	};
 
-	GridTableType.createNavigationRowAction = function(sIdPrefix, aEventInfo) {
-		return new InnerRowAction(sIdPrefix + "--rowAction", {
-			items: new InnerRowActionItem(sIdPrefix + "--rowActionItem", {
-				type: RowAction.Navigation,
-				press: aEventInfo
-			})
-		});
-	};
-
 	GridTableType.createMultiSelectionPlugin = function(oTable, aEventInfo) {
 		return new InnerMultiSelectionPlugin(oTable.getId() + "--multiSelectPlugin", {
 			selectionMode: TableTypeBase.getSelectionMode(oTable),
@@ -208,14 +198,7 @@ sap.ui.define([
 		oTable._oTable.getPlugins()[0].setSelectionMode(sSelectionMode);
 	};
 
-	GridTableType.updateNavigation = function(oTable, fnRowActionPress) {
-		oTable._oTable.setRowActionTemplate(this.createNavigationRowAction(oTable.getId(), [
-			fnRowActionPress, oTable
-		]));
-		oTable._oTable.setRowActionCount(1);
-	};
-
-	GridTableType.clearNavigation = function(oTable) {
+	GridTableType.removeRowActions = function(oTable) {
 		var oInnerRowAction = oTable._oTable.getRowActionTemplate();
 		if (oInnerRowAction) {
 			oInnerRowAction.destroy();
@@ -224,20 +207,80 @@ sap.ui.define([
 		oTable._oTable.setRowActionCount();
 	};
 
-	GridTableType.updateRowAction = function(oTable, bNavigation, fnRowActionPress) {
-		this.clearNavigation(oTable);
-		if (bNavigation) {
-			this.updateNavigation(oTable, fnRowActionPress);
-		}
-	};
-
-	GridTableType.updateRowSettings = function(oTable, oRowSettings) {
+	GridTableType.updateRowSettings = function(oTable, oRowSettings, fnRowActionPress) {
 		var oInnerRowSettings = new InnerRowSettings(undefined, oRowSettings.getAllSettings());
-
+		this.updateRowActions(oTable.getParent(), oRowSettings, fnRowActionPress);
 		oTable.getRowSettingsTemplate().destroy();
 		oTable.setRowSettingsTemplate(oInnerRowSettings);
 	};
 
+	GridTableType.updateRowActions = function (oTable, oRowSettings) {
+		this.removeRowActions(oTable);
+		if (!oRowSettings) {
+			return;
+		}
+		if (!oRowSettings.isBound("rowActions") && (!oRowSettings.getRowActions() || oRowSettings.getRowActions().length == 0)) {
+			return;
+		}
+
+		var oRowActions = oRowSettings.getAllActions();
+		if ("templateInfo" in oRowActions) {
+			var oTemplateInfo = oRowActions.templateInfo;
+			// Set template for inner row actions using temporary metadata
+			oRowActions.items.template = new InnerRowActionItem({
+				type: oTemplateInfo.type,
+				visible: oTemplateInfo.visible,
+				icon: oTemplateInfo.icon,
+				text: oTemplateInfo.text,
+				press: [this._onRowActionPress, oTable]
+			});
+			// Remove temporary metadata from row actions object
+			delete oRowActions.templateInfo;
+		} else {
+			oRowActions.items = oRowActions.items.map(function (oRowActionItem) {
+				var oInnerRowActionItem = new InnerRowActionItem({
+					type: oRowActionItem.isBound("type") ? oRowActionItem.getBindingInfo("type") : oRowActionItem.getType(),
+					visible: oRowActionItem.isBound("visible") ? oRowActionItem.getBindingInfo("visible") : oRowActionItem.getVisible(),
+					icon: oRowActionItem.isBound("icon") ? oRowActionItem.getBindingInfo("icon") : oRowActionItem._getIcon(),
+					text: oRowActionItem.isBound("text") ? oRowActionItem.getBindingInfo("text") : oRowActionItem._getText(),
+					press: [this._onRowActionPress, oTable]
+				});
+				// Add custom data for MDC row action, so original is retrievable from inner row action item
+				oInnerRowActionItem.data("rowAction", oRowActionItem);
+				return oInnerRowActionItem;
+			}, this);
+		}
+
+		var oInnerRowAction = new InnerRowAction(oTable.getId() + "--rowAction", oRowActions);
+		oTable._oTable.setRowActionTemplate(oInnerRowAction);
+		oTable._oTable.setRowActionCount(oRowSettings.getRowActionCount());
+	};
+
+	GridTableType._onRowActionPress = function (oEvent) {
+		var oInnerRowActionItem = oEvent.getParameter("item");
+		var oRowActionsInfo = this.getRowSettings().getAllActions();
+
+		if (this.getRowSettings().isBound("rowActions")) {
+			var sActionModel = oRowActionsInfo.items.model;
+			var oActionContext = oInnerRowActionItem.getBindingContext(sActionModel);
+
+			// Create a one time clone for the MDC RowAction and 'switch' binding context based on press action
+			if (!this._oRowActionItem) {
+				this._oRowActionItem = oRowActionsInfo.items.template.clone();
+			}
+			this._oRowActionItem.setBindingContext(oActionContext, oRowActionsInfo.items.model);
+
+			// Set model for row settings, as it is not propagated
+			this._oRowActionItem.setModel(this.getModel(sActionModel), sActionModel);
+			this.getRowSettings().addDependent(this._oRowActionItem);
+		} else {
+			this._oRowActionItem = oInnerRowActionItem.data("rowAction");
+		}
+		var oRow = oEvent.getParameter("row");
+		this._oRowActionItem.firePress({
+			bindingContext: oRow.getBindingContext()
+		});
+	};
 
 	return GridTableType;
 });