@teambit/component.ui.version-dropdown 0.0.0-01a8c14a78caf9ebef95a98498b8e3e2a0b8268f

package/version-info/index.ts

@@ -0,0 +1,2 @@
+export { VersionInfo } from './version-info';
+export type { VersionInfoProps } from './version-info';

package/version-info/version-info.module.scss

@@ -0,0 +1,53 @@
+.versionRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+  line-height: 1.2em;
+
+  &:hover {
+    background-color: var(--surface-hover-color, #eceaff) !important;
+  }
+}
+
+.versionTimestamp {
+  min-width: fit-content;
+  margin-right: 2px;
+  text-align: right;
+}
+
+.versionUserAvatar {
+  flex: none;
+  padding: 0px 8px;
+}
+
+.laneIcon {
+  padding: 0px 4px;
+}
+
+.version {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+
+.versionName {
+  padding: 0px 8px;
+  flex-grow: 1;
+  min-width: fit-content;
+}
+
+.commitMessage {
+  flex-grow: 1;
+  padding: 0px 8px;
+}
+
+.emptyMessage {
+  font-style: italic;
+  color: var(--bit-text-color-light, #6c707c);
+  padding: 0px 8px;
+  font-size: (var-bit-p-xs, 14px);
+}

package/version-info/version-info.tsx

@@ -0,0 +1,86 @@
+import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
+import { TimeAgo } from '@teambit/design.ui.time-ago';
+import { VersionLabel } from '@teambit/component.ui.version-label';
+import React, { useMemo, useRef, useEffect } from 'react';
+import { UserAvatar } from '@teambit/design.ui.avatar';
+import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import classNames from 'classnames';
+import type { DropdownComponentVersion } from '../version-dropdown';
+import styles from './version-info.module.scss';
+
+export interface VersionInfoProps extends DropdownComponentVersion {
+  currentVersion?: string;
+  latestVersion?: string;
+  overrideVersionHref?: (version: string) => string;
+  showDetails?: boolean;
+  onVersionClicked?: () => void;
+}
+
+export const VersionInfo = React.memo(React.forwardRef<HTMLDivElement, VersionInfoProps>(_VersionInfo));
+function _VersionInfo(
+  {
+    version,
+    currentVersion,
+    latestVersion,
+    date,
+    username,
+    displayName,
+    email,
+    overrideVersionHref,
+    showDetails,
+    message,
+    tag,
+    profileImage,
+    onVersionClicked,
+  }: VersionInfoProps,
+  ref?: React.ForwardedRef<HTMLDivElement>
+) {
+  const isCurrent = version === currentVersion;
+  const author = useMemo(() => {
+    return {
+      displayName: displayName ?? '',
+      email,
+      name: username ?? '',
+      profileImage,
+    };
+  }, [displayName, email, username, profileImage]);
+
+  const timestamp = useMemo(() => (date ? new Date(parseInt(date)).toString() : new Date().toString()), [date]);
+  const currentVersionRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isCurrent) {
+      currentVersionRef.current?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [isCurrent]);
+
+  const href = overrideVersionHref ? overrideVersionHref(version) : `?version=${version}`;
+
+  const formattedVersion = useMemo(() => {
+    return tag ? version : version.slice(0, 6);
+  }, [tag, version]);
+
+  const isLatest = version === latestVersion;
+
+  return (
+    <div ref={ref || currentVersionRef} onClick={onVersionClicked}>
+      <MenuLinkItem active={isCurrent} href={href} className={styles.versionRow}>
+        <div className={styles.version}>
+          <UserAvatar size={24} account={author} className={styles.versionUserAvatar} showTooltip={true} />
+          <Ellipsis className={classNames(styles.versionName)}>{formattedVersion}</Ellipsis>
+          {isLatest && <VersionLabel status="latest" />}
+          <CommitMessage message={message} showDetails={showDetails} />
+        </div>
+        <Ellipsis className={styles.versionTimestamp}>
+          <TimeAgo date={timestamp} />
+        </Ellipsis>
+      </MenuLinkItem>
+    </div>
+  );
+}
+
+function CommitMessage({ message, showDetails }: { message?: string; showDetails?: boolean }) {
+  if (!showDetails) return null;
+  if (!message || message === '') return <Ellipsis className={styles.emptyMessage}>No commit message</Ellipsis>;
+  return <Ellipsis className={styles.commitMessage}>{message}</Ellipsis>;
+}