UNPKG

4.98 kBJavaScriptView Raw
1var __rest = (this && this.__rest) || function (s, e) {
2 var t = {};
3 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4 t[p] = s[p];
5 if (s != null && typeof Object.getOwnPropertySymbols === "function")
6 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8 t[p[i]] = s[p[i]];
9 }
10 return t;
11};
12import React from 'react';
13import { View, StyleSheet, Platform, TouchableHighlight, ActivityIndicator, } from 'react-native';
14import Icon from '../icons/Icon';
15import Text from '../text/Text';
16import fonts from '../config/fonts';
17import { withTheme } from '../config';
18const colors = {
19 'github-alt': '#000000',
20 'google-plus-official': '#dd4b39',
21 google: '#dd4b39',
22 'reddit-alien': '#fc461e',
23 'stack-overflow': '#f27f33',
24 angellist: '#1c4082',
25 codepen: '#000000',
26 envelope: '#000000',
27 etsy: '#f2581e',
28 facebook: '#4267B2',
29 'facebook-messenger': '#0084ff',
30 flickr: '#ff0084',
31 foursquare: '#0072b1',
32 github: '#000000',
33 gitlab: '#e14329',
34 instagram: '#517fa4',
35 linkedin: '#007bb6',
36 medium: '#02b875',
37 pinterest: '#cb2027',
38 quora: '#a82400',
39 soundcloud: '#f50',
40 steam: '#c6c3c1',
41 stumbleupon: '#EB4823',
42 tumblr: '#32506d',
43 twitch: '#6441A5',
44 twitter: '#00aced',
45 vimeo: '#aad450',
46 vk: '#5181b8',
47 wechat: '#7bb32e',
48 weibo: '#e6162d',
49 whatsapp: '#075e54',
50 wordpress: '#21759b',
51 youtube: '#bb0000',
52};
53const SocialIcon = (_a) => {
54 var { activityIndicatorStyle, button = false, disabled, fontFamily, fontStyle, fontWeight, iconType = 'font-awesome', iconColor = 'white', iconSize = 24, iconStyle, light, loading, onLongPress, onPress, Component = onPress || onLongPress ? TouchableHighlight : View, raised = true, small, style, title, type, underlayColor } = _a, attributes = __rest(_a, ["activityIndicatorStyle", "button", "disabled", "fontFamily", "fontStyle", "fontWeight", "iconType", "iconColor", "iconSize", "iconStyle", "light", "loading", "onLongPress", "onPress", "Component", "raised", "small", "style", "title", "type", "underlayColor"]);
55 const shouldShowExpandedButton = button && title;
56 return (<Component {...attributes} underlayColor={light ? 'white' : underlayColor || (type && colors[type])} onLongPress={disabled ? null : onLongPress} onPress={disabled ? null : onPress} disabled={disabled} style={StyleSheet.flatten([
57 raised && styles.raised,
58 styles.container,
59 button && styles.button,
60 !button && raised && styles.icon,
61 !button &&
62 !light &&
63 !raised && {
64 width: iconSize * 2 + 4,
65 height: iconSize * 2 + 4,
66 borderRadius: iconSize * 2,
67 },
68 { backgroundColor: type && colors[type] },
69 light && { backgroundColor: 'white' },
70 style && style,
71 ])}>
72 <View style={styles.wrapper}>
73 {(shouldShowExpandedButton || !loading) && (<Icon iconStyle={StyleSheet.flatten([iconStyle && iconStyle])} color={light ? type && colors[type] : iconColor} name={type} size={iconSize} type={iconType}/>)}
74 {shouldShowExpandedButton && (<Text style={StyleSheet.flatten([
75 styles.title,
76 light && { color: type && colors[type] },
77 fontFamily && { fontFamily },
78 fontWeight && { fontWeight },
79 fontStyle && fontStyle,
80 ])}>
81 {title}
82 </Text>)}
83
84 {loading && (<ActivityIndicator animating style={StyleSheet.flatten([
85 styles.activityIndicatorStyle,
86 activityIndicatorStyle,
87 ])} color={light ? type && colors[type] : iconColor || 'white'} size={(small && 'small') || 'large'}/>)}
88 </View>
89 </Component>);
90};
91const styles = StyleSheet.create({
92 container: {
93 margin: 7,
94 borderRadius: 30,
95 flexDirection: 'row',
96 justifyContent: 'center',
97 alignItems: 'center',
98 },
99 button: {
100 paddingTop: 14,
101 paddingBottom: 14,
102 },
103 raised: Object.assign({}, Platform.select({
104 android: {
105 elevation: 2,
106 },
107 default: {
108 shadowColor: 'rgba(0,0,0, .4)',
109 shadowOffset: { height: 1, width: 1 },
110 shadowOpacity: 1,
111 shadowRadius: 1,
112 },
113 })),
114 wrapper: {
115 flexDirection: 'row',
116 justifyContent: 'center',
117 alignItems: 'center',
118 },
119 title: Object.assign({ color: 'white', marginLeft: 15 }, Platform.select({
120 android: Object.assign({}, fonts.android.black),
121 default: {
122 fontWeight: 'bold',
123 },
124 })),
125 icon: {
126 height: 52,
127 width: 52,
128 },
129 activityIndicatorStyle: {
130 marginHorizontal: 10,
131 height: 0,
132 },
133});
134export { SocialIcon };
135export default withTheme(SocialIcon, 'SocialIcon');