feat: use Intl.RelativeTimeFormat for legacy namespace

Autodesk · Oct 3, 2023 · ae09168 · ae09168
1 parent cd13fa2
commit ae09168
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/packages/timestamp/package.json b/packages/timestamp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hig/timestamp",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "HIG Timestamp",
   "author": "Autodesk Inc.",
   "license": "Apache-2.0",

diff --git a/packages/timestamp/src/Timestamp.js b/packages/timestamp/src/Timestamp.js
@@ -48,9 +48,14 @@ const Timestamp = (props) => {
   };
 
   const humanizeTimestamp = () => {
-    const { plural, timeDescriptors, timestamp } = props;
+    const { plural, relativeTimeFormatOptions, timeDescriptors, timestamp } =
+      props;
     const asSeconds = Date.parse(timestamp) / 1000; // TODO: handle future timestamps, or bad input?
     const nowAsSeconds = new Date().valueOf() / 1000;
+    const rtf = new Intl.RelativeTimeFormat(
+      relativeTimeFormatOptions?.locales,
+      relativeTimeFormatOptions?.options
+    );
 
     const timeDifference = nowAsSeconds - asSeconds;
     let distance;
@@ -99,7 +104,9 @@ const Timestamp = (props) => {
         : timeDescriptors.year;
     }
 
-    return getTimestampSequence(distance, ellapsedDescriptor);
+    return relativeTimeFormatOptions
+      ? rtf.format(-distance, ellapsedDescriptor)
+      : getTimestampSequence(distance, ellapsedDescriptor);
   };
 
   return (
@@ -130,6 +137,22 @@ Timestamp.propTypes = {
    * If "true" then it adds an "s" to the end of the time unit
    */
   plural: PropTypes.bool,
+  /**
+   * These are the options passed to the
+   * Intl.RelativeTimeFormat() constructor
+   * If this prop is used then the following props
+   * will be ignored: plural, timestampSequence,
+   * timeDescriptors, wordspace
+   */
+  relativeTimeFormatOptions: PropTypes.shape({
+    locales: PropTypes.string,
+    options: PropTypes.shape({
+      localeMatcher: PropTypes.string,
+      numberingSystem: PropTypes.string,
+      style: PropTypes.string,
+      numeric: PropTypes.string,
+    }),
+  }),
   /**
    * Adds custom/overriding styles
    */

diff --git a/packages/timestamp/src/__stories__/Timestamp.new-stories.js b/packages/timestamp/src/__stories__/Timestamp.new-stories.js
@@ -39,3 +39,12 @@ const Template = (args) => {
 };
 
 export const Default = Template.bind({});
+
+export const RelativeTimeFormat = Template.bind({});
+
+RelativeTimeFormat.args = {
+  relativeTimeFormatOptions: {
+    locales: "es",
+  },
+};
+RelativeTimeFormat.storyName = "Relative time format";