[CORL 581] toggleable timestamp (#2561)

* toggle between relative and absolute timestamps

* make one common timestamp component

* remove unused timestamp component from /admin

src/core/client/ui/components/AbsoluteTime/AbsoluteTime.css

@@ -0,0 +1,2 @@
+.root {
+}

src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx

@@ -0,0 +1,33 @@
+import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { PropTypesOf } from "coral-ui/types";
+import React, { FunctionComponent, useMemo } from "react";
+
+import { Typography } from "coral-ui/components";
+
+interface Props {
+  date: string;
+  className?: string;
+}
+
+const AbsoluteTime: FunctionComponent<Props> = ({ date, className }) => {
+  const { locales } = useCoralContext();
+  const formatted = useMemo(() => {
+    const formatter = new Intl.DateTimeFormat(locales, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    });
+    return formatter.format(new Date(date));
+  }, [locales, date]);
+  return (
+    <Typography className={className} variant="timestamp">
+      {formatted}
+    </Typography>
+  );
+};
+
+export default AbsoluteTime;
+
+export type AbsoluteTimeProps = PropTypesOf<typeof AbsoluteTime>;

src/core/client/ui/components/AbsoluteTime/index.ts

@@ -0,0 +1 @@
+export { default, AbsoluteTimeProps } from "./AbsoluteTime";

src/core/client/ui/components/Timestamp/Timestamp.css

@@ -0,0 +1,7 @@
+.root {
+  cursor: default;
+}
+
+.text {
+  composes: timestamp from "coral-ui/shared/typography.css";
+}

src/core/client/ui/components/Timestamp/Timestamp.spec.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import Timestamp from "./Timestamp";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Timestamp> = {
+    children: "1995-12-17T03:24:00.000Z",
+  };
+  const renderer = createRenderer();
+  renderer.render(<Timestamp {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

src/core/client/ui/components/Timestamp/Timestamp.tsx

@@ -0,0 +1,42 @@
+import cn from "classnames";
+import React, { FunctionComponent, useCallback, useState } from "react";
+
+import { AbsoluteTime, BaseButton, RelativeTime } from "coral-ui/components";
+
+import styles from "./Timestamp.css";
+
+export interface TimestampProps {
+  className?: string;
+  children: string;
+  toggleAbsolute?: boolean;
+}
+
+const Timestamp: FunctionComponent<TimestampProps> = props => {
+  const [showAbsolute, setShowAbsolute] = useState(false);
+  const toggleShowAbsolute = useCallback(() => {
+    if (props.toggleAbsolute) {
+      setShowAbsolute(!showAbsolute);
+    }
+  }, [showAbsolute, setShowAbsolute]);
+  return (
+    <BaseButton className={styles.root} onClick={toggleShowAbsolute}>
+      {showAbsolute ? (
+        <AbsoluteTime
+          date={props.children}
+          className={cn(styles.text, props.className)}
+        />
+      ) : (
+        <RelativeTime
+          className={cn(styles.text, props.className)}
+          date={props.children}
+        />
+      )}
+    </BaseButton>
+  );
+};
+
+Timestamp.defaultProps = {
+  toggleAbsolute: true,
+};
+
+export default Timestamp;

src/core/client/ui/components/Timestamp/__snapshots__/Timestamp.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<ForwardRef(forwardRef)
+  className="Timestamp-root"
+  onClick={[Function]}
+>
+  <ForwardRef(forwardRef)
+    className="Timestamp-text"
+    date="1995-12-17T03:24:00.000Z"
+  />
+</ForwardRef(forwardRef)>
+`;

src/core/client/ui/components/Timestamp/index.ts

@@ -0,0 +1 @@
+export { default } from "./Timestamp";

src/core/client/ui/components/index.ts

@@ -1,3 +1,4 @@
+export { default as AbsoluteTime } from "./AbsoluteTime";
 export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
 export { default as Backdrop } from "./Backdrop";
@@ -27,6 +28,7 @@ export { Tab, TabBar, TabContent, TabPane } from "./Tabs";
 export { StepBar, Step } from "./Steps";
 export { SelectField, Option, OptGroup } from "./SelectField";
 export { default as TextLink } from "./TextLink";
+export { default as Timestamp } from "./Timestamp";
 export { default as CheckBox } from "./CheckBox";
 export { default as RadioButton } from "./RadioButton";
 export { default as Delay } from "./Delay";