1import { useMemo } from 'react';
2
3import { IOSPermission, iosPermissions, PermissionReference } from './data';
4
5import { Cell, HeaderCell, Row, Table, TableHead } from '~/ui/components/Table';
6import { P, CODE, createPermalinkedComponent } from '~/ui/components/Text';
7
8type IOSPermissionsProps = {
9  permissions: PermissionReference<IOSPermission>[];
10};
11
12const PermissionPermalink = createPermalinkedComponent(P, {
13  baseNestingLevel: 4,
14});
15
16export function IOSPermissions(props: IOSPermissionsProps) {
17  const list = useMemo(() => getPermissions(props.permissions), [props.permissions]);
18
19  return (
20    <Table>
21      <TableHead>
22        <Row>
23          <HeaderCell>Info.plist Key</HeaderCell>
24          <HeaderCell>Description</HeaderCell>
25        </Row>
26      </TableHead>
27      <tbody>
28        {list.map(permission => (
29          <Row key={permission.name}>
30            <Cell>
31              <PermissionPermalink id={`permission-${permission.name.toLowerCase()}`}>
32                <CODE>{permission.name}</CODE>
33              </PermissionPermalink>
34            </Cell>
35            <Cell>{permission.description}</Cell>
36          </Row>
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