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