1import { css } from '@emotion/core';
2import * as React from 'react';
3
4import { H4 } from '~/components/base/headings';
5import { CheckCircle } from '~/components/icons/CheckCircle';
6import { PendingCircle } from '~/components/icons/PendingCircle';
7import { XCircle } from '~/components/icons/XCircle';
8import * as Constants from '~/constants/theme';
9import { ElementType } from '~/types/common';
10
11const STYLES_TITLE = css`
12  margin-bottom: 1rem;
13`;
14
15const STYLES_CELL = css`
16  transition-duration: 0.2s;
17  :hover {
18    background-color: ${Constants.colors.grey};
19  }
20`;
21
22const STYLES_LINK = css`
23  text-decoration: none;
24  display: grid;
25  grid-template-columns: 20px auto;
26  text-align: left;
27  grid-gap: 8px;
28`;
29
30const platforms = [
31  { title: 'Android Device', propName: 'android' },
32  { title: 'Android Emulator', propName: 'emulator' },
33  { title: 'iOS Device', propName: 'ios' },
34  { title: 'iOS Simulator', propName: 'simulator' },
35  { title: 'Web', propName: 'web' },
36];
37
38type Platform = ElementType<typeof platforms>;
39type IsSupported = boolean | undefined | { pending: string };
40
41function getInfo(isSupported: IsSupported, { title }: Platform) {
42  if (isSupported === true) {
43    return {
44      children: <CheckCircle size={20} />,
45      title: `${title} is supported`,
46    };
47  } else if (typeof isSupported === 'object') {
48    return {
49      children: (
50        <a css={STYLES_LINK} target="_blank" href={isSupported.pending}>
51          <PendingCircle size={20} /> Pending
52        </a>
53      ),
54      title: `${title} support is pending`,
55    };
56  }
57
58  return {
59    children: <XCircle size={20} />,
60    title: `${title} is not supported`,
61  };
62}
63
64type Props = {
65  title?: string;
66  ios?: boolean;
67  android?: boolean;
68  web?: boolean;
69  simulator?: boolean;
70  emulator?: boolean;
71};
72
73type PlatformProps = Omit<Props, 'title'>;
74
75export default class PlatformsSection extends React.Component<Props> {
76  render() {
77    return (
78      <div>
79        <H4 css={STYLES_TITLE}>{this.props.title || 'Platform Compatibility'}</H4>
80        <table>
81          <thead>
82            <tr>
83              {platforms.map(({ title }) => (
84                <th key={title}>{title}</th>
85              ))}
86            </tr>
87          </thead>
88          <tbody>
89            <tr>
90              {platforms.map(platform => (
91                <td
92                  key={platform.title}
93                  css={STYLES_CELL}
94                  {...getInfo(this.props[platform.propName as keyof PlatformProps], platform)}
95                />
96              ))}
97            </tr>
98          </tbody>
99        </table>
100      </div>
101    );
102  }
103}
104