1 | var __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 | };
|
12 | import React from 'react';
|
13 | import { View, StyleSheet, Platform, TouchableHighlight, ActivityIndicator, } from 'react-native';
|
14 | import Icon from '../icons/Icon';
|
15 | import Text from '../text/Text';
|
16 | import fonts from '../config/fonts';
|
17 | import { withTheme } from '../config';
|
18 | const 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 | };
|
53 | const 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 | };
|
91 | const 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 | });
|
134 | export { SocialIcon };
|
135 | export default withTheme(SocialIcon, 'SocialIcon');
|