react-native-material-palette/example/src/components/PaletteExampleItem.tsx at 51f351260c51a93d0ede99ee4abf50cd1da313b4 · callstack/react-native-material-palette · 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
import {
  Image,
  StyleSheet,
  View,
  type ImageSourcePropType,
} from 'react-native';
import { Palette } from 'react-native-material-palette';
import { PALETTE_TYPES, LIGHT_BACKGROUND_TARGET, SPACING } from '../constants';

const ROUNDNESS = 10;

export default function PaleteExampleItem({
  image,
  author,
}: {
  image: ImageSourcePropType;
  author?: string;
}) {
  return (
    <Palette.View
      source={image}
      type={LIGHT_BACKGROUND_TARGET}
      style={styles.item}
    >
      <View style={styles.underlay} />
      <View style={styles.row}>
        <Image source={image} style={styles.image} resizeMode="cover" />
        <View style={styles.palettes}>
          {PALETTE_TYPES.map((type) => (
            <View key={type} style={styles.palette}>
              <Palette.View
                key={type}
                source={image}
                type={type}
                fallback={{
                  color: '#ffffff',
                  titleTextColor: '#000000',
                  bodyTextColor: '#000000',
                }}
                style={styles.color}
              >
                <Palette.Text variant="titleTextColor" style={styles.title}>
                  {type}
                </Palette.Text>
                <Palette.Text variant="bodyTextColor" style={styles.subtitle}>
                  subtitle
                </Palette.Text>
              </Palette.View>
            </View>
          ))}
        </View>
      </View>
      {author ? (
        <Palette.Text style={styles.author}>Credits: {author}</Palette.Text>
      ) : null}
    </Palette.View>
  );
}

const styles = StyleSheet.create({
  item: {
    width: '100%',
    padding: SPACING * 2,
    borderRadius: ROUNDNESS + SPACING * 2,
    overflow: 'hidden',
  },
  underlay: {
    ...StyleSheet.absoluteFill,
    backgroundColor: '#e0e0e0',
    mixBlendMode: 'luminosity',
  },
  row: {
    flexDirection: 'row',
  },
  image: {
    flexGrow: 1,
    height: null,
    width: null,
    borderRadius: ROUNDNESS,
    margin: SPACING,
  },
  palettes: {
    flex: 1,
    minWidth: 100,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  palette: {
    width: '50%',
    padding: SPACING,
  },
  color: {
    alignItems: 'center',
    padding: SPACING * 2,
    borderRadius: ROUNDNESS,
    overflow: 'hidden',
  },
  title: {
    fontWeight: 'bold',
  },
  subtitle: {
    fontSize: 14,
  },
  author: {
    margin: SPACING,
    fontStyle: 'italic',
  },
});