1import { css } from '@emotion/react';
2import {
3  theme,
4  typography,
5  spacing,
6  iconSize,
7  shadows,
8  ChevronDownIcon,
9  borderRadius,
10} from '@expo/styleguide';
11
12import { A } from '../Text';
13
14import * as Utilities from '~/common/utilities';
15import { usePageApiVersion } from '~/providers/page-api-version';
16import versions from '~/public/static/constants/versions.json';
17
18const { VERSIONS, LATEST_VERSION, BETA_VERSION } = versions;
19
20const STYLES_CONTAINER = css({
21  position: 'relative',
22});
23
24const STYLES_SELECT = css({
25  ...typography.fontSizes[14],
26  fontFamily: typography.fontFaces.regular,
27  color: theme.text.default,
28  margin: 0,
29  marginTop: spacing[1],
30  padding: `${spacing[2]}px ${spacing[3]}px`,
31  minHeight: 40,
32  borderRadius: borderRadius.medium,
33  marginBottom: spacing[4],
34  width: '100%',
35  backgroundColor: theme.background.default,
36  border: `1px solid ${theme.border.default}`,
37  boxShadow: shadows.input,
38  appearance: 'none',
39  outline: 'none',
40  cursor: 'pointer',
41});
42
43const STYLES_ICON = css({
44  position: 'absolute',
45  right: 12,
46  top: 16,
47  pointerEvents: 'none',
48});
49
50export const VersionSelector = () => {
51  const { version, hasVersion, setVersion } = usePageApiVersion();
52
53  if (!hasVersion) {
54    return null;
55  }
56
57  return (
58    <div css={STYLES_CONTAINER}>
59      {
60        // Add hidden links to create crawlable references to other SDK versions
61        // We can use JS to switch between them, while helping search bots find other SDK versions
62        VERSIONS.map(version => (
63          <A key={version} style={{ display: 'none' }} href={`/versions/${version}/`} />
64        ))
65      }
66      <select
67        id="version-menu"
68        css={[STYLES_SELECT]}
69        value={version}
70        onChange={e => setVersion(e.target.value)}>
71        {VERSIONS.map(version => (
72          <option key={version} value={version}>
73            {Utilities.getUserFacingVersionString(
74              version,
75              LATEST_VERSION,
76              typeof BETA_VERSION === 'boolean' ? undefined : BETA_VERSION
77            )}
78          </option>
79        ))}
80      </select>
81      <ChevronDownIcon size={iconSize.small} css={STYLES_ICON} />
82    </div>
83  );
84};
85