🆙 Init V3

src/common/utils/CreateTransitionToIcon.ts

@@ -0,0 +1,13 @@
+import { GetEventDispatcher, NitroToolbarAnimateIconEvent } from '@nitrots/nitro-renderer';
+
+export const CreateTransitionToIcon = (image: HTMLImageElement, fromElement: HTMLElement, icon: string) =>
+{
+    const bounds = fromElement.getBoundingClientRect();
+    const x = (bounds.x + (bounds.width / 2));
+    const y = (bounds.y + (bounds.height / 2));
+    const event = new NitroToolbarAnimateIconEvent(image, x, y);
+
+    event.iconName = icon;
+
+    GetEventDispatcher().dispatchEvent(event);
+};

src/common/utils/FriendlyTimeView.tsx

@@ -0,0 +1,28 @@
+import { FC, useEffect, useMemo, useState } from 'react';
+import { FriendlyTime } from '../../api';
+import { Base, BaseProps } from '../Base';
+
+interface FriendlyTimeViewProps extends BaseProps<HTMLDivElement>
+{
+    seconds: number;
+    isShort?: boolean;
+}
+
+export const FriendlyTimeView: FC<FriendlyTimeViewProps> = props =>
+{
+    const { seconds = 0, isShort = false, children = null, ...rest } = props;
+    const [ updateId, setUpdateId ] = useState(-1);
+
+    const getStartSeconds = useMemo(() => (Math.round(new Date().getSeconds()) - seconds), [ seconds ]);
+
+    useEffect(() =>
+    {
+        const interval = setInterval(() => setUpdateId(prevValue => (prevValue + 1)), 10000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const value = (Math.round(new Date().getSeconds()) - getStartSeconds);
+
+    return <Base { ...rest }>{ isShort ? FriendlyTime.shortFormat(value) : FriendlyTime.format(value) }</Base>;
+};

src/common/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './CreateTransitionToIcon';
+export * from './FriendlyTimeView';