git.iko.soy/bridge
on master help sign in
bridge/src/components/L2/PointList.tsx
65 lines 1.8 kB history raw
1import React from 'react';
2import { Just } from 'folktale/maybe';
4import { useHistory } from 'store/history';
5import { usePointCursor } from 'store/pointCursor';
6import Point from 'lib/types/Point';
8import { Grid, Flex } from 'indigo-react';
9import Passport from 'components/Passport';
10import PermissionIndicator from './PermissionIndicator';
12interface PointListProps {
13 points: Point[];
14 className?: string;
15 actions?: (point: Point, i: number) => React.Component;
16 locked?: boolean;
17 processing?: boolean;
20const PointList: React.FC<PointListProps> = function({
21 points,
22 className,
23 actions,
24 locked = false,
25 processing = false,
26 ...rest
27}) {
28 const { setPointCursor }: any = usePointCursor();
29 const { push, names }: any = useHistory();
31 return (
32 <Grid asFlex gap={4} className={`${className} flex-row flex-wrap`}>
33 {points.map((point, i) => (
34 <Grid.Item
35 key={point.value}
36 className={`fourth-${(i % 4) + 1}-md fourth-${(i % 4) + 1}-lg`}>
37 <Flex col className="rel">
38 <Passport.Mini
39 locked={locked}
40 processing={processing}
41 point={point.value}
42 onClick={
43 locked || processing
44 ? undefined
45 : () => {
46 setPointCursor(Just(point.value));
47 push(names.POINT);
48 }
49 }
50 {...rest}
51 />
52 {actions && (
53 <Flex.Item className="mt2">{actions(point, i)}</Flex.Item>
54 )}
55 {!locked && (
56 <PermissionIndicator permission={point.permissionLevel} />
57 )}
58 </Flex>
59 </Grid.Item>
60 ))}
61 </Grid>
62 );
63};
65export default PointList;