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