directory/components/Library/UpdateAtView.tsx at beb3e2074e9a8b0ceac2e431270cd17316594d33 · react-native-community/directory · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import { useContext } from 'react';
import { StyleSheet, View } from 'react-native';

import { A, colors, darkColors } from '~/common/styleguide';
import Tooltip from '~/components/Tooltip';
import CustomAppearanceContext from '~/context/CustomAppearanceContext';
import { parseGitHubUrl } from '~/scripts/helpers';
import { type LibraryType } from '~/types';
import { getTimeSinceToday } from '~/util/datetime';

import { Calendar } from '../Icons';

type Props = {
  library: LibraryType;
};

export default function UpdatedAtView({ library }: Props) {
  const { isDark } = useContext(CustomAppearanceContext);

  const iconColor = isDark ? darkColors.pewter : colors.secondary;
  const textColor = isDark ? darkColors.secondary : colors.gray5;
  const decorationColor = isDark ? colors.gray5 : colors.gray3;
  const unmaintainedIconColor = isDark ? darkColors.warning : colors.warningDark;
  const unmaintainedTextColor = isDark ? darkColors.warning : colors.warningDark;

  const { branchName, packagePath } = parseGitHubUrl(library.githubUrl);

  const tooltipContent = `
    Last update (based on Git activity)
    ${
      library.npm.latestReleaseDate
        ? ` Last npm release: ${getTimeSinceToday(library.npm.latestReleaseDate)}`
        : ''
    }`;

  return (
    <Tooltip
      sideOffset={2}
      trigger={
        <View style={styles.updatedAtContainer} aria-label={tooltipContent} role="tooltip">
          <View>
            <Calendar
              fill={library.unmaintained ? unmaintainedIconColor : iconColor}
              width={14}
              height={16}
            />
          </View>
          <A
            href={
              packagePath === '.'
                ? `${library.github.urls.repo}/commits`
                : `${library.github.urls.repo}/commits/${branchName}/${packagePath}`
            }
            style={[
              styles.link,
              {
                color: library.unmaintained ? unmaintainedTextColor : textColor,
                textDecorationColor: decorationColor,
              },
            ]}
            hoverStyle={{
              color: library.unmaintained
                ? unmaintainedTextColor
                : isDark
                  ? colors.gray3
                  : colors.gray5,
              textDecorationColor: library.unmaintained ? unmaintainedTextColor : colors.gray4,
            }}>
            {getTimeSinceToday(library.github.stats.pushedAt)}
          </A>
        </View>
      }>
      {tooltipContent}
    </Tooltip>
  );
}

const styles = StyleSheet.create({
  updatedAtContainer: {
    gap: 8,
    flexDirection: 'row',
    alignItems: 'flex-start',
  },
  link: {
    fontSize: 13,
    fontWeight: 300,
    backgroundColor: 'transparent',
    textDecorationColor: 'transparent',
  },
});