Skip to content

R
react-native-bucks
Commit 1ece3286 authored by yangnr's avatar yangnr
Browse files
Options

Initial commit

parents
Hide whitespace changes
Inline Side-by-side
Showing with 5649 additions and 0 deletions
package.json 0 → 100644
View file @ 1ece3286
{
"name": "react-native-bucks",
"version": "1.0.0",
"description": "React Native Bucks & UI Toolkit",
"main": "src/index.js",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/azertys/bucks-react.git"
},
"keywords": [
"react-native",
"reactjs",
"reactnative",
"bootstrap"
],
"scripts": {
"build": "rm -rf build; webpack"
},
"author": "EpicPxls",
"license": "MIT",
"bugs": {
"url": "https://github.com/azertys/bucks-react/issues"
},
"rnpm": {
"assets": [
"./src/fonts/"
]
},
"homepage": "https://github.com/azertys/bucks-react#readme",
"dependencies": {
"immutable": "^3.8.2",
"node": "^8.10.0",
"prop-types": "^15.6.0",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",
"react-native-side-menu": "^1.0.2",
"react-native-tab-navigator": "^0.3.4",
"react-native-pathjs-charts": "https://github.com/EpicCoders/react-native-pathjs-charts",
"react-native-vector-icons": "^4.6.0"
},
"peerDependencies": {},
"devDependencies": {}
}
src/buttons/Button.js 0 → 100755
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import {
TouchableNativeFeedback,
TouchableHighlight,
StyleSheet,
View,
Platform,
Text as NativeText,
} from 'react-native';
import Icon from '../icons/Icon';
import colors from '../config/colors';
import Text from '../text/Text';
import normalize from '../helpers/normalizeText';
import ViewPropTypes from '../config/ViewPropTypes';
const log = () =>
{
console.log('please attach method to this component'); //eslint-disable-line no-console
};
const Button = props =>
{
const {
disabled,
title,
buttonStyle,
borderRadius,
onPress,
secondary,
secondary2,
secondary3,
iconLeft,
color,
fontSize,
underlayColor,
raised,
textStyle,
containerViewStyle,
...attributes
} = props;
let {Component} = props;
if (!Component && Platform.OS === 'ios')
{
Component = TouchableHighlight;
}
if (!Component && Platform.OS === 'android')
{
Component = TouchableNativeFeedback;
}
if (!Component)
{
Component = TouchableHighlight;
}
if (Platform.OS === 'android' && (borderRadius && !attributes.background))
{
attributes.background = TouchableNativeFeedback.Ripple(
'ThemeAttrAndroid',
true
);
}
let buttonTitle = <Text
style={[
styles.text,
color && {color},
fontSize && {fontSize},
textStyle && textStyle,
secondary && {color: colors.grey0},
secondary3 && {color: colors.blue},
]}
>
{title}
</Text>;
if (typeof title === 'object') {
buttonTitle = <View
style={[
color && {color},
secondary && {color: colors.grey0},
secondary3 && {color: colors.blue},
]}
>
{title}
</View>
}
return (
<View
style={[styles.container, raised && styles.raised, containerViewStyle]}
>
<Component
underlayColor={underlayColor || 'transparent'}
onPress={onPress || log}
disabled={disabled || false}
{...attributes}
>
<View
style={[
styles.button,
secondary && {backgroundColor: colors.secondary},
secondary2 && {backgroundColor: colors.secondary2},
secondary3 && {backgroundColor: colors.secondary3, borderColor: colors.blue, borderWidth: 2},
buttonStyle && buttonStyle,
]}
>
{iconLeft ?
<Icon style={styles.iconLeft}
{...iconLeft}
/>
: null
}
{buttonTitle}
</View>
</Component>
</View>
);
};
Button.propTypes = {
buttonStyle: ViewPropTypes.style,
title: PropTypes.any,
onPress: PropTypes.any,
icon: PropTypes.object,
iconComponent: PropTypes.any,
secondary: PropTypes.bool,
secondary2: PropTypes.bool,
secondary3: PropTypes.bool,
primary1: PropTypes.bool,
primary2: PropTypes.bool,
backgroundColor: PropTypes.string,
color: PropTypes.string,
fontSize: PropTypes.any,
underlayColor: PropTypes.string,
raised: PropTypes.bool,
textStyle: NativeText.propTypes.style,
disabled: PropTypes.bool,
loading: PropTypes.bool,
activityIndicatorStyle: ViewPropTypes.style,
loadingRight: PropTypes.bool,
Component: PropTypes.any,
borderRadius: PropTypes.number,
large: PropTypes.bool,
iconRight: PropTypes.bool,
iconLeft: PropTypes.object,
fontWeight: PropTypes.string,
disabledStyle: ViewPropTypes.style,
fontFamily: PropTypes.string,
containerViewStyle: ViewPropTypes.style,
rounded: PropTypes.bool,
outline: PropTypes.bool,
transparent: PropTypes.bool,
allowFontScaling: PropTypes.bool,
textNumberOfLines: PropTypes.number,
textEllipsizeMode: PropTypes.string,
};
const stylesObject = {
container: {
backgroundColor: 'transparent',
marginLeft: 15,
marginRight: 15,
},
button: {
padding: 5,
borderRadius: 33,
backgroundColor: colors.bgColor,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
},
text: {
color: 'white',
fontWeight: 'bold',
fontSize: normalize(12),
},
iconLeft: {
width: 18,
},
};
const styles = StyleSheet.create(stylesObject);
export default Button;
src/calendar/CalendarItem.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import {
View,
StyleSheet,
Platform,
TouchableHighlight,
Text as NativeText,
} from 'react-native';
import colors from '../config/colors';
import Text from '../text/Text';
import fonts from '../config/fonts';
import normalize from '../helpers/normalizeText';
import ViewPropTypes from '../config/ViewPropTypes';
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
const CalendarItem = props => {
const {
flexDirection,
containerStyle,
...attributes
} = props;
let calendarTheme = {
arrowColor: 'white',
'stylesheet.calendar.header': {
week: {
marginTop: 5,
flexDirection: 'row',
justifyContent: 'space-between'
}
}
};
return (
<Agenda
// the list of items that have to be displayed in agenda. If you want to render item as empty date
// the value of date key kas to be an empty array []. If there exists no value for date key it is
// considered that the date in question is not yet loaded
items={
{'2012-05-22': [{text: 'item 1 - any js object'}],
'2012-05-23': [{text: 'item 2 - any js object'}],
'2012-05-24': [],
'2012-05-25': [{text: 'item 3 - any js object'},{text: 'any js object'}],
}}
// callback that gets called when items for a certain month should be loaded (month became visible)
loadItemsForMonth={(month) => {console.log('trigger items loading')}}
// callback that gets called on day press
onDayPress={(day)=>{console.log('day pressed')}}
// callback that gets called when day changes while scrolling agenda list
onDayChange={(day)=>{console.log('day changed')}}
// initially selected day
selected={'2012-05-22'}
// Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
minDate={'2012-05-10'}
// Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
maxDate={'2012-05-30'}
// Max amount of months allowed to scroll to the past. Default = 50
pastScrollRange={50}
// Max amount of months allowed to scroll to the future. Default = 50
futureScrollRange={50}
// specify how each item should be rendered in agenda
renderItem={(item, firstItemInDay) => {return (<View />);}}
// specify how each date should be rendered. day can be undefined if the item is not first in that day.
renderDay={(day, item) => {return (<View />);}}
// specify how empty date content with no items should be rendered
renderEmptyDate={() => {return (<View />);}}
// specify how agenda knob should look like
renderKnob={() => {return (<View />);}}
// specify your item comparison function for increased performance
rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}
// Hide knob button. Default = false
hideKnob={true}
// By default, agenda dates are marked if they have at least one item, but you can override this if needed
markedDates={{
'2012-05-16': {selected: true, marked: true},
'2012-05-17': {marked: true},
'2012-05-18': {disabled: true}
}}
// agenda theme
theme={{
...calendarTheme,
agendaDayTextColor: 'yellow',
agendaDayNumColor: 'green',
agendaTodayColor: 'red',
agendaKnobColor: 'blue'
}}
// agenda container style
style={{}}
/>
);
};
CalendarItem.propTypes = {
flexDirection: PropTypes.string,
containerStyle: ViewPropTypes.style,
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
padding: 16,
margin: 15,
paddingTop: 26,
marginBottom: 0,
marginTop: 19,
borderRadius: 8,
flexDirection: 'column',
},
calendar: {
borderTopWidth: 1,
paddingTop: 5,
borderBottomWidth: 1,
borderColor: '#eee',
height: 350
},
});
export default CalendarItem;
src/card/Card.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import {
View,
StyleSheet,
Platform,
Image,
TouchableHighlight,
Text as NativeText,
} from 'react-native';
import colors from '../config/colors';
import Icon from '../icons/Icon';
import Text from '../text/Text';
import fonts from '../config/fonts';
import normalize from '../helpers/normalizeText';
import ViewPropTypes from '../config/ViewPropTypes';
const TYPES = {
mastercard: {
source: require('../images/mastercard.png'),
},
paypal: {
source: require('../images/paypal.png'),
},
visa: {
source: require('../images/visa.png'),
},
};
const Card = props => {
const {
flexDirection,
containerStyle,
wrapperStyle,
title,
subTitle,
subTitleStyle,
type,
color,
number,
expiration,
titleStyle,
...attributes
} = props;
let cardColor = color ? color : colors.blue;
return (
<View
style={[
styles.container,
containerStyle && containerStyle,
]}
{...attributes}
>
{expiration ? <View
style={[
styles.cardColorBlock,
{backgroundColor: cardColor},
]}
>
</View> : null}
<View
style={[
styles.wrapper,
wrapperStyle && wrapperStyle,
flexDirection && { flexDirection },
]}
>
<View
style={[
styles.topContainer
]}
>
<View
style={[
styles.titleSubtitleContainer
]}
>
{title !== null &&
<View>
<Text
style={[
styles.cardTitle,
titleStyle && titleStyle,
]}
>
{title}
</Text>
</View>}
{subTitle !== null &&
<View>
<Text
style={[
styles.cardSubTitle,
subTitleStyle && subTitleStyle,
]}
>
{subTitle}
</Text>
</View>}
</View>
<View>
<Image
style={styles.typeImage}
resizeMode="contain"
source={TYPES[type].source}
/>
</View>
</View>
<View
style={[
styles.numberContainer
]}
>
<Text
style={[
styles.numberAsterix
]}
>
**** **** ****
</Text>
<Text
style={[
styles.number
]}
>
{number}
</Text>
</View>
{expiration ?
<View style={[
styles.bottomContainer]}>
<View>
<Text>
{expiration}
</Text>
</View>
<View>
<TouchableHighlight>
<View
style={[
styles.moreButton
]}
>
<Text
style={[
styles.moreText
]}
>
More
</Text>
<Icon
color={colors.link}
name='chevron-right'
size={13}
/>
</View>
</TouchableHighlight>
</View>
</View> : null}
</View>
</View>
);
};
Card.defaultProps = {
// underlayColor: 'white',
// leftIconUnderlayColor: 'white',
// chevronColor: colors.grey4,
// rightIcon: { name: 'chevron-right' },
// hideChevron: true,
// roundAvatar: false,
// switchButton: false,
// textInputEditable: true,
// titleNumberOfLines: 1,
// subtitleNumberOfLines: 1,
// rightTitleNumberOfLines: 1,
};
Card.propTypes = {
flexDirection: PropTypes.string,
containerStyle: ViewPropTypes.style,
wrapperStyle: ViewPropTypes.style,
overlayStyle: ViewPropTypes.style,
title: PropTypes.string,
titleStyle: NativeText.propTypes.style,
subTitle: PropTypes.string,
subTitleStyle: NativeText.propTypes.style,
type: PropTypes.oneOf([
'mastercard',
'visa',
'paypal'
]),
number: PropTypes.string,
expiration: PropTypes.string,
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
padding: 16,
margin: 15,
paddingTop: 26,
marginBottom: 0,
marginTop: 19,
borderRadius: 8,
flexDirection: 'row',
...Platform.select({
ios: {
shadowColor: 'rgba(0, 0, 0, 0.04)',
shadowOffset: { height: 10, width: 0 },
shadowOpacity: 1,
shadowRadius: 14,
},
android: {
elevation: 1,
},
}),
},
wrapper: {
backgroundColor: 'transparent',
marginLeft: 10,
flexDirection: 'column',
flex: 1,
marginBottom: 5,
},
topContainer: {
flex: 1,
flexDirection: 'row',
paddingTop: 0,
},
titleSubtitleContainer: {
flex: 1,
flexDirection: 'column',
alignItems: 'flex-start',
},
bottomContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 22,
},
cardColorBlock: {
height: 26,
width: 26,
borderRadius: 4,
backgroundColor: colors.blue,
},
typeImage: {
alignItems: 'flex-end',
justifyContent: 'center',
flex: 0.15,
width: 60,
height: 30,
},
cardTitle: {
fontSize: normalize(18),
textAlign: 'left',
marginBottom: 5,
color: colors.black,
letterSpacing: 1.3,
},
cardSubTitle: {
flex: 1,
color: colors.grey0,
fontSize: normalize(10),
opacity: 0.7,
...Platform.select({
ios: {
fontWeight: 'normal',
},
android: {
...fonts.android.normal,
},
}),
},
numberContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 20,
},
numberAsterix: {
fontSize: normalize(25),
color: colors.grey0,
opacity: 0.7,
letterSpacing: 2,
lineHeight: 0.1,
marginTop: 17,
},
number: {
fontSize: normalize(26),
color: colors.grey0,
marginTop: 4,
fontFamily: 'Ayuthaya',
},
moreButton: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginRight: 10,
},
moreText: {
color: colors.link,
fontSize: normalize(11),
marginRight: 10,
},
overlayContainer: {
flex: 1,
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.2)',
alignSelf: 'stretch',
justifyContent: 'center',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
export default Card;
src/charts/GainLine.js 0 → 100644
View file @ 1ece3286
'use strict';
import PropTypes from 'prop-types';
import React from 'react';
import {
View,
StyleSheet,
} from 'react-native';
import { Text, Circle } from 'react-native-svg';
import { SmoothLine } from 'react-native-pathjs-charts';
const GainLine = props => {
const {
data,
options,
...attributes
} = props;
let baseOptions = {
animate: {
type: 'delayed',
duration: 200
},
axisX: {
showAxis: true,
showLines: true,
showLabels: false,
showTicks: false,
zeroAxis: false,
orient: 'bottom',
label: {
fontFamily: 'Arial',
fontSize: 14,
fontWeight: true,
fill: 'transparent'
}
},
axisY: {
showAxis: true,
showLines: false,
showLabels: false,
showTicks: false,
zeroAxis: false,
orient: 'left',
label: {
fontFamily: 'Arial',
fontSize: 14,
fontWeight: true,
fill: 'transparent'
}
},
showAreas: true,
showPoints: true,
renderPoint: (graphIndex, pointIndex) => [
<Text
key="valueLegend"
fontFamily="Arial"
fontSize={14}
fontWeight="normal"
fill="transparent"
textAnchor="middle"
x={0}
y={20}
>
{data[graphIndex][pointIndex].y}
</Text>,
<Circle key="light" fill='#FFFFFF' cx={0} cy={0} r={7} fillOpacity={1} />,
<Circle key="full" fill='#1566DF' cx={0} cy={0} r={5} fillOpacity={1} />,
]
};
return (
<SmoothLine data={data} options={{...baseOptions, ...options}} xKey='x' yKey='y' />
);
};
GainLine.propTypes = {
options: PropTypes.any,
data: PropTypes.any,
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
},
});
export default GainLine;
\ No newline at end of file
src/checkbox/Checkbox.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import {
StyleSheet,
TouchableOpacity,
View,
Platform,
Text as NativeText,
} from 'react-native';
import TextElement from '../text/Text';
import fonts from '../config/fonts';
import colors from '../config/colors';
import ViewPropTypes from '../config/ViewPropTypes';
import Icon from '../icons/Icon';
const CheckBox = props => {
const {
component,
checked,
iconRight,
title,
center,
right,
containerStyle,
textStyle,
onPress,
onLongPress,
onIconPress,
onLongIconPress,
size,
checkedIcon,
uncheckedIcon,
checkedColor,
uncheckedColor,
checkedTitle,
fontFamily,
...attributes
} = props;
const Component = component || TouchableOpacity;
let iconName = uncheckedIcon;
if (checked) {
iconName = checkedIcon;
}
return (
<Component
onLongPress={onLongPress}
onPress={onPress}
style={[styles.container, containerStyle && containerStyle]}
{...attributes}
>
<View
style={[
styles.wrapper,
right && { justifyContent: 'flex-end' },
center && { justifyContent: 'center' },
]}
>
{!iconRight &&
<Icon
color={checked ? checkedColor : uncheckedColor}
name={iconName}
size={size || 24}
onLongPress={onLongIconPress}
onPress={onIconPress}
/>}
{React.isValidElement(title)
? title
: <TextElement
style={[
styles.text,
textStyle && textStyle,
fontFamily && { fontFamily },
]}
>
{checked ? checkedTitle || title : title}
</TextElement>}
{iconRight &&
<Icon
color={checked ? checkedColor : uncheckedColor}
name={iconName}
size={size || 24}
onLongPress={onLongIconPress}
onPress={onIconPress}
/>}
</View>
</Component>
);
};
CheckBox.defaultProps = {
checked: false,
iconRight: false,
right: false,
center: false,
checkedColor: 'green',
uncheckedColor: '#bfbfbf',
checkedIcon: 'check-square-o',
uncheckedIcon: 'square-o',
size: 24,
};
CheckBox.propTypes = {
component: PropTypes.any,
checked: PropTypes.bool,
iconRight: PropTypes.bool,
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
center: PropTypes.bool,
right: PropTypes.bool,
containerStyle: ViewPropTypes.style,
textStyle: NativeText.propTypes.style,
onPress: PropTypes.func,
onLongPress: PropTypes.func,
checkedIcon: PropTypes.string,
uncheckedIcon: PropTypes.string,
iconType: PropTypes.string,
size: PropTypes.number,
checkedColor: PropTypes.string,
uncheckedColor: PropTypes.string,
checkedTitle: PropTypes.string,
onIconPress: PropTypes.func,
onLongIconPress: PropTypes.func,
fontFamily: PropTypes.string,
};
const styles = StyleSheet.create({
wrapper: {
flexDirection: 'row',
alignItems: 'center',
},
container: {
margin: 5,
marginLeft: 10,
marginRight: 10,
backgroundColor: '#fafafa',
borderColor: '#ededed',
borderWidth: 1,
padding: 10,
borderRadius: 3,
},
text: {
marginLeft: 10,
marginRight: 10,
color: colors.grey1,
...Platform.select({
ios: {
fontWeight: 'bold',
},
android: {
...fonts.android.bold,
},
}),
},
});
export default CheckBox;
src/config/BackgroundImage.js 0 → 100644
View file @ 1ece3286
import { Image, ImageBackground } from 'react-native';
const BackgroundImage = ImageBackground || Image;
export default BackgroundImage;
src/config/ViewPropTypes.js 0 → 100644
View file @ 1ece3286
import { View, ViewPropTypes as RNViewPropTypes } from 'react-native';
const ViewPropTypes = RNViewPropTypes || View.propTypes;
export default ViewPropTypes;
src/config/colors.js 0 → 100644
View file @ 1ece3286
export default {
primary: '#2F80F6',
// primary1: '#4d86f7',
primary2: '#6296f9',
secondary: '#DEE9F7',
secondary2: '#515F71',
link: '#136EF1',
danger: '#FE4F68',
bgColor: '#78AEF9',
// secondary3: '#2F80F6',
grey0: '#3E4A59',
// grey1: '#43484d',
// grey2: '#5e6977',
grey3: '#86939e',
// grey4: '#bdc6cf',
// grey5: '#e1e8ee',
// dkGreyBg: '#232323',
// greyOutline: '#bbb',
// searchBg: '#303337',
// disabled: '#dadee0',
white: '#ffffff',
border: '#E9EFF7',
black: '#24272B',
pink: '#FE4E56',
yellow: '#FFBA12',
green: '#09C04C',
blue: '#4189FF',
purple: '#7153FF',
lightBlue: '#4189FF',
turquoise: '#00DDCB',
tabDefault: '#B3BFD0',
tabSelected: '#2F80F6',
tabTextDefault: '#4B5461',
tabTextSelected: '#136EF1',
sliderLeft: '#2F80F6',
sliderRight: '#D3DFEF'
};
\ No newline at end of file
src/config/fonts.js 0 → 100644
View file @ 1ece3286
export default {
ios: {
regular: {
fontFamily: 'PingFangHK-Regular, sans-serif',
},
medium: {
fontFamily: 'PingFangHK-Medium',
},
extraBoldRegular: {
fontFamily: 'Abadi MT Condensed Extra Bold Regular'
},
/* We are only allowed to use these in iOS */
SFMedium: {
fontFamily: 'SFUIText-Medium'
},
SFRegular: {
fontFamily: 'SFUIText-Regular'
},
SFSemibold: {
fontFamily: 'SFUIText-Semibold'
},
Ayuthaya: {
fontFamily: 'Ayuthaya'
}
},
android: {
regular: {
fontFamily: 'sans-serif',
},
medium: {
fontFamily: 'sans-serif-medium',
},
light: {
fontFamily: 'sans-serif-light',
},
condensed: {
fontFamily: 'sans-serif-condensed',
},
condensed_light: {
fontFamily: 'sans-serif-condensed',
fontWeight: 'light',
},
black: {
// note(brentvatne): sans-serif-black is only supported on Android 5+,
// we can detect that here and use it in that case at some point.
fontFamily: 'sans-serif',
fontWeight: 'bold',
},
thin: {
fontFamily: 'sans-serif-thin',
},
bold: {
fontFamily: 'sans-serif',
fontWeight: 'bold',
},
},
};
src/divider/Divider.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import { View, StyleSheet } from 'react-native';
import colors from '../config/colors';
import ViewPropTypes from '../config/ViewPropTypes';
let styles = {};
const Divider = ({ style }) =>
<View style={[styles.container, style && style]} />;
Divider.propTypes = {
style: ViewPropTypes.style,
};
styles = StyleSheet.create({
container: {
height: 1,
backgroundColor: colors.grey5,
},
});
export default Divider;
src/form/FormInput.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import {
Animated,
Easing,
TextInput,
StyleSheet,
Platform,
Dimensions,
Text as NativeText,
} from 'react-native';
import colors from '../config/colors';
import normalize from '../helpers/normalizeText';
import ViewPropTypes from '../config/ViewPropTypes';
const { width } = Dimensions.get('window');
class FormInput extends Component {
constructor(props) {
super(props);
this.shake = this.shake.bind(this);
}
componentWillMount() {
this.shakeAnimationValue = new Animated.Value(0);
this.props.shake && this.shake();
}
componentWillReceiveProps(nextProps) {
nextProps.shake && this.props.shake !== nextProps.shake && this.shake();
}
getRef = () => {
return this.input || this.refs[this.props.textInputRef];
};
getRefHandler = () => {
if (this.props.textInputRef) {
if (typeof this.props.textInputRef === 'function') {
return input => {
this.input = input;
this.props.textInputRef(input);
};
} else {
return this.props.textInputRef;
}
} else {
return input => (this.input = input);
}
};
focus() {
this.getRef() && this.getRef().focus();
}
blur() {
this.getRef() && this.getRef().blur();
}
clearText() {
this.getRef() && this.getRef().clear();
}
shake() {
const { shakeAnimationValue } = this;
shakeAnimationValue.setValue(0);
Animated.timing(shakeAnimationValue, {
duration: 375,
toValue: 3,
ease: Easing.bounce,
}).start();
}
render() {
const {
onSuccess,
search,
containerStyle,
inputStyle,
containerRef,
selectionColor,
placeholder,
normalizeFontSize,
...attributes
} = this.props;
if(onSuccess){
containerStyle.borderColor= 'transparent';
}
if (search) {
inputStyle.color= '#D3DFEF';
containerStyle.borderColor= 'transparent';
}
const translateX = this.shakeAnimationValue.interpolate({
inputRange: [0, 0.5, 1, 1.5, 2, 2.5, 3],
outputRange: [0, -15, 0, 15, 0, -15, 0],
});
return (
<Animated.View
ref={containerRef}
style={[
styles.container,
containerStyle && containerStyle,
{
transform: [{ translateX }],
},
]}
>
<TextInput
ref={this.getRefHandler()}
placeholder={placeholder}
placeholderTextColor='#CED4DA'
selectionColor={selectionColor || colors.grey3}
style={[
styles.input,
{ fontSize: normalizeFontSize ? normalize(14) : 14 },
inputStyle && inputStyle,
]}
{...attributes}
/>
</Animated.View>
);
}
}
FormInput.propTypes = {
containerStyle: ViewPropTypes.style,
inputStyle: NativeText.propTypes.style,
selectionColor: PropTypes.string,
// Deprecated
textInputRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
// Deprecated
containerRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
normalizeFontSize: PropTypes.bool,
shake: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
PropTypes.object,
PropTypes.number,
PropTypes.array,
]),
};
FormInput.defaultProps = {
normalizeFontSize: true,
};
const styles = StyleSheet.create({
container: {
marginLeft: 15,
marginRight: 15,
borderColor: '#CED4DA',
...Platform.select({
ios: {
borderBottomColor: colors.grey4,
borderBottomWidth: 1,
marginLeft: 20,
marginRight: 20,
},
}),
},
input: {
...Platform.select({
android: {
minHeight: 46,
width: width - 30,
},
ios: {
minHeight: 36,
width: width,
},
}),
// breaks tests - fix before release
// Invariant Violation: Invalid undefined `width` of type `string`
// supplied to `StyleSheet input`, expected `number`.
// width: '100%',
color: colors.grey3,
},
});
export default FormInput;
\ No newline at end of file
src/form/FormLabel.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import { StyleSheet, View, Platform, Text as NativeText } from 'react-native';
import fonts from '../config/fonts';
import Text from '../text/Text';
import ViewPropTypes from '../config/ViewPropTypes';
const FormLabel = props => {
const {
containerStyle,
labelStyle,
error,
children,
fontFamily,
...attributes
} = props;
if(error){
labelStyle.color= '#FE4F68';
} else {
labelStyle.color= '#3E4A59';
}
return (
<View
style={[styles.container, containerStyle && containerStyle]}
{...attributes}
>
<Text
style={[
styles.label,
labelStyle && labelStyle,
fontFamily && { fontFamily },
]}
>
{children}
</Text>
</View>
);
};
FormLabel.defaultProps = {
error: false,
};
FormLabel.propTypes = {
containerStyle: ViewPropTypes.style,
labelStyle: NativeText.propTypes.style,
children: PropTypes.any,
error: PropTypes.bool,
fontFamily: PropTypes.string,
};
const styles = StyleSheet.create({
container: {},
label: {
marginLeft: 20,
marginRight: 20,
marginTop: 15,
marginBottom: 1,
color: '#8D959D',
fontSize: 10,
opacity: 0.9,
...Platform.select({
ios: {
fontWeight: 'bold',
},
android: {
...fonts.android.bold,
},
}),
},
});
export default FormLabel;
\ No newline at end of file
src/form/FormLogin.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import FormInput from '../form/FormInput';
import PropTypes from 'prop-types';
import FormLabel from '../form/FormLabel';
import colors from '../config/colors';
import Icon from '../icons/Icon';
import { StyleSheet, View, } from 'react-native';
const FormLogin = props => {
const {
success,
label,
icon,
placeholder,
iconName,
onSuccess,
} = props;
return (
<View>
{
onSuccess ? (
<View>
<FormLabel
labelStyle={{}}>
{label}
</FormLabel>
<FormInput
onSuccess={true}
containerStyle={{}} />
<Icon
color={colors.green}
name='check-circle'
size={18}
style={styles.inputIcon}
/>
</View>
) : <View>
<FormLabel
labelStyle={{}}>
{label}
</FormLabel>
<FormInput
placeholder={placeholder} />
</View>
}
</View>
);
};
FormLogin.defaultProps = {
success: false,
};
FormLogin.propTypes = {
success: PropTypes.bool,
label: PropTypes.string,
icon : PropTypes.bool,
iconName: PropTypes.string,
onSuccess: PropTypes.bool,
};
const styles = StyleSheet.create({
inputIcon: {
position: 'absolute',
right: 10,
bottom: 0,
padding: 10
},
});
export default FormLogin;
src/form/FormRow.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import FormInput from '../form/FormInput';
import PropTypes from 'prop-types';
import FormLabel from '../form/FormLabel';
import colors from '../config/colors';
import Icon from '../icons/Icon';
import { StyleSheet, View} from 'react-native';
const FormRow = props => {
const {
error,
label,
icon,
iconName,
hasError,
} = props;
return (
<View>
{
hasError ? (
<View style={styles.errorInput}>
<FormLabel
labelStyle={{}}
error={true} >
Please add the correct {label}
</FormLabel>
<FormInput />
<Icon
color={colors.danger}
name='question-circle'
size={20}
style={styles.inputIcon}
/>
</View>
) : <View>
<FormLabel
labelStyle={{}}>
{label}
</FormLabel>
<FormInput />
{icon ? <Icon
color={colors.link}
name={iconName}
size={20}
style={styles.inputIcon}
/> : null}
</View>
}
</View>
);
};
FormRow.defaultProps = {
error: false,
};
FormRow.propTypes = {
error: PropTypes.bool,
label: PropTypes.string,
icon : PropTypes.bool,
iconName: PropTypes.string,
hasError: PropTypes.bool,
};
const styles = StyleSheet.create({
inputIcon: {
position: 'absolute',
right: 10,
bottom: 0,
padding: 10
},
errorInput: {
borderLeftWidth: 4,
borderColor: '#FE4F68',
},
});
export default FormRow;
\ No newline at end of file
src/form/FormSearch.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import FormInput from '../form/FormInput';
import PropTypes from 'prop-types';
import Icon from '../icons/Icon';
import ViewPropTypes from '../config/ViewPropTypes';
import { StyleSheet, View} from 'react-native';
const FormSearch = props => {
const {
error,
label,
icon,
search,
search2,
iconName,
iconSearch,
iconName2,
iconSearch2,
containersStyle,
hasError,
} = props;
if (search2) {
containersStyle.backgroundColor= '#E9EFF7';
}
return (
<View style={[styles.searchBar, containersStyle && containersStyle]}>
<FormInput inputStyle={{}} containerStyle={{}} placeholder='Search' search={true} />
{search2 ? <Icon
color='#8795A8'
name={iconName}
size={20}
style={styles.inputIcon}
/> : <Icon
color='white'
name={iconName}
size={20}
style={styles.inputIcon}
/>}
{search2 ? <Icon
color='#8795A8'
name={iconSearch}
size={20}
style={styles.inputSearch}
/> : <Icon
color='white'
name={iconSearch}
size={20}
style={styles.inputSearch}
/>}
</View>
);
};
FormSearch.defaultProps = {
error: false,
search2: false,
};
FormSearch.propTypes = {
containerStyle: ViewPropTypes.style,
error: PropTypes.bool,
label: PropTypes.string,
icon : PropTypes.bool,
iconName: PropTypes.string,
hasError: PropTypes.bool,
};
const styles = StyleSheet.create({
inputIcon: {
position: 'absolute',
right: 10,
bottom: 0,
padding: 10,
},
inputSearch: {
position: 'absolute',
left: 10,
bottom: 0,
padding: 10
},
inputIcon2: {
position: 'absolute',
right: 10,
bottom: 0,
padding: 10
},
inputSearch2: {
position: 'absolute',
left: 10,
bottom: 0,
padding: 10
},
searchBar: {
backgroundColor: '#1259C4',
paddingLeft: 30,
paddingRight: 30,
position: 'absolute',
top: 7,
borderRadius: 4,
width: 350,
height: 40,
paddingTop: 3
},
});
export default FormSearch;
\ No newline at end of file
src/headers/CategoriesHeader.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import Button from '../buttons/Button'
import Icon from '../icons/Icon';
import FormLogin from '../form/FormLogin';
import { StyleSheet, View, Text} from 'react-native';
const CategoriesHeader = props => {
return (
<View>
<View style={styles.header}>
<FormLogin
label=''
placeholder='SEARCH'
/>
<Icon
color='#fff'
name='search'
size={18}
style={styles.searchIcon}
/>
</View>
<View style={styles.navButtons}>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#FFCC54'
name='home'
size={18}
style={styles.icon1}
/><Text style={styles.textSocial}>RENT</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#F65252'
name='shower'
size={18}
style={styles.icon2}
/><Text style={styles.textSocial}>UTILITIES</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#FF844D'
name='shield'
size={18}
style={styles.icon3}
/><Text style={styles.textSocial}>INSURANCE</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#78AEF9'
name='file-text-o'
size={18}
style={styles.icon4}
/><Text style={styles.textSocial}>BILL</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#C075C9'
name='desktop'
size={18}
style={styles.icon5}
/><Text style={styles.textSocial}>ELECTRONIC</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#50C1B6'
name='black-tie'
size={18}
style={styles.icon6}
/><Text style={styles.textSocial}>CLOTHING</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#73CC72'
name='mobile'
size={18}
style={styles.icon7}
/><Text style={styles.textSocial}>GADGET</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#F45D90'
name='usd'
size={18}
style={styles.icon8}
/><Text style={styles.textSocial}>SAVINGS</Text></View>}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
header: {
height: 130,
paddingTop: 50,
},
mainTitle: {
fontSize: 16,
color: '#fff',
fontWeight: 'normal'
},
subTitle: {
fontSize: 12,
color: '#fff',
fontWeight: 'normal'
},
navButtons: {
flexDirection: 'column',
},
buttonStyle: {
flexDirection: 'row',
height: 20,
width: 300,
alignItems: 'center'
},
button: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
paddingTop: 20,
paddingBottom: 18,
width: 300,
height: 55,
marginTop: 20,
backgroundColor: '#fff'
},
textSocial: {
color: '#595F66',
fontWeight: 'normal',
fontSize: 12,
paddingLeft: 20
},
searchIcon: {
position: 'absolute',
right: 20,
bottom: 20,
padding: 10,
backgroundColor: '#6AE1C4',
borderRadius: 22,
},
icon1: {
backgroundColor: 'rgba(255,204,84,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon2: {
backgroundColor: 'rgba(246,82,82,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon3: {
backgroundColor: 'rgba(255,132,77,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon4: {
backgroundColor: 'rgba(120,174,249,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon5: {
backgroundColor: 'rgba(192,117,201,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon6: {
backgroundColor: 'rgba(80,193,182,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon7: {
backgroundColor: 'rgba(115,204,114,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
icon8: {
backgroundColor: 'rgba(244,93,144,0.16)',
borderRadius: 22,
width: 32,
height: 32,
alignItems: 'center',
justifyContent: 'center'
},
});
export default CategoriesHeader;
src/headers/LandingHeader.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, View, Text } from 'react-native';
const LandingHeader = props => {
const {
mainTitle,
} = props;
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.mainTitle}>{mainTitle}</Text>
</View>
</View>
);
};
LandingHeader.defaultProps = {
mainTitle: '',
};
LandingHeader.propTypes = {
mainTitle: PropTypes.string,
valueTitle: PropTypes.string,
};
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1,
display: 'flex',
},
header: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
mainTitle: {
fontSize: 35,
marginTop: 150,
color: '#fff'
},
});
export default LandingHeader;
src/headers/LoginHeader.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import PropTypes from 'prop-types';
import colors from '../config/colors';
import { StyleSheet, View, Text } from 'react-native';
const LoginHeader = props => {
const {
headerTitle,
} = props;
return (
<View style={styles.header}>
<Text style={styles.headerTitle}>{headerTitle}</Text>
</View>
);
};
LoginHeader.defaultProps = {
headerTitle: '',
};
LoginHeader.propTypes = {
headerTitle: PropTypes.string,
};
const styles = StyleSheet.create({
container: {
backgroundColor: colors.secondary,
flex: 1,
padding: 0,
},
header: {
flexDirection: 'column',
paddingLeft: 20,
height: 200,
justifyContent: 'center',
backgroundColor: '#3083FF',
},
headerTitle: {
fontSize: 28,
fontWeight: 'normal',
color: '#fff'
},
});
export default LoginHeader;
\ No newline at end of file
src/headers/MenuHeader.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import PropTypes from 'prop-types';
import Button from '../buttons/Button'
import Icon from '../icons/Icon';
import { StyleSheet, View, Text, Image, } from 'react-native';
const MenuHeader = props => {
const {
mainTitle,
subTitle,
image,
imageSize,
} = props;
return (
<View>
<View style={styles.header}>
<Image
style={[MenuHeader.defaultProps.imageSize, imageSize && imageSize]}
source={image}
/>
<View style={{flexDirection: 'column', margin: 20}}>
<Text style={styles.mainTitle}>{mainTitle}</Text>
<Text style={styles.subTitle}>{subTitle}</Text>
</View>
</View>
<View style={styles.navButtons}>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='bar-chart'
size={18}
/><Text style={styles.textSocial}>DASHBOARD</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='bell-o'
size={18}
/><Text style={styles.textSocial}>NOTIFICATION</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='pie-chart'
size={18}
/><Text style={styles.textSocial}>BUDGET</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='calendar-o'
size={18}
/><Text style={styles.textSocial}>SCHEDULED PAYMENT</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='user-o'
size={18}
/><Text style={styles.textSocial}>ACCOUNTS</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='cog'
size={18}
/><Text style={styles.textSocial}>SETTINGS</Text></View>}
/>
<Button
buttonStyle={styles.button}
title={<View style={styles.buttonStyle}><Icon
color='#fff'
name='sign-out'
size={18}
/><Text style={styles.textSocial}>SIGN OUT</Text></View>}
/>
</View>
</View>
);
};
MenuHeader.defaultProps = {
mainTitle: '',
subTitle: '',
image: require('../images/facebook.png'),
imageSize: {width: 48, height: 48}
};
MenuHeader.propTypes = {
mainTitle: PropTypes.string,
subTitle: PropTypes.string,
valueTitle: PropTypes.string,
};
const styles = StyleSheet.create({
header: {
height: 80,
flexDirection: 'row',
alignItems: 'center',
marginLeft: 30,
marginTop: 60,
},
mainTitle: {
fontSize: 16,
color: '#fff',
fontWeight: '600'
},
subTitle: {
fontSize: 12,
color: '#fff',
fontWeight: '500'
},
navButtons: {
flexDirection: 'column',
},
buttonStyle: {
flexDirection: 'row',
height: 20,
width: 300,
alignItems: 'center'
},
button: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
paddingTop: 20,
paddingBottom: 12,
width: 300,
height: 55,
marginTop: 20,
},
textSocial: {
color: '#fff',
fontWeight: '600',
fontSize: 14,
paddingLeft: 20
},
});
export default MenuHeader;
src/headers/WalletHeader.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import PropTypes from 'prop-types';
import Icon from '../icons/Icon';
import { StyleSheet, View, Text, Image, } from 'react-native';
const WalletHeader = props => {
const {
curentBalance,
income,
expenses,
} = props;
return (
<View style={styles.header}>
<Text style={styles.headerTitle}>Current Balance</Text>
<Text style={styles.headerSubtitle}>{curentBalance}</Text>
<View style={styles.balance}>
<View style={styles.balanceValue}>
<Icon
color='#78AEF9'
height= {26}
width= {26}
name='plus'
size={12}
style={styles.icon1} />
<View style={styles.balanceAmount}>
<Text style={styles.balanceTitle}>Income</Text>
<Text style={styles.balanceSubtitle}>{income}</Text>
</View>
</View>
<View style={styles.balanceValue}>
<Icon
color='#78AEF9'
height= {26}
width= {26}
name='minus'
size={12}
style={styles.icon1} />
<View style={styles.balanceAmount}>
<Text style={styles.balanceTitle}>Expenses</Text>
<Text style={styles.balanceSubtitle}>{expenses}</Text>
</View>
</View>
</View>
</View>
);
};
WalletHeader.defaultProps = {
curentBalance: '',
income: '',
expenses: '',
};
WalletHeader.propTypes = {
curentBalance: PropTypes.string,
income: PropTypes.string,
expenses: PropTypes.string,
};
const styles = StyleSheet.create({
header: {
flexDirection: 'column',
backgroundColor: '#78AEF9',
margin: 20,
borderRadius: 10,
padding: 20,
marginBottom: 30,
shadowColor: '#78AEF9',
shadowOffset: { width: 0, height: 8 },
shadowOpacity: 0.5,
shadowRadius: 15,
},
balance: {
flexDirection: 'row',
height: 40,
},
balanceValue: {
flexDirection: 'row',
flex: 1,
},
balanceAmount: {
flexDirection: 'column',
justifyContent: 'space-around'
},
headerTitle: {
color: '#fff',
fontSize: 14,
fontWeight: 'normal',
},
headerSubtitle: {
color: '#fff',
fontSize: 32,
fontWeight: '300',
marginTop: 10,
marginBottom: 20,
},
balanceTitle: {
color: '#fff',
fontSize: 11,
fontWeight: 'normal',
opacity: 0.8,
},
balanceSubtitle: {
color: '#fff',
fontSize: 14,
fontWeight: 'normal',
},
icon1: {
backgroundColor: 'rgba(255,255,255,0.24)',
borderRadius: 22,
width: 25,
height: 25,
alignItems: 'center',
justifyContent: 'center',
margin: 8,
},
});
export default WalletHeader;
src/helpers/normalizeText.js 0 → 100644
View file @ 1ece3286
//
// Method to normalize size of fonts across devices
//
// Some code taken from https://jsfiddle.net/97ty7yjk/ &
// https://stackoverflow.com/questions/34837342/font-size-on-iphone-6s-plus
//
// author: @xiaoneng
// date: 14/10/2016
// version: 03
//
const React = require('react-native'); // eslint-disable-line no-undef
const { PixelRatio, Dimensions } = React;
const pixelRatio = PixelRatio.get();
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
// -- Testing Only --
// const fontScale = PixelRatio.getFontScale();
// const layoutSize = PixelRatio.getPixelSizeForLayoutSize(14);
// console.log('normalizeText getPR ->', pixelRatio);
// console.log('normalizeText getFS ->', fontScale);
// console.log('normalizeText getDH ->', deviceHeight);
// console.log('normalizeText getDW ->', deviceWidth);
// console.log('normalizeText getPSFLS ->', layoutSize);
const normalize = size => {
if (pixelRatio === 2) {
// iphone 5s and older Androids
if (deviceWidth < 360) {
return size * 0.95;
}
// iphone 5
if (deviceHeight < 667) {
return size;
// iphone 6-6s
} else if (deviceHeight >= 667 && deviceHeight <= 735) {
return size * 1.15;
}
// older phablets
return size * 1.25;
}
if (pixelRatio === 3) {
// catch Android font scaling on small machines
// where pixel ratio / font scale ratio => 3:3
if (deviceWidth <= 360) {
return size;
}
// Catch other weird android width sizings
if (deviceHeight < 667) {
return size * 1.15;
// catch in-between size Androids and scale font up
// a tad but not too much
}
if (deviceHeight >= 667 && deviceHeight <= 735) {
return size * 1.2;
}
// catch larger devices
// ie iphone 6s plus / 7 plus / mi note 等等
return size * 1.27;
}
if (pixelRatio === 3.5) {
// catch Android font scaling on small machines
// where pixel ratio / font scale ratio => 3:3
if (deviceWidth <= 360) {
return size;
// Catch other smaller android height sizings
}
if (deviceHeight < 667) {
return size * 1.20;
// catch in-between size Androids and scale font up
// a tad but not too much
}
if (deviceHeight >= 667 && deviceHeight <= 735) {
return size * 1.25;
}
// catch larger phablet devices
return size * 1.40;
}
// if older device ie pixelRatio !== 2 || 3 || 3.5
return size;
};
module.exports = normalize; // eslint-disable-line no-undef
src/icons/Icon.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import {
Platform,
TouchableHighlight,
View,
StyleSheet,
Text as NativeText,
} from 'react-native';
import iconSet from 'react-native-vector-icons/FontAwesome';
import ViewPropTypes from '../config/ViewPropTypes';
const Icon = props => {
const {
name,
size,
color,
iconStyle,
component,
underlayColor,
reverse,
raised,
containerStyle,
reverseColor,
onPress,
...attributes
} = props;
let Component = View;
if (onPress) {
Component = TouchableHighlight;
}
if (component) {
Component = component;
}
let Icon = iconSet;
return (
<Component
underlayColor={reverse ? color : underlayColor || color}
style={[
(reverse || raised) && styles.button,
(reverse || raised) && {
borderRadius: size + 4,
height: size * 2 + 4,
width: size * 2 + 4,
},
raised && styles.raised,
{
backgroundColor: reverse ? color : raised ? 'white' : 'transparent',
alignItems: 'center',
justifyContent: 'center',
},
containerStyle && containerStyle,
]}
onPress={onPress}
{...attributes}
>
<Icon
style={[{ backgroundColor: 'transparent' }, iconStyle && iconStyle]}
size={size}
name={name}
color={reverse ? reverseColor : color}
/>
</Component>
);
};
Icon.propTypes = {
name: PropTypes.string,
size: PropTypes.number,
color: PropTypes.string,
component: PropTypes.func,
underlayColor: PropTypes.string,
reverse: PropTypes.bool,
raised: PropTypes.bool,
containerStyle: ViewPropTypes.style,
iconStyle: NativeText.propTypes.style,
onPress: PropTypes.func,
reverseColor: PropTypes.string,
};
Icon.defaultProps = {
underlayColor: 'white',
reverse: false,
raised: false,
size: 24,
color: 'black',
reverseColor: 'white',
};
const styles = StyleSheet.create({
button: {
margin: 7,
},
raised: {
...Platform.select({
ios: {
shadowColor: 'rgba(0,0,0, .4)',
shadowOffset: { height: 1, width: 1 },
shadowOpacity: 1,
shadowRadius: 1,
},
android: {
elevation: 2,
},
}),
},
});
export default Icon;
src/index.js 0 → 100755
View file @ 1ece3286
// Core
import Button from './buttons/Button';
import CalendarItem from './calendar/CalendarItem';
import Card from './card/Card';
import GainLine from './charts/GainLine';
import CheckBox from './checkbox/Checkbox';
import BackgroundImage from './config/BackgroundImage';
import colors from './config/colors';
import fonts from './config/fonts';
import ViewPropTypes from './config/ViewPropTypes';
import Divider from './divider/Divider';
import FormInput from './form/FormInput';
import FormLabel from './form/FormLabel';
import FormLogin from './form/FormLogin';
import FormRow from './form/FormRow';
import FormSearch from './form/FormSearch';
import CategoriesHeader from './headers/CategoriesHeader';
import LandingHeader from './headers/LandingHeader';
import LoginHeader from './headers/LoginHeader';
import MenuHeader from './headers/MenuHeader';
import WalletHeader from './headers/WalletHeader';
import Icon from './icons/Icon';
import List from './list/List';
import ListItem from './list/ListItem';
import ListItemAction from './list/ListItemAction';
import DefaultMarker from './slider/DefaultMarker';
import MultiSlider from './slider/MultiSlider';
import Slider from './slider/Slider';
import TabNavigator from './tabs/TabNavigator'
import Text from './text/Text';
export {
Button,
CalendarItem,
Card,
GainLine,
CheckBox,
BackgroundImage,
colors,
fonts,
ViewPropTypes,
Divider,
FormInput,
FormRow,
FormLabel,
FormLogin,
FormSearch,
CategoriesHeader,
LandingHeader,
LoginHeader,
MenuHeader,
WalletHeader,
Icon,
List,
ListItem,
ListItemAction,
TabNavigator,
Text,
Slider,
MultiSlider,
DefaultMarker
};
src/list/List.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import { View, StyleSheet } from 'react-native';
import colors from '../config/colors';
import ViewPropTypes from '../config/ViewPropTypes';
const List = props => {
const { children, containerStyle, ...attributes } = props;
return (
<View
style={[styles.listContainer, containerStyle && containerStyle]}
{...attributes}
>
{children}
</View>
);
};
List.propTypes = {
children: PropTypes.any,
containerStyle: ViewPropTypes.style,
};
const styles = StyleSheet.create({
listContainer: {
marginTop: 0,
borderTopWidth: 1,
borderColor: colors.white,
backgroundColor: colors.white,
},
});
export default List;
src/list/ListItem.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import {
View,
StyleSheet,
TouchableHighlight,
TouchableOpacity,
Platform,
Switch,
TextInput,
} from 'react-native';
// import Avatar from '../avatar/Avatar';
// import Badge from '../badge/badge';
import Icon from '../icons/Icon';
import Text from '../text/Text';
import colors from '../config/colors';
import fonts from '../config/fonts';
import normalize from '../helpers/normalizeText';
import ViewPropTypes from '../config/ViewPropTypes';
const ListItem = props => {
const {
onPress,
title,
leftIcon,
leftIconStyle,
rightSubtitle,
rightIcon,
leftIconOnPress,
leftIconOnLongPress,
leftIconUnderlayColor,
leftIconContainerStyle,
transaction,
leftIconContainerColor,
avatarStyle,
avatarContainerStyle,
avatarOverlayContainerStyle,
underlayColor,
subtitle,
subtitleStyle,
containerStyle,
leftWrapperStyle,
wrapperStyle,
titleNumberOfLines,
titleStyle,
titleContainerStyle,
hideChevron,
chevronColor,
roundAvatar,
component,
fontFamily,
rightTitle,
rightTitleContainerStyle,
rightTitleStyle,
rightTitleNumberOfLines,
subtitleContainerStyle,
subtitleNumberOfLines,
badge,
label,
onLongPress,
switchButton,
onSwitch,
switchDisabled,
switchOnTintColor,
switchThumbTintColor,
switchTintColor,
switched,
textInput,
textInputAutoCapitalize,
textInputAutoCorrect,
textInputAutoFocus,
textInputEditable,
textInputKeyboardType,
textInputMaxLength,
textInputMultiline,
textInputOnChangeText,
textInputOnFocus,
textInputOnBlur,
textInputSelectTextOnFocus,
textInputReturnKeyType,
textInputValue,
textInputSecure,
textInputStyle,
billing,
transactions,
transactions2,
wallet1,
wallet2,
wallet3,
wallet4,
payment,
textInputContainerStyle,
textInputPlaceholder,
onPressRightIcon,
...attributes
} = props;
let { avatar } = props;
let Component = onPress || onLongPress ? TouchableHighlight : View;
let LeftIconWrapper = leftIconOnPress || leftIconOnLongPress
? TouchableHighlight
: View;
if (component) {
Component = component;
}
if (typeof avatar === 'string') {
avatar = { uri: avatar };
}
if(transaction) {
rightTitleContainerStyle.position = 'absolute';
rightTitleContainerStyle.right = 5;
rightTitleContainerStyle.top = 0;
}
if (leftIconContainerColor) {
iconBackgroundColor = { backgroundColor: leftIconContainerColor }
}
if(transactions) {
leftIcon.color ='#FFCC54'
}
if(transactions2) {
leftIcon.color ='green'
}
if(billing) {
leftIcon.size = 16;
leftIcon.color = colors.black;
}
if(wallet1) {
leftIcon.color ='#FF844D';
}
if(wallet2) {
leftIcon.color ='#C075C9'
}
if(wallet3) {
leftIcon.color ='#50C1B6'
}
if(wallet4) {
leftIcon.color ='#73CC72'
}
let rightTitleView = false;
if (rightTitle && rightTitle !== '') {
if (typeof rightTitle === 'object')
{
rightTitleView =
<View style={[styles.rightTitleContainer, rightTitleContainerStyle]}>
{rightTitle}
</View>
} else if (!textInput) {
rightTitleView =
<View style={[styles.rightTitleContainer, rightTitleContainerStyle]}>
<Text
numberOfLines={rightTitleNumberOfLines}
style={[styles.rightTitleStyle, rightTitleStyle]}
>
{rightTitle}
</Text>
</View>
}
}
return (
<Component
onLongPress={onLongPress}
onPress={onPress}
underlayColor={underlayColor}
style={[styles.container, containerStyle && containerStyle,]}
{...attributes}
>
<View style={[styles.leftWrapper, leftWrapperStyle && leftWrapperStyle]}>
{React.isValidElement(leftIcon)
? leftIcon
: leftIcon &&
leftIcon.name &&
<LeftIconWrapper
onLongPress={leftIconOnLongPress}
onPress={leftIconOnPress}
underlayColor={leftIconUnderlayColor}
style={[
styles.iconStyle,
leftIconContainerStyle && leftIconContainerStyle,
iconBackgroundColor && iconBackgroundColor,
]}
>
<View>
<Icon
type={leftIcon.type}
iconStyle={[styles.icon, leftIcon.style && leftIcon.style]}
name={leftIcon.name}
color={leftIcon.color || colors.grey3}
size={leftIcon.size || 15}
/>
</View>
</LeftIconWrapper>}
{avatar &&
<View style={styles.avatar}>
{React.isValidElement(avatar)
? avatar
: <Avatar
avatarStyle={avatarStyle && avatarStyle}
containerStyle={avatarContainerStyle && avatarContainerStyle}
overlayContainerStyle={
avatarOverlayContainerStyle && avatarOverlayContainerStyle
}
rounded={roundAvatar}
source={avatar}
/>}
</View>}
</View>
<View style={[styles.wrapper, wrapperStyle && wrapperStyle]}>
<View style={styles.titleSubtitleContainer}>
<View style={titleContainerStyle}>
{title !== null &&
(typeof title === 'string' || typeof title === 'number')
? <Text
numberOfLines={titleNumberOfLines}
style={[
styles.title,
!leftIcon && { marginLeft: 10 },
titleStyle && titleStyle,
fontFamily && { fontFamily },
]}
>
{title}
</Text>
: <View>
{title}
</View>}
</View>
<View style={subtitleContainerStyle}>
{subtitle !== null &&
(typeof subtitle === 'string' || typeof subtitle === 'number')
? <Text
numberOfLines={subtitleNumberOfLines}
style={[
styles.subtitle,
!leftIcon && { marginLeft: 10 },
subtitleStyle && subtitleStyle,
fontFamily && { fontFamily },
]}
>
{subtitle}
</Text>
: <View>
{subtitle}
</View>}
</View>
</View>
{rightTitleView}
{rightSubtitle ? <View style={{position: 'relative', top: 10}}><Text style={{color: colors.grey0, opacity: 0.7}}>{rightSubtitle}</Text></View> : null}
{textInput &&
<View style={[styles.rightTitleContainer, textInputContainerStyle]}>
<TextInput
style={[styles.textInputStyle, textInputStyle]}
defaultValue={rightTitle}
value={textInputValue}
placeholder={textInputPlaceholder}
autoCapitalize={textInputAutoCapitalize}
autoCorrect={textInputAutoCorrect}
autoFocus={textInputAutoFocus}
editable={textInputEditable}
keyboardType={textInputKeyboardType}
maxLength={textInputMaxLength}
multiline={textInputMultiline}
onChangeText={textInputOnChangeText}
onFocus={textInputOnFocus}
onBlur={textInputOnBlur}
secureTextEntry={textInputSecure}
selectTextOnFocus={textInputSelectTextOnFocus}
returnKeyType={textInputReturnKeyType}
/>
</View>}
{badge && !rightTitle && <Badge {...badge} />}
{!hideChevron &&
(React.isValidElement(rightIcon)
? rightIcon
: <TouchableOpacity
onPress={onPressRightIcon}
disabled={!onPressRightIcon}
style={styles.chevronContainer}
>
<Icon
type={rightIcon.type}
iconStyle={rightIcon.style}
size={28}
name={rightIcon.name || 'chevron-right'}
color={rightIcon.color || chevronColor}
/>
</TouchableOpacity>)}
{switchButton &&
hideChevron &&
<View style={styles.switchContainer}>
<Switch
onValueChange={onSwitch}
disabled={switchDisabled}
onTintColor={switchOnTintColor}
thumbTintColor={switchThumbTintColor}
tintColor={switchTintColor}
value={switched}
/>
</View>}
{label && label}
</View>
</Component>
);
};
ListItem.defaultProps = {
underlayColor: 'white',
leftIconUnderlayColor: 'white',
chevronColor: colors.grey4,
rightIcon: { name: 'chevron-right' },
hideChevron: true,
roundAvatar: false,
switchButton: false,
textInputEditable: true,
titleNumberOfLines: 1,
subtitleNumberOfLines: 1,
rightTitleNumberOfLines: 1,
};
ListItem.propTypes = {
title: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.object,
]),
avatar: PropTypes.any,
icon: PropTypes.any,
onPress: PropTypes.func,
rightIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.object]),
underlayColor: PropTypes.string,
subtitle: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.object,
]),
subtitleStyle: PropTypes.any,
subtitleNumberOfLines: PropTypes.number,
containerStyle: PropTypes.any,
leftWrapperStyle: PropTypes.any,
wrapperStyle: PropTypes.any,
titleStyle: PropTypes.any,
titleContainerStyle: PropTypes.any,
titleNumberOfLines: PropTypes.number,
hideChevron: PropTypes.bool,
chevronColor: PropTypes.string,
roundAvatar: PropTypes.bool,
badge: PropTypes.any,
switchButton: PropTypes.bool,
onSwitch: PropTypes.func,
switchDisabled: PropTypes.bool,
switchOnTintColor: PropTypes.string,
switchThumbTintColor: PropTypes.string,
switchTintColor: PropTypes.string,
switched: PropTypes.bool,
textInput: PropTypes.bool,
textInputAutoCapitalize: PropTypes.bool,
textInputAutoCorrect: PropTypes.bool,
textInputAutoFocus: PropTypes.bool,
textInputEditable: PropTypes.bool,
textInputKeyboardType: PropTypes.oneOf([
'default',
'email-address',
'numeric',
'phone-pad',
'ascii-capable',
'numbers-and-punctuation',
'url',
'number-pad',
'name-phone-pad',
'decimal-pad',
'twitter',
'web-search',
]),
textInputMaxLength: PropTypes.number,
textInputMultiline: PropTypes.bool,
textInputOnChangeText: PropTypes.func,
textInputOnFocus: PropTypes.func,
textInputOnBlur: PropTypes.func,
textInputSelectTextOnFocus: PropTypes.bool,
textInputReturnKeyType: PropTypes.string,
textInputValue: PropTypes.string,
textInputSecure: PropTypes.bool,
textInputStyle: PropTypes.any,
textInputContainerStyle: PropTypes.any,
textInputPlaceholder: PropTypes.string,
component: PropTypes.any,
fontFamily: PropTypes.string,
rightTitle: PropTypes.any,
rightTitleContainerStyle: ViewPropTypes.style,
rightTitleStyle: Text.propTypes.style,
rightTitleNumberOfLines: PropTypes.number,
subtitleContainerStyle: ViewPropTypes.style,
label: PropTypes.any,
onLongPress: PropTypes.func,
leftIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.object]),
leftIconOnPress: PropTypes.func,
leftIconOnLongPress: PropTypes.func,
leftIconUnderlayColor: PropTypes.string,
leftIconContainerStyle: ViewPropTypes.style,
leftIconContainerColor: PropTypes.string,
avatarStyle: ViewPropTypes.style,
avatarContainerStyle: ViewPropTypes.style,
avatarOverlayContainerStyle: ViewPropTypes.style,
onPressRightIcon: PropTypes.func,
};
const stylesVars = {
paddingBottom: 18,
typePadding: 15,
typeSize: { width: 30, height: 30 },
};
const styles = StyleSheet.create({
// main container
container: {
paddingTop: 29,
backgroundColor: 'transparent',
flexDirection: 'row',
alignItems: 'center',
},
// container of icon/avatar
leftWrapper: {
paddingLeft: stylesVars.typePadding,
paddingRight: stylesVars.typePadding,
paddingBottom: stylesVars.paddingBottom,
},
// container of title/subtitle + rightcontainer
wrapper: {
flexDirection: 'row',
alignItems: 'center',
flex: 1,
borderBottomColor: colors.border,
borderBottomWidth: 1,
paddingBottom: stylesVars.paddingBottom,
paddingRight: 0,
marginRight: 30,
},
transactionIcon: {
color: 'red'
},
// container for the title + subtitle
titleSubtitleContainer: {
justifyContent: 'center',
flex: 1,
},
// this is one case for right container
rightTitleContainer: {
flex: 1,
alignItems: 'flex-end',
justifyContent: 'center',
},
avatar: {
width: stylesVars.typeSize.width,
height: stylesVars.typeSize.height,
},
// icon style
iconStyle: {
justifyContent: 'center',
alignItems: 'center',
// backgroundColor: colors.green,
borderRadius: 100,
width: stylesVars.typeSize.width,
height: stylesVars.typeSize.height,
},
// the actual icon element
// icon: {
// color: colors.white,
// },
// the title of the item
title: {
fontSize: normalize(12),
color: '#8D959D',
...Platform.select({
ios: {
fontWeight: 'normal',
},
android: {
...fonts.android.bold,
},
}),
},
// subtitle if any
subtitle: {
color: colors.grey0,
fontSize: normalize(10),
marginTop: 2,
opacity: 0.7,
...Platform.select({
ios: {
fontWeight: 'normal',
},
android: {
...fonts.android.normal,
},
}),
},
// this is one case for right container
chevronContainer: {
flex: 0.15,
alignItems: 'flex-end',
justifyContent: 'center',
},
// this is one case for right container
switchContainer: {
flex: 0.15,
alignItems: 'flex-end',
justifyContent: 'center',
marginRight: 5,
},
// this is the style for the right title
rightTitleStyle: {
marginRight: 5,
fontSize: normalize(17),
color: colors.black,
},
textInputStyle: {
height: 20,
textAlign: 'right',
},
});
export default ListItem;
src/list/ListItemAction.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import {
View,
StyleSheet,
TouchableHighlight,
TouchableOpacity,
Platform,
Switch,
Image,
TextInput,
} from 'react-native';
// import Avatar from '../avatar/Avatar';
// import Badge from '../badge/badge';
import Icon from '../icons/Icon';
import Text from '../text/Text';
import colors from '../config/colors';
import fonts from '../config/fonts';
import normalize from '../helpers/normalizeText';
import ViewPropTypes from '../config/ViewPropTypes';
const ListItemAction = props => {
const {
onPress,
title,
leftIcon,
rightIcon,
leftIconOnPress,
leftIconOnLongPress,
leftIconUnderlayColor,
leftIconContainerStyle,
leftIconContainerColor,
avatarStyle,
avatarContainerStyle,
avatarOverlayContainerStyle,
underlayColor,
subtitle,
subtitleStyle,
containerStyle,
leftWrapperStyle,
wrapperStyle,
titleNumberOfLines,
titleStyle,
titleContainerStyle,
hideChevron,
chevronColor,
roundAvatar,
component,
fontFamily,
image,
rightTitle,
rightTitleContainerStyle,
rightTitleStyle,
rightTitleNumberOfLines,
subtitleContainerStyle,
subtitleNumberOfLines,
badge,
label,
onLongPress,
switchButton,
onSwitch,
switchDisabled,
src,
switchOnTintColor,
switchThumbTintColor,
switchTintColor,
switched,
textInput,
textInputAutoCapitalize,
textInputAutoCorrect,
textInputAutoFocus,
textInputEditable,
textInputKeyboardType,
textInputMaxLength,
textInputMultiline,
textInputOnChangeText,
textInputOnFocus,
textInputOnBlur,
textInputSelectTextOnFocus,
textInputReturnKeyType,
textInputValue,
textInputSecure,
textInputStyle,
textInputContainerStyle,
textInputPlaceholder,
onPressRightIcon,
...attributes
} = props;
let { avatar } = props;
let Component = onPress || onLongPress ? TouchableHighlight : View;
let LeftIconWrapper = leftIconOnPress || leftIconOnLongPress
? TouchableHighlight
: View;
if (component) {
Component = component;
}
if (typeof avatar === 'string') {
avatar = { uri: avatar };
}
if (leftIconContainerColor) {
iconBackgroundColor = { backgroundColor: leftIconContainerColor }
}
return (
<Component
onLongPress={onLongPress}
onPress={onPress}
underlayColor={underlayColor}
style={[styles.container, containerStyle && containerStyle]}
{...attributes}
>
<View style={[styles.leftWrapper, leftWrapperStyle && leftWrapperStyle]}>
{React.isValidElement(leftIcon)
? leftIcon
: leftIcon &&
leftIcon.name &&
<LeftIconWrapper
onLongPress={leftIconOnLongPress}
onPress={leftIconOnPress}
underlayColor={leftIconUnderlayColor}
style={[
styles.iconStyle,
leftIconContainerStyle && leftIconContainerStyle,
iconBackgroundColor && iconBackgroundColor,
]}
>
<View>
<Icon
type={leftIcon.type}
iconStyle={[styles.icon, leftIcon.style && leftIcon.style]}
name={leftIcon.name}
color={leftIcon.color || colors.grey4}
size={leftIcon.size || 15}
/>
</View>
</LeftIconWrapper>}
{avatar &&
<View style={styles.avatar}>
{React.isValidElement(avatar)
? avatar
: <Avatar
avatarStyle={avatarStyle && avatarStyle}
containerStyle={avatarContainerStyle && avatarContainerStyle}
overlayContainerStyle={
avatarOverlayContainerStyle && avatarOverlayContainerStyle
}
rounded={roundAvatar}
source={avatar}
/>}
</View>}
</View>
<View style={[styles.wrapper, wrapperStyle && wrapperStyle]}>
<View style={styles.titleSubtitleContainer}>
<View style={titleContainerStyle}>
{title !== null &&
(typeof title === 'string' || typeof title === 'number')
? <Text
numberOfLines={titleNumberOfLines}
style={[
styles.title,
!leftIcon && { marginLeft: 10 },
titleStyle && titleStyle,
fontFamily && { fontFamily },
]}
>
{title}
</Text>
: <View>
{title}
</View>}
</View>
<View style={subtitleContainerStyle}>
{subtitle !== null &&
(typeof subtitle === 'string' || typeof subtitle === 'number')
? <Text
numberOfLines={subtitleNumberOfLines}
style={[
styles.subtitle,
!leftIcon && { marginLeft: 0 },
subtitleStyle && subtitleStyle,
fontFamily && { fontFamily },
]}
>
{subtitle}
</Text>
: <View>
{subtitle}
</View>}
</View>
</View>
{rightTitle &&
rightTitle !== '' &&
!textInput &&
<View style={[styles.rightTitleContainer, rightTitleContainerStyle]}>
<Text
numberOfLines={rightTitleNumberOfLines}
style={[styles.rightTitleStyle, rightTitleStyle]}
>
{rightTitle}
</Text>
</View>}
{!image ? <View style={[styles.rightTitleContainer, textInputContainerStyle, styles.noImage]}>
<TextInput
style={[styles.textInputStyle, textInputStyle]}
defaultValue={rightTitle}
value={textInputValue}
placeholder={textInputPlaceholder}
autoCapitalize={textInputAutoCapitalize}
autoCorrect={textInputAutoCorrect}
autoFocus={textInputAutoFocus}
editable={textInputEditable}
keyboardType={textInputKeyboardType}
maxLength={textInputMaxLength}
multiline={textInputMultiline}
onChangeText={textInputOnChangeText}
onFocus={textInputOnFocus}
onBlur={textInputOnBlur}
secureTextEntry={textInputSecure}
selectTextOnFocus={textInputSelectTextOnFocus}
returnKeyType={textInputReturnKeyType}
/>
</View> : <View style={[styles.rightTitleContainer]}><Image
style={{width: 50, height: 30}}
source={require('../images/mastercard.png')}
/></View> }
<Icon
color={colors.link}
name='chevron-right'
size={13}
marginRight= {8}
marginLeft= {15}
/>
{badge && !rightTitle && <Badge {...badge} />}
{!hideChevron &&
(React.isValidElement(rightIcon)
? rightIcon
: <TouchableOpacity
onPress={onPressRightIcon}
disabled={!onPressRightIcon}
style={styles.chevronContainer}
>
<Icon
type={rightIcon.type}
iconStyle={rightIcon.style}
size={28}
name={rightIcon.name || 'chevron-right'}
color={rightIcon.color || chevronColor}
/>
</TouchableOpacity>)}
{switchButton &&
hideChevron &&
<View style={styles.switchContainer}>
<Switch
onValueChange={onSwitch}
disabled={switchDisabled}
onTintColor={switchOnTintColor}
thumbTintColor={switchThumbTintColor}
tintColor={switchTintColor}
value={switched}
/>
</View>}
{label && label}
</View>
</Component>
);
};
ListItemAction.defaultProps = {
underlayColor: 'white',
leftIconUnderlayColor: 'white',
chevronColor: colors.grey4,
rightIcon: { name: 'chevron-right' },
hideChevron: true,
roundAvatar: false,
switchButton: false,
textInputEditable: true,
titleNumberOfLines: 1,
subtitleNumberOfLines: 1,
rightTitleNumberOfLines: 2,
};
ListItemAction.propTypes = {
title: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.object,
]),
avatar: PropTypes.any,
icon: PropTypes.any,
onPress: PropTypes.func,
rightIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.object]),
underlayColor: PropTypes.string,
subtitle: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.object,
]),
subtitleStyle: PropTypes.any,
subtitleNumberOfLines: PropTypes.number,
containerStyle: PropTypes.any,
leftWrapperStyle: PropTypes.any,
wrapperStyle: PropTypes.any,
titleStyle: PropTypes.any,
titleContainerStyle: PropTypes.any,
titleNumberOfLines: PropTypes.number,
hideChevron: PropTypes.bool,
chevronColor: PropTypes.string,
roundAvatar: PropTypes.bool,
badge: PropTypes.any,
switchButton: PropTypes.bool,
onSwitch: PropTypes.func,
switchDisabled: PropTypes.bool,
switchOnTintColor: PropTypes.string,
switchThumbTintColor: PropTypes.string,
switchTintColor: PropTypes.string,
switched: PropTypes.bool,
textInput: PropTypes.bool,
textInputAutoCapitalize: PropTypes.bool,
textInputAutoCorrect: PropTypes.bool,
textInputAutoFocus: PropTypes.bool,
textInputEditable: PropTypes.bool,
textInputKeyboardType: PropTypes.oneOf([
'default',
'email-address',
'numeric',
'phone-pad',
'ascii-capable',
'numbers-and-punctuation',
'url',
'number-pad',
'name-phone-pad',
'decimal-pad',
'twitter',
'web-search',
]),
textInputMaxLength: PropTypes.number,
textInputMultiline: PropTypes.bool,
textInputOnChangeText: PropTypes.func,
textInputOnFocus: PropTypes.func,
textInputOnBlur: PropTypes.func,
textInputSelectTextOnFocus: PropTypes.bool,
textInputReturnKeyType: PropTypes.string,
textInputValue: PropTypes.string,
textInputSecure: PropTypes.bool,
textInputStyle: PropTypes.any,
textInputContainerStyle: PropTypes.any,
textInputPlaceholder: PropTypes.string,
component: PropTypes.any,
fontFamily: PropTypes.string,
rightTitle: PropTypes.any,
rightTitleContainerStyle: ViewPropTypes.style,
rightTitleStyle: Text.propTypes.style,
rightTitleNumberOfLines: PropTypes.number,
subtitleContainerStyle: ViewPropTypes.style,
label: PropTypes.any,
onLongPress: PropTypes.func,
leftIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.object]),
leftIconOnPress: PropTypes.func,
leftIconOnLongPress: PropTypes.func,
leftIconUnderlayColor: PropTypes.string,
leftIconContainerStyle: ViewPropTypes.style,
leftIconContainerColor: PropTypes.string,
avatarStyle: ViewPropTypes.style,
avatarContainerStyle: ViewPropTypes.style,
avatarOverlayContainerStyle: ViewPropTypes.style,
onPressRightIcon: PropTypes.func,
};
const stylesVars = {
paddingBottom: 24,
typePadding: 10,
typeSize: { width: 30, height: 30 },
};
const styles = StyleSheet.create({
// main container
container: {
paddingTop: 24,
backgroundColor: 'transparent',
flexDirection: 'row',
alignItems: 'center',
},
// container of icon/avatar
leftWrapper: {
paddingLeft: stylesVars.typePadding,
paddingRight: stylesVars.typePadding,
paddingBottom: stylesVars.paddingBottom,
},
// container of title/subtitle + rightcontainer
wrapper: {
flexDirection: 'row',
alignItems: 'center',
flex: 1,
borderBottomColor: colors.border,
borderBottomWidth: 1,
paddingBottom: stylesVars.paddingBottom,
paddingRight: 10,
},
// container for the title + subtitle
titleSubtitleContainer: {
justifyContent: 'center',
flex: 0.4,
},
// this is one case for right container
rightTitleContainer: {
flex: 1,
alignItems: 'flex-end',
justifyContent: 'center',
},
avatar: {
width: stylesVars.typeSize.width,
height: stylesVars.typeSize.height,
},
noImage: {
display: 'none'
},
// icon style
iconStyle: {
justifyContent: 'center',
alignItems: 'center',
// backgroundColor: colors.green,
borderRadius: 100,
width: stylesVars.typeSize.width,
height: stylesVars.typeSize.height,
},
// the actual icon element
icon: {
color: colors.white,
},
// the title of the item
title: {
fontSize: normalize(13),
color: colors.black,
...Platform.select({
ios: {
fontWeight: '500',
},
android: {
...fonts.android.bold,
},
}),
},
// subtitle if any
subtitle: {
color: colors.grey0,
fontSize: normalize(10),
marginTop: 0,
opacity: 0.7,
...Platform.select({
ios: {
fontWeight: 'normal',
},
android: {
...fonts.android.normal,
},
}),
},
// this is one case for right container
chevronContainer: {
flex: 0.15,
alignItems: 'flex-end',
justifyContent: 'center',
},
// this is one case for right container
switchContainer: {
flex: 0.15,
alignItems: 'flex-end',
justifyContent: 'center',
marginRight: 5,
},
// this is the style for the right title
rightTitleStyle: {
marginRight: 5,
fontSize: normalize(14),
color: colors.black,
textAlign: 'right',
},
textInputStyle: {
height: 20,
textAlign: 'right',
},
});
export default ListItemAction;
src/save 0 → 100644
View file @ 1ece3286
import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
// import { Button } from 'react-pocket';
import Button from './src/buttons/Button'
export default class App extends React.Component {
render() {
return (
<ScrollView>
<View style={styles.hero}>
<Text style={styles.heading}>Button</Text>
</View>
<Button
buttonStyle={styles.button}
title="Button"
/>
<Button
buttonStyle={styles.button}
title="Button"
secondary
/>
<Button
buttonStyle={styles.button}
title="Button"
secondary2
/>
<Button
buttonStyle={styles.button}
title="Button"
secondary3
/>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
heading: {
color: 'white',
marginTop: 10,
fontSize: 22,
},
hero: {
justifyContent: 'center',
alignItems: 'center',
padding: 40,
backgroundColor: '#fff',
},
titleContainer: {},
button: {
marginTop: 15,
},
title: {
textAlign: 'center',
color: '#5e6977'
},
socialRow: {
flexDirection: 'row',
justifyContent: 'space-around',
},
});
src/slider/DefaultMarker.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, Platform, TouchableHighlight } from 'react-native';
const ViewPropTypes = require('react-native').ViewPropTypes || View.propTypes;
export default class DefaultMarker extends React.Component {
static propTypes = {
pressed: PropTypes.bool,
pressedMarkerStyle: ViewPropTypes.style,
markerStyle: ViewPropTypes.style,
enabled: PropTypes.bool,
valuePrefix: PropTypes.string,
valueSuffix: PropTypes.string,
};
render() {
return (
<TouchableHighlight>
<View
style={this.props.enabled ? [
styles.markerStyle,
this.props.markerStyle,
this.props.pressed && styles.pressedMarkerStyle,
this.props.pressed && this.props.pressedMarkerStyle,
] : [styles.markerStyle, styles.disabled]}
/>
</TouchableHighlight>
);
}
}
const styles = StyleSheet.create({
markerStyle: {
...Platform.select({
ios: {
height: 20,
width: 20,
borderRadius: 10,
backgroundColor: '#FFF',
shadowColor: 'rgba(0,0,0,0.06)',
shadowOffset: {
width: 1,
height: 2
},
shadowRadius: 1,
shadowOpacity: 1,
},
android: {
height: 20,
width: 20,
borderRadius: 10,
backgroundColor: '#FFF',
},
}),
},
pressedMarkerStyle: {
...Platform.select({
ios: {},
android: {
height: 20,
width: 20,
borderRadius: 20,
},
}),
},
disabled: {
opacity: 0.4,
},
});
\ No newline at end of file
src/slider/MultiSlider.js 0 → 100644
View file @ 1ece3286
import React from 'react';
import PropTypes from 'prop-types';
import {
StyleSheet,
PanResponder,
View,
Platform,
} from 'react-native';
import colors from '../config/colors';
import DefaultMarker from './DefaultMarker';
import { createArray, valueToPosition, positionToValue } from './converters';
const ViewPropTypes = require('react-native').ViewPropTypes || View.propTypes;
export default class MultiSlider extends React.Component {
static propTypes = {
values: PropTypes.arrayOf(PropTypes.number),
onValuesChangeStart: PropTypes.func,
onValuesChange: PropTypes.func,
onValuesChangeFinish: PropTypes.func,
touchDimensions: PropTypes.object,
customMarker: PropTypes.func,
min: PropTypes.number,
max: PropTypes.number,
step: PropTypes.number,
optionsArray: PropTypes.array,
containerStyle: ViewPropTypes.style,
trackStyle: ViewPropTypes.style,
markerContainerStyle: ViewPropTypes.style,
markerStyle: ViewPropTypes.style,
pressedMarkerStyle: ViewPropTypes.style,
valuePrefix: PropTypes.string,
valueSuffix: PropTypes.string,
enabledOne: PropTypes.bool,
enabledTwo: PropTypes.bool,
onToggleOne: PropTypes.func,
onToggleTwo: PropTypes.func,
allowOverlap: PropTypes.bool,
snapped: PropTypes.bool,
markerOffsetX: PropTypes.number,
markerOffsetY: PropTypes.number,
};
static defaultProps = {
values: [0],
onValuesChangeStart: () => {
},
onValuesChange: values => {
},
onValuesChangeFinish: values => {
},
step: 1,
min: 0,
max: 10,
touchDimensions: {
height: 50,
width: 50,
borderRadius: 15,
slipDisplacement: 200,
},
customMarker: DefaultMarker,
markerOffsetX: 0,
markerOffsetY: 0,
sliderLength: 0,
onToggleOne: undefined,
onToggleTwo: undefined,
enabledOne: true,
enabledTwo: true,
allowOverlap: false,
snapped: false,
};
constructor(props) {
super(props);
this.init = false;
this.state = {
pressedOne: true,
valueOne: this.props.values[0],
valueTwo: this.props.values[1],
pastOne: null,
pastTwo: null,
positionOne: null,
positionTwo: null,
sliderLength: this.props.sliderLength,
allMeasured: false,
twoMarkers: this.props.values.length == 2,
};
}
componentWillMount() {
var customPanResponder = (start, move, end) => {
return PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => start(),
onPanResponderMove: (evt, gestureState) => move(gestureState),
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => end(gestureState),
onPanResponderTerminate: (evt, gestureState) => end(gestureState),
onShouldBlockNativeResponder: (evt, gestureState) => true,
});
};
this._panResponderOne = customPanResponder(
this.startOne,
this.moveOne,
this.endOne,
);
this._panResponderTwo = customPanResponder(
this.startTwo,
this.moveTwo,
this.endTwo,
);
}
componentWillReceiveProps(nextProps) {
if (this.state.onePressed || this.state.twoPressed) {
return;
}
let position, nextState = {};
if (
nextProps.values[0] !== this.props.values[0]
) {
position = valueToPosition(
nextProps.values[0],
this.optionsArray,
nextProps.sliderLength,
);
nextState.valueOne = nextProps.values[0];
nextState.pastOne = position;
nextState.positionOne = position;
}
if (
nextProps.values[1] !== this.props.values[1]
) {
position = valueToPosition(
nextProps.values[1],
this.optionsArray,
nextProps.sliderLength,
);
nextState.valueTwo = nextProps.values[1];
nextState.pastTwo = position;
nextState.positionTwo = position;
}
if (nextState != {}) {
this.setState(nextState);
}
}
startOne = () => {
if (this.props.enabledOne) {
this.props.onValuesChangeStart();
this.setState({
onePressed: !this.state.onePressed,
});
}
};
startTwo = () => {
if (this.props.enabledTwo) {
this.props.onValuesChangeStart();
this.setState({
twoPressed: !this.state.twoPressed,
});
}
};
moveOne = gestureState => {
if (!this.props.enabledOne) {
return;
}
let pastOne = (this.state.pastOne !== null) ? this.state.pastOne: this.pastOne;
let positionTwo = (this.state.positionTwo !== null) ? this.state.positionTwo : this.positionTwo;
var unconfined = gestureState.dx + pastOne;
var bottom = 0;
var trueTop = positionTwo - (this.props.allowOverlap ? 0 : this.stepLength);
var top = trueTop === 0 ? 0 : trueTop || this.state.sliderLength;
var confined = unconfined < bottom
? bottom
: unconfined > top ? top : unconfined;
var slipDisplacement = this.props.touchDimensions.slipDisplacement;
if (Math.abs(gestureState.dy) < slipDisplacement || !slipDisplacement) {
var value = positionToValue(
confined,
this.optionsArray,
this.state.sliderLength,
);
var snapped = valueToPosition(
value,
this.optionsArray,
this.state.sliderLength,
);
this.setState({
positionOne: this.props.snapped ? snapped : confined,
});
if (value !== this.state.valueOne) {
this.setState(
{
valueOne: value,
},
() => {
var change = [this.state.valueOne];
if (this.state.valueTwo) {
change.push(this.state.valueTwo);
}
this.props.onValuesChange(change);
},
);
}
}
};
moveTwo = gestureState => {
if (!this.props.enabledTwo) {
return;
}
let positionOne = (this.state.positionOne !== null) ? this.state.positionOne : this.positionOne;
let pastTwo = (this.state.pastTwo !== null) ? this.state.pastTwo : this.pastTwo;
var unconfined = gestureState.dx + pastTwo;
var bottom = positionOne + (this.props.allowOverlap ? 0 : this.stepLength);
var top = this.state.sliderLength;
var confined = unconfined < bottom
? bottom
: unconfined > top ? top : unconfined;
var slipDisplacement = this.props.touchDimensions.slipDisplacement;
if (Math.abs(gestureState.dy) < slipDisplacement || !slipDisplacement) {
var value = positionToValue(
confined,
this.optionsArray,
this.state.sliderLength,
);
var snapped = valueToPosition(
value,
this.optionsArray,
this.state.sliderLength,
);
this.setState({
positionTwo: this.props.snapped ? snapped : confined,
});
if (value !== this.state.valueTwo) {
this.setState(
{
valueTwo: value,
},
() => {
this.props.onValuesChange([this.state.valueOne, this.state.valueTwo]);
},
);
}
}
};
endOne = gestureState => {
if (gestureState.moveX === 0 && this.props.onToggleOne) {
this.props.onToggleOne();
return;
}
this.setState(
{
pastOne: this.state.positionOne,
onePressed: !this.state.onePressed,
},
() => {
var change = [this.state.valueOne];
if (this.state.valueTwo) {
change.push(this.state.valueTwo);
}
this.props.onValuesChangeFinish(change);
},
);
};
endTwo = gestureState => {
if (gestureState.moveX === 0 && this.props.onToggleTwo) {
this.props.onToggleTwo();
return;
}
this.setState(
{
twoPressed: !this.state.twoPressed,
pastTwo: this.state.positionTwo,
},
() => {
this.props.onValuesChangeFinish([
this.state.valueOne,
this.state.valueTwo,
]);
},
);
};
measureContainer(x)
{
var {width, height} = x.nativeEvent.layout;
var size = {width: width, height: height};
if (size.width)
{
this.setState({
sliderLength: size.width,
allMeasured: true,
});
}
}
updatePositions()
{
if (this.state.allMeasured)
{
this.optionsArray = this.props.optionsArray ||
createArray(this.props.min, this.props.max, this.props.step);
this.stepLength = this.state.sliderLength / this.optionsArray.length;
let initialValues = this.props.values.map(value =>
valueToPosition(value, this.optionsArray, this.state.sliderLength));
this.pastOne = initialValues[0];
this.pastTwo = initialValues[1];
this.positionOne = initialValues[0];
this.positionTwo = initialValues[1];
this.init = true;
return {
pastOne: initialValues[0],
pastTwo: initialValues[1],
positionOne: initialValues[0],
positionTwo: initialValues[1],
};
}
return {
pastOne: null,
pastTwo: null,
positionOne: null,
positionTwo: null,
};
}
getMainStyle()
{
if (!this.init)
this.updatePositions();
let positionOne = (this.state.positionOne !== null) ? this.state.positionOne : this.positionOne;
let positionTwo = (this.state.positionTwo !== null) ? this.state.positionTwo : this.positionTwo;
if (positionOne !== null && positionTwo !== null) {
const trackOneLength = positionOne;
let trackOneStyle = {width: trackOneLength};
const trackThreeLength = this.state.sliderLength - positionTwo;
let trackThreeStyle = {width: trackThreeLength};
const trackTwoLength = this.state.sliderLength - trackOneLength - trackThreeLength;
let trackTwoStyle = [styles.selectedTrack, {width: trackTwoLength}];
const markerContainerOne = { top: this.props.markerOffsetY - 24, left : trackOneLength + this.props.markerOffsetX - 15 };
const markerContainerTwo = { top: this.props.markerOffsetY - 24, right: trackThreeLength + this.props.markerOffsetX - 33 };
return {
trackOneStyle: trackOneStyle,
trackTwoStyle: trackTwoStyle,
trackThreeStyle: trackThreeStyle,
markerContainerOne: markerContainerOne,
markerContainerTwo: markerContainerTwo,
}
}
return {
trackOneStyle: null,
trackTwoStyle: null,
trackThreeStyle: null,
markerContainerOne: null,
markerContainerTwo: null,
}
}
render()
{
const Marker = this.props.customMarker;
const {
borderRadius,
} = this.props.touchDimensions;
const touchStyle = {
borderRadius: borderRadius || 0,
};
let mainStyle = this.getMainStyle();
return (
<View onLayout={this.measureContainer.bind(this)} style={[styles.container, this.props.containerStyle]}>
<View style={[styles.fullTrack, { width: this.state.sliderLength }]}>
<View
style={[
styles.track,
this.props.trackStyle,
mainStyle.trackOneStyle,
]}
/>
<View
style={[
styles.track,
this.props.trackStyle,
mainStyle.trackTwoStyle,
]}
/>
<View
style={[
styles.track,
this.props.trackStyle,
mainStyle.trackThreeStyle,
]}
/>
<View
style={[
styles.markerContainer,
mainStyle.markerContainerOne,
this.props.markerContainerStyle,
this.state.positionOne > this.state.sliderLength / 2 && styles.topMarkerContainer,
]}
>
<View
style={[styles.touch, touchStyle]}
ref={component => this._markerOne = component}
{...this._panResponderOne.panHandlers}
>
<Marker
enabled={this.props.enabledOne}
pressed={this.state.onePressed}
markerStyle={[styles.marker, this.props.markerStyle]}
pressedMarkerStyle={this.props.pressedMarkerStyle}
currentValue={this.state.valueOne}
valuePrefix={this.props.valuePrefix}
valueSuffix={this.props.valueSuffix}
/>
</View>
</View>
{this.state.positionOne !== this.state.sliderLength &&
<View style={[styles.markerContainer, mainStyle.markerContainerTwo, this.props.markerContainerStyle]}>
<View
style={[styles.touch, touchStyle]}
ref={component => this._markerTwo = component}
{...this._panResponderTwo.panHandlers}
>
<Marker
pressed={this.state.twoPressed}
markerStyle={this.props.markerStyle}
pressedMarkerStyle={this.props.pressedMarkerStyle}
currentValue={this.state.valueTwo}
enabled={this.props.enabledTwo}
valuePrefix={this.props.valuePrefix}
valueSuffix={this.props.valueSuffix}
/>
</View>
</View>}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: 40,
justifyContent: 'center',
flexGrow: 1
},
fullTrack: {
flexDirection: 'row',
},
track: {
...Platform.select({
ios: {
height: 4,
borderRadius: 2,
backgroundColor: colors.sliderRight,
},
android: {
height: 4,
borderRadius: 2,
backgroundColor: colors.sliderRight,
},
}),
},
selectedTrack: {
...Platform.select({
ios: {
backgroundColor: colors.sliderLeft,
},
android: {
backgroundColor: colors.sliderLeft,
},
}),
},
markerContainer: {
position: 'absolute',
width: 48,
height: 48,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
shadowOpacity: 1,
shadowRadius: 1,
shadowColor: 'rgba(0,0,0,0.06)',
shadowOffset: {width: 0, height: -1}
},
topMarkerContainer: {
zIndex: 1,
},
touch: {
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
},
});
\ No newline at end of file
src/slider/Slider.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {View, StyleSheet, Animated, Easing, PanResponder, Text} from 'react-native';
import ViewPropTypes from '../config/ViewPropTypes';
import colors from '../config/colors';
import Icon from 'react-native-vector-icons/FontAwesome'
import fonts from '../config/fonts'
const TRACK_SIZE = 4;
const THUMB_SIZE = 20;
var DEFAULT_ANIMATION_CONFIGS = {
spring: {
friction: 7,
tension: 100,
},
timing: {
duration: 150,
easing: Easing.inOut(Easing.ease),
delay: 0,
},
};
function Rect(x, y, width, height)
{
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
Rect.prototype.containsPoint = function (x, y)
{
return (
x >= this.x &&
y >= this.y &&
x <= this.x + this.width &&
y <= this.y + this.height
);
};
export default class Slider extends Component
{
constructor(props)
{
super(props);
this.state = {
containerSize: {width: 0, height: 0},
trackSize: {width: 0, height: 0},
thumbSize: {width: 0, height: 0},
allMeasured: false,
value: new Animated.Value(props.value),
};
}
componentWillMount()
{
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: this.handleStartShouldSetPanResponder.bind(
this
),
onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder.bind(
this
),
onPanResponderGrant: this.handlePanResponderGrant.bind(this),
onPanResponderMove: this.handlePanResponderMove.bind(this),
onPanResponderRelease: this.handlePanResponderEnd.bind(this),
onPanResponderTerminationRequest: this.handlePanResponderRequestEnd.bind(
this
),
onPanResponderTerminate: this.handlePanResponderEnd.bind(this),
});
}
componentWillReceiveProps(nextProps)
{
var newValue = nextProps.value;
if (this.props.value !== newValue)
{
if (this.props.animateTransitions)
{
this.setCurrentValueAnimated(newValue);
} else
{
this.setCurrentValue(newValue);
}
}
}
setCurrentValue(value)
{
this.state.value.setValue(value);
}
setCurrentValueAnimated(value)
{
var animationType = this.props.animationType;
var animationConfig = Object.assign(
{},
DEFAULT_ANIMATION_CONFIGS[animationType],
this.props.animationConfig,
{
toValue: value,
}
);
Animated[animationType](this.state.value, animationConfig).start();
}
handleMoveShouldSetPanResponder(/*e: Object, gestureState: Object*/)
{
// Should we become active when the user moves a touch over the thumb?
return false;
}
handlePanResponderGrant(/*e: Object, gestureState: Object*/)
{
this._previousLeft = this.getThumbLeft(this.getCurrentValue());
this.fireChangeEvent('onSlidingStart');
}
handlePanResponderMove(e, gestureState)
{
if (this.props.disabled)
{
return;
}
this.setCurrentValue(this.getValue(gestureState));
this.fireChangeEvent('onValueChange');
}
handlePanResponderRequestEnd()
{
// Should we allow another component to take over this pan?
return false;
}
handlePanResponderEnd(e, gestureState)
{
if (this.props.disabled)
{
return;
}
this.setCurrentValue(this.getValue(gestureState));
this.fireChangeEvent('onSlidingComplete');
}
thumbHitTest(e)
{
var nativeEvent = e.nativeEvent;
var thumbTouchRect = this.getThumbTouchRect();
return thumbTouchRect.containsPoint(
nativeEvent.locationX,
nativeEvent.locationY
);
}
handleStartShouldSetPanResponder(e /*gestureState: Object*/)
{
// Should we become active when the user presses down on the thumb?
return this.thumbHitTest(e);
}
fireChangeEvent(event)
{
if (this.props[event])
{
this.props[event](this.getCurrentValue());
}
}
getTouchOverflowSize()
{
var state = this.state;
var props = this.props;
var size = {};
if (state.allMeasured === true)
{
size.width = Math.max(
0,
props.thumbTouchSize.width - state.thumbSize.width
);
size.height = Math.max(
0,
props.thumbTouchSize.height - state.containerSize.height
);
}
return size;
}
getTouchOverflowStyle()
{
var {width, height} = this.getTouchOverflowSize();
var touchOverflowStyle = {};
if (width !== undefined && height !== undefined)
{
var verticalMargin = -height / 2;
touchOverflowStyle.marginTop = verticalMargin;
touchOverflowStyle.marginBottom = verticalMargin;
var horizontalMargin = -width / 2;
touchOverflowStyle.marginLeft = horizontalMargin;
touchOverflowStyle.marginRight = horizontalMargin;
}
if (this.props.debugTouchArea === true)
{
touchOverflowStyle.backgroundColor = 'orange';
touchOverflowStyle.opacity = 0.5;
}
return touchOverflowStyle;
}
handleMeasure(name, x)
{
var {width, height} = x.nativeEvent.layout;
var size = {width: width, height: height};
var storeName = `_${name}`;
var currentSize = this[storeName];
if (
currentSize &&
width === currentSize.width &&
height === currentSize.height
)
{
return;
}
this[storeName] = size;
if (this._containerSize && this._trackSize && this._thumbSize)
{
this.setState({
containerSize: this._containerSize,
trackSize: this._trackSize,
thumbSize: this._thumbSize,
allMeasured: true,
});
}
}
measureContainer(x)
{
this.handleMeasure('containerSize', x);
}
measureTrack(x)
{
this.handleMeasure('trackSize', x);
}
measureThumb(x)
{
this.handleMeasure('thumbSize', x);
}
getValue(gestureState)
{
var length = this.state.containerSize.width - this.state.thumbSize.width;
var thumbLeft = this._previousLeft + gestureState.dx;
var ratio = thumbLeft / length;
if (this.props.step)
{
return Math.max(
this.props.minimumValue,
Math.min(
this.props.maximumValue,
this.props.minimumValue +
Math.round(
ratio *
(this.props.maximumValue - this.props.minimumValue) /
this.props.step
) *
this.props.step
)
);
} else
{
return Math.max(
this.props.minimumValue,
Math.min(
this.props.maximumValue,
ratio * (this.props.maximumValue - this.props.minimumValue) +
this.props.minimumValue
)
);
}
}
getCurrentValue()
{
return this.state.value.__getValue();
}
getRatio(value)
{
return (
(value - this.props.minimumValue) /
(this.props.maximumValue - this.props.minimumValue)
);
}
getThumbLeft(value)
{
var ratio = this.getRatio(value);
return (
ratio * (this.state.containerSize.width - this.state.thumbSize.width)
);
}
getThumbTouchRect()
{
var state = this.state;
var props = this.props;
var touchOverflowSize = this.getTouchOverflowSize();
return new Rect(
touchOverflowSize.width / 2 +
this.getThumbLeft(this.getCurrentValue()) +
(state.thumbSize.width - props.thumbTouchSize.width) / 2,
touchOverflowSize.height / 2 +
(state.containerSize.height - props.thumbTouchSize.height) / 2,
props.thumbTouchSize.width,
props.thumbTouchSize.height
);
}
renderDebugThumbTouchRect(thumbLeft)
{
var thumbTouchRect = this.getThumbTouchRect();
var positionStyle = {
left: thumbLeft,
top: thumbTouchRect.y,
width: thumbTouchRect.width,
height: thumbTouchRect.height,
};
return <Animated.View style={positionStyle} pointerEvents="none"/>;
}
renderPhaseSlider()
{
let phaseItems = [];
let currentRatio = this.getRatio(this.getCurrentValue());
for (let i = 0; i <= (this.props.maximumValue / this.props.step); i++)
{
let sliderColor = colors.sliderRight;
let elementRatio = this.getRatio(i * this.props.step);
if (elementRatio < currentRatio)
sliderColor = colors.sliderLeft;
phaseItems.push(<View key={'phase_' + i} style={[styles.phaseSliderItem, {backgroundColor: sliderColor}]} />);
}
return phaseItems;
}
render()
{
const {
minimumValue,
maximumValue,
minimumTrackTintColor,
maximumTrackTintColor,
thumbTintColor,
containerStyle,
style,
trackStyle,
thumbStyle,
debugTouchArea,
...other
} = this.props;
var {
value,
containerSize,
trackSize,
thumbSize,
allMeasured,
} = this.state;
var mainStyles = containerStyle || styles;
var thumbLeft = value.interpolate({
inputRange: [minimumValue, maximumValue],
outputRange: [0, containerSize.width - thumbSize.width],
//extrapolate: 'clamp',
});
var valueVisibleStyle = {};
if (!allMeasured)
{
valueVisibleStyle.opacity = 0;
}
var minimumTrackStyle = {
position: 'absolute',
width: Animated.add(thumbLeft, thumbSize.width / 2),
marginTop: -trackSize.height,
backgroundColor: minimumTrackTintColor,
...valueVisibleStyle,
};
let touchOverflowStyle = this.getTouchOverflowStyle();
let itemStyle = [defaultItemStyles.item, this.props.itemStyle];
let itemWrapper = (this.props.icons) ? [defaultItemStyles.itemWrapper, {paddingLeft: 10, paddingRight: 15}] : [defaultItemStyles.itemWrapper];
return (
<View>
{this.props.items && <View style={itemWrapper}>
{
this.props.items.map(function (i, j)
{
return <Text key={i.value} ref={"t" + j} style={itemStyle}>{i.label}</Text>;
})
}
</View>
}
<View style={styles.sliderIconContainer}>
{this.props.icons && <Icon style={defaultIconStyles.iconLeft} name={this.props.icons.left} size={16} />}
<View
{...other}
style={[mainStyles.container, style]}
onLayout={this.measureContainer.bind(this)}
>
{this.props.phase && <View style={[itemWrapper, [styles.phaseSliderContainer]]}>
{
this.renderPhaseSlider()
}
</View>}
<View
style={[
{backgroundColor: maximumTrackTintColor},
mainStyles.track,
trackStyle,
this.props.disabled && styles.disabled
]}
onLayout={this.measureTrack.bind(this)}
/>
<Animated.View
style={[mainStyles.track, trackStyle, minimumTrackStyle, this.props.disabled && styles.disabled]}
/>
<View style={styles.thumbTopShadow}>
<View style={styles.thumbBottomShadow}>
<Animated.View
onLayout={this.measureThumb.bind(this)}
style={[
{backgroundColor: thumbTintColor},
mainStyles.thumb,
thumbStyle,
{
transform: [
{translateX: thumbLeft},
{translateY: -(trackSize.height + thumbSize.height) / 2},
],
...valueVisibleStyle,
},
]}
/>
</View>
</View>
<View
style={[styles.touchArea, touchOverflowStyle]}
{...this.panResponder.panHandlers}
>
{debugTouchArea === true && this.renderDebugThumbTouchRect(thumbLeft)}
</View>
</View>
{this.props.icons && <Icon style={defaultIconStyles.iconRight} name={this.props.icons.right} size={16} />}
</View>
</View>
);
}
}
Slider.propTypes = {
/**
* Initial value of the slider. The value should be between minimumValue
* and maximumValue, which default to 0 and 1 respectively.
* Default value is 0.
*
* *This is not a controlled component*, e.g. if you don't update
* the value, the component won't be reset to its inital value.
*/
value: PropTypes.number,
/**
* If true the user won't be able to move the slider.
* Default value is false.
*/
disabled: PropTypes.bool,
/**
* Initial minimum value of the slider. Default value is 0.
*/
minimumValue: PropTypes.number,
/**
* Initial maximum value of the slider. Default value is 1.
*/
maximumValue: PropTypes.number,
/**
* Step value of the slider. The value should be between 0 and
* (maximumValue - minimumValue). Default value is 0.
*/
step: PropTypes.number,
/**
* The color used for the track to the left of the button. Overrides the
* default blue gradient image.
*/
minimumTrackTintColor: PropTypes.string,
/**
* The color used for the track to the right of the button. Overrides the
* default blue gradient image.
*/
maximumTrackTintColor: PropTypes.string,
/**
* The color used for the thumb.
*/
thumbTintColor: PropTypes.string,
/**
* The size of the touch area that allows moving the thumb.
* The touch area has the same center has the visible thumb.
* This allows to have a visually small thumb while still allowing the user
* to move it easily.
* The default is {width: 40, height: 40}.
*/
thumbTouchSize: PropTypes.shape({
width: PropTypes.number,
height: PropTypes.number,
}),
/**
* Callback continuously called while the user is dragging the slider.
*/
onValueChange: PropTypes.func,
/**
* Callback called when the user starts changing the value (e.g. when
* the slider is pressed).
*/
onSlidingStart: PropTypes.func,
/**
* Callback called when the user finishes changing the value (e.g. when
* the slider is released).
*/
onSlidingComplete: PropTypes.func,
/**
* The style applied to the slider container.
*/
style: ViewPropTypes.style,
/**
* The style applied to the track.
*/
trackStyle: ViewPropTypes.style,
/**
* The style applied to the thumb.
*/
thumbStyle: ViewPropTypes.style,
/**
* Set this to true to visually see the thumb touch rect in green.
*/
debugTouchArea: PropTypes.bool,
/**
* Set to true to animate values with default 'timing' animation type
*/
animateTransitions: PropTypes.bool,
/**
* Custom Animation type. 'spring' or 'timing'.
*/
animationType: PropTypes.oneOf(['spring', 'timing']),
/**
* Used to configure the animation parameters. These are the same parameters in the Animated library.
*/
animationConfig: PropTypes.object,
containerStyle: ViewPropTypes.style,
};
Slider.defaultProps = {
value: 0,
minimumValue: 0,
maximumValue: 1,
step: 0,
minimumTrackTintColor: colors.sliderLeft,
maximumTrackTintColor: colors.sliderRight,
thumbTintColor: colors.white,
thumbTouchSize: {width: 40, height: 40},
debugTouchArea: false,
animationType: 'timing',
};
const styles = StyleSheet.create({
sliderIconContainer: {
justifyContent: 'space-between',
flexDirection: 'row',
marginLeft: 40,
marginRight: 35,
marginTop: 10,
},
container: {
height: 40,
justifyContent: 'center',
flexGrow: 1,
marginBottom: 10,
},
track: {
height: TRACK_SIZE,
borderRadius: TRACK_SIZE / 2,
},
thumb: {
position: 'absolute',
width: THUMB_SIZE,
height: THUMB_SIZE,
borderRadius: THUMB_SIZE / 2,
top: 22
},
touchArea: {
position: 'absolute',
backgroundColor: 'transparent',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
thumbTopShadow: {
position: 'absolute',
top: 0,
shadowOpacity: 1,
shadowRadius: 1,
shadowColor: 'rgba(0,0,0,0.06)',
shadowOffset: {width: 0, height: -1}
},
thumbBottomShadow: {
position: 'absolute',
top: 0,
shadowOpacity: 1,
shadowRadius: 1,
shadowColor: 'rgba(0,0,0,0.06)',
shadowOffset: {width: 1, height: 2},
},
debugThumbTouchArea: {
position: 'absolute',
backgroundColor: 'green',
opacity: 0.5,
},
disabled: {
opacity: 0.4
},
phaseSliderContainer: {
position: 'absolute',
width: '100%'
},
phaseSliderItem: {
width: 12,
height: 12,
borderRadius: 50
}
});
const defaultItemStyles = StyleSheet.create({
itemWrapper: {
justifyContent: 'space-between',
alignSelf: 'stretch',
flexDirection: 'row',
},
item: {
fontFamily: fonts.regular,
color: 'rgba(62,74,89,0.7)',
},
});
const defaultIconStyles = StyleSheet.create({
iconLeft: {
flexShrink: 1,
marginTop: 12,
marginRight: 10,
color: '#B3BFD0',
},
iconRight: {
flexShrink: 1,
marginTop: 12,
marginLeft: 10,
color: '#B3BFD0',
}
});
\ No newline at end of file
src/slider/converters.js 0 → 100644
View file @ 1ece3286
'use strict';
export function valueToPosition(value, valuesArray, sliderLength) {
var arrLength;
var index = valuesArray.indexOf(value);
if (index === -1) {
//console.log('Invalid value, array does not contain: ', value);
return null;
} else {
arrLength = valuesArray.length - 1;
return sliderLength * index / arrLength;
}
}
export function positionToValue(position, valuesArray, sliderLength) {
var arrLength;
var index;
if (position < 0 || sliderLength < position) {
//console.log('invalid position: ', position);
return null;
} else {
arrLength = valuesArray.length - 1;
index = arrLength * position / sliderLength;
return valuesArray[Math.round(index)];
}
}
export function createArray(start, end, step) {
var i;
var length;
var direction = start - end > 0 ? -1 : 1;
var result = [];
if (!step) {
//console.log('invalid step: ', step);
return result;
} else {
length = Math.abs((start - end) / step) + 1;
for (i = 0; i < length; i++) {
result.push(start + i * Math.abs(step) * direction);
}
return result;
}
}
\ No newline at end of file
src/tabs/Badge.js 0 → 100644
View file @ 1ece3286
'use strict';
import React from 'react';
import {
StyleSheet,
Text,
} from 'react-native';
import Layout from './Layout';
export default class Badge extends React.Component {
static propTypes = Text.propTypes;
constructor(props, context) {
super(props, context);
this._handleLayout = this._handleLayout.bind(this);
}
state = {
computedSize: null,
};
render() {
let { computedSize } = this.state;
let style = {};
if (!computedSize) {
style.opacity = 0;
} else {
style.width = Math.max(computedSize.height, computedSize.width);
}
return (
<Text
{...this.props}
numberOfLines={1}
onLayout={this._handleLayout}
style={[styles.container, this.props.style, style]}>
{this.props.children}
</Text>
);
}
_handleLayout(event) {
let { width, height } = event.nativeEvent.layout;
let { computedSize } = this.state;
if (computedSize && computedSize.height === height &&
computedSize.width === width) {
return;
}
this.setState({
computedSize: { width, height },
});
if (this.props.onLayout) {
this.props.onLayout(event);
}
}
}
let styles = StyleSheet.create({
container: {
fontSize: 12,
color: '#fff',
backgroundColor: 'rgb(0, 122, 255)',
lineHeight: 15,
textAlign: 'center',
borderWidth: 1 + Layout.pixel,
borderColor: '#fefefe',
borderRadius: 17 / 2,
overflow: 'hidden',
},
});
\ No newline at end of file
src/tabs/Layout.js 0 → 100644
View file @ 1ece3286
'use strict';
import { PixelRatio } from 'react-native';
export default {
pixel: 1 / PixelRatio.get(),
tabBarHeight: 49,
};
\ No newline at end of file
src/tabs/StaticContainer.js 0 → 100644
View file @ 1ece3286
'use strict';
import React from 'react';
import PropTypes from 'prop-types';
export default class StaticContainer extends React.Component {
static propTypes = {
shouldUpdate: PropTypes.bool,
};
// noinspection JSAnnotator
shouldComponentUpdate(nextProps: Object): boolean {
return !!nextProps.shouldUpdate;
}
render() {
let { children } = this.props;
return children ? React.Children.only(children) : null;
}
}
\ No newline at end of file
src/tabs/Tab.js 0 → 100644
View file @ 1ece3286
'use strict';
import React from 'react';
import PropTypes from 'prop-types';
import {
StyleSheet,
Text,
TouchableOpacity,
TouchableNativeFeedback,
Platform,
View,
} from 'react-native';
import colors from '../config/colors';
import ViewPropTypes from '../config/ViewPropTypes';
import Layout from './Layout';
export default class Tab extends React.Component {
static propTypes = {
testID : PropTypes.string,
title: PropTypes.string,
titleStyle: Text.propTypes.style,
badge: PropTypes.element,
onPress: PropTypes.func,
hidesTabTouch: PropTypes.bool,
allowFontScaling: PropTypes.bool,
style: ViewPropTypes.style,
tabPosition: PropTypes.string,
billingTab: PropTypes.bool,
search2: PropTypes.bool,
signIn: PropTypes.bool,
wallet: PropTypes.bool
};
constructor(props, context) {
super(props, context);
this._handlePress = this._handlePress.bind(this);
}
render() {
let { title, search2, signIn, wallet, bottomSelectedLine, badge } = this.props;
let icon = null;
if (React.Children.count(this.props.children) > 0) {
icon = React.Children.only(this.props.children);
}
let mainStyles = [styles.title, this.props.titleStyle];
if (this.props.tabPosition === 'top') {
mainStyles.push(styles.titleTopPosition);
(this.props.selected) ? mainStyles.push(styles.titleTopPositionSelected) : null;
}
if (this.props.billingTab) {
mainStyles.push(styles.billingTitle);
(this.props.selected) ? mainStyles.push(styles.billingTitleTopPositionSelected) : null;
mainStyles.push(styles.noMargin);
}
if (this.props.search2) {
mainStyles.push(styles.search2Title);
(this.props.selected) ? mainStyles.push(styles.search2Selected) : null;
}
if (this.props.signIn) {
}
if (this.props.wallet) {
}
if (title) {
title =
<Text
numberOfLines={1}
allowFontScaling={!!this.props.allowFontScaling}
style={mainStyles}>
{title}
</Text>;
}
if (badge) {
badge = React.cloneElement(badge, {
style: [styles.badge, badge.props.style],
});
}
let tabStyle = [
styles.container,
title ? null : styles.untitledContainer,
this.props.style,
];
if (
!this.props.hidesTabTouch &&
Platform.OS === 'android' &&
Platform.Version >= 21
) {
return (
<TouchableNativeFeedback
testID={this.props.testID}
background={TouchableNativeFeedback.Ripple(undefined, true)}
onPress={this._handlePress}>
<View style={tabStyle}>
<View>
{icon}
{badge}
</View>
{title}
{this.props.tabPosition === 'top' && this.props.selected ? <View style={[styles.bottomSelectedLine, this.props.billingTab && styles.billingBorder, this.props.search2 && styles.search2Border, this.props.signIn && styles.signInContainer]} /> : null}
</View>
</TouchableNativeFeedback>
);
}
return (
<TouchableOpacity
testID={this.props.testID}
activeOpacity={this.props.hidesTabTouch ? 1.0 : 0.8}
onPress={this._handlePress}
style={tabStyle}>
<View>
{icon}
{badge}
</View>
{title}
{this.props.tabPosition === 'top' && this.props.selected ? <View style={[styles.bottomSelectedLine, this.props.billingTab && styles.billingBorder, this.props.search2 && styles.search2Border, this.props.signIn && styles.signInContainer, this.props.wallet && styles.walletBorder]} /> : null}
</TouchableOpacity>
);
}
_handlePress(event) {
if (this.props.onPress) {
this.props.onPress(event);
}
}
}
let styles = StyleSheet.create({
badge: {
position: 'absolute',
top: -6,
right: -10,
},
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'center',
},
untitledContainer: {
paddingBottom: 13,
},
title: {
color: colors.tabTextDefault,
fontSize: 12,
textAlign: 'center',
alignSelf: 'stretch',
marginTop: 4,
marginBottom: 1 + Layout.pixel,
},
titleTopPosition: {
color: '#CED4DA',
fontSize: 13,
textAlign: 'center',
fontWeight: '500',
alignSelf: 'stretch',
marginTop: 0,
marginBottom: 2 + Layout.pixel,
padding: 7,
},
titleTopPositionSelected: {
color: '#8D959D',
},
bottomSelectedLine: {
width: '50%',
height: 2,
backgroundColor: '#4BE8C4',
position: 'relative',
left: -13
},
billingTitle: {
color: '#CED4DA',
fontWeight: 'bold'
},
search2Title: {
color: '#B3BFD0',
},
search2Selected: {
color: '#136EF1'
},
signInContainer: {
// flex: 0,
// justifyContent: 'flex-start',
// alignItems: 'flex-end',
// backgroundColor: 'red'
},
billingTitleTopPositionSelected: {
color: '#fff',
backgroundColor: '#78AEF9',
borderRadius: 13,
overflow: 'hidden'
},
billingBorder: {
width: 0,
height: 0
},
walletBorder: {
backgroundColor: '#78AEF9',
},
search2Border: {
backgroundColor: '#136EF1'
},
noMargin: {
marginBottom: 0,
fontSize: 12,
height: 28,
},
hhh: {
alignSelf: 'flex-start',
width: 130
}
});
\ No newline at end of file
src/tabs/TabBar.js 0 → 100644
View file @ 1ece3286
'use strict';
import React from 'react';
import {
Animated,
Platform,
StyleSheet,
View,
} from 'react-native';
import ViewPropTypes from '../config/ViewPropTypes';
import Layout from './Layout';
export default class TabBar extends React.Component {
static propTypes = {
...Animated.View.propTypes,
shadowStyle: ViewPropTypes.style,
};
render() {
return (
<Animated.View {...this.props} style={[styles.container, this.props.style]}>
{this.props.children}
<View style={[styles.shadow, this.props.shadowStyle]} />
</Animated.View>
);
}
}
let styles = StyleSheet.create({
container: {
backgroundColor: '#f8f8f8',
flexDirection: 'row',
justifyContent: 'space-around',
height: Layout.tabBarHeight,
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
},
shadow: {
backgroundColor: 'transparent',
height: Layout.pixel,
position: 'absolute',
left: 0,
right: 0,
top: Platform.OS === 'android' ? 0 : -Layout.pixel,
},
});
\ No newline at end of file
src/tabs/TabNavigator.js 0 → 100644
View file @ 1ece3286
'use strict';
import { Set } from 'immutable';
import React from 'react';
import PropTypes from 'prop-types';
import {
StyleSheet,
View,
Platform
} from 'react-native';
import Badge from './Badge';
import Layout from './Layout';
import StaticContainer from './StaticContainer';
import Tab from './Tab';
import TabBar from './TabBar';
import TabNavigatorItem from './TabNavigatorItem';
import ViewPropTypes from '../config/ViewPropTypes';
import colors from '../config/colors';
export default class TabNavigator extends React.Component {
static propTypes = {
...ViewPropTypes,
sceneStyle: ViewPropTypes.style,
tabBarStyle: TabBar.propTypes.style,
tabBarShadowStyle: TabBar.propTypes.shadowStyle,
hidesTabTouch: PropTypes.bool,
tabPosition: PropTypes.string,
billingTab: PropTypes.bool,
search2: PropTypes.bool,
signIn: PropTypes.bool,
wallet: PropTypes.bool
};
constructor(props, context) {
super(props, context);
this.state = {
renderedSceneKeys: this._updateRenderedSceneKeys(props.children),
};
this._renderTab = this._renderTab.bind(this);
}
componentWillReceiveProps(nextProps) {
let { renderedSceneKeys } = this.state;
this.setState({
renderedSceneKeys: this._updateRenderedSceneKeys(
nextProps.children,
renderedSceneKeys,
),
});
}
// noinspection JSAnnotator
_getSceneKey(item, index): string {
return `scene-${(item.key !== null) ? item.key : index}`;
}
// noinspection JSAnnotator
_updateRenderedSceneKeys(children, oldSceneKeys = Set()): Set {
let newSceneKeys = Set().asMutable();
React.Children.forEach(children, (item, index) => {
if (item === null) {
return;
}
let key = this._getSceneKey(item, index);
if (oldSceneKeys.has(key) || item.props.selected) {
newSceneKeys.add(key);
}
});
return newSceneKeys.asImmutable();
}
render() {
let { style, search2, billingTab, signIn, wallet, tabs, search, children, tabBarStyle, tabBarShadowStyle, sceneStyle, ...props } = this.props;
let scenes = [];
React.Children.forEach(children, (item, index) => {
if (item === null) {
return;
}
let sceneKey = this._getSceneKey(item, index);
if (!this.state.renderedSceneKeys.has(sceneKey)) {
return;
}
let { selected } = item.props;
let scene =
<SceneContainer tabPosition={this.props.tabPosition} billingTab={this.props.billingTab} search2={this.props.search2} signIn={this.props.signIn} wallet={this.props.wallet} key={sceneKey} selected={selected} style={sceneStyle}>
{item}
</SceneContainer>;
scenes.push(scene);
});
if (billingTab) {
tabBarStyle.backgroundColor= '#fff';
tabBarStyle.marginLeft= 70;
tabBarStyle.marginRight= 70;
tabBarStyle.borderWidth= 1;
tabBarStyle.height= 30;
tabBarStyle.borderRadius= 3;
tabBarStyle.borderColor= '#fff';
if (Platform.OS === 'android') {
tabBarStyle.top= 0;
}
}
if (signIn) {
tabBarStyle.backgroundColor= '#fff';
tabBarStyle.width= 360;
}
if (tabs) {
tabBarStyle.backgroundColor= 'white';
}
if (search2) {
tabBarStyle.backgroundColor= 'white';
}
if (search) {
tabBarStyle.backgroundColor= '#2F80F6';
}
if (wallet) {
tabBarStyle.backgroundColor= '#fff';
if (Platform.OS === 'android') {
tabBarStyle.top= -20;
}
}
return (
<View {...props} style={[styles.container, style]}>
{scenes}
<TabBar style={this.props.tabPosition === 'top' ? [tabBarStyle, styles.tabBarStyleTop] : tabBarStyle} shadowStyle={tabBarShadowStyle}>
{React.Children.map(children, this._renderTab)}
</TabBar>
</View>
);
}
_renderTab(item) {
let icon, selectedTab = false;
if (item === null) {
return;
}
if (item.props.selected) {
selectedTab = true;
if (item.props.renderSelectedIcon) {
icon = item.props.renderSelectedIcon();
} else if (item.props.renderIcon) {
let defaultIcon = item.props.renderIcon();
icon = React.cloneElement(defaultIcon, {
style: [defaultIcon.props.style, styles.defaultSelectedIcon],
});
}
} else if (item.props.renderIcon) {
icon = item.props.renderIcon();
}
let badge;
if (item.props.renderBadge) {
badge = item.props.renderBadge();
} else if (item.props.badgeText) {
badge = <Badge>{item.props.badgeText}</Badge>;
}
return (
<Tab
tabPosition={this.props.tabPosition}
billingTab={this.props.billingTab}
search2={this.props.search2}
signIn={this.props.signIn}
wallet={this.props.wallet}
testID={item.props.testID}
title={item.props.title}
allowFontScaling={item.props.allowFontScaling}
titleStyle={[
item.props.titleStyle,
item.props.selected ? [
styles.defaultSelectedTitle,
item.props.selectedTitleStyle,
] : null,
]}
badge={badge}
selected={selectedTab}
onPress={item.props.onPress}
hidesTabTouch={this.props.hidesTabTouch}
style={item.props.tabStyle}>
{icon}
</Tab>
);
}
}
class SceneContainer extends React.Component {
static propTypes = {
...ViewPropTypes,
selected: PropTypes.bool,
};
render() {
let { selected, ...props } = this.props;
return (
<View
{...props}
pointerEvents={selected ? 'auto' : 'none'}
removeClippedSubviews={!selected}
style={[
(this.props.tabPosition === 'top') ? styles.sceneContainerTop : styles.sceneContainer,
selected ? null : styles.hiddenSceneContainer,
props.style,
]}>
<StaticContainer shouldUpdate={selected}>
{this.props.children}
</StaticContainer>
</View>
);
}
}
let styles = StyleSheet.create({
container: {
flex: 1,
},
sceneContainer: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
// paddingBottom: Layout.tabBarHeight,
},
sceneContainerTop: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
// paddingBottom: Layout.tabBarHeight,
},
hiddenSceneContainer: {
overflow: 'hidden',
opacity: 0,
},
defaultSelectedTitle: {
color: colors.tabTextSelected,
},
defaultSelectedIcon: {
tintColor: 'rgb(0, 122, 255)',
},
bilingContainer: {
backgroundColor: 'red'
}
});
TabNavigator.Item = TabNavigatorItem;
\ No newline at end of file
src/tabs/TabNavigatorItem.js 0 → 100644
View file @ 1ece3286
'use strict';
import React from 'react';
import PropTypes from 'prop-types';
import {
Text
} from 'react-native';
import ViewPropTypes from '../config/ViewPropTypes';
export default class TabNavigatorItem extends React.Component {
static propTypes = {
renderIcon: PropTypes.func,
renderSelectedIcon: PropTypes.func,
badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
renderBadge: PropTypes.func,
title: PropTypes.string,
titleStyle: Text.propTypes.style,
selectedTitleStyle: Text.propTypes.style,
tabStyle: ViewPropTypes.style,
selected: PropTypes.bool,
onPress: PropTypes.func,
allowFontScaling: PropTypes.bool,
};
static defaultProps = {
};
constructor(props, context) {
super(props, context);
}
render() {
let child = React.Children.only(this.props.children);
return React.cloneElement(child, {
style: [child.props.style, this.props.style],
screenProps: {fontLoaded: this.props.screenProps.fontLoaded},
});
}
}
\ No newline at end of file
src/text/Text.js 0 → 100644
View file @ 1ece3286
import PropTypes from 'prop-types';
import React from 'react';
import { Text, StyleSheet, Platform } from 'react-native';
import fonts from '../config/fonts';
import normalize from '../helpers/normalizeText';
const styles = StyleSheet.create({
text: {
...Platform.select({
android: {
...fonts.android.regular,
}
}),
},
bold: {
...Platform.select({
android: {
...fonts.android.bold,
},
}),
},
});
const TextElement = props => {
const { style, children, h1, h2, h3, h4, fontFamily, ...rest } = props;
return (
<Text
style={[
styles.text,
h1 && { fontSize: normalize(40) },
h2 && { fontSize: normalize(34) },
h3 && { fontSize: normalize(28) },
h4 && { fontSize: normalize(22) },
h1 && styles.bold,
h2 && styles.bold,
h3 && styles.bold,
h4 && styles.bold,
fontFamily && { fontFamily },
style && style,
]}
{...rest}
>
{children}
</Text>
);
};
TextElement.propTypes = {
style: PropTypes.any,
h1: PropTypes.bool,
h2: PropTypes.bool,
h3: PropTypes.bool,
h4: PropTypes.bool,
fontFamily: PropTypes.string,
children: PropTypes.any,
};
export default TextElement;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment