1import React from 'react';
2
3import { IOSPermission, iosPermissions, PermissionReference } from './data';
4
5import Permalink from '~/components/Permalink';
6import { InlineCode } from '~/components/base/code';
7
8type IOSPermissionsProps = {
9  permissions: PermissionReference<IOSPermission>[];
10};
11
12export function IOSPermissions(props: IOSPermissionsProps) {
13  const list = React.useMemo(() => getPermissions(props.permissions), [props.permissions]);
14
15  return (
16    <table>
17      <thead>
18        <tr>
19          <th>Info.plist Key</th>
20          <th>Description</th>
21        </tr>
22      </thead>
23      <tbody>
24        {list.map(permission => (
25          <tr key={permission.name}>
26            <td>
27              <Permalink id={`permission-${permission.name.toLowerCase()}`}>
28                <span>
29                  <InlineCode>{permission.name}</InlineCode>
30                </span>
31              </Permalink>
32            </td>
33            <td>
34              <p>{permission.description}</p>
35            </td>
36          </tr>
37        ))}
38      </tbody>
39    </table>
40  );
41}
42
43function getPermissions(permissions: IOSPermissionsProps['permissions']) {
44  return permissions
45    .map(permission =>
46      typeof permission === 'string'
47        ? iosPermissions[permission]
48        : { ...iosPermissions[permission.name], ...permission }
49    )
50    .filter(Boolean);
51}
52