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