refactor(ui5-timeline): change timestamp property to subtitleText (#321)

Closes: #299 BREAKING CHANGE: 'timestamp' and 'timeFormat' properties are removed. Instead use subtitle-text property and directly format the text as desired.
SAP · Apr 12, 2019 · 287548e · 287548e
1 parent aa516ff
commit 287548e
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 32 deletions.
diff --git a/packages/main/src/TimelineItem.hbs b/packages/main/src/TimelineItem.hbs
@@ -12,7 +12,7 @@
 
 			<span>{{ctr.titleText}}</span>
 		</div>
-		<div class="sapWCTimelineItemTime">{{dateTime}}</div>
+		<div class="sapWCTimelineItemSubtitle">{{ctr.subtitleText}}</div>
 
 		{{#if ctr.description}}
 			<div class="sapWCTimelineItemDesc">

diff --git a/packages/main/src/TimelineItem.js b/packages/main/src/TimelineItem.js
@@ -2,7 +2,6 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap";
 import WebComponent from "@ui5/webcomponents-base/src/WebComponent";
 import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle";
 import URI from "@ui5/webcomponents-base/src/types/URI";
-import Integer from "@ui5/webcomponents-base/src/types/Integer";
 import Function from "@ui5/webcomponents-base/src/types/Function";
 import { fetchCldrData } from "@ui5/webcomponents-base/src/CLDR";
 import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider";
@@ -87,22 +86,13 @@ const metadata = {
 		},
 
 		/**
-		 * It's a UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
-		 * @type {Integer}
-		 * @public
-		 */
-		timestamp: {
-			type: Integer,
-		},
-
-		/**
-		 * Defines the format of date/time of the component.
-		 * @type {Integer}
+		 * Defines the subtitle text of the component.
+		 * @type {String}
 		 * @public
 		 */
-		timeFormat: {
+		subtitleText: {
 			type: String,
-			defaultValue: "dd.MM.YYYY hh:mm",
+			defaultValue: "",
 		},
 
 		_onItemNamePress: {

diff --git a/packages/main/src/TimelineItemTemplateContext.js b/packages/main/src/TimelineItemTemplateContext.js
@@ -1,9 +1,5 @@
-import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateFormat";
-
 class TimelineItemTemplateContext {
 	static calculate(state) {
-		const dateTimeFormat = DateFormat.getDateTimeInstance({ pattern: state.timeFormat, calendarType: "Gregorian" });
-
 		return {
 			ctr: state,
 			classes: {
@@ -14,7 +10,6 @@ class TimelineItemTemplateContext {
 			},
 			styles: {
 			},
-			dateTime: dateTimeFormat.format(new Date(state.timestamp)),
 		};
 	}
 }

diff --git a/packages/main/src/themes-next/TimelineItem.css b/packages/main/src/themes-next/TimelineItem.css
@@ -141,7 +141,7 @@ ui5-timeline-item {
 	vertical-align: top;
 }
 
-.sapWCTimelineItemTime {
+.sapWCTimelineItemSubtitle {
 	color: var(--sapUiContentLabelColor);
 	font-family: var(--sapUiFontFamily);
 	font-weight: 400;
@@ -183,4 +183,4 @@ ui5-timeline-item {
 [dir=rtl] .sapWCTimelineBubble:focus::after {
 	left: var(--_ui5_TimelineItem_bubble_rtl_left_offset);
 	right: var(--_ui5_TimelineItem_bubble_rtl_right_offset);
-}
+}
diff --git a/packages/main/src/themes/base/TimelineItem.less b/packages/main/src/themes/base/TimelineItem.less
@@ -152,7 +152,7 @@ ui5-timeline-item {
 	vertical-align: top;
 }
 
-.sapWCTimelineItemTime {
+.sapWCTimelineItemSubtitle {
 	color: @sapUiContentLabelColor;
 	font-family: @sapUiFontFamily;
 	font-weight: 400;

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Timeline.html b/packages/main/test/sap/ui/webcomponents/main/pages/Timeline.html
@@ -84,11 +84,11 @@ <h2>Timeline</h2>
 					heading="Upcoming Activities"
 					subtitle="For Today">
 				<ui5-timeline>
-					<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="sap-icon://phone" item-name="Stanislava Baltova" item-name-clickable></ui5-timeline-item>
-					<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="sap-icon://calendar">
+					<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="sap-icon://phone" item-name="Stanislava Baltova" item-name-clickable></ui5-timeline-item>
+					<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.08.2017 (11:00 - 12:00)" icon="sap-icon://calendar">
 						<div>MR SOF02 2.43</div>
 					</ui5-timeline-item>
-					<ui5-timeline-item title-text="Video Converence Call - UI5" timestamp="1485813600000" icon="sap-icon://calendar" item-name="Stanislava Baltova">
+					<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="sap-icon://calendar" item-name="Stanislava Baltova">
 						<div>Online meeting</div>
 					</ui5-timeline-item>
 				</ui5-timeline>

diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/Timeline.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/Timeline.sample.html
@@ -53,22 +53,22 @@ <h2 class="control-header">Timeline</h2>
 		<h3>Basic Timeline</h3>
 		<div class="snippet">
 			<ui5-timeline>
-				<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="sap-icon://phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
-				<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="sap-icon://calendar">
+				<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="sap-icon://phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
+				<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.07.2017 (11:00 - 12:30)" icon="sap-icon://calendar">
 					<div>MR SOF02 2.43</div>
 				</ui5-timeline-item>
-				<ui5-timeline-item title-text="Video Converence Call - UI5" timestamp="1485813600000" icon="sap-icon://calendar">
+				<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="sap-icon://calendar">
 					<div>Online meeting</div>
 				</ui5-timeline-item>
 			</ui5-timeline>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
 <ui5-timeline>
-	<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="sap-icon://phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
-	<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="sap-icon://calendar">
+	<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="sap-icon://phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
+	<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.07.2017 (11:00 - 12:30)" icon="sap-icon://calendar">
 		<div>MR SOF02 2.43</div>
 	</ui5-timeline-item>
-	<ui5-timeline-item title-text="Video Converence Call - UI5" timestamp="1485813600000" icon="sap-icon://calendar">
+	<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="sap-icon://calendar">
 		<div>Online meeting</div>
 	</ui5-timeline-item>
 </ui5-timeline>