/
FavoritesList.js
86 lines (77 loc) · 2.29 KB
/
FavoritesList.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import kind from '@enact/core/kind';
import Button from '@enact/sandstone/Button';
import Heading from '@enact/sandstone/Heading';
import Item from '@enact/sandstone/Item';
import {Header, Panel} from '@enact/sandstone/Panels';
import RadioItem from '@enact/sandstone/RadioItem';
import VirtualList from '@enact/sandstone/VirtualList';
import {SpotlightContainerDecorator} from '@enact/spotlight/SpotlightContainerDecorator';
import {Cell, Column, Row} from '@enact/ui/Layout';
import ri from '@enact/ui/resolution';
import PropTypes from 'prop-types';
const SpottableContainer = SpotlightContainerDecorator({enterTo: 'last-focused'}, 'div');
const items = Array(80).fill().map((_, i) => 'Item ' + (i + 1));
// eslint-disable-next-line enact/display-name, enact/prop-types
const renderItem = () => ({index, ...rest}) => (
<Item {...rest}>
{items[index]}
</Item>
);
const ItemPanel = kind({
name: 'ItemPanel',
propTypes: {
DebugButton: PropTypes.object,
/**
* A title string appear on header
* @type {String}
*/
title: PropTypes.string,
titleBelow: PropTypes.string
},
computed: {
itemRenderer: renderItem
},
render: ({title, titleBelow, itemRenderer, DebugButton, ...rest}) => (
<Panel {...rest}>
<Header subtitle={titleBelow} title={title}>
<slotAfter>
{DebugButton}
</slotAfter>
</Header>
<Row style={{height: `calc(100% - ${ri.scale(48)}px)`}}>
<Cell size={720}>
<RadioItem defaultSelected>Photo Items</RadioItem>
<RadioItem>Video Items</RadioItem>
<RadioItem>Audio Items</RadioItem>
</Cell>
<Cell>
<Column>
<Cell shrink>
<Heading showLine>All Items</Heading>
</Cell>
<Cell>
<VirtualList
data={items}
dataSize={items.length}
itemRenderer={itemRenderer}
itemSize={ri.scale(120)}
/>
</Cell>
</Column>
</Cell>
<Cell component={SpottableContainer} shrink>
<Column style={{justifyContent: 'center'}}>
<Cell component={Button} icon="arrowlargeright" shrink />
<Cell component={Button} icon="trash" shrink style={{marginTop: ri.unit(24, 'rem')}} />
</Column>
</Cell>
<Cell>
<Heading showLine>Selected Items</Heading>
<Item>Item 1</Item>
<Item>Item 2</Item>
</Cell>
</Row>
</Panel>
)
});
export default ItemPanel;