RustyJS-UI/examples/flat_list.js at main · MatheusBBarni/RustyJS-UI · GitHub

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
const tasks = [
    { id: 'ship-flat-list', title: 'Ship FlatList', owner: 'Ada' },
    { id: 'review-bridge', title: 'Review JS bridge', owner: 'Grace' },
    { id: 'polish-renderer', title: 'Polish renderer', owner: 'Linus' },
];

let selectedTaskId = '';

function getSelectedTask() {
    return tasks.find((task) => task.id === selectedTaskId) || null;
}

function getSelectedTaskLabel() {
    const task = getSelectedTask();
    return task ? task.title : 'Nothing selected';
}

function selectTask(taskId) {
    selectedTaskId = taskId;
    App.requestRender();
}

function Divider() {
    return View({
        style: {
            width: 'fill',
            height: 1,
            backgroundColor: '#D8E0E8'
        }
    });
}

function renderTask({ item, index }) {
    return View({
        style: {
            width: 'fill',
            direction: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            padding: { x: 14, y: 12 },
            backgroundColor: '#FFFFFF',
            borderWidth: 1,
            borderRadius: 12,
            borderColor: '#D8E0E8'
        },
        children: [
            View({
                style: {
                    direction: 'column',
                    gap: 4
                },
                children: [
                    Text({
                        text: `${index + 1}. ${item.title}`,
                        style: {
                            fontSize: 20,
                            color: '#102033'
                        }
                    }),
                    Text({
                        text: `Owner: ${item.owner}`,
                        style: {
                            fontSize: 16,
                            color: '#58677A'
                        }
                    })
                ]
            }),
            Button({
                text: `Select ${index + 1}`,
                onClick: () => selectTask(item.id),
                style: {
                    padding: { x: 12, y: 10 },
                    borderRadius: 10,
                    backgroundColor: '#215B9A',
                    color: '#FFFFFF'
                }
            })
        ]
    });
}

function AppLayout() {
    return View({
        style: {
            width: 'fill',
            height: 'fill',
            padding: 24,
            direction: 'column',
            gap: 16,
            backgroundColor: '#F4F7FA'
        },
        children: [
            Text({
                text: 'FlatList Example',
                style: {
                    fontSize: 28,
                    color: '#102033'
                }
            }),
            Text({
                text: `Selected task: ${getSelectedTaskLabel()}`,
                style: {
                    fontSize: 18,
                    color: '#425466'
                }
            }),
            FlatList({
                data: tasks,
                style: {
                    width: 'fill'
                },
                contentContainerStyle: {
                    gap: 12
                },
                ItemSeparatorComponent: Divider,
                renderItem: renderTask
            })
        ]
    });
}

App.run({
    title: 'FlatList Example',
    windowSize: { width: 720, height: 520 },
    render: AppLayout
});