git-point/src/components/topics-list.component.js at master · gitpoint/git-point · 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
import React from 'react';
import LinearGradient from 'react-native-linear-gradient';
import styled from 'styled-components';
import { colors, fonts } from 'config';
import { InlineLabel } from 'components';
import { FlatList, View } from 'react-native';

type Props = {
  title: string,
  topics: Array,
};

const styles = {
  contentContainerStyle: {
    paddingLeft: 13,
    paddingRight: 13,
  },
  scrollGradient: {
    position: 'absolute',
    width: 15,
    height: 30,
  },
};

const TopicsListContainer = styled.View`
  margin-top: 30;
`;

const TopicsListLabel = styled.Text`
  color: ${colors.black};
  ${{ ...fonts.fontPrimaryBold }};
  margin-bottom: 10;
  padding-left: 15;
`;

export const TopicsList = ({ title, topics }: Props) => (
  <TopicsListContainer>
    <TopicsListLabel>{title}</TopicsListLabel>
    <View>
      {topics.length > 0 && (
        <FlatList
          contentContainerStyle={styles.contentContainerStyle}
          data={topics}
          showsHorizontalScrollIndicator={false}
          renderItem={({ item }) => (
            <InlineLabel
              label={{ name: item, color: colors.topicLightBlue.slice(1) }}
            />
          )}
          keyExtractor={item => item}
          horizontal
        />
      )}
      <LinearGradient
        style={[styles.scrollGradient, { left: 0 }]}
        colors={['white', 'rgba(255, 255, 255, 0)']}
        start={{ x: 0, y: 0.5 }}
        end={{ x: 1, y: 0.5 }}
      />

      <LinearGradient
        style={[styles.scrollGradient, { right: 0 }]}
        colors={['rgba(255, 255, 255, 0)', 'white']}
        start={{ x: 0, y: 0.5 }}
        end={{ x: 1, y: 0.5 }}
      />
    </View>
  </TopicsListContainer>
);